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

　　1.草圖繪制

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

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

　　3）關鍵標注：對細節(jié)進行標注。主要包含標準色可以用代碼的形式標注出來。如文字的顏色、背景的顏色、常用的字體等。模塊之間的間距。網(wǎng)站的風格。

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

　　2.素材整理

　　1）圖片：廣告圖片、設計用到的裝飾性圖片。

　　2）文字：用文本文檔形式進行整理。

　　3）Logo：一個網(wǎng)站標志，一般網(wǎng)站原有，爭取拿到psd文件，可以適應各種場合應用。

　　4）動畫效果

　　3.具體制作

　　1）合理布局：比較常用的上中下、左中右的設計。柵格設計。

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

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

　　4）圖形加工：裝飾性的圖標、邊框、以及banner。

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

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