[譯] 移動端設計最佳實踐

02-03

原文地址：Mobile Design Best Practices

原文作者：Nick Babich

譯文出自：掘金翻譯計劃

譯者：Gocy

校對者：phxnirvana, XHShirley

App 已經成為了能夠可靠地展現內容並提供服務的主流平台。但在琳琅滿目的 App 市場中，一個移動應用要怎麼做才能稱得上實用、貼近用戶並且具有價值，又能滿足並留住用戶呢？

本文將介紹 7 個能夠提供絕佳移動應用用戶體驗的 UX 設計準則。

1. 一個界面，一個任務

讓用戶以更少的步驟完成他們想要的操作

你的 App 中的每一個界面都應該支持使用者僅需操作一次，便可達到目的。每個界面都應該設計成為某一獨立功能而服務的，並且不需要做超過一次的交互操作。這樣的設計使得用戶上手更簡單、操作更便利，在必要時添加功能也手到擒來。

拿 Uber 來舉個例子吧。 Uber 明確地知道自己的用戶打開應用就是為了乘車的，應用並沒有展示什麼冗餘的信息：它只是自動定位到用戶當前的位置，而用戶所需要做的僅僅是選擇一個上車地點。

內容即界面

將一切無關用戶需求的元素移除而專註於展示內容。由於減少了分散注意力的元素，用戶應該能夠快速被引導至他們所需要的內容。內容就是界面。 Google Map 就是一個很好地例子 - Google 在重新設計它的時候，移除了所有非必要的面板和按鈕，並說到：地圖，就是用戶界面。

利用負領域來讓用戶注意到重要內容

空白空間或『負領域』，即設計上在元素的周圍、元素和元素之間或界面布局中的空白區域，常常被低估甚至是忽視。儘管很多設計師認為這是對珍貴的屏幕區域的浪費，但空白空間其實是移動設計中一個重要的元素。

『空白空間應該被譽為一個動態元素，而不是一個沒用的背景』 - Jan Tschichold

空白空間不僅僅能提高界面可讀性、區分內容的重要程度，它對於布局布局效果的作用同樣重要，也就是說，它能夠簡化 UI 並提升 UX 。

設計的時候謹遵『化繁為簡』的原則。圖片來源： Material Design

讓導航欄一目了然

幫助用戶在應用間穿梭自如應該是頭等大事。移動應用的導航欄應該易於發現、易於操作而且不能佔據過多空間。但是，因為和 Chrome 這樣桌面瀏覽器相比，移動端的屏幕更小並更需要突出內容，所以要做出易用的導航欄將頗具挑戰性。

標籤欄以及導航欄因其相對較少的導航選項而非常適合移動端應用。它們的出彩之處在於它們可以展示所有重要的導航選項，並且用戶只需簡單地點擊即可實現界面的跳轉。

蘋果 AppStore 中的導航標籤欄。

你的設計需要適配更大的屏幕

隨著 iPhone 6 和 iPhone 6 Plus 的發布，大屏和更大屏的時代已經來臨。

下圖是手機用戶最常用的三種操作方式：

大眾使用手機的基本方式。數據來源： Steven Hoober

85% 的受訪者習慣單手使用手機，下面的熱區圖展示了自 2007 年以來，用戶的拇指在不同大小的 iPhone 屏幕上的活動區域。你會發現，屏幕越大，拇指能夠舒適觸及的區域越小。

拇指活動區域。數據來源 Scott Hurff

適配你的設計從而提升用戶體驗非常必要，試著讓你的應用能夠讓用戶簡單（並且完全）地在大屏幕上（譬如 iPhone 6 或是 iPhone 7 ）完成單手操作。將導航元素放在拇指能夠觸及的地方。

Pocket iOS 版。所有導航欄元素都在界面底部，讓用戶正常使用手機時可以輕鬆地操作。圖片來源： Dmitry Kovalenko

別讓用戶等待內容載入

儘可能地開發流暢並能及時響應操作的應用。在後台處理事件可以讓用戶操作的響應看起來更快。將事件分派到後台任務中有兩大優點 - 它們無法被用戶感知，並且在用戶進行實際操作之前，它們已經開始執行了。 Instagram 中的圖片上傳功能就是個很好的例子，一旦用戶選擇分享一張圖片，它就立刻開始上傳了。

Instagram 在後台上傳圖片的同時建議用戶為其添加標籤，而這之後當用戶真正要點擊分享按鈕的時候，上傳很可能已經完成，此時便可以立刻分享他們的圖片了。

發推送之前請三思

日復一日，用戶被毫無用處的推送信息狂轟濫炸，極大地影響了他們的日常活動並且帶來了許多煩惱。煩人的推送通知是用戶卸載移動應用的首要原因（71% 的受訪者）。

移動終端的宗旨應該是讓每條消息物有所值。不要發那些以『讓他們打開應用』為目的的通知，當且僅當你認為這條消息對用戶有價值的時候才進行推送。

小貼士：建立一個有效的移動應用通知體系的最優策略應該是使用多元的消息類型 - 推送通知、郵件提醒、應用內通知以及新消息通知。讓消息多樣化 - 多種消息應該能完美的協同工作來為用戶創造上佳的體驗。

根據緊急程度和內容來選擇合適的推送手段。來源： Appboy

移動應用設計中最重要的就是要讓應用既實用又直觀。如果一個應用缺乏實用性，那麼它對用戶而言沒有任何實際價值，用戶也就沒有理由使用它了。如果一個應用非常實用但卻需要花費許多時間和精力才能學會使用，用戶是不會花那麼多時間來學習使用的。而一個好的 UI 以及 UX 設計最終就是要解決上述的兩個問題。

感謝閱讀！