你需要知道的9個移動端用戶體驗設計準則

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

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

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

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

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

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

1.減少噪音

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

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

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

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

2.讓導航顯而易見

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

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

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

3）移動端導航應該讓用戶清晰知道當前所處的位置。瀏覽app菜單，無法指示當前位置可能是最常見的錯誤。“我在哪兒?”這是成功導航需要回答的問題之一。

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

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

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

4.設計友好的觸碰目標

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

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

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

5.清晰的文本內容

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

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

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

6.令界面元素清晰可見

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

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

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

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

對于移動端設計來說，有足夠的對比度是極其重要的：用戶在室外因為光線原因導致屏幕對比度低。

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

7.基于手的操控范圍進行設計

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

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

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

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

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

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

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

8.減少用戶輸入需要

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

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

2）在合適的地方使用自動補全和調用個人數據，最大限度的減少用戶輸入。

9.測試你的設計

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

總結：

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