如何優雅地定義 App 的界面設計

2014年初，移動端上網的流量第一次超越了PC端，從此確定了移動端取代PC端成為大眾接受信息的主流終端。也正是因為如此，越來越多的移動互聯網創業者將自己的產品重心放在了APP上面。然而隨著移動端市場的擴大，APP的數量達到了井噴的狀態，要在眾多的APP產品中脫穎而出，吸引到你的忠實用戶，設計體驗成了當下一個非常重要的環節。

用戶體驗設計的概念非常廣泛，包含了使用者、挖掘使用者潛在動機和實用性、視覺美感體驗等等。通俗來講，一款產品要給用戶很爽的感覺，其中包含的知識和方法都是用戶體驗的一部分。

在整個APP開發環節中，APP的界面和流程交互是使用者最直接體驗到產品好壞的地方。我們除了要在前期分析過用戶思維，抓住了用戶的基本價值所求、問題解決方法，還要把握住APP開發設計的最后一個重要環節：讓界面的交互給用戶一個完美的第一印象，這樣前面的努力才不會白費。所以，產品經理的原型設計更多的是用戶的過程化體驗分析，而UI設計師的界面設計更多的是產品本身視覺美感和體驗度等。

下面將會告訴大家如何設計一個簡單的APP交互界面，讓大家更熟悉界面設計的思維模式。過程如下：

1. 擬定你的設計范圍
2. 整理你的信息架構
3. 考慮信息的不同狀態
4. 考慮信息的多樣性
5. 考慮產品的視覺美感

下面用程序員客棧的例子來給大家參考：

以下我們的開發團隊開發過程中， Jane 對產品的用戶體驗分析，加上 天下任我行 對于整體產品的視覺美感體驗設計，以下這張圖是注冊登錄界面，看到這張圖以后如果是你會怎么重新設計它呢？

框定設計 范圍

動手設計之前，我們會反問自己「我們可以設計的范圍在哪里？」，有些項目可以從前期調查開始挖掘需求，有些項目已經定下了商業目標得從交互設計上發揮……每次設計都要先了解清楚這次設計可以發揮的限制在哪里，避免自己一頭熱最后設計出開發上來不及、無法融入現有產品的產品。

而在這次界面設計案例中，無法重新定義需求，無法定義使用者與產品的互動方式以及產品設計語言等等，我們能做的是最基礎的界面設計。在這個階段，我們的設計目標是要確保界面表達出的信息讓使用者清楚理解最初界面互動的方式。

整理信息構架

在畫界面之前，先思考界面上需要呈現什么信息。

首先是整理產品資訊構架（Information Architecture），也就是產品中里頭的信息彼此的關連性、階層關系，進而以一種方式呈現給使用者。

在我們的案例中，賣場里賣的是照片，我們需要先思考每一張上架的照片呈現哪些信息，并且同時思考這些信息彼此的關系。比如說在照片信息內，里頭的賣價與倒數時間是一塊的，可以把它分類出來，方便之后界面上設計。

整理結果如上圖所示，有了它之后我們才能了解到這個界面需要呈現哪些信息、這些信息的分類關系，當然一下子都把頁面拿出來舉例子不太現實。

以上最重要的兩點是必須要知道的。了解了需要呈現哪些信息，才知道界面上要放什么信息；了解了這些信息的分類關系，才知道信息要怎么放在界面上。

在界面上，我們傾向把同類的內容與互動元件放在一起，讓使用者更容易理解元素之間的關系。根據完形心理學里的接近法則（law of proximity），如果兩個元素緊密地放在一起，人類會將這兩個東西建立關聯，即使是不相似的事物也可能因為距離相近，而在視覺上產生群組效果，比如說下圖左右兩邊都有圓形，但你不會把這兩個圓形當做同一個群組的元素。

考慮信息的不同狀態

接下來，要考慮界面上信息的不同狀態，因為APP界面并不是一張畫在固定大小紙上的畫，而是可與使用者互動來變化自己部分界面信息。比如說在我們開發的電商APP的案例中，每一張產品圖片有著「我還沒買過」、「我已經買過的狀態」，而評價信息上則會有「我還沒評價」「我已經評價」的不同狀態。

APP開發中UI設計是否合格，該如何判斷？