如何優雅的定義 App 的介面設計

標籤：移動互連網   介面設計   產品經理   創業者   設計師   

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

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

在整個APP開發設計環節中，APP的介面和流程互動是使用者最直接體驗到產品好壞的地方，及時你在前期分析過使用者思維，抓住了使用者的基本價值所求、問題解決方案，但在APP開發設計的最後一個重要環節：如何讓介面的互動給使用者一個完美的第一印象，那麼你前面的努力才不會白費，所以由此可以見產品經理的原型設計更多的是負責使用者的過程化體驗分析，而UI設計師的介面設計負責更多的是產品本身視覺美感和體驗度等等問題。

下面將會告訴大家如何設計一個簡單的APP互動介面，從中可以讓大家更熟悉介面設計的思維定義模式，過程如下：

1，擬定你的設計範圍

2，整理你的資訊架構

3，考慮資訊的不同狀態

4，考慮資訊的多樣性

5，考慮產品的視覺美感

下面還是用我們程式員客棧的例子來給大家參考：

以下我們的Team Dev開發過程中， Jane對產品的使用者體驗分析，加上歡哥對於整體產品的視覺美感體驗設計，以下這張圖是我們的註冊登入介面，看到這張圖以後如果是你會怎麼重新設計它呢？

650) this.width=650;" src="http://image.woshipm.com/wp-files/2016/10/fNgLg7cHpwpqdDZih9P0.png" width="800" height="410" border="0" hspace="0" vspace="0" title="" style="width:800px;height:410px;" alt="fNgLg7cHpwpqdDZih9P0.png" />

看起來不知道從哪裡下手嗎？來看看我們是怎麼做的吧！

框定設計範圍

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

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

整理你的資訊構架

在拿起你的鉛筆開始畫介面之前，先思考你的介面上需要呈現什麼資訊。

首先是整理你的產品資訊構架（Information Architecture），也就是在你的產品中裡頭的資訊彼此的關連性、階層關係，進而去設計這些資訊以什麼方式組織呈現給使用者。

在我們的案例中，是一個註冊登入找回密碼的準系統設計，我們需要先思考每一張上架的照片呈現哪些資訊，並且同時思考這些資訊彼此的關係。雖然這隻是一個簡單的功能設計，也可以把它分類出來，方便之後介面上設計。

但是以上最重要的兩點必須要知道，為什麼要知道這兩點呢？因為瞭解了需要呈現哪些資訊，你才知道介面上要放什麼資訊；瞭解了這些資訊的分類別關係，你才知道資訊要怎麼放在介面上。

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

650) this.width=650;" src="http://image.woshipm.com/wp-files/2016/10/rnT2x0wQjlaiJJC8QBmG.png" width="600" height="240" alt="rnT2x0wQjlaiJJC8QBmG.png" />

考慮資訊的不同狀態

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

這些狀態會隨著使用者的互動而變，並且也是需要呈現在介面上讓使用者看見，由這些狀態變化的資訊，使用者才能感受到自己與系統正在互動，並且理解自己的操作狀態。

考慮資訊的流動性

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

650) this.width=650;" src="http://image.woshipm.com/wp-files/2016/10/MLGr88kE7ufFvKZKHZkx.png" width="640" height="200" alt="MLGr88kE7ufFvKZKHZkx.png" />

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

限制長度

650) this.width=650;" src="http://image.woshipm.com/wp-files/2016/10/mpmiFRPXqSMgtsqBTnyQ.png" width="640" height="200" alt="mpmiFRPXqSMgtsqBTnyQ.png" />

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

動態調整大小

650) this.width=650;" src="http://image.woshipm.com/wp-files/2016/10/wXb1f8IgTz5bEw6ecLvs.png" width="640" height="200" alt="wXb1f8IgTz5bEw6ecLvs.png" />

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

動態調整顯示形式

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

650) this.width=650;" src="http://image.woshipm.com/wp-files/2016/10/plWTzMMbygtEbqVDDnt2.png" width="640" height="100" alt="plWTzMMbygtEbqVDDnt2.png" />

對於介面上要呈現的資訊都思考過以後，你就可以在紙上打草圖或是使用Axure、魔刀等原型工具畫出原型。

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

650) this.width=650;" src="http://image.woshipm.com/wp-files/2016/10/bDOQiSLzSAOmf5arwnZM.jpg" width="400" height="711" alt="bDOQiSLzSAOmf5arwnZM.jpg" />

本文出自 “先來一杯java壓壓驚” 部落格，請務必保留此出處http://maybeone.blog.51cto.com/11734094/1865125

如何優雅的定義 App 的介面設計