你需要知道的9個移動端用戶體驗設(shè)計準(zhǔn)則

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

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

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

1）為了app對用戶是有用的,應(yīng)該以用戶為中心進行設(shè)計。用戶使用你的app,是因為他們需要解決的一個緊迫的問題。因此，這個app應(yīng)該對“目的”有個明確的定義。思考什么是你的用戶將會努力實現(xiàn)且聚焦的主要目標(biāo)，并刪除所有無關(guān)緊要或次要的東西。

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

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

1.減少噪音

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

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

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

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

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

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

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

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

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

3.創(chuàng)建一個無縫/連續(xù)的體驗

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

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

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

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

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

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

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

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

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

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

6.令界面元素清晰可見

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

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

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

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

對于移動端設(shè)計來說，有足夠的對比度是極其重要的：用戶在室外因為光線原因?qū)е缕聊粚Ρ榷鹊汀?/p>

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

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

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

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

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

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

手持的位置影響著移動端控件的擺放:

1）頂級菜單是很重要的地方，經(jīng)常被觸發(fā)的控件以及常見的操作都發(fā)生在屏幕的這塊綠色區(qū)域，因為拇指在該區(qū)域發(fā)生交互是最舒適的。

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

8.減少用戶輸入需要

在移動端上，輸入文字是一個緩慢且容易出錯的過程。因此最好是盡量減少所需輸入：

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

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

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

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

總結(jié)：

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