首頁技術(shù)文章正文

UI設(shè)計流程:UI設(shè)計工作全過程

更新時間:2021-11-24 來源:黑馬程序員 瀏覽量:

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

UI設(shè)計作品.jpg


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

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


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

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


3. 視覺規(guī)范手冊

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


4. 交互動效制作

交互動效制作是指將設(shè)計好的頁面運用Axure等軟件制作動態(tài)交互效果。


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

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



猜你喜歡:

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

26個Adobe XD快速提示和技巧

ai字體變形設(shè)計教程:手把手設(shè)計萬圣節(jié)卡片

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

分享到:
在線咨詢 我要報名
和我們在線交談!