移動端交互設計：核心原則

在設計一款移動端的APP的時候，需要牢記的最重要的兩個原則：有用、直觀。如果你的產品是無用的（無法解決用戶的需求），那麼對用戶來說，你的這個產品就是沒有價值的，用戶也不會有使用它的動機；如果你的產品對用戶來說是有用的（可以解決用戶的需求），但是擁有過高的學習成本，在解決需求的過程中需要花費很長的時間去摸索或者進行多次的嘗試，那麼在學習如何使用的時候用戶就會對它感到厭煩了。

因此一個優秀的設計師需要解決這兩個問題：

• 有用——以用戶為中心進行設計。用戶安裝你的APP是因為他們有某種需求需要解決。因此，你的APP必須要有一個明確的「目的性」。想一想你的用戶想要達到的目的是什麼？他們的關注點在什麼地方？

• 直觀——清晰明確的用戶界面。對於你設計的每一個界面，為了能更有效的發揮出它的價值，一定要讓用戶能夠輕易的明白它是幹什麼的？以及怎麼使用它？不要有讓人感到疑惑的地方。

這裡總結了9條UX設計原則，我認為是創造真正偉大的移動端用戶體驗的關鍵。

1.減少混亂

用戶的注意力是一種很寶貴的資源，應該被合理的分配到它該在的地方。雜亂無章的界面會使用戶承擔過多的信息壓力：每一個按鈕、每一張圖片、每一行文字都會使你的屏幕看起來很混亂。

混亂通常會讓電腦軟體和網頁的表現變得很糟糕，但是在移動端上，它會糟糕無數倍。圖片來源：ftrain

Antoine de Saint-Exupéry有一句很著名的話「當沒有什麼可以再被帶走的時候，完美就產生了」。這點很重要，在做移動端設計的時候去掉所有不必要的元素，減輕界面的混亂程度有助於用戶更好的理解這個界面的作用。

一個基本原則：每個頁面只有一個主要功能。你為APP設計的每一個頁面，都應該僅有一個能真正為用戶創造價值的核心功能。這能降低用戶的學習成本，讓用戶使用起來更簡單。一百個簡潔的頁面比一個複雜混亂、包羅萬象的頁面要好得多。

比如說Uber。Uber知道用戶使用這個APP的目的就是叫一輛車，所以在APP的界面上不會顯示出一堆信息把用戶淹沒：它自動獲取用戶的位置信息，用戶只需要填寫一個目的地。

優秀的用戶體驗的一個基本原則就是，在解決用戶需求的同時儘可能減少用戶的操作

2.確保具有清晰易懂的導航

對於每一個APP來說，如何引導用戶去很好的操作和使用APP都應該是需要被首要考慮的。優秀的導航應該像一隻無形的手一樣引導用戶獨自完成這段旅程。畢竟，如果用戶找不到，你的功能和內容做得再好再酷再有特色也沒用。

優秀的移動端導航應該遵守這些原則：

• 移動端的導航應該是清楚直觀的。你應該使用恰當的符號（正確的視覺比喻）以便導航目標不需要任何解釋就可以被正確理解，並且確保每個導航元素（例如一個小圖標）都能夠通向對應的落地頁。

• 同一個APP中的導航應該是一致的。不要在不同的頁面中把導航元素移動到另一個位置或者隱藏起來，這樣會使用戶感到迷惑。

• 導航應該能顯示出當前所在位置。在APP的菜單欄中無法顯示當前所在位置可能是一個最常見的錯誤，對於一個成功的導航流程來說「我現在在哪？」應該是用戶能回答的出的一個最基本的問題。

3.創造無縫體驗

你不應該認為移動端的設計是孤立的。創建一個橫跨手機、電腦、平板的無縫體驗對你的用戶來說是很重要的。

Apple Music

拿Apple Music來說。你在你的Mac上創建了一個播放列表之後，這個列表也會立即出現在你的iPhone上。Apple覺得雖然移動端的設計是很重要的，但是創建一個橫跨Mac、iPhone、iPad的一致體驗對用戶來說更重要。

4.設計合理的觸碰區域

相較而言，過小的觸碰區域讓用戶很難點擊到。在設計移動端的界面時，最好讓你的觸碰區域足夠大，能讓用戶可以輕易的點擊到。

想讓用戶的手指能精準的點擊，你創建的可點擊的控制項大小應該在7-10mm。 這樣大小的控制項才能在用戶手指觸碰的時候，手指處於控制項的裡面並且可以看見控制項的邊緣，而不是整個手指完全把控制項遮擋住。這樣在用戶點擊控制項的時候，可以立即通過視覺反饋得知控制項已被點擊。

圖片來源：Apple

當然，你也要確保控制項與控制項之間相隔合適的距離。

5.文本內容應該是清晰易讀的

與電腦相比較起來，手機的屏幕是很小的，這也意味著移動端設計的一個難點在於如何在這麼小的界面上去展示內容信息。你可能想過把內容信息縮小之後儘可能多的顯示在屏幕上，千萬不要這麼干。

一條移動端設計的經驗標準：文本字體大小至少11磅，這樣在我們一貫的觀看距離下才不需要縮放就可以輕鬆閱讀。

圖片來源：Apple

增加行間距或者字間距來提高易讀性。大量的留白可以使混亂的界面看起來更加怡人和簡潔。

優秀的用戶界面都會留有足夠的空白。圖片來源：Apple

6.確保界面上的元素是清晰可見的

你可以使用不同的顏色和對比度來幫助用戶閱讀或者解釋說明你的內容。選擇主色調、輔助色和強調色來保證APP的易用性。確保界面上的元素之間都擁有足夠的色彩對比，讓那些視力不好或有視覺障礙的人可以看得清和正常使用。

確保字體顏色和背景色有足夠的對比度使文字能夠清晰易讀。W3C推薦的文字（包括圖片中的文字）對比度：

• 小字型大小的文本顏色與背景色的對比度至少4.5:1。

• 大字型大小的文本顏色（大於14磅的粗體或者大於18磅的常規體）與背景色的對比度至少是3:1。

文本顏色與背景色的對比度不滿足推薦的對比度會很難閱讀。圖片來源：Apple

對於移動端設計來說，足夠的對比度是極其重要的：用戶在戶外的的時候可能會因為光線的問題使得原本的對比度降低。

這個灰色的背景在室內看起來或許還不錯，但是在室外看起來就沒那麼清晰了。圖片來源：usertesting

圖標或者其他的一些關鍵元素也應該保證高對比度。

沒有遵守對比度推薦的圖標也很難識別出。圖片來源：Material Design

7.根據手的位置來設計控制項位置

Steven Hoober在關於移動設備使用方式的研究中發現，49%的用戶在使用手機的時候僅僅依賴於一只手的拇指來進行操作。下圖中，手機屏幕上用顏色表示了僅使用拇指時能觸碰及進行交互的區域。

用戶單手操作手機時的舒適區域。圖片來源：uxmatters

用戶可以很輕鬆的觸碰到綠色區域；黃色區域需要伸展手指才能碰到；紅色區域需要用戶改變手持設備的方式才能觸碰到。

手持設備的方式及手的位置應該影響移動端設計上控制項擺放的位置：

• 這對於頂層菜單的設計來說是很重要的，常用的控制項和操作應該被放置在屏幕的綠色區域內，因為能夠很輕鬆的僅用大拇指就能觸碰交互。

Tumblr常用操作。圖片來源：Capptivate

• 對於否定的操作（比如說刪除或者取消）應該放置在難以觸摸到的紅色區域，因為不希望讓用戶誤觸他們。

8.減少輸入

在移動端進行欄位的輸入是一個緩慢且易錯的過程。因此最好儘可能的減少在移動端的輸入工作。

去除不必要的欄位，保持輸入表格儘可能的少和簡單。

沒有人會想填寫表格。尤其是一個很長的並且看起來似乎很複雜的表格，可能很少有用戶會投入精力填寫。圖片來源：Lukew

適當使用自動完成以及個人數據以便用戶僅僅只需要填寫一點兒信息。

自動填寫國家

9.測試你的設計

通常在電腦的大屏幕上看你的設計都是很棒的，但是當它真正在手機上運行時可能就沒那麼好了。甚至當它投放到市場上之後，可能一些你煞費苦心設計出來交互方式會出現一些之前完全沒有考慮到的錯誤。這就是為什麼讓真實的用戶在各種各樣的移動端設備上來對你的APP進行測評是很重要的。你應該邀請真實的用戶去完成一些常規任務，這樣你才能看見你的設計的真實表現。

把你的APP當做一個在不斷進化的個體，利用數據分析和用戶反饋來不斷的提高體驗。

總結

和其他的設計原理一樣，看完了上文提到的這些技巧和說明僅僅只是一個開始，你還需要把這些觀點用你自己的方式去消化理解、融會貫通之後才是你的所得。

記住：不是為了設計師而設計——為用戶設計。

謝謝！

原文由Nick Babich發佈於Medium，已獲作者授權翻譯、轉載

原文鏈接Mobile UX Design: Key Principles

推薦閱讀：