公司開發(fā)某系統(tǒng)已經(jīng)有一段時(shí)間了，功能已經(jīng)得到一些客戶的肯定，但界面不好看一直是個(gè)大問(wèn)題，所以前兩三周專門做這方面的改善。面對(duì)著N個(gè)界面的設(shè)計(jì)，N++個(gè)雜、碎、亂的頁(yè)面整理，著實(shí)是件頭疼的事情。還好這一切已經(jīng)完成，為那兩三周的忙碌總結(jié)幾點(diǎn)吧。

先簡(jiǎn)單概述一下系統(tǒng)界面美化的工作流程

1、準(zhǔn)備階段：熟悉，看系統(tǒng)相關(guān)的文檔，對(duì)系統(tǒng)有個(gè)大概把握，不至于設(shè)計(jì)時(shí)鉆牛角尖；估量，大概總結(jié)需要改善細(xì)化的頁(yè)面問(wèn)題；估時(shí)，計(jì)劃工作時(shí)間；定人，明確參與修改的人員，設(shè)計(jì)師和程序開發(fā)人員。

2、設(shè)施階段：設(shè)計(jì)，設(shè)計(jì)系統(tǒng)需要美化重點(diǎn)界面；規(guī)范，制定頁(yè)面布局展示結(jié)構(gòu)，規(guī)范CSS；修改，參與和指導(dǎo)程序開發(fā)人員嚴(yán)格按照制定好的結(jié)構(gòu)、規(guī)范修改頁(yè)面，這個(gè)過(guò)程相當(dāng)繁瑣。

3、復(fù)查階段：細(xì)查，如圖標(biāo)的透明背景、彈出框大小等等；補(bǔ)救，手動(dòng)對(duì)每個(gè)界面簡(jiǎn)單操作一下，總結(jié)補(bǔ)救遺留問(wèn)題；提交。

其實(shí)，很多程序員注重產(chǎn)品功能開發(fā)卻忽略了界面易用性和美觀，導(dǎo)致開發(fā)的產(chǎn)品糙，難看。他們忘記了系統(tǒng)開發(fā)是給人用的，操作的不便、難看，同樣不會(huì)讓用戶中意。但如果每次開發(fā)都是讓界面設(shè)計(jì)師去彌補(bǔ)，對(duì)設(shè)計(jì)師、對(duì)程序員都挺累的。與其這樣還不如將展現(xiàn)層早日納入開發(fā)日程。

站在設(shè)計(jì)師的角度為系統(tǒng)開發(fā)提供幾點(diǎn)建議

一、設(shè)計(jì)師須參與系統(tǒng)設(shè)計(jì)。

設(shè)計(jì)師的作用不應(yīng)該只是對(duì)單一界面的美化，反過(guò)來(lái)說(shuō)，如果他對(duì)開發(fā)的系統(tǒng)不理解，他的視角會(huì)很低，無(wú)法站在系統(tǒng)的高度有整體設(shè)計(jì)思路，一個(gè)界面炫只能解決表面問(wèn)題，是解決不了較深問(wèn)題的。Mars想這大概也是美工與設(shè)計(jì)師的區(qū)別所在吧。

最近在看Jesse James Garrett的《用戶體驗(yàn)的要素》，其中講了用戶體驗(yàn)的五個(gè)層面（如圖）：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。Mars看來(lái)，在前兩個(gè)層面設(shè)計(jì)師必須充分理解，Mars在上這個(gè)系統(tǒng)開發(fā)時(shí)就忽略這兩點(diǎn)，所以導(dǎo)致后期的彌補(bǔ)工作，后三個(gè)層面設(shè)計(jì)師必須直接參與，出界面、定規(guī)范等。這樣的話系統(tǒng)設(shè)計(jì)、開發(fā)將按”一”道路順利進(jìn)行，不至于走”Z”形道路。

二、設(shè)計(jì)系統(tǒng)重點(diǎn)頁(yè)面的效果圖

Mars覺(jué)得出效果圖必須是在充分理解系統(tǒng)的前提下，這樣設(shè)計(jì)出來(lái)的界面才能在頁(yè)面上詮釋系統(tǒng)，而不單單講究某個(gè)按鈕的水晶效果什么的。在這個(gè)環(huán)節(jié)設(shè)計(jì)師就需要與系統(tǒng)開發(fā)相關(guān)負(fù)責(zé)人、測(cè)試人員（這里扮演”用戶”角色）充分交流溝通，從日后擴(kuò)展、易用、美觀等各個(gè)角度思考設(shè)計(jì)。相比較程序開發(fā)來(lái)講，出圖還是小成本的事情，為了不走”Z”形道路，這些界面一定要好好斟酌。

三、設(shè)計(jì)師協(xié)助程序開發(fā)負(fù)責(zé)人設(shè)計(jì)開發(fā)規(guī)范。

其中設(shè)計(jì)師協(xié)助的可能包括，系統(tǒng)目錄架構(gòu)，方便日后樣式更換；展示頁(yè)面，頁(yè)面布局的程序結(jié)構(gòu)；名稱規(guī)范，布局結(jié)構(gòu)標(biāo)簽、CSS樣式、圖片相關(guān)名稱規(guī)范等。

以上工作及相關(guān)規(guī)范的提出，給日后程序開發(fā)提供了方便，樣式這一塊，只需套用通用的結(jié)構(gòu)就行了。

四、系統(tǒng)開發(fā)的人員組織

要求系統(tǒng)開發(fā)人員嚴(yán)格按著設(shè)計(jì)圖和規(guī)范來(lái)走，不要只關(guān)注自己開發(fā)的那點(diǎn)功能，代碼結(jié)構(gòu)不清晰，樣式在頁(yè)面頭、標(biāo)簽上到處定義的都是，考慮一下日后改版怎么辦，不能將上千個(gè)頁(yè)面再重寫吧。系統(tǒng)開發(fā)不太可能一兩個(gè)人搞定，多人協(xié)作沒(méi)有一個(gè)規(guī)范作參考，各自在自己的思路寫程序最終出來(lái)的系統(tǒng)可能糙、亂。

以上四點(diǎn)是Mars在設(shè)計(jì)師的角度對(duì)系統(tǒng)開發(fā)提出的部分建議，如果您想要把系統(tǒng)做得精細(xì)，建議參考一下。