UI设计的整个工作流程是怎样

《UI设计的整个工作流程是怎样》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、UI设计的整个工作流程是怎样最早大家開始討論用戶體驗流程，在白板上邊畫流程邊添加粗略an的UI元素。會後交互設計師會在在紙上做手繪版線框圖。這階段產品經理、交互設計師、UI設計師、包括技術工程師會壹同作大量的討論，而且主要討論的是流程和主要功能，因此手畫故事版最快最方便並易於修改的。此環節要敲定userflow,用戶流程及其中的關鍵步驟,每壹步驟都是壹個主要界面。法白板上壹般都是這樣，交互設計同學會在紙上重繪。年多動產品設計這樣做也行,不買專用的模板本和工具尺,自己打印也行。2.Keywireframe關鍵界面

2、線框圖PixelEngine一SiteInformationArchitectureOpeg#urnSOiOPomofteffMrenattOftmarport*>QOPn>*ptQtfcncbooO2^58lhendKncbonOOo»tw^ji1020CtervlMmtHWMCttypetOMMbyMWiOPr^cttuwwyO1yHH9主要負責人：交互設計師在確定的用戶流程中，選出幾個關鍵的,有代表性的步驟，做細化的wireframe線框圖。線框圖裏要確保每壹個UI元素的設計,包括其大小和位置

3、。我們做的線框圖是1:1的，也就是線框圖與實際界面尺寸壹致。1:1的線框能在前期避免考慮不周和執行困難等很多問題的出現。此環節要確定關鍵界面裏的UI元素和布局，以及全局的布局排版風格。★線框圖做成1:1最好。輸出到文檔裏要添加說明。在後面的工作裏,這份文檔可以讓UI設計同學和工程師同學共用。3.Keyvisualdesign關鍵界面視覺設計主要負責人：UI設計師此環節交互設計師會按確定的用戶流程及確定的布局風格來繼續做其它界面的線框圖。UI設計師則同時開始做關鍵界面的視覺設計，進行配色、樣式不同風格的嘗試。此環

4、節要確定產品界面的視覺設計風格。3.Allwireframe全部界面線框S-一_文件加我项COM力谨项力VisualBasic宏宏安全性代码A瓯囹口曰禺回雇性百0©fflE®«it迅查看代码文档面板修改主要負責人：父互設計師此環節交互設計師要完成全部界面的線框圖（1:1的）設計並目確認。*做完全部的線框圖，壹般會岀壹個總結構圖。如果有足夠大的場地,也可以逐頁打印出來貼到壹面墻上。方便團隊隨時參考。4.Prototype可動原型开始插入设计切换动画幻灯片放映审阅视图主要負責人：交互設計師此環節依產品需求而定。如果

5、靜態的線框還不能完整的體現出產品特點，那就需要做成可操作甚至有關鍵界面動畫示意的可動原型。通常是HTML的可動原型，特殊項目也曾經做過Flash的。我還有壹個奇葩朋友用PPT做過（PPT的開發工具+VBScript）幾乎接近成品界面的可動原型。此環節的確認同上壹步,團隊的理解會更精準。法忍不住帖壹個PPT的開發工具面板,提供VS風格的控件z並目接用VBscript寫控件邏輯！還可以帶dummy數據!客戶都以為妳開發完畢了有木有。6.UIdesign全部界面視覺設計主要負責人:UI設計師完成全部界面的UI視覺設計

6、。此環節確認全部UI設計。同時把確認的UI更新到文檔裏。以上步驟裏省略了了給boss匯報或者給客戶匯報的描述。有條件的話，最好是每壹步都要讓有關的決策人員參與確認。如果要做用戶調硏的產品，那壹定要做出可動原型再讓用戶使用測試,不然很難得到有價值的反饋。有條件的公司直接出帶設計的可動原型再測試當然最好。