如何優(yōu)雅的定義 App 的界面設(shè)計

2014年初，移動端上網(wǎng)的流量第一次超越了PC端，從此確定了移動端取代桌面PC端成為一般大眾接受信息的主流終端。也正是因為如此越來越多的移動互聯(lián)網(wǎng)創(chuàng)業(yè)者將自己的產(chǎn)品重心放在了APP上面，然而隨著移動端市場的擴(kuò)大，APP的數(shù)量達(dá)到了井噴的狀態(tài)，如何在眾多的APP產(chǎn)品中吸引到你的忠實中戶，用于體驗設(shè)計成了當(dāng)下一個非常重要的環(huán)節(jié)。

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

在整個APP開發(fā)設(shè)計環(huán)節(jié)中，APP的界面和流程交互是使用者最直接體驗到產(chǎn)品好壞的地方，及時你在前期分析過用戶思維，抓住了用戶的基本價值所求、問題解決方法，但在APP開發(fā)設(shè)計的最后一個重要環(huán)節(jié)：如何讓界面的交互給用戶一個完美的第一印象，那么你前面的努力才不會白費，所以由此可以見產(chǎn)品經(jīng)理的原型設(shè)計更多的是負(fù)責(zé)用戶的過程化體驗分消息，而UI設(shè)計師的界面設(shè)計負(fù)責(zé)更多的是產(chǎn)品本身視覺美感和體驗度等等問題。

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

1，擬定你的設(shè)計范圍

2，整理你的信息架構(gòu)

3，考慮信息的不同狀態(tài)

4，考慮信息的多樣性

5，考慮產(chǎn)品的視覺美感

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

以下我們的開發(fā)團(tuán)隊開發(fā)過程中， Jane對產(chǎn)品的用戶體驗分析，加上歡哥對于整體產(chǎn)品的視覺美感體驗設(shè)計，以下這張圖是我們的注冊登錄界面，看到這張圖以后如果是你會怎么重新設(shè)計它呢？

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

框定設(shè)計范圍

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

而在這次界面設(shè)計案例中，無法重新定義需求、無法定義使用者與產(chǎn)品的互動方式以及產(chǎn)品設(shè)計語言等等，我們能做的是最基礎(chǔ)的界面設(shè)計。在這個階段，我們的設(shè)計目標(biāo)是要確保界面表達(dá)出適當(dāng)及適合的信息，讓使用者清楚理解最初界面互動的方式。

整理你的信息構(gòu)架

在拿起你的鉛筆開始畫界面之前，先思考你的界面上需要呈現(xiàn)什么信息。

首先是整理你的產(chǎn)品資訊構(gòu)架（Information Architecture），也就是在你的產(chǎn)品中里頭的信息彼此的關(guān)連性、階層關(guān)系，進(jìn)而去設(shè)計這些信息以什么方式組織呈現(xiàn)給使用者。

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

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

但是以上最重要的兩點必須要知道，為什么要知道這兩點呢？因為了解了需要呈現(xiàn)哪些信息，你才知道界面上要放什么信息；了解了這些信息的分類關(guān)系，你才知道信息要怎么放在界面上。

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

考慮信息的不同狀態(tài)

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

這些狀態(tài)會隨著使用者的互動而變，并且也是需要呈現(xiàn)在界面上讓使用者看見，由這些狀態(tài)變化的信息，使用者才能感受到自己與系統(tǒng)正在互動，并且理解自己的操作狀態(tài)。

考慮信息的流動性

除了界面的不同狀態(tài)外，界面設(shè)計與平面設(shè)計的差別還有在于信息是流動的，也就是界面上的信息并不是固定長度的，比如說每個人的ID名字長度不一樣、照片敘述的長度也不一樣、剩下的倒數(shù)時間不一樣、評價數(shù)也是不一樣的，而這些不同長度的文字有可能會在畫面上與其他UI元素碰撞，例如：說底下這個購買界面，當(dāng)商品名過長時會覆蓋到付款的按鈕。

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

限制長度

限制長度可以分為輸入限制以及顯示限制，輸入限制是指使用者在輸入信息時，限制他可以輸入的字元長度；顯示限制則是當(dāng)信息長度超過顯示范圍時，則隱藏過長的信息，最常使用的是截斷資訊后加上刪節(jié)號（ellipsis）。

動態(tài)調(diào)整大小

根據(jù)不同的文字長度，在不失可讀性范圍內(nèi)去動態(tài)縮小文字。讓文字根據(jù)長度自適應(yīng)大小。

動態(tài)調(diào)整顯示形式

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

對于界面上要呈現(xiàn)的信息都思考過以后，你就可以在紙上打草圖或是使用Axure、魔刀等原型工具畫出原型。

然后需要發(fā)揮你的美感以及對用戶美感度的認(rèn)知。

當(dāng)草圖畫完，檢查確認(rèn)后沒有問題后，設(shè)計師會像刷油漆一般畫出漂亮的視覺稿！

最終的方案中，可以看到我是怎么將之前整理的信息表現(xiàn)在界面上：

看了這個過程，你是不是手癢想趕快設(shè)計自己的APP了呢？但是專業(yè)的事情最好還是讓產(chǎn)品經(jīng)理和設(shè)計師去搗鼓吧，如果你也有好的想法，歡迎注冊發(fā)布需求到我們程序員客棧，讓專業(yè)的產(chǎn)品經(jīng)理和設(shè)計師來幫你現(xiàn)實吧。