UED團隊流程，及APP設計從概念到落地方法

Sponsor

想知道一款移動APP是如何從概念到落地的嗎？來自騰訊高級UI：蔣有為設計師分享這個話題，通過《深圳地鐵購票APP》真實UI設計案例，為大家講解APP設計是如何從無到有的，干貨滿滿，推薦大家一起學習。

目錄：

1. 常規UED團隊流程
2. 什么是概念
3. 概念如何落地？

1、常規UED團隊流程

由產品經理提出需求。用研做需求驗證，進行用戶調研。交互設計師對需求進行交互流程和頁面布局設計。視覺設計師對交互原型圖進行視覺設計。視覺稿完成之后，進入開發環節。

交互設計師的工作是交互架構、頁面架構和功能層級的設計。進入UI設計環節后，UI設計師的可發揮空間被交互所限定，看上去可發揮空間不大。

那么UI設計師能干什么？

難道UI設計只需要美化界面設計？

舉個例子：同樣是臺式機電腦，右側的iMac電腦的外觀上比左側的電腦看上去高級先進很多。

初代powerbook G4蘋果筆記本設計感遠勝左側的windows系列的筆記本。

通過上面兩個例子可以看出，雖然是相同的產品功能，但是概念不同，會產生截然不同的產品。

產品設計首先需要滿足功能，在交互上符合基本的用戶體驗。接下來就是美化界面，在視覺上符合人類的審美需求。最后是傳達概念，在產品和營銷上面像用戶傳達產品概念。

2、什么是概念

人類在認識過程中，從感性認識上升到理性認識，把所感知的事物的共同本質特點抽象出來，加以概括，是本我認知意識的一種表達，形成概念式思維慣性。在人類所認知的思維體系中最基本的構筑單位。

概念可以大眾公認的，也可以是個人認知特有的一部分。表達概念的語言形式是詞或詞組。概念都有內涵和外延，即其涵義和適用范圍。

概念隨著社會歷史和人類認識的發展而變化。中華人民共和國國家標準GB/T15237.1-2000：“概念”是對特征的獨特組合而形成的知識單元。

德國工業標準2342將概念定義為一個“通過使用抽象化的方式從一群事物中提取出來的反映其共同特性的思維單位”。

簡單的說，就是一個抽象的東西。

3、概念如何落地？

舉個例子，如何實現中華民族的偉大復興，需要五年規劃，最后落地到提升全民教育和健康水平/提高民生保障水平…

從總概念拆解多個完整的子概念，然后每個子概念再進一步拆解，拆解成可落地元素。

總概念就是產品的品牌，子概念就是產品的架構和交互，落地元素體現在最終的視覺上面，如icon、字體等。

總概念的品牌印象是100%抽象，常見的抽象概念有親切、穩定、安全、陽光、真實、快捷等。

子概念里面，主要包含框架和交互。其中50%是抽象，50%是具象。

子概念里面包含：顏色傾向、降低信噪比、對比、重復、接近、連續、閉合、一致性、費茨定律、席克定律等等。

落地元素體現在視覺設計，100%是具象。包含：顏色、風格、字體、icon、動效等等。

概念通過設計策略得到落地，在這一過程中，涉及到框架層、結構層和范圍層。落地是基于商業訴求產生的概念。

以深圳地鐵購票為例，下圖是深圳地鐵購票三個主界面。圖1是深圳地鐵行購票界面。圖2是選擇站點的界面。圖三是查看取票二維碼。

3.1購票界面

下圖是一個買票的主界面。里面包含出發站、到達站和票數選擇等功能操作。

購票界面的總概念是方便快捷。

子概念是交互，意味著更加明確和符合用戶心理模式的操作流程。更合理的布局，這里需要運用席克定律和接近法則。

落地元素是視覺，更加明確的信息點，降低信噪比。更符合用戶心理預期的形式——票（對比）

根據接近法則，購票相關聯布局在一起。相同的顏色，大腦歸為一組。

落地元素，界面設計更符合用戶心里預期的票的形式。

通過接近法則和更加明確的信息，產生如下圖2。通過降低了界面的信噪比，界面設計更加符合用戶的認知。

優化之后，并不代表優化結束，產品的總概念是方便快捷。

根據席克定律：一個人面臨的選擇（n）越多，所需要作出決定的時間（T）就越長。用數學公式表達為反應時間 T=a+b log2（n）。在人機交互中界面中選項越多，意味著用戶做出決定的時間越長。

席克定律多應用于軟件/網站界面的菜單及子菜單的設計中，在移動設備中也比較適用。

進一步優化，減少選項。優化之后如下右圖所示：

在以上基礎上，能不能在便捷快速一點？

進一步減少選擇，通過后臺數據監控，大部分老用戶是固定線路。所以默認選擇用戶出發和終點站。

3.2選擇站點

下圖是用戶選擇路線的交互。路徑層級深，交互操作繁瑣。用戶選擇線路需要點擊【按站點線路圖選擇】列表才能進入下一頁線路選擇，點擊線路才能進一步選擇具體站點。挑戰頁面過多，過于繁瑣，交互操作簡直反人類。

選擇站點界面的總概念是方便快捷。

子概念是交互，簡短操作路徑。更短的操作路徑，這里需要運用席克定律和接近法則。

落地元素是視覺，更好識別的路線，更加明確的信息點，降低信噪比。

根據費茨定律：Fitts法則最基本的觀點就是任何時候，當一個人用鼠標來移動鼠標指針時，屏幕上的目標的某些特征會使得點擊變得輕松或者困難。目標離的越遠，到達就越是費勁。目標越小，就越難點中。

如果我們要想鼠標比較快速的命中目標可以采取兩個措施，要么減少鼠標與目標之間的距離，要么使目標足夠大。

簡化操作路徑，將層級頁面跳轉變為左側導航進行切換路徑，以此減少頁面層級的跳轉，如下圖2所示：

由于部分用戶有查看地圖來選擇路線的需求，所以增加地圖，用來輔助用戶選擇路線。

3.3取票二維碼

取票二維碼的總概念是方便快捷。

子概念是交互，固定的形式、統一性和穩定性。

落地元素是視覺，梳理信息層級，更好理解的『票』。

根據統一性原則，形式越統一，用戶理解成本越低。下圖1的形式結構和購票界面不統一，下圖3的這個形式和購票界面形式統一，且概念呈現購票形態，用戶認知成本低。

下圖是深圳地鐵行優化后的三個主界面。以上過程完成了如何從概念到落地。

在「設計達人」公眾號后臺回復「6945」，獲取完整版源文件。

感謝閱讀！

作者 | 蔣有為
來源 | Echo的設計筆記（id:uxecho）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。