UI設(shè)計(jì)流程：UI設(shè)計(jì)工作全過(guò)程

UI設(shè)計(jì)的過(guò)程是思維發(fā)散的過(guò)程，一般遵循一定的設(shè)計(jì)流程。在實(shí)際工作中，設(shè)計(jì)流程并不是絕對(duì)的。有的流程可能會(huì)被跳過(guò)或忽略，如調(diào)研與討論；有的流程會(huì)反復(fù)停留，如修改與擴(kuò)展。下面我們介紹下UI設(shè)計(jì)的流程為大家提供一個(gè)關(guān)于設(shè)計(jì)流程的思路，為日后的設(shè)計(jì)工作奠定基礎(chǔ)。

1. 視覺(jué)風(fēng)格的定位調(diào)研工作

在接到交互設(shè)計(jì)的原型圖后，不要盲目地進(jìn)行設(shè)計(jì)。需要對(duì)產(chǎn)品面向的客戶(hù)群做一個(gè)用戶(hù)視覺(jué)風(fēng)格喜好的調(diào)研，充分了解產(chǎn)品定位，通過(guò)分析目標(biāo)用戶(hù)的喜好風(fēng)格，從而確定視覺(jué)設(shè)計(jì)的方向。

2. 視覺(jué)風(fēng)格提案和深化設(shè)計(jì)

當(dāng)做好視覺(jué)調(diào)研之后，進(jìn)行視覺(jué)風(fēng)格分析，并提出幾套設(shè)計(jì)方案和樣圖展示，供團(tuán)隊(duì)選擇。然后按照選擇的某一套提案，對(duì)全部頁(yè)面進(jìn)行設(shè)計(jì)。

3. 視覺(jué)規(guī)范手冊(cè)

根據(jù)最終的設(shè)計(jì)結(jié)果，完成視覺(jué)規(guī)范手冊(cè)的制作。規(guī)范手冊(cè)既可以是PPT，也可以是Word文檔。規(guī)范手冊(cè)通常會(huì)標(biāo)注頁(yè)面模塊字、字號(hào)、顏色值、尺寸等參數(shù)，便于前端工程師著手進(jìn)行后續(xù)頁(yè)面制作的工作。

4. 交互動(dòng)效制作

交互動(dòng)效制作是指將設(shè)計(jì)好的頁(yè)面運(yùn)用Axure等軟件制作動(dòng)態(tài)交互效果。

5. 切圖并協(xié)助制作頁(yè)面

切圖是指把效果圖中有用的部分剪切下來(lái)作為頁(yè)面制作時(shí)的素材。當(dāng)切圖完成之后，就可以配合開(kāi)發(fā)團(tuán)隊(duì)制作實(shí)際頁(yè)面效果，保證視覺(jué)效果高度還原及小細(xì)節(jié)修改。

猜你喜歡：

化妝品logo設(shè)計(jì)案例實(shí)戰(zhàn)【UI設(shè)計(jì)教程】

26個(gè)Adobe XD快速提示和技巧

ai字體變形設(shè)計(jì)教程：手把手設(shè)計(jì)萬(wàn)圣節(jié)卡片

黑馬程序員UI設(shè)計(jì)培訓(xùn)班