手機(jī)版WPS 手機(jī)版wps免費(fèi)下載
2022-11-29
更新時(shí)間:2022-03-23 09:16:43作者:佚名
新手或者初入職的小伙伴常常搞不清楚自己的工作范圍。大神用他多年的工作經(jīng)驗(yàn)簡(jiǎn)單的像我們介紹了一個(gè)非常實(shí)用的UI設(shè)計(jì)流程。讓我們快速的了解了自己工作的上下游,以及整個(gè)項(xiàng)目的運(yùn)轉(zhuǎn)流程。
1.產(chǎn)品需求分析
當(dāng)產(chǎn)品經(jīng)理給出一個(gè)產(chǎn)品的需求,我們首先需要對(duì)這個(gè)產(chǎn)品進(jìn)行一個(gè)大致的分析,分析這個(gè)產(chǎn)品的方向,定義產(chǎn)品的用戶群體及特征;
2.深層次的用戶體驗(yàn)研究與分析
這個(gè)時(shí)候我們就要對(duì)已定義的目標(biāo)用戶群體及特征進(jìn)行深層次的剖析,包括目標(biāo)用戶群體的年齡,性別及目標(biāo)戶群體的一些情感習(xí)慣,心理特征等,這樣我們就可以有針對(duì)的對(duì)這個(gè)產(chǎn)品構(gòu)想設(shè)計(jì)出一個(gè)大概的色系搭配及元素控件設(shè)計(jì);
3.初稿設(shè)計(jì)
這個(gè)時(shí)候我們就可以把產(chǎn)品經(jīng)理的原型需求和自己對(duì)產(chǎn)品的體驗(yàn)研究分析結(jié)合起來(lái)設(shè)計(jì)初稿。(大概的色系搭配,框架布局,元素控件,圖標(biāo)ICON等設(shè)計(jì)都可以在這一步呈現(xiàn)出來(lái))
4.視覺規(guī)范設(shè)計(jì)及細(xì)節(jié)優(yōu)化設(shè)計(jì)
初稿設(shè)計(jì)完成了,產(chǎn)品大概的樣子都出來(lái)了,接著我們就是要做好視覺規(guī)范設(shè)計(jì)及細(xì)節(jié)優(yōu)化設(shè)計(jì)。視覺規(guī)范設(shè)計(jì)就是要對(duì)整個(gè)產(chǎn)品的顏色,字體,字號(hào),元素控件,圖標(biāo)ICON,間距及交互效果做個(gè)統(tǒng)一的規(guī)范,這樣才可以做出一個(gè)成熟的產(chǎn)品,對(duì)前端制作也是有很大的好處的。
接著就是細(xì)節(jié)的優(yōu)化設(shè)計(jì)了,這個(gè)我們就要細(xì)心的做好細(xì)節(jié)上的設(shè)計(jì),比如一些對(duì)齊,間隙,圖標(biāo)虛邊,線條像素,模塊陰影等等;
5.跟進(jìn)前端工程師實(shí)現(xiàn)設(shè)計(jì)效果
設(shè)計(jì)稿完成了接下來(lái)就是前端工程師制作了,這時(shí)我們就不要以為我們的工作完成了,我們要繼續(xù)跟進(jìn)前端工程師實(shí)現(xiàn)還原我們的設(shè)計(jì)效果,有必要我們可以設(shè)計(jì)出一份交互圖出來(lái),這樣便于他們更好的更準(zhǔn)確的更快捷的實(shí)現(xiàn)我們的設(shè)計(jì);
6.產(chǎn)品體驗(yàn)
當(dāng)前端制作好頁(yè)面之后,我們就可以對(duì)整個(gè)產(chǎn)品做一個(gè)線上的體驗(yàn),界面體驗(yàn),交互體驗(yàn),當(dāng)遇到一些體驗(yàn)不好的地方我們可以直接和產(chǎn)品還有前端工程師進(jìn)行溝通,共同來(lái)商討解決這些問題;
7.產(chǎn)品的持續(xù)用戶體驗(yàn)跟進(jìn)研究與優(yōu)化
產(chǎn)品上線之后,我們要持續(xù)關(guān)注與跟進(jìn)它,進(jìn)行一些用戶體驗(yàn)數(shù)據(jù)的收集,對(duì)于界面上和交互體驗(yàn)上的一些不是很理想的地方做一個(gè)收集,用在下期的改版上;
我們要做好兩個(gè)溝通;
1.與產(chǎn)品經(jīng)理做好溝通,這樣方便于我們更好更快更準(zhǔn)確的理解這個(gè)產(chǎn)品的方向與目標(biāo)人群,這樣我們就能準(zhǔn)確的做出符合這個(gè)產(chǎn)品的一個(gè)設(shè)計(jì);
2.與前端工程師做好溝通,這樣就能讓前端工程師準(zhǔn)確的100%還原我們的設(shè)計(jì),少走彎路,提高工作效率與質(zhì)量;