如何優雅的定義 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的案例中，每一張產品圖片有着「我還沒買過」、「我已經買過的狀態」，而評價信息上則會有「我還沒評價」「我已經評價」的不一樣狀態。

　　這些狀態會隨着使用者的互動而變，而且也是須要呈如今界面上讓使用者看見，由這些狀態變化的信息，使用者才能感覺到本身與系統正在互動，而且理解本身的操做狀態。

　　考慮信息的流動性

　　除了界面的不一樣狀態外，界面設計與平面設計的差異還有在於信息是流動的，也就是界面上的信息並非固定長度的，好比說每一個人的ID名字長度不同、信息敘述的長度也不同、剩下的倒數時間不同、評價數也是不同的，而這些不一樣長度的文字有可能會在畫面上與其餘UI元素碰撞，例如：說底下這個購買界面，當商品名過長時會覆蓋到付款的按鈕。

　　這個問題有如下三種處理方式：

　　限制長度

　　限制長度能夠分爲輸入限制以及顯示限制，輸入限制是指使用者在輸入信息時，限制他能夠輸入的字元長度；顯示限制則是當信息長度超過顯示範圍時，則隱藏過長的信息，最常使用的是截斷資訊後加上刪節號（ellipsis）。

　　動態調整大小

　　根據不一樣的文字長度，在不失可讀性範圍內去動態縮小文字。讓文字根據長度自適應大小。

　　動態調整顯示形式

　　有些信息有不僅一種的表達方式，當信息過長時可使用比較簡短的表達方式，好比說November換成Nov、1200換成1.2K、1分10秒換成70秒……等等。

　　對於界面上要呈現的信息都思考過之後，你就能夠在紙上打草圖或是使用Axure、魔刀等原型工具畫出原型。

　　而後須要發揮你的美感以及對用戶美感度的認知。當草圖畫完，檢查確認後沒有問題後，設計師會像刷油漆通常畫出漂亮的視覺稿！