1.2 移動UI設計流程

UI設計（視覺界面設計）只是產品設計中的一個步驟，要想更好地理解UI設計的設計流程，必須先了解產品設計階段的整體工作流程。一般情況下，完成一款移動UI設計作品按先后順序需要經歷5個階段，如圖1-13所示。

1.2.1 需求分析

一款成功的UI設計作品，其產品需求分析尤其重要。一個全面且正確的產品需求分析文檔是產品成功的首要條件。

需求分析是一個“燒腦”的工作階段，這個階段需要產品經理、交互設計師，甚至公司市場、運營等各個部門的人都參與，做大量的研究和提煉工作。一般通過市場分析、用戶需求分析、競品分析、產品功能設計和功能技術分析等步驟，最終整理和規劃出需求文檔。圖1-14所示為需求分析的主要步驟。

1.2.2 交互原型設計

將需求分析整理為文檔后，接下來開始進行交互原型設計。交互原型設計是產品成型的階段，產品從抽象的需求轉化成具象的界面，需要產品經理和交互設計師配合完成。交互原型設計的工作流程如圖1-15所示。

1.2.3 視覺界面設計

移動端產品的視覺界面設計可以簡單歸納為視覺概念稿、視覺設計圖、標注切圖和適配打包4個步驟，下面逐一進行講解。

● 視覺概念稿

在開始正式的視覺設計之前，可以首先挑選幾個典型的App頁面，完成不同的風格設計稿，讓客戶或者領導從中選擇一種風格，將其確定為視覺風格后，再進入下一步工作，從而避免推翻重做的風險。圖1-16所示為視覺概念稿的工作流程。

● 視覺設計圖

視覺設計的工作流程也很復雜，它是展現在用戶面前最直觀的產品內容，將直接影響產品在用戶心中的印象。

因此，視覺設計圖需要延續用戶體驗設計原則，同時能夠很好地表達產品的設計風格。視覺設計完成之后還需要建立標準控件庫和頁面元素集合等視覺規范，使設計團隊的工作統一化和標準化。圖1-17所示為視覺設計的工作流程。

● 標注切圖

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

● 適配打包

為視覺設計進行切圖標注后，需要為設計稿進行常見機型的適配工作。簡單來說，就是將設計稿調整為常見機型的屏幕尺寸，然后逐一輸出。最后，將輸出的不同尺寸的設計稿和切圖標注的文件進行打包，整理后交于開發人員。