UE/UI設計流程R.D軟件UI設計流程王蘭杰浙江百世物流科技有限公司WanglanjieEmail:QQ:229982153517965Website:4/16/2024UE/UI設計流程競爭產品分析領域調研產出物新產品開發任務產品定位用戶分析產品概述功能需求規格整理產出物第一次Check是/否通過？概念模型分析功能結構圖使用場景分析交互流程分析產出物第一次Check是/否通過？信息架構和界面原型要點說明產出物第一次Check是/否通過？詳細設計設計和邏輯說明產出物第四次Check是/否通過？完成設計維護進入設計維護EndBASICRESEARCHPRODUCTANALYSEINTERACTIONDESIGNPROTOTYPEDESIGNDETAILEDDESIGNUSER六個階段，每個階段又有關鍵的工作內容和要求。4/16/20242UE/UI設計流程第二階段：產品分析產品定位

從軟件提供者的角度分析產品推出的意義和重點關注的方面，實際考量、豐滿決策層的idea，明確列出產品定位，通過討論修繕取得決策層的認可；用戶分析

結合競爭產品的分析資料，采用定性分析的方法，獲得對產品目標用戶在概念層面的認識；產品概述

以軟件提供的身份，以最簡短的文字，向用戶介紹產品，突出產品對用戶的價值。避免功能點的簡單羅列，而應該在歸納總結的基礎上突出重點；功能需求規格整理

在歸納關鍵功能的基礎上，結合競爭產品規格整理的領域認識，從邏輯上梳理需求規格列表，重在邏輯關系清楚、組織和層級關系清晰。劃定項目（設計和研發）范圍；產出物：

用戶分析文檔和產品概述、功能規格列表

產品定位用戶分析產品概述功能需求規格整理產出物第一次Check是/否通過？4/16/20243UE/UI設計流程第三階段：交互設計（功能結構和交互流程設計）產品概念模型分析

從產品功能邏輯入手，結合對常見軟件的經驗積累和競爭產品的認識，加上對用戶的理解，為產品設計一個盡量接近用戶對產品運行方式理解的概念模型，成為產品設計的基礎框架；功能結構圖

在產品概念模型的基礎上豐富交互組件，并理順交互組件之間的結構關系；使用場景分析

模擬典型用戶執行關鍵功能達到其目標的使用場景；交互流程分析

模擬在上述概念模型和功能結構決定的產品框架之中，支持使用場景的關鍵操作過程（即鼠標點擊步驟和屏幕引導路徑）；產出物：

產品設計文檔的交互設計部分概念模型分析功能結構圖使用場景分析交互流程分析產出物第一次Check是/否通過？4/16/20244UE/UI設計流程第四階段：原型設計（信息架構和界面原型設計）信息架構和界面原型設計

設計產品界面中應該包含的控件數量和類型、控件之間的邏輯和組織關系，以支持用戶對控件或控件組所代表的功能的理解，對用戶操作的明確引導；所有界面設計成為一套完整的可模擬的產品原型；設計要點說明

對界面設計的重點添加說明，幫助涉眾對設計的理解；

產出物：

產品設計文檔的原型設計部分信息架構和界面原型要點說明產出物第一次Check是/否通過？4/16/20245UE/UI設計流程第五階段：詳細設計（詳細設計和偽代碼編寫）詳細設計

完善設計細節、交互文本和信息設計（Messagebox）；設計和邏輯說明

對界面控件/控件組/窗口的屬性和行為進行標準化定義，梳理完整的交互邏輯，用狀態遷移圖或偽代碼形式表示；產出物：產品設計文檔的詳細設計部分

第六階段：設計維護（研發跟蹤和設計維護）語言文檔整理

設計通過評審之后，把產品中所有的交互文本整理成excel文檔，預備研發工作；研發跟蹤維護

進入研發階段后負責為研發工程師解釋設計方案、問題修改、文檔完善、Bug跟蹤等；

產出物：

產品語言文檔，設計調整維護詳細設計設計和邏輯說明產出物第四次Check是/否通過？完成設計維護進入設計維護End4/16/20246UE/UI設計流程第一階段：基礎調研競爭產品分析

尋找市場上的競爭產品，挑選3-5款進行解剖分析。整理競爭產品的功能規格；并分析規格代表的需求，需求背后的用戶和用戶目標；分析競爭產品的功能結構和交互設計，從產品設計的角度解釋其優點、缺點及其原因，成為我們產品設計的第一手參考資料。領域調研

結合上述分析基礎和資料，縱觀領域競爭格局、市場狀況，利用網絡論壇、關鍵字搜索等手段獲得更多用戶反饋、觀點、前瞻性需求。產出物：

相應的對比分析文檔和領域調研報告競爭產品分析領域調研產出物新產品開發任務4/16/20247UE/UI設計流程這是一個著名的模型，把UCD過程中的每個工作步驟和內容都完整而流暢的概括進來。很大程度上幫助我理清了UCD相關的混亂頭緒。以這個模型為基礎，我整理了一個比較可行的UCD流程。4/16/20248UE/UI設計流程需求功能定義交互設計視覺設計DEMOUI設計（交互/視覺/編碼）實現PMORTEAMLEADER軟件工程師4/16/20249第于第一步的用戶調研問題，當然迫于條件的限制，我們不可能有機會去做用戶研究相關的工作，通常是從競爭對手的分析中來獲得關于用戶的理解和靈感。用JesseJamesGarrett的話說，在相同領域做相似的事情的研發團隊，所服務的用戶必定具有某種程度的相似性。按照產品分析和設計套路倒推，解剖優秀產品的設計策略，可能是快速建立用戶認識的竅門。可能有人覺得理解用戶是市場的事，顯然這是片面的。其實理解用戶能夠在以用戶為中心的設計過程中幫助設計決策，如果沒有這個認識，很可能會在后面的設計決策和討論中陷入個人英雄主義的表演和政治博弈之中。當然，尋找用戶還能使我們收獲更多的領域知識，整理對手的優缺點，并能在后續的概念設計、交互設計和原型設計中提供極大的參考價值。4/16/202410UE/UI設計流程交互設計視覺設計CSS/HTML編碼生成產品原型（線框圖）生成產品模型（效果圖）生成產品DEMO（效果圖）實現產品（最后階段）4/16/202411UE/UI設計流程一、生成產品原型Prototype

（線框圖）原型就是用來讓人改的。它存在的價值就體現在被修改了幾次，被更新了幾次，以及它的下一步被少改了幾次。4/16/202412UE/UI設計流程二、生成產品模型Mock-up

（效果圖）在原型被大家接受之后，就該關心產品長得好不好看了。我們以“模型”這個詞來統稱該步驟的交付物。和原型相比，它關注于產品的視覺設計，包括色彩、風格、圖標、插圖等等。4/16/202413UE/UI設計流程三、生成HTML/CSS頁面Demo就是按照原型和模型用HTML(XHTML)/CSS/JavaScript等等前端技術實現出來，以便后端的開發工程師可以接手編碼。到此UI部分基本完成，不知道大家對此流程有什么看法。不足之外還請大家糾正。一起討論，把UI工作流程做好。當然，如有條件，最好能參于下前期調研，為能更好的理解用戶需求，提升用戶體驗。4/16/202414這個流程不是一個快速開發的流程，雖然在用戶分析中投機取巧節省了一點時間，但是在交互設計階段需要消耗相當的努力和創造激情，當然還有時間