無論是在上市 BAT 還是創業小公司，都隨時可能接手從0開始的新項目，那么作為負責新項目的主設 OR 獨立設計師，我們應該從何開啟工作呢？

一、產品需求溝通

項目開啟的第一件事必然是和產品經理的熱烈碰撞，那么如何在溝通中體現一個 UI 設計師的專業水準呢？

1. 了解產品定位

首先要明確這是一款什么類型的產品，是工具型 APP、社交型 APP 還是電商 APP ？

2. 確定目標用戶

接下來就是確認目標用戶群，是大學生？寶媽？還是廣場舞大媽？具體到年齡段和大致職業方向。

3. 有無相關競品

大部分的產品原型都會有一定的參照競品，不排除個別完全創新的產品。雖然我們自己也能找到類似的競品，但是建議產品經理給出 TA 認為合適的相關競品，這里有2個好處：

• 提供更多的競品以供視覺分析；
• 有助于我們了解產品經理所想要達到的 APP 設計效果。

4. 梳理原型圖大致邏輯

在這里假定大部分公司沒有交互設計師的崗位，原型圖1.0由產品經理來出。

那么在第一次交流溝通中，產品經理會詳細描述一遍 TA 的原型圖跳轉邏輯與各界面內容，我們需要了解 APP 版本1.0所需要完成頁面設計所有內容，及時反饋不合理的跳轉邏輯。

5. 確認工作排期

在溝通后，需要協調產品開發進度，給到大致的設計排期。一般來說我們會這樣進行新項目的設計時間管理。（針對復雜程度中等的 APP）

二、風格定位分析

在收集了產品需求之后不要著急開始頁面設計，還有幾個磨刀不誤砍柴工的步驟。

1. 競品視覺分析

分析相關競品的視覺展示主要有2方面好處：

• 檢測我們在模塊設計時是否有所忽略，有無更好的視覺表達方式；
• 注意與競品保持一定差異性，保證自己的產品調性。

不過需要注意的是，在競品分析中不要受到競品影響而無法進行創新思考，永遠在競品基礎上思考更優化的方案。

2. 確定品牌色與 APP 風格

品牌色是一個需要慎重思考的內容，因為一旦確定開始設計運營，之后要進行改動都是比較困難的事情。一般情況下，品牌色與 APP 類型、目標用戶有關。

這里舉一個例子，最近在做的一個針對小白用戶群的理財資訊類 APP。那么可以分析得出幾個風格關鍵點：舒適留白（深度閱讀），親和力（財富相關），細節創新（用戶黏度）。

于是我們使用了#FFC900（黃色）作為品牌色（暖色，與大部分紅色競品拉開差異，同時干擾閱讀性較弱）。

3. 初步的 LOGO 方案

文字型

把 APP 的大名放在 APP 里，或者 APP 名稱中的一個字放在 APP 里。例子可以說是數不勝數，可以稱為是 APP LOGO 設計最大眾、最保守的方案。原因也很簡單，因為這樣的 LOGO 設計簡單粗暴，識別度高，最適合國人的閱讀偏好，因此之前也有數據說明是下載率最高的 APP LOGO 類型。

字母型

一般使用 APP 名稱拼音或英文的首字母放在 APP 里。其實英文字母與國人來說和圖形是相對類似的，只是使用字母對于 APP 的品牌名稱可能更容易直接呼應上。

圖形型

圖形化 LOGO 的使用在 APP LOGO 上也十分廣泛。大部分有著自己圖形化 LOGO 的產品都會優先使用圖形化 LOGO 而非文字 LOGO 去作為 APP LOGO。一旦圖形化 LOGO 被大眾所理解接受，那么在茫茫的手機 APP 堆中識別起來就會相對容易，具有很強的識別度與品牌感。

吉祥物

一些成熟的 APP 后期也偏好將自己的 APP 吉祥物作為 APP LOGO 展示。這樣做的益處基本也在于親和力的營造與品牌文化的推廣。

4. App 整體框架

卡片式

適合 feed 流、瀑布流產品，不同樣式和排布的卡片為不同維度的產品內容提供很好的區分環境，同時也提高了閱讀效率。

分割線式

適合信息密集且強調信息展示效率的產品，分割線可以簡單粗暴的與整理所有碎片化的內容，細化區分不規則內容。

但是這里建議如果非必須，盡量少使用分割線，不僅是為了美觀和視覺潮流，更重要的在于，分割線（尤其重色分割線）容易使頁面產生割裂感，大量使用的話還會造成閱讀干擾。

無框式

適用于大圖、文藝類的產品。這大概是近一年最流行的潮流風格了，從 iOS11 更新以來，大標題無框式的構架在各種飛機稿中隨處可見。但是產品是否真的適合這樣新的潮流風格，仍需要設計師仔細思考，而不應該盲目追隨設計潮流。

5. 思維導圖

在設計風格與 LOGO 方案都基本敲定后，可以對交互原型進行一個思維導圖梳理。讓自己更清楚產品的整體框架與跳轉邏輯。

三、開工界面設計

你是一個披著 UI 設計師羊皮的美工嗎？

1. 模塊化管理你的設計稿

這里我們不提如何給文件夾命名之類雞肋的事情，每個公司都有自己的習慣，入鄉隨俗就好。

重點的是如何用 sketch 搭建一個規范高效的界面框架。對于界面設計中重復出現的 UI kit（UI組件），比如 tab 圖標，按鈕，我們都可以以 symbol（符號）化的方式避免反復多次修改與設計稿的混亂。

△ 具體使用方法可自己嘗試或搜索資料

2. 考慮設計延展性

所有后臺上傳數據可能的最大值，比如粉絲、關注、點贊的數值最多多少位，卡片信息標題最多多少字以及金融產品中個人賬戶的數字最大位數。

往往區同美工與 UI 設計師的不是你的界面做的有多漂亮，而是細節你考慮的有多到位，具體有多少設計的可能性與延展性可以注意。

△ 請忽略該圖的 UI 視覺風格及其他細節，單純舉個數值延展性的例子

3. 努力以設計解決問題

其實不單單是 UI 設計，所有的設計領域，一個好的設計師應該不僅僅只是美化產品，更多的應該是去解決問題。

在看到產品的原型圖時，首先思考 TA 為何要這樣畫原型，是否有更好的交互方式。這里舉一個例子：還是上文中提到的那個理財資訊 APP 項目。

△ 產品經理給出的原型

需要我們留意的是，發現頁在這里屬于一級界面，如果按照產品經理所羅列的版式進行設計，那么會造成一個結果：頁面樣式過于單一，對于黏度本身就不高的小白用戶群，這樣的平鋪方式很不利于 APP 留住用戶。

但是從產品經理的角度出發他們同時關注信息的展示效率與曝光度。所以需要如何解決這個問題，達到兩全其美的效果呢？

這是設計的方案稿，在與產品經理溝通后，提議用不同布局新增了熱門話題模塊，在保留了一定信息平鋪列表保證信息露出的基礎上，增加了信息表達的視覺多樣性與內容優先級。

四、與開發的對接

設計師與開發的碰撞已是老生常談，但是視覺還原做的不好，除了開發的鍋，設計也有責任。

1. 何種形式的切圖、標注最高效

一些公司的流程習慣設計直接用 markman 或類似標注工具，標出密密麻麻的標注圖給開發。但實際上這樣的對接效率無論對開發還是設計來說都不是一個科學高效的進行方式。

所以建議使用 sketch 的插件 sketch measure >規范，直接導出 Html 頁面，可以直接用鼠標在 html 中查看任意的區域文字顏色等開發所需的 css 樣式，免去了人工標注的時間。

需要注意的是，html 無法讀取文件夾組里的單個元素信息。

2. 必不可少的視覺走查

基本每個版本開發完成后，都需要進行視覺走查校對，因為開發多少都會有一些視覺上的實現偏差。但視覺上的偏差有時候不完全是開發的鍋，一些細節設計師也是要負責的。

比如，在 sketch 里單行字的間距沒有調整為與字體字號相同時，導出的 html 里就會顯示比實際字體要大的字體，這樣的界面開發結果就是行間距莫名的變窄了。又比如以圖片比例不為整數的設計稿，開發適配完一般都不會是你設計稿上的圖片大小，因為無法適配。

建議在每次走查后在 excel 列好所有的需要校正的點（用 P1、P2、P3 分好優先級）。

五、建立視覺規范

你的視覺規范能物盡其用嗎？

大部分高設在整理視覺規范的時候還是習慣做出一個幾十來頁的 PDF，很可能只是一個擺設，開發不會看，連設計師自己都不會多看。

其實實用有效的視覺規范應當盡可能簡潔，而更多的控件樣式由 ui kit 來展現。

△ 小 tip：可以給顏色和字號編好編號，如 A1、A2 這樣方便開發建立組件庫，方便調用組件。

UI kit 的匯總建議也在 sketch 中完成，這樣也可以導出 html 供開發直接使用。這樣看來一個可以直接使用的 UI kit 明顯比 N 多頁規范與控件混合的 pdf 要實用很多。

歡迎關注作者微信公眾號：「早安左小姐」

「APP設計流程全面解析」

• 《UI實戰教程！從零開始做App 系列之項目立項+預估時間篇》
• 《UI實戰教程！從零開始做APP 系列之界面設計篇》
• 《UI實戰教程！從零開始做APP 系列之切圖標注篇》
• 《UI實戰教程！做設計稿前應該做哪些準備工作？》
• 《從零開始設計一款APP之視覺還原+上線準備》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com