淺析交互與UI軟件界面設計工作的流程 | ||||
發布時間:2016-10-29 9:02:26 瀏覽:2125
這個流程希望整個產品團隊都能參與其中并共同加強對產品的理解?;蛘呓枰粋€時髦的概念,希望團隊能具有更多Design Thinking,“設計思維”,來加強和推動解決問題的能力,并激發更多創新。
最開始一定要把Scenario應用場景和Persona用戶角色做出來。你的產品是在何種場景下被使用,你的用戶角色是怎樣特征的人。設計的對不對,要用用戶角色來判斷,而不是設計師或產品經理自己。把場景和角色描述清楚,并且讓整個團隊理解透徹,這能保證團隊少犯錯誤。
![]() 1. Storyboard 故事版:
主要負責人:產品經理或交互設計師
最早大家開始討論用戶體驗流程,在白板上邊畫流程邊添加粗略的UI元素。會后交互設計師會在在紙上做手繪版線框圖。這階段產品經理、交互設計師、UI設計師、包括技術工程師會一同作大量的討論,而且主要討論的是流程和主要功能,因此手畫故事版最快最方便并易于修改的。
此環節要敲定userflow,用戶流程及其中的關鍵步驟,每一步驟都是一個主要界面。
*移動產品設計這樣做也行,不買專用的模板本和工具尺,自己打印也行。
2. Key wireframe 關鍵界面線框圖
主要負責人:交互設計師
在確定的用戶流程中,選出幾個關鍵的,有代表性的步驟,做細化的wireframe線框圖。線框圖里要確保每一個UI元素的設計,包括其大小和位置。我們做的線框圖是1:1的,也就是線框圖與實際界面尺寸一致。1:1的線框圖能在前期避免考慮不周和執行困難等很多問題的出現。
此環節要確定關鍵界面里的UI元素和布局,以及全局的布局排版風格。
3. Key visual design 關鍵界面視覺設計
主要負責人:UI設計師
此環節交互設計師會按確定的用戶流程及確定的布局風格來繼續做其它界面的線框圖。UI設計師則同時開始做關鍵界面的視覺設計,進行配色、樣式不同風格的嘗試。
此環節要確定產品界面的視覺設計風格。
4. All wireframe 全部界面線框圖
主要負責人:交互設計師
此環節交互設計師要完成全部界面的線框圖(1:1的)設計并且團隊確認。
5. Prototype 可動原型
主要負責人:交互設計師
此環節依產品需求而定。如果靜態的線框圖還不能完整的體現出產品特點,那就需要做成可操作甚至有關鍵界面動畫示意的可動原型。通常是HTML的可動原型,特殊項目也曾經做過Flash的。我還有一個奇葩朋友用PPT做過(PPT的開發工具+VB Script)幾乎接近成品界面的可動原型。
此環節的確認同上一步,團隊的理解會更精準。
6. UI design 全部界面視覺設計
主要負責人:UI設計師
完成全部界面的UI視覺設計。
此環節確認全部UI設計。同時把確認的UI更新到文檔里。
以上步驟里省略了了給boss匯報或者給客戶匯報的描述。有條件的話,最好是每一步都要讓有關的決策人員參與確認。
如果要做用戶調研的產品,那一定要做出可動原型再讓用戶使用測試,不然很難得到有價值的反饋。有條件的公司直接出帶設計的可動原型再測試當然最好。
什么是網站策劃,顧名思義,就是給網站做規劃。有些人可能會說,不就是個網站嘛,有什么好策劃的呀,找個美工來排排版,找個程序員來加程序,不就...
最近一段時間,對網站訪問日志關注比較多,一來擔心網站安全問題,因為互聯網中網站被攻擊或者掛馬的現象實在是太多了,很多網站動不動就被攻擊或者被...
![]() 有朋友問,用asp方式,如何將同一個數據庫中,不同字段內所記錄的數字之和進行統計?下面藍頓小編就將統計代碼發出來供大家參考。
假設有數據庫...
![]() 以前,小伙伴們要處理一個圓形的時候,大都是先做一個圓形的背景圖片來進行處理,或者用js腳本來進行處理,而現在,用DIV圓角樣式來處理就簡單方...
|
