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、魔刀等原型工具畫出原型。
然後需要發揮你的美感以及對用戶美感度的認知。當草圖畫完，檢查確認後沒有問題後，設計師會像刷油漆一般畫出漂亮的視覺稿！
