UI設計的整個(gè)工作流程是怎樣的?發(fā)布者：本站     時(shí)間：2020-06-20 15:06:08

題外話(huà)
我認為設計師在工作中需要清楚了解設計的目的，尤其是你做的不是大眾化產(chǎn)品，不能以個(gè)人認知、很強的主題性（如游戲）或”潮流“風(fēng)格來(lái)確定目標時(shí)。比如設計小米手機的老人模式，老人需要什么樣的顏色？增加樣式是會(huì )產(chǎn)生干擾還是更好的體驗感？按鈕要多大才合適？在這種產(chǎn)品的UI設計時(shí)，設計師需要從頭參與，而且到了設計環(huán)節時(shí)，設計師基本上已經(jīng)心里有數了。

正式開(kāi)始
我傾向于說(shuō)“交互設計的整個(gè)流程”。在我這里，UI是指“界面”，在視覺(jué)設計開(kāi)始之前，界面的的交互策劃與設計是很重要的前置步驟，對最終的用戶(hù)體驗有很大的影響。

我團隊在交互設計階段一般有產(chǎn)品經(jīng)理、交互設計師和UI設計師主要參與。以我的了解，很多公司不設專(zhuān)門(mén)的交互設計師，而由產(chǎn)品經(jīng)理完成相關(guān)工作。以下是我這里的工作流程（圖片來(lái)自于網(wǎng)絡(luò )，本團隊的就不貼了）。這個(gè)流程希望整個(gè)產(chǎn)品團隊都能參與其中并共同加強對產(chǎn)品的理解?；蛘呓枰粋€(gè)時(shí)髦的概念，我是希望團隊能具有更多Design Thinking，“設計思維”，來(lái)加強和推動(dòng)解決問(wèn)題的能力，并激發(fā)更多創(chuàng )新。

最開(kāi)始一定要把Scenario應用場(chǎng)景和Persona用戶(hù)角色做出來(lái)。你的產(chǎn)品是在何種場(chǎng)景下被使用，你的用戶(hù)角色是怎樣特征的人。設計的對不對，要用用戶(hù)角色來(lái)判斷，而不是設計師或產(chǎn)品經(jīng)理自己。把場(chǎng)景和角色描述清楚，并且讓整個(gè)團隊理解透徹，這能保證團隊少犯錯誤。

*用戶(hù)角色 Persona，實(shí)際工作中寫(xiě)文字描述就好，不用做的如下圖一般高大上。如果你要給客戶(hù)或Boss提案，可以做一個(gè)提升逼格。



1. Storyboard 故事版：
主要負責人：產(chǎn)品經(jīng)理或交互設計師

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

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

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



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



2. Key wireframe 關(guān)鍵界面線(xiàn)框圖
主要負責人：交互設計師

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

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

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



3. Key visual design 關(guān)鍵界面視覺(jué)設計
主要負責人：UI設計師

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

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

4. All wireframe 全部界面線(xiàn)框圖
主要負責人：交互設計師

此環(huán)節交互設計師要完成全部界面的線(xiàn)框圖（1:1的）設計并且團隊確認。

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



5. Prototype 可動(dòng)原型
主要負責人：交互設計師

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

此環(huán)節的確認同上一步，團隊的理解會(huì )更精準。

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



6. UI design 全部界面視覺(jué)設計
主要負責人：UI設計師

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

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

以上步驟里省略了了給boss匯報或者給客戶(hù)匯報的描述。有條件的話(huà)，最好是每一步都要讓有關(guān)的決策人員參與確認。