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

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

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

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

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

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

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

4，考慮信息的多樣性

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

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

以下我們的開(kāi)發(fā)團(tuán)隊(duì)開(kāi)發(fā)過(guò)程中，對(duì)產(chǎn)品的用戶體驗(yàn)分析，加上對(duì)于整體產(chǎn)品的視覺(jué)美感體驗(yàn)設(shè)計(jì)，以下這張圖是我們的注冊(cè)登錄界面，看到這張圖以后如果是你會(huì)怎么重新設(shè)計(jì)它呢?

看起來(lái)不知道從哪里下手嗎?來(lái)看看我們是怎么做的吧!

框定設(shè)計(jì)范圍

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

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

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

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

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

在我們的案例中，是一個(gè)注冊(cè)登錄找回密碼的基本功能設(shè)計(jì)，我們需要先思考每一張上架的照片呈現(xiàn)哪些信息，并且同時(shí)思考這些信息彼此的關(guān)系。

雖然這只是一個(gè)簡(jiǎn)單的功能設(shè)計(jì)，也可以把它分類出來(lái)，方便之后界面上設(shè)計(jì)。

但是以上最重要的兩點(diǎn)必須要知道，為什么要知道這兩點(diǎn)呢?因?yàn)榱私饬诵枰尸F(xiàn)哪些信息，你才知道界面上要放什么信息;了解了這些信息的分類關(guān)系，你才知道信息要怎么放在界面上。

在界面上，我們會(huì)傾向會(huì)把同類的內(nèi)容與互動(dòng)元件放在一起，讓使用者更容易理解元素之間的關(guān)系。那為什么放在一起會(huì)讓使用者更容易理解呢?那是因?yàn)樵谠蚴窃谕晷涡睦韺W(xué)里頭有所謂的接近法則(law of proximity)，如果兩個(gè)元素緊密地放在一起，人類會(huì)將這兩個(gè)東西建立關(guān)聯(lián)，即使是不相似的事物也可能因?yàn)榫嚯x相近，而在視覺(jué)上產(chǎn)生群組效果，比如說(shuō)下圖左右兩邊都有圓形，但你不會(huì)把這兩個(gè)圓形當(dāng)做同一個(gè)群組的元素。

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

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

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

考慮信息的流動(dòng)性

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

這個(gè)問(wèn)題有以下三種處理方式：

限制長(zhǎng)度

限制長(zhǎng)度可以分為輸入限制以及顯示限制，輸入限制是指使用者在輸入信息時(shí)，限制他可以輸入的字元長(zhǎng)度;顯示限制則是當(dāng)信息長(zhǎng)度超過(guò)顯示范圍時(shí)，則隱藏過(guò)長(zhǎng)的信息，最常使用的是截?cái)噘Y訊后加上刪節(jié)號(hào)(ellipsis)。

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

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

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

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

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

然后需要發(fā)揮你的美感以及對(duì)用戶美感度的認(rèn)知。當(dāng)草圖畫(huà)完，檢查確認(rèn)后沒(méi)有問(wèn)題后，設(shè)計(jì)師會(huì)像刷油漆一般畫(huà)出漂亮的視覺(jué)稿!以上就是鄭州app開(kāi)發(fā)公司燚軒科技的全部講解了。