你需要知道的9個(gè)移動(dòng)端用戶體驗(yàn)設(shè)計(jì)準(zhǔn)則

廠哥有話說(shuō)：本譯文作者就自己對(duì)用戶體驗(yàn)的看法提出了幾點(diǎn)經(jīng)驗(yàn)總結(jié)，大家閱讀完后千萬(wàn)別以為自己已經(jīng)學(xué)會(huì)用戶體驗(yàn)設(shè)計(jì)。畢竟，如果要深入、系統(tǒng)的學(xué)習(xí)用戶體驗(yàn)，還是需要多看書(shū)多實(shí)踐。

移動(dòng)端app設(shè)計(jì)最重要的一件事是確保它是有用且直觀的的。如果app沒(méi)有實(shí)用價(jià)值，人們不會(huì)有任何理由去使用它。如果app非常有用，但需要大量的時(shí)間和精力去學(xué)習(xí)，那人們也不會(huì)去使用它。

好的用戶界面設(shè)計(jì)將回答這些設(shè)計(jì)問(wèn)題：

1）為了app對(duì)用戶是有用的,應(yīng)該以用戶為中心進(jìn)行設(shè)計(jì)。用戶使用你的app,是因?yàn)樗麄冃枰鉀Q的一個(gè)緊迫的問(wèn)題。因此，這個(gè)app應(yīng)該對(duì)“目的”有個(gè)明確的定義。思考什么是你的用戶將會(huì)努力實(shí)現(xiàn)且聚焦的主要目標(biāo)，并刪除所有無(wú)關(guān)緊要或次要的東西。

2）你的UI界面應(yīng)該是清晰的。你的設(shè)計(jì)的界面必須是能夠被使用的，用戶必須能夠分辨出這是什么以及如何使用它，不會(huì)讓用戶產(chǎn)生困惑。

這里，我認(rèn)為以下9個(gè)用戶體驗(yàn)設(shè)計(jì)原則是創(chuàng)建好的移動(dòng)端用戶體驗(yàn)的關(guān)鍵。

1.減少噪音

用戶注意力是一個(gè)寶貴的資源，應(yīng)該合理分配。雜亂和信息過(guò)載的界面：每添加一個(gè)按鈕，圖像，或是文本都會(huì)讓界面變得更復(fù)雜。

法國(guó)著名作家Antoine de Saint-Exupéry說(shuō)道“達(dá)到完美，并不是好得不能再好，而是好得一點(diǎn)都不多余”在移動(dòng)端設(shè)計(jì)當(dāng)中，一個(gè)很重要的事情就是做減法，將那些不是絕對(duì)必要的東西刪掉，減少這些噪音將會(huì)幫助用戶提高注意力。

一個(gè)簡(jiǎn)單的法則：一個(gè)界面關(guān)注一個(gè)主要目標(biāo)。在你設(shè)計(jì)的APP里面的每一個(gè)界面都要僅有一個(gè)讓用戶實(shí)現(xiàn)的目的。這會(huì)易于用戶學(xué)習(xí)、使用，或在必要的時(shí)候易于其添加和創(chuàng)建。一百個(gè)簡(jiǎn)潔明了的界面好過(guò)一個(gè)混亂糟糕的界面。

以Uber為例，Uber清楚用戶的使用目標(biāo)是為了打車(chē)，所以在其app上面并沒(méi)有其他的信息干擾用戶：基于地理數(shù)據(jù)自動(dòng)檢測(cè)用戶位置，用戶唯一要做的就是選擇上車(chē)位置。

2.讓導(dǎo)航顯而易見(jiàn)

幫助用戶指明方向是每個(gè)app高優(yōu)先級(jí)的事情。好的導(dǎo)航應(yīng)該像一雙看不見(jiàn)的手來(lái)引導(dǎo)用戶使用。畢竟，即使是最酷的功能，最引人入勝的內(nèi)容，用戶找不到也沒(méi)有用。好的移動(dòng)端導(dǎo)航滿足以下幾點(diǎn):

1）移動(dòng)端導(dǎo)航必須是條理清晰的。你應(yīng)該使用合適的意符（signifiers）(正確的視覺(jué)隱喻)，這樣的導(dǎo)航不需要任何解釋就可以確保每個(gè)導(dǎo)航元素(如icon)引導(dǎo)用戶去到正確的目的地。

2）移動(dòng)端導(dǎo)航必須是連貫一致的。不要企圖移動(dòng)導(dǎo)航控件到一個(gè)新的位置或隱藏在不同的頁(yè)面，這只會(huì)讓用戶感到困惑。

3）移動(dòng)端導(dǎo)航應(yīng)該讓用戶清晰知道當(dāng)前所處的位置。瀏覽app菜單，無(wú)法指示當(dāng)前位置可能是最常見(jiàn)的錯(cuò)誤?！拔以谀膬?”這是成功導(dǎo)航需要回答的問(wèn)題之一。

3.創(chuàng)建一個(gè)無(wú)縫/連續(xù)的體驗(yàn)

移動(dòng)端設(shè)計(jì)不應(yīng)該是孤立的。創(chuàng)建一個(gè)無(wú)縫/連續(xù)體驗(yàn)貫穿移動(dòng)端、桌面客戶端和平板電腦對(duì)你的用戶來(lái)說(shuō)是非常重要的。

以Apple Music為例，你可以設(shè)置播放列表在你的Mac上,它會(huì)立即同步到你的iPhone。Apple方面承認(rèn)同時(shí)為移動(dòng)端設(shè)計(jì)是非常重要的，創(chuàng)建一個(gè)無(wú)縫/連續(xù)的體驗(yàn)貫穿iPhone、桌面客戶端和iPad對(duì)用戶來(lái)說(shuō)至關(guān)重要。

4.設(shè)計(jì)友好的觸碰目標(biāo)

小到難以準(zhǔn)確觸碰的目標(biāo)對(duì)用戶來(lái)說(shuō)無(wú)疑是種打擊。特別是你在為移動(dòng)端界面設(shè)計(jì)的時(shí)候，最好讓你的目標(biāo)足夠大，這樣易于用戶去觸發(fā)。

創(chuàng)建目標(biāo)控件的尺寸在7-10毫米，這樣用戶的手指很輕易置于目標(biāo)范圍內(nèi)，利于其準(zhǔn)確點(diǎn)擊觸發(fā)。當(dāng)用戶觸發(fā)目標(biāo)時(shí)，目標(biāo)的邊緣必須是可見(jiàn)的，這為他們提供了明確的視覺(jué)反饋，也是為了讓用戶能準(zhǔn)確觸發(fā)目標(biāo)。

同時(shí)，也要確保在可觸碰目標(biāo)之間有足夠的空隙。

5.清晰的文本內(nèi)容

與臺(tái)式電腦相比，智能手機(jī)屏幕相對(duì)較小，這意味著為移動(dòng)端設(shè)計(jì)你將面臨在相對(duì)狹小的界面里面容耐大量信息的挑戰(zhàn)。你可能有過(guò)企圖將盡可能多的信息塞滿進(jìn)去的想法，但你必須抵制這種誘惑。

一個(gè)簡(jiǎn)單的法則：文本至少需要11pt，這樣在正常的閱讀距離下它是清晰的。

增加行高和字間距有利于提高易讀性。充足的留白能讓凌亂的界面看起來(lái)誘人和簡(jiǎn)單。

6.令界面元素清晰可見(jiàn)

使用顏色和對(duì)比度來(lái)幫助用戶閱讀和理解你的內(nèi)容。在界面里面區(qū)分好顏色的主次關(guān)系，提高可用性。確保元素之間有足夠的色彩對(duì)比保證低視力用戶能夠正常閱讀和使用你的app。

確保文字顏色和背景之間有足夠的對(duì)比以保證文本可讀性。根據(jù)W3C Web內(nèi)容的可訪問(wèn)性指南(WCAG)：

1）小型文本與背景的比例至少是4.5:1。

2）大型文本(14pt的粗體/18pt常規(guī)體或以上)應(yīng)該有一個(gè)至少3:1的對(duì)比度。

對(duì)于移動(dòng)端設(shè)計(jì)來(lái)說(shuō)，有足夠的對(duì)比度是極其重要的：用戶在室外因?yàn)楣饩€原因?qū)е缕聊粚?duì)比度低。

icon以及其他重要的元素也應(yīng)該使用上面推薦的比率。

7.基于手的操控范圍進(jìn)行設(shè)計(jì)

Steven Hoober在他的移動(dòng)設(shè)備使用研究當(dāng)中,發(fā)現(xiàn)49%的人依靠單手一個(gè)拇指來(lái)觸摸手機(jī)屏幕。下圖你能根據(jù)顏色分辨出用戶與屏幕交互的情況。

綠色區(qū)域表示用戶可以輕易觸摸；

黃色區(qū)域，需要用手挪動(dòng)一段距離；

紅色區(qū)域，則需要用戶改變手持設(shè)備方式才能觸碰到。

手持的位置影響著移動(dòng)端控件的擺放:

1）頂級(jí)菜單是很重要的地方，經(jīng)常被觸發(fā)的控件以及常見(jiàn)的操作都發(fā)生在屏幕的這塊綠色區(qū)域，因?yàn)槟粗冈谠搮^(qū)域發(fā)生交互是最舒適的。

2）將消極的行為（比如刪除）放置在很難觸碰到的紅色區(qū)域，以免用戶不小心觸發(fā)它。

8.減少用戶輸入需要

在移動(dòng)端上，輸入文字是一個(gè)緩慢且容易出錯(cuò)的過(guò)程。因此最好是盡量減少所需輸入：

1）保持表單盡可能的簡(jiǎn)短，移除任何不必要的字段。

2）在合適的地方使用自動(dòng)補(bǔ)全和調(diào)用個(gè)人數(shù)據(jù)，最大限度的減少用戶輸入。

9.測(cè)試你的設(shè)計(jì)

當(dāng)在一個(gè)大的桌面屏幕上瀏覽時(shí)，所有的移動(dòng)端設(shè)計(jì)看起來(lái)都很好，但在實(shí)際的測(cè)試時(shí)，近半的app可用性出現(xiàn)問(wèn)題，不能正常被使用。即使是在用戶體驗(yàn)方面投入大量精力的移動(dòng)端設(shè)計(jì)，在使用的時(shí)候也會(huì)暴露出一些之前看不見(jiàn)的缺陷。這就是為什么讓真實(shí)用戶在不同的移動(dòng)設(shè)備上測(cè)試是非常重要的事情。對(duì)真實(shí)用戶進(jìn)行可用性測(cè)試，你將會(huì)看到你的設(shè)計(jì)如何被其執(zhí)行。把你的app當(dāng)作一個(gè)不斷進(jìn)化的實(shí)體，分析用戶反饋，不斷提高產(chǎn)品的用戶體驗(yàn)。

總結(jié)：

就像其他設(shè)計(jì)原理一樣，上面這些只不過(guò)是一個(gè)開(kāi)端，你還是需要結(jié)合自己的想法不斷去實(shí)踐。必須記住，你應(yīng)該為了用戶去設(shè)計(jì)，而不是為了設(shè)計(jì)師（自己）。