UI設(shè)計(jì)師的工作流程都有哪些?

1. Storyboard 故事版：

主要負(fù)責(zé)人：產(chǎn)品經(jīng)理或交互設(shè)計(jì)師

最早大家開(kāi)始討論用戶體驗(yàn)流程，在白板上邊畫(huà)流程邊添加粗略的UI元素。會(huì)后交互設(shè)計(jì)師會(huì)在在紙上做手繪版線框圖。這階段產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、UI設(shè)計(jì)師、包括技術(shù)工程師會(huì)一同作大量的討論，而且主要討論的是流程和主要功能，因此手畫(huà)故事版最快最方便并易于修改的。

此環(huán)節(jié)要敲定userflow，用戶流程及其中的關(guān)鍵步驟，每一步驟都是一個(gè)主要界面。

*白板上一般都是這樣，交互設(shè)計(jì)同學(xué)會(huì)在紙上重繪。

*移動(dòng)產(chǎn)品設(shè)計(jì)這樣做也行，不買(mǎi)專(zhuān)用的模板本和工具尺，自己打印也行。

2. Key wireframe 關(guān)鍵界面線框圖

主要負(fù)責(zé)人：交互設(shè)計(jì)師

在確定的用戶流程中，選出幾個(gè)關(guān)鍵的，有代表性的步驟，做細(xì)化的wireframe線框圖。線框圖里要確保每一個(gè)UI元素的設(shè)計(jì)，包括其大小和位置。我們做的線框圖是1:1的，也就是線框圖與實(shí)際界面尺寸一致。1:1的線框圖能在前期避免考慮不周和執(zhí)行困難等很多問(wèn)題的出現(xiàn)。

此環(huán)節(jié)要確定關(guān)鍵界面里的UI元素和布局，以及全局的布局排版風(fēng)格。

*線框圖做成1:1最好。輸出到文檔里要添加說(shuō)明。在后面的工作里，這份文檔可以讓UI設(shè)計(jì)同學(xué)和工程師同學(xué)共用。

3. Key visual design 關(guān)鍵界面視覺(jué)設(shè)計(jì)

主要負(fù)責(zé)人：UI設(shè)計(jì)師

此環(huán)節(jié)交互設(shè)計(jì)師會(huì)按確定的用戶流程及確定的布局風(fēng)格來(lái)繼續(xù)做其它界面的線框圖。UI設(shè)計(jì)師則同時(shí)開(kāi)始做關(guān)鍵界面的視覺(jué)設(shè)計(jì)，進(jìn)行配色、樣式不同風(fēng)格的嘗試。

此環(huán)節(jié)要確定產(chǎn)品界面的視覺(jué)設(shè)計(jì)風(fēng)格。

4. All wireframe 全部界面線框圖

主要負(fù)責(zé)人：交互設(shè)計(jì)師

此環(huán)節(jié)交互設(shè)計(jì)師要完成全部界面的線框圖（1:1的）設(shè)計(jì)并且團(tuán)隊(duì)確認(rèn)。

*做完全部的線框圖，一般會(huì)出一個(gè)總結(jié)構(gòu)圖。如果有足夠大的場(chǎng)地，也可以逐頁(yè)打印出來(lái)貼到一面墻上。方便團(tuán)隊(duì)隨時(shí)參考。

5. Prototype 可動(dòng)原型

主要負(fù)責(zé)人：交互設(shè)計(jì)師

此環(huán)節(jié)依產(chǎn)品需求而定。如果靜態(tài)的線框圖還不能完整的體現(xiàn)出產(chǎn)品特點(diǎn)，那就需要做成可操作甚至有關(guān)鍵界面動(dòng)畫(huà)示意的可動(dòng)原型。通常是HTML的可動(dòng)原型，特殊項(xiàng)目也曾經(jīng)做過(guò)Flash的。我還有一個(gè)奇葩朋友用PPT做過(guò)（PPT的開(kāi)發(fā)工具+VB Script）幾乎接近成品界面的可動(dòng)原型。

此環(huán)節(jié)的確認(rèn)同上一步，團(tuán)隊(duì)的理解會(huì)更精準(zhǔn)。

*忍不住帖一個(gè)PPT的開(kāi)發(fā)工具面板，提供VS風(fēng)格的控件，并且直接用VB script寫(xiě)控件邏輯！還可以帶dummy數(shù)據(jù)！客戶都以為你開(kāi)發(fā)完畢了有木有。

6. UI design 全部界面視覺(jué)設(shè)計(jì)

主要負(fù)責(zé)人：UI設(shè)計(jì)師

完成全部界面的UI視覺(jué)設(shè)計(jì)。

此環(huán)節(jié)確認(rèn)全部UI設(shè)計(jì)。同時(shí)把確認(rèn)的UI更新到文檔里。

完整的交互設(shè)計(jì)流程是啥

完整的交互設(shè)計(jì)流程主要分為八個(gè)方面：定性研究、確定人物角色、寫(xiě)問(wèn)題腳本、寫(xiě)動(dòng)作腳本、畫(huà)線框圖、設(shè)計(jì)原型、專(zhuān)家評(píng)測(cè)、用戶評(píng)測(cè)。

如果你想要知道具體怎樣做，請(qǐng)繼續(xù)看。

一、定性研究（QualitativeResearch）：

無(wú)論你用何種形式做調(diào)查，你的目的是了解用戶的五個(gè)方面：

1、行為（Activities）：例如UI設(shè)計(jì)者用戶多久用一次、一次用多久？

2、態(tài)度（Attitudes）：例如UI設(shè)計(jì)者用戶看待產(chǎn)品的？

3、資質(zhì)（Aptitudes）：例如UI設(shè)計(jì)者用戶的學(xué)歷？

4、動(dòng)力（Motivation）：例如UI設(shè)計(jì)者用戶為什么用？

5、技能（Skills）：例如UI設(shè)計(jì)者用戶對(duì)使用相關(guān)產(chǎn)品是否熟悉？

二、確定人物角色（Persona）：

如果你的定性研究有所成功，這時(shí)你應(yīng)該對(duì)你的用戶有所了解了。根據(jù)上文中的五個(gè)方面，你需要挑揀出最典型的一個(gè)或幾個(gè)形象。例如UI設(shè)計(jì)者的人物角色可能有：剛剛畢業(yè)的大學(xué)生、沒(méi)有考上大學(xué)的高中畢業(yè)生、想要提升自己的上班職工、想要轉(zhuǎn)型的平面設(shè)計(jì)師

你不但要確定這些人物角色（Persona）的主要特點(diǎn)，還要確定他們的需求和目的。為了增加真實(shí)性，可以給人物角色（Persona）取名字，選一張照片，細(xì)化他們的背景資料。

三、寫(xiě)問(wèn)題腳本（ProblemScenario）：

基于你對(duì)人物角色（Persona）的理解，你應(yīng)該已經(jīng)可以設(shè)想出他們?cè)谑褂卯a(chǎn)品中可能遇到的問(wèn)題了。你可以為每一個(gè)人物角色（Persona）列一個(gè)問(wèn)題單，也可以把它們整理到一個(gè)簡(jiǎn)短的故事里。

四、寫(xiě)動(dòng)作腳本（ActionScenario）：

首先你要為已列出的問(wèn)題想好可能的解決方案，然后寫(xiě)一個(gè)簡(jiǎn)短的故事把這些解決方案囊括進(jìn)去。寫(xiě)成故事的好處是代入感較強(qiáng)，對(duì)別人來(lái)說(shuō)容易理解。國(guó)內(nèi)比較推崇故事版，但是把所有情景畫(huà)出來(lái)的效率是非常低的。

五、畫(huà)線框圖（Framework）：

此時(shí)你的交互方案已經(jīng)有了抽象的想法，現(xiàn)在只要把它具象化就可以了。

六、設(shè)計(jì)原型（Prototype）：

就算沒(méi)有程序員幫忙，可以使用的原型工具還是很多的。例如AxureRP和PencilProject都比較有名，國(guó)內(nèi)也有不少。不過(guò)我只用過(guò)InVision，感覺(jué)還可以。不論用什么手法，哪怕是PPT或者PDF，只要做出一個(gè)可以交互的東西就行了。

一個(gè)原型是不可能實(shí)現(xiàn)所有功能的，所以你要確定幾個(gè)可以走通的任務(wù)。例如能夠成功在知乎里發(fā)布一個(gè)問(wèn)題等。

七、專(zhuān)家評(píng)測(cè)（ExpertEvaluation）：

原型完成后召集至少兩三個(gè)設(shè)計(jì)師或者對(duì)交互比較了解的人，使用并評(píng)測(cè)原型。你可以將原型所關(guān)注的幾個(gè)任務(wù)列出來(lái)，以免專(zhuān)家不知道原型哪部分可交互哪部分不可交互。

比較常用的評(píng)測(cè)方法是啟發(fā)式評(píng)估法（HeuristicEvaluation），而這種方法比較常見(jiàn)的標(biāo)準(zhǔn)是尼爾森交互設(shè)計(jì)法則（NielsenHeuristic）。以下是十條尼爾森交互設(shè)計(jì)法則（NielsenHeuristic）：

1、系統(tǒng)狀態(tài)是否可見(jiàn)（Visibilityofsystemstatus）

2、系統(tǒng)是否符合現(xiàn)實(shí)世界的習(xí)慣（Matchbetweensystemandtherealworld）

3、用戶是否能自由地控制系統(tǒng)（Usercontrolandfreedom）

4、統(tǒng)一與標(biāo)準(zhǔn)（Consistencyandstandards）

5、錯(cuò)誤防范（Errorprevention）

6、減輕低用戶的記憶負(fù)擔(dān)（Recognitionratherthanrecall）

7、靈活性和效率（Flexibilityandefficiencyofuse）

8、美觀簡(jiǎn)潔（Aestheticandminimalistdesign）

9、幫助用戶認(rèn)知、了解錯(cuò)誤，并從錯(cuò)誤中恢復(fù)（Helpusersrecognize,diagnose,andrecoverfromerrors）

10、幫助文檔（Helpand）

UI 設(shè)計(jì)的整個(gè)工作流程是怎樣的？

一.UI設(shè)計(jì)參與完成的流程。

UI設(shè)計(jì)的工作流程會(huì)根據(jù)公司性質(zhì)、規(guī)模、項(xiàng)目性質(zhì)、項(xiàng)目規(guī)模、UI職能要求等的不同有所區(qū)別。

UI設(shè)計(jì)參與完成的流程大致為：

1. 參與需求評(píng)審，理解PRD

2. 用戶調(diào)研、情緒板梳理（主要針對(duì)一些對(duì)體驗(yàn)、視覺(jué)要求很高的產(chǎn)品，需要更加多關(guān)注人的設(shè)計(jì)，不是必要流程）

3. 交互設(shè)計(jì)

4. 視覺(jué)設(shè)計(jì)

5. 視覺(jué)評(píng)審（視覺(jué)稿確定過(guò)后）

6. UI走查、驗(yàn)收（開(kāi)發(fā)提測(cè)后，發(fā)布前）

在工作過(guò)程中，可能會(huì)組織團(tuán)隊(duì)成員對(duì)設(shè)計(jì)方案、項(xiàng)目進(jìn)行復(fù)盤(pán)，這樣細(xì)致的分工會(huì)把每個(gè)環(huán)節(jié)都打磨得非常到位。我們?cè)賮?lái)細(xì)分工作中的每一步，具體的工作內(nèi)容是什么？

1.參與需求評(píng)審，理解PRD

一個(gè)項(xiàng)目全員開(kāi)始動(dòng)工，應(yīng)該就是從需求評(píng)審開(kāi)始。在產(chǎn)品理清楚需求后，會(huì)輸出PRD或者原型草圖，依據(jù)PRD或者原型草圖來(lái)和項(xiàng)目組的全體成員澄清需求。在需求澄清會(huì)中，項(xiàng)目組成員會(huì)對(duì)需求、操作流程、業(yè)務(wù)邏輯等提出不同的問(wèn)題，產(chǎn)品完善問(wèn)題。需求澄清不會(huì)一次就讓項(xiàng)目組全體成員清晰的明確所有需求，產(chǎn)品會(huì)根據(jù)大家的疑惑去不斷完善需求內(nèi)容，在多次的需求澄清后，大家達(dá)成一致的共識(shí)，正式開(kāi)始動(dòng)工。

在這個(gè)過(guò)程中UI設(shè)計(jì)需要：

（1）反復(fù)和產(chǎn)品溝通，確認(rèn)，協(xié)助產(chǎn)品給出原型草圖。

（2）協(xié)助產(chǎn)品明確產(chǎn)品的市場(chǎng)定位、產(chǎn)品定義、客戶群體、運(yùn)行方式等。

2. 用戶調(diào)研、情緒板梳理

產(chǎn)品、UI、UE等相關(guān)人員會(huì)依據(jù)產(chǎn)品的定位、競(jìng)品分析、目標(biāo)用戶的使用場(chǎng)景、需求、心理等提出用戶的研究報(bào)告。

在這個(gè)過(guò)程中UI設(shè)計(jì)需要：

（1）參與討論，輸出紙稿線框稿、用工具制作線框圖。

（2）協(xié)助產(chǎn)品初擬產(chǎn)品設(shè)計(jì)方向和思路，提出可用性設(shè)計(jì)建議。

3. 交互設(shè)計(jì)

交互設(shè)計(jì)階段一般由交互設(shè)計(jì)師（UE）和產(chǎn)品一起制定，根據(jù)可用性分析結(jié)果制定交互方式、操作流程、跳轉(zhuǎn)流程等。在線框圖階段去設(shè)計(jì)交互流程，可以減少由于交互流程改變而帶來(lái)的視覺(jué)設(shè)計(jì)的改變。這個(gè)階段會(huì)輸出原型圖，以支持后面做詳細(xì)的視覺(jué)設(shè)計(jì)。很多公司沒(méi)有專(zhuān)職的交互設(shè)計(jì)師，交互設(shè)計(jì)由產(chǎn)品或者UI完成。

在這個(gè)過(guò)程中UI設(shè)計(jì)需要：

（1）這個(gè)過(guò)程，UI可以依據(jù)上一個(gè)流程中的輸出，初步設(shè)計(jì)產(chǎn)品的風(fēng)格，然后和產(chǎn)品不斷推敲。

（2）原型設(shè)計(jì)的不斷完善，紙質(zhì)草圖-線框圖-低保真-高保真（高保真原型成本較高，很多小規(guī)模的公司都不做高保真原型設(shè)計(jì)）。

4.視覺(jué)設(shè)計(jì)

視覺(jué)設(shè)計(jì)階段，UI根據(jù)界面原型，對(duì)界面原型進(jìn)行視覺(jué)效果的處理。該項(xiàng)目組的UI在明確界面風(fēng)格、要求后，開(kāi)始制作所有界面的視覺(jué)設(shè)計(jì)

在這個(gè)過(guò)程中UI設(shè)計(jì)需要：

（1）確定整個(gè)界面的風(fēng)格、界面、窗口、圖標(biāo)、色調(diào)、按鈕的表現(xiàn)。

（2）完成所有界面的視覺(jué)設(shè)計(jì)，交出最終的視覺(jué)稿。

5. 視覺(jué)評(píng)審

在視覺(jué)稿確定之后，UI設(shè)計(jì)組針對(duì)界面做一致性測(cè)試、簡(jiǎn)潔性測(cè)試、美觀度測(cè)試、用戶體驗(yàn)測(cè)試、行業(yè)標(biāo)準(zhǔn)測(cè)試等。然后召集項(xiàng)目組所有人員召開(kāi)原型的可用性測(cè)試評(píng)審會(huì)，發(fā)現(xiàn)可用性問(wèn)題并提出修改意見(jiàn)。當(dāng)視覺(jué)評(píng)審過(guò)了之后，配合技術(shù)部門(mén)實(shí)現(xiàn)界面設(shè)計(jì)的實(shí)際效果。

在這個(gè)過(guò)程中UI設(shè)計(jì)需要：

（1）針對(duì)提出的問(wèn)題，對(duì)界面進(jìn)行不斷的完善。

（2）參與視覺(jué)評(píng)審全過(guò)程。

（3）配合技術(shù)部門(mén)實(shí)現(xiàn)界面設(shè)計(jì)的實(shí)際效果，給出最后的界面效果圖，標(biāo)注好距離、 尺寸、顏色、文字大小等。

（4）輸出前端開(kāi)發(fā)工程師需要的切圖。

6. UI走查、驗(yàn)收

在發(fā)布前，測(cè)試會(huì)針對(duì)可用性、用戶體驗(yàn)、測(cè)試界面等對(duì)設(shè)計(jì)問(wèn)題進(jìn)行一下回饋，在依據(jù)這些問(wèn)題把設(shè)計(jì)工作進(jìn)行細(xì)節(jié)調(diào)整。再正式發(fā)布之后，收集市場(chǎng)上真實(shí)的用戶體驗(yàn)并記錄，為下個(gè)版本提供強(qiáng)有力的市場(chǎng)需求。

在這個(gè)過(guò)程中UI設(shè)計(jì)需要：

（1）不斷完善界面設(shè)計(jì)。

（2）UI人員把可行性建議進(jìn)行完善，不斷總結(jié)以備以后產(chǎn)品設(shè)計(jì)升級(jí)。

當(dāng)然，以上談到的UI設(shè)計(jì)工作只是一個(gè)大致的流程，一個(gè)項(xiàng)目UI參與的流程肯定是會(huì)依據(jù)公司性質(zhì)、規(guī)模、項(xiàng)目性質(zhì)、人員配比等不同，所做的工作有所縮減或精分。