本文和大家分享的主要是web端的UI設(shè)計(jì)流程,，一共有三個(gè)階段，分別是草圖繪制,、素材整理,、具體操作，一起來(lái)看看吧,，希望對(duì)大家有所幫助,。

　　1.草圖繪制

　　1）吃透需求：吃透需求方的要求。

　　2）畫出草圖：根據(jù)要求簡(jiǎn)單畫出草圖,。

　　3）關(guān)鍵標(biāo)注：對(duì)細(xì)節(jié)進(jìn)行標(biāo)注,。主要包含標(biāo)準(zhǔn)色可以用代碼的形式標(biāo)注出來(lái)。如文字的顏色,、背景的顏色,、常用的字體等。模塊之間的間距,。網(wǎng)站的風(fēng)格,。

　　一些商業(yè)性的網(wǎng)站可能預(yù)先預(yù)留廣告位，需要標(biāo)出大小以及應(yīng)該擺放的位置,。界面設(shè)計(jì)規(guī)范的好處：大型網(wǎng)站開(kāi)發(fā)時(shí)要求多,、時(shí)間緊迫，需要團(tuán)隊(duì)合作,，如果按照界面規(guī)范的統(tǒng)一要求,，就可以同時(shí)開(kāi)動(dòng)，即使不同的設(shè)計(jì)人員,，也可以最后的設(shè)計(jì)效果保持統(tǒng)一性,、風(fēng)格的一致性。這樣可以縮短界面設(shè)計(jì)的時(shí)間，而且后期網(wǎng)頁(yè)前端人員制作網(wǎng)頁(yè)時(shí),，可以非常輕松地根據(jù)設(shè)計(jì)規(guī)范得出一些數(shù)據(jù),，減少誤差，節(jié)約溝通成本,。

　　2.素材整理

　　1）圖片：廣告圖片,、設(shè)計(jì)用到的裝飾性圖片。

　　2）文字：用文本文檔形式進(jìn)行整理,。

　　3）Logo：一個(gè)網(wǎng)站標(biāo)志,，一般網(wǎng)站原有，爭(zhēng)取拿到psd文件,，可以適應(yīng)各種場(chǎng)合應(yīng)用,。

　　4）動(dòng)畫效果

　　3.具體制作

　　1）合理布局：比較常用的上中下、左中右的設(shè)計(jì),。柵格設(shè)計(jì),。

　　2）背景制作：考慮背景的材質(zhì)，一些靜態(tài)的視覺(jué)效果特效,、配色與整體風(fēng)格要求是否滿足,。

　　3）文字排版：包括字體大小、顏色,、字體間距,、文本段前短后、模塊與模塊之間的對(duì)齊等,。

　　4）圖形加工：裝飾性的圖標(biāo),、邊框、以及banner,。

　　5）整體調(diào)整：對(duì)色彩,、光照效果、頁(yè)面結(jié)構(gòu)進(jìn)行調(diào)整,，對(duì)細(xì)節(jié)部分進(jìn)行優(yōu)化,。

原文鏈接：http://www./wiki/ui/process/