移動端UX設計9條黃金法則

6 評論 16887 瀏覽 251 收藏 12 分鐘

在設計移動端APP的時候,最重要的事情就是要確保APP的可用性和易用性。如果一款APP可用性很低,沒有什么實際價值,用戶沒有任何理由去使用它。如果一款APP是有使用價值的,但是需要用戶花上大量的時間去學習如何使用,用戶也不會使用。

優秀的UX設計需要注意以下兩點:

  • 想要滿足可用性的要求,APP應該以用戶為中心。
  • 用戶安裝你的APP是因為他們需要解決一個緊迫的問題。

因此,每一款APP都是帶著強烈的目的使命的。想想用戶使用這款APP的主要目的是什么,然后聚焦于他們的核心目標,掃清他們在使用過程中的障礙。

用你的UX設計帶給用戶清晰明了的感覺。如果想要用戶在使用你的APP時感覺很爽,你必須讓用戶明白這個APP是做什么,怎么使用它,并且在使用時沒有任何猶豫和疑義。

我覺得下面的9條黃金法則,可以創造卓越的用戶體驗:

1. 拒絕雜亂無章

用戶的注意力是相當寶貴的資源,應該被吸引到重要的地方。界面上太多的信息會讓用戶覺得雜亂無章:每一個新增的按鈕、圖片和文本都會使界面更加的復雜。

pic1

圖1 雜亂的界面在桌面應用和網站上就是一個糟糕的設計,在移動端它仿佛又糟糕了一百倍!

Antoine de Saint-Exupéry(譯者注:法國著名的作家、飛行員)有一句名言“完美就是恰到好處,沒有任何多余的部分”。在移動端APP設計中,剔除一切非必要的元素,因為清晰的界面更便于用戶理解。

一個簡單的規則:一屏只放一個主要的操作。APP中的每一屏都應該支持一個有實際價值的單次操作。這樣學習和操作起來會更加容易。用戶寧愿對著清晰明了的界面操作一百次,也不愿意在一個雜亂無章的界面上操作哪怕一次。

拿Uber來舉例。Uber知道用戶使用它的目的就是乘車,所以Uber并沒有展示過多的信息:它通過定位數據自動檢測用戶的位置,用戶需要做的只是選擇一個上車地點。

pic2

圖2 優秀UX設計的基本規則之一就是不要干擾用戶的主要操作流

2. 導航的自我解釋

幫助用戶了解自己在APP中目前所在的位置,在每一款APP中都是一件優先級很高的事情。好的導航就像一只無形的手把用戶指引到他想去的地方。畢竟哪怕再炫酷的功能、再引人注目的內容,如果用戶不能發現它們,那么它們就是沒有意義的。移動端導航設計的正確規則是:

移動端導航必須是清晰明了的。可以在導航中使用合理的隱喻,這樣就不需要任何額外的解釋。此外需要確保每一個導航元素(比如icon圖標)可以把用戶帶到他們想去的地方。

pic3

圖3

移動端導航在APP中的位置是固定的。不要把導航操作移到別處去,也不要隨便隱藏它們,這樣只會使他們困惑。
移動端導航需要向用戶傳達他們當前的位置。導航不能傳達目前位置信息可能是APP中最常見的一個錯誤。“我在哪里?”是一個成功的導航必須要回答的基本問題之一。

3. 創造無縫體驗

我們不應該只注重移動端設計。在移動端、桌面端和平板電腦之間創造出一種無縫體驗對用戶也是很重要的。

pic4
圖4 AppleMusic

4. 設計便于手指點擊的觸控目標

越小的觸控目標越會增加用戶點擊的難度。當你在設計移動端的界面時,最好將觸控目標設計得足夠大,這樣更便于用戶點擊。

觸控目標的大小最好控制在7-10mm,這樣用戶使用單個手指就可以準確、舒適地進行點擊操作。保證用戶在點擊時,觸控目標的邊緣是可見的,這樣可以給用戶一個清晰的反饋。

pic5
圖5? 觸控目標必須足夠大,方便用戶點擊

5. 文本內容必須清晰易讀

和桌面應用相比,智能手機的屏幕相對較小。這就意味著需要將信息適配到較小的界面中。你可能有種把信息盡可能擠到小屏幕中的傾向,但是你不能這么做。

移動端設計的一個經驗規則:文本的字體大小至少需要11磅,這樣可以保證正常閱讀時字體清晰可見。

pic6
圖6

還可以通過調整行高和字間距的方式提高文本的可讀性。適量的留白 可以使混亂的界面更加清晰整潔。

pic7
圖7? 好的界面設計都會有留白

6. 保證界面元素清晰可見

你應該使用顏色和對比來幫助用戶更好地理解你的內容。保證界面元素之間有足夠的顏色對比,這樣可以幫助那些視力不太好的人更好地使用。

確保字體顏色和背景有足夠的對比,這樣文本更加清晰可見。W3C(譯者注:萬維網聯盟,最重要的工作是發展Web規范)推薦使用以下的對比度:

小文本和背景的對比度至少是4.5:1

大文本(14磅加粗/18磅常規或以上) 和背景的對比度至少是3:1

pic8

圖8? 不滿足對比度設計的文本是很難辨識的

保持足夠的文本對比度在移動端設計中是極其重要的:在戶外環境中,因為光線的原因,屏幕上的對比度會更低。

pic9

圖9? 這種中灰色在室內看起來還是不錯的,但是在戶外看起來就不怎么樣了

Icon圖標或者其他重要的元素也應該遵循上述的對比度設計原則。

pic10

圖10? 不遵循對比度設計原則的icon設計難以辨認

7. ?根據手指位置設計操作選項

StevenHoober 在他的移動設備研究報告中指出,49%的人只靠大拇指完成手機上的相關操作。在下圖中,手機屏幕的圖形基本就是研究數據的展示,不同的顏色代表用戶可以用大拇指觸及的不同區域。

pic11

圖11? 用戶單手操作的舒適區

綠色區域是用戶可以輕松觸及的區域,黃色區域是用戶需要盡力移動大拇指可以觸及的區域,紅色區域則需要用戶變換持機手勢。

這些會影響到操作選項的擺放位置:

將重要的菜單、經常使用的操作放在屏幕的綠色區域,因為這里是用戶用大拇指就可以輕松觸及的。

pic12

圖12? Tumblr 的常用操作

將否定的操作(比如刪除和清楚)放在難以觸及的紅色區域,因為我們不想用戶意外地點到他們。

8. ? 盡量減少文本輸入

在移動端輸入一個慢且容易出錯的過程。所以最好的辦法就是盡量減少需要輸入的地方:

表格越簡短越好,剔除一切不必須的選項。

pic13

圖13? 沒人喜歡填表格,表格越長越復雜,用戶填寫的可能就越小

使用自動完成的、個性化的數據。這樣用戶只需要輸入最少

pic14

? ? ? ? ? 圖14? 填寫國家時,可以自動完成

9. 設計測試

常常發現一個移動端設計在電腦屏幕上看上去不錯,但是在真實的移動端屏幕上表現并不好。甚至精心設計地用戶體驗,在真實的情況中都會出現一些缺陷。這就是為什么讓真實的用戶在不同的移動設備上測試顯得那么重要。當你對設計感覺良好的時候,應該請真實的用戶進行一些常規的操作任務來測試你的設計。把你的APP當成一個持續發展的設計,通過數據分析和用戶的反饋來持續提升用戶體驗。

結論

像其他的設計元素一樣,上述的幾條設計原則僅僅是個開始。我們需要在自己的設計張綜合使用這些原則。記住一點:不要只是為設計者設計,而是為真正的用戶設計。

原文地址:https://uxplanet.org/mobile-ux-design-key-principles-dee1a632f9e6#.7jzzfm2tm

 

本文由 @yufeicczu? 翻譯發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 有收獲

    回復
  2. 很有幫助,謝謝作者……

    回復
  3. 有幫助

    回復
  4. 挺好的,挺實用的。轉行產品經理,希望和在產品道路上奮斗的兄弟姐妹一起加油,微信:yw 5201a1 還有培訓資料可以置換

    回復
  5. 不錯

    回復
  6. 不錯不錯,有幫助

    來自上海 回復