1.5　了解UI設計的工作流程

UI設計只是互聯網產品設計中的一個步驟，要想更好地理解UI設計的工作流程，必須先了解互聯網產品設計階段的工作流程。按照互聯網產品設計的先后順序可以分為需求分析、交互設計、視覺設計、開發測試和運營5個步驟，如圖1-40所示。

提示

此處所說的工作流程，針對的是一個部門健全的公司。如果是微小的創業公司，則可以作為參考，并不能全盤套用。

由于本書主要講解移動UI設計，因此開發測試和運營部分的內容將不再講解。

1.5.1　需求分析

需求分析是一個燒腦的工作階段，這個階段需要產品經理、交互設計師，甚至公司市場、運營等各個部門的人參與，進行大量的研究和提煉工作。一般通過用戶分析、需求整理、競品分析、核心流程設計、技術分析、商業市場分析等步驟，才能梳理出需求規劃。需求分析的主要步驟如圖1-41所示。

● 用戶分析

規劃產品的第一步工作就是用戶分析，產品的一切都是建立在用戶需求上的，一個產品只有能滿足用戶需求才有存在的價值。進行用戶分析的主要目的是有確定的目標用戶，詳細了解用戶的目的、行為和問題，用戶使用場景及當前用戶問題的解決方案等。用戶分析的目的、方法舉例和產出物如圖1-42所示。

用戶分析其實很復雜，大公司會有專門的用戶研究工程師來負責，但一般公司都是由產品經理或交互設計師來完成的，他們沒有太多資源和時間，但簡化的用戶分析也是有用的。用戶分析最簡單有效的方法就是進行幾次用戶訪談，通過訪談可以了解足夠多的內容，如果資源和條件足夠，調查問卷、焦點小組都是常見的方法。

● 需求整理

進行需求整理之前需要進行需求收集，收集的方式有很多種，數據分析、思維導圖、用戶調研、競品分析、個人經驗等。

收集一系列需求后，開始整理篩選，去掉不合理的需求后，按功能框架、用戶量、使用頻率、開發難度、用戶習慣、商業價值、數據表現等方面分析排序和分類，產出物一般就是需求池。需求池會伴隨產品的整個生命周期，需要細致和認真地去維護。需求整理的工作流程、方法和產出物如圖1-43所示。

● 競品分析

現在做的一款產品大多數已經有競品了，做好競品分析能達到事半功倍的效果。產品層面的競品分析從用戶需求、產品功能、交互流程、視覺展示等方面進行分析和對比，總結出優劣勢和機會等。

競品分析不應包含市場格局、公司戰略等，商業層面的競爭關系可以放在商業市場環節去分析。做競品分析的目的是了解競品，更好地制定競爭方案，同時學習競品優秀的地方，但不要完全照搬。產出物是競品分析報告等文檔。競品分析的目的、例子及產出物如圖1-44所示。

● 核心流程設計

產品能滿足的最主要的用戶需求是什么，需求分析階段需要團隊人員明確核心流程，統一方向。核心流程設計中包含角色、任務、信息流向等幾個關鍵點，產出物一般是泳道圖。核心流程設計的目的、分析角度和產出物如圖1-45所示。

● 技術分析

核心流程制定后要與技術負責人共同探討，了解研發成本。產品設計人員在設計流程階段會有很多討論和評審，要盡量及時與技術負責人溝通，避免后期出現麻煩。技術分析流程如圖1-46所示。

● 商業市場分析

要做某一行業的產品，必須深入了解該行業。商業市場分析的目的是明確產品的商業價值，為高層做決策參考依據，獲得人力、財力、資源等支持，一般都是由老板決定、產品經理執行的。

商業市場分析的角度很多，主要了解行業、市場、競爭、用戶等，預估成本和風險，不同的行業、公司，其階段的側重點不同，需要具體問題具體分析。產出物是商業需求和市場需求等文檔。商業市場分析的目的、分析角度和產出物如圖1-47所示。

1.5.2　交互設計

將需求梳理好后，接下來開始進行交互設計。交互設計是產品成型的階段，產品從抽象的需求轉化成具象的界面，這個過程需要產品經理和交互設計師配合完成，當然大部分公司都是產品經理獨立完成的。交互設計的工作流程如圖1-48所示。

● 信息架構

交互設計中的信息架構其實就是產品信息分類。產品由哪些功能組成，將相關功能內容組織分類，明確邏輯關系，并平衡信息展現的深廣度，引導用戶尋找信息。信息架構的目的、方法和產出物如圖1-49所示。

在信息架構工作中要把導航規劃好，最好的產出物就是一個思維導圖。一款體育App產品的思維導圖如圖1-50所示。

● 業務流程

業務流程是一個產品功能設計的基礎，確定了流程，后面的工作才能順利進行，否則會出現產品功能實現搖擺不定、反復修改的狀況。業務流程的目的、分析角度和產出物如圖1-51所示。

確定好產品中的角色、任務、階段，按信息流向把流程繪制出來，業務流程也就繪制完成了。一般繪制完業務流程，產品需求文檔也就成型了，產品需求文檔主要是給開發人員當參考依據的，因此只需把產品層面的邏輯表達清楚即可。

● 頁面流程

頁面流程是業務流程的延伸，要根據以用戶為中心的思路來整理，按用戶使用頁面的順序進行組織，把頁面結構和跳轉邏輯梳理的更清楚，并確定每個頁面的展現主題。頁面流程的目的、分析角度和產出物如圖1-52所示。

● 產品原型

產品原型可以分為低保真原型和高保真原型。產品原型的目的和產出物如圖1-53所示。

低保真原型是驗證交互想法的粗略展現，因為在這個階段會有很多更改，需要不斷評審和討論，最好用紙和筆手繪，也可以用Axure或Sketch設計一些簡單的草圖，或者使用Adobe XD也可以。一款App的低保真原型如圖1-54所示。

高保真原型要將頁面控件、布局、內容、操作指示、轉場動畫、異常情況等都詳細表達出來，給視覺和開發提供詳細參考。一款App的高保真原型如圖1-55所示。

高保真原型可以顯著降低溝通成本，具體高保真到什么程度也要看團隊的習慣和時間。有的團隊會無限接近視覺稿，模擬真實的產品交互操作，有的則還是以黑白灰為主，把交互細節都展現出來，特別需要顏色體現交互的地方才加一些顏色提示。

● 說明文檔

此處的說明文檔指的是交互說明文檔。寫交互說明文檔要以開發人員為中心，要使開發人員能夠理解交互邏輯和規則。如果沒有專門的交互說明文檔，一般會在原型旁邊添加注釋說明，其目的都是要把交互邏輯和交互規則表達清楚。交互說明文檔的目的、分析角度和產出物如圖1-56所示。

1.5.3　視覺設計

完成頁面的交互設計后，接下來開始進行視覺設計。視覺設計可以分為視覺概念稿、視覺設計圖和標注切圖三個階段。

● 視覺概念稿

在開始正式的視覺設計之前，可以挑選幾個典型的頁面設計風格不同的視覺概念稿，等客戶或領導確定視覺風格后，再進入下一步工作，避免推翻重做的風險。

● 視覺設計圖

視覺設計的工作流程也很復雜，它是一個產品展現在用戶面前最直觀的印象，一個好的視覺設計圖需要延續用戶體驗設計原則和良好地表達產品風格。視覺設計之后還需要建立標準控件庫和頁面元素集合等視覺規范，使團隊的工作統一化、標準化。

● 標注切圖

視覺設計完成后，需要給設計稿進行標注，方便前端工程師切圖。標注的內容主要是邊距、間距、控件長寬、控件顏色、背景顏色、字體、字體大小、字體顏色等。設計稿標注如圖1-57所示。

移動端的設計稿不僅需要標注，還需要切圖，把頁面控件拆分成小圖片，方便開發實現。切圖時需要考慮適配不同分辨率的設備，如iOS的切圖范圍內1倍圖、2倍圖和3倍圖，圖1-58所示為一個圖標切圖的3種尺寸。

切好的圖片按照頁面和模塊名稱或以不同分辨率進行分類后放入不同的文件夾。分組存放切圖如圖1-59所示。