如何設計出簡單易用的 APP

使用 3 個設計心法,讓 APP 一目瞭然: 1. 安排優先序次 2. 提供視覺提示 3. 設計流暢手勢...
如何設計出簡單易用的 APP
目錄
在: 產品設計

別再揮霍用戶的耐心與時間 ⸺ APP 介面要是沒設計得簡單易懂,你嘔心瀝血開發的好用功能便可能與用戶擦身而過,上演一場「向左走、向右走」。

為了不讓好功能成為學習門檻下的遺珠之憾,它們得在用戶面前不證自明,操作方式要一目瞭然。

你可以使用 3 個設計心法,設計出簡單易用的 APP!

安排優先序次

不是所有功能都生而平等

很遺憾,你不能把所有功能都塞在一個頁面。若將它們密密麻麻地擠在一起,那麼用戶要鎖定想用的功能變成了件苦差事。比如說,底部導覽列 (Bottom Navigation) 的頁面按鈕建議不要超過 5 個,要是有 6 個就真的太多了。

6 個導覽按鈕太多了 (Material Design Components)

反之亦然,也不能把功能通通藏起來,眼不見為淨。因爲「最簡 (minimal) 不等於簡單 (simple) 或易用 (usable)」 — — 有時面對空蕩蕩的介面,用戶往往容易不知所措,而被藏起來的功能也容易被忽略與遺忘。比如說,為了版面乾淨而把重要功能都掃到漢堡選單 (Hamburger Menu) 裡,這就像在整理桌面時把東西全塞進抽屜裡一樣,要是沒拉開它,誰也不知道、不記得裡面放了什麼重要的東西。

為什麼叫做漢堡圖示 (Kuka Studios)
漢堡選單圖示用法 (Justinmind)

辨識核心功能,配給房地產

那麼,哪些功能要優先呈現、哪些又可適度隱藏呢?你需要把功能按重要程度區分。這可以使用兩個標準來衡量:

  1. 是用戶的主要目的嗎?
    比如說,用戶使用庫存管理 App 目的是想避免臨時缺貨的窘境,那麼「低庫存提醒」便是核心功能。相對的,「篩選庫存商品」、「聯絡客服」等功能或許也重要,但不是 App 提供的主要價值。
  2. 用戶使用頻率高嗎?
    比如說,「偏好設定」、「關於」可能比「搜尋」相對不常使用。
    註:在此的舉例作為參考,不一定適用於所有 App,須視用戶情境而定。

辨識出功能的優先次序後,得讓它們適得其所。說起來,App 的頁面就像一塊塊地,總有黃金地段與偏鄉地區。核心功能得入住黃金地段,觸目所及;非核心功能就可以走幾步路再抵達;少用的功能要拐幾個彎、找一下路也還行。

黃金地段辨識 - 拇指的活動區域:綠色 > 橘色 > 紅色 (Scott Hurff)
聊天室觸目所及 > 搜尋要伸一下拇指 > 偏好設定要到另一頁面 (Facebook Messenger)

提供視覺提示

要讓用戶覺得 App 介面一目瞭然有一關鍵:你得了解你的用戶,掌握他們的「已知」與「未知」。

已知資訊點到為止,用戶便能心領神會。已知資訊一是來自現實生活經驗(如:天氣 App 中用 ☀️ 就知道是晴天,用 🌧 就知道是雨天),另一是對數位介面常見規範的認知(如:點擊畫面左上角的箭頭「˂」會返回上一頁。

常見的左上角返回鍵 (Human Interface Guidelines)

反之,對於那些用戶可能不甚熟悉、容易誤解或需要更多線索或提示的地方,你可以適度使用文字或動畫,引導他們去揭開「未知」的面紗。

♡是讚、摘要、還是心願單?

即使是常見的符號也可能需要註解,因為同一符號在不同的上下文、不同的人眼裏,可以有不同的解讀與期待。

比如,你覺得心形符號「♡」代表什麼呢?

它在 Apple 的健康 App 裡是「摘要」,在 Airbnb 裡是「心願單」,在 Instagram (IG) 裡是「讚」或「動態」。可是名副其實的「ㄧ符多義」啊!

適度在符號旁加上文字註解釋疑,讓用戶知道按下這按鈕後會發生什麼事、前往哪裡。

畫面空白,腦海也空白

面對可以自由發揮的空白畫布或稿紙,並不是每個人都能洋洋灑灑。App 的介面也有「空白頁問題 (The Blank Page Problem)」,若有空白欄位任用戶自由填入,往往會令人有點不知所措。

一個常見的例子是你一定看過的「搜尋列」:與其只放上「搜尋」的字樣,不如提供用戶一些「建議選項」。像是 LINE 的搜尋頁便有「推薦關鍵字」、「購物排行榜」、「最近搜尋」等提示。

LINE App 的搜尋頁截圖

用動畫「手把手」教學

有些進階的操作恐怕難以文字一言蔽之,如:怎麼拍全景照片。與其設計圖文並茂的教學說明頁,走上往往被用戶跳過的命運,不如利用動畫漸進式引導,讓用戶「從做中學」。

以拍攝全景照片為例:畫面一開始便有文字提示要「持續移動手機」,而畫面中間也有個箭頭,提示移動時須「將箭頭保持在中線位置」,更在移動太快時提示要「慢一點」。

拍攝全景照片 (TapSmart)

設計流暢手勢

大家熟悉的小動作

若互動似曾相識,又怎會難以上手?

善用用戶熟悉的手勢,這樣即便是與 App 初次見面,互動起來也能不假思索。在此列舉幾個常見的手勢:點 (Tap)、滑 (Swipe)、長按 (Long Press)、拖曳 (Pan)、捏 (Pinch)、旋轉 (Rotate) 等。

6 個手機介面常用手勢
6 個手機介面常用手勢 (Discoverable Design)

標準手勢不夠用?那可以考慮把現實生活中的手勢帶進來。比如,Apple Pencil 的「隨手寫 (Scribble)」功能便仿造了現實生活的書寫體驗。若要選取文字,可以直接用筆把字「圈裡來」;若要刪除文字,可以直接把字「劃掉」。

Apple Pencil 圈選文字 (Apple Support)
Apple Pencil 劃掉文字 (Apple Support)

手勢只能當捷徑

雖然好的手勢可讓 App 用起來更加順手,但不小心也容易讓用戶一頭霧水。

一來因為手勢是隱形的 — — 既然看不見,就不一定會被得知;二來大家對同一手勢可能有不同的期待。例如:「快速點兩下 (Double Tap)」 在相片 App 中通常會觸動「縮放」功能,但在社群 App 則可能觸動「按讚」功能。

因此,除非你的用戶對這個手勢已經司空見慣,否則它不該成為執行這項功能的唯一路徑,應要有個主要且更顯而易見的操作方式。手勢只能當捷徑,不該取代原路。

用動畫暗示手勢

雖然手勢無聲無形,但有沒有什麼方式可以讓用戶更容易注意到它們呢?我們可以搭配動畫來提供暗示。

即便是在平面的 App 空間裡,不同元素的動畫也是有「方向性」的。換言之,從哪裡來的,就該哪裡回去。所以我們可以利用「動畫的方向」來暗示「手勢的動向」。

以 Apple 的 Music App 為例:

  • 功能:回到上一頁
  • 手勢:將頁面往下拉
  • 有方向的動畫暗示:頁面從下方往上移動出現
Apple 的 Music App (Designing Fluid Interfaces

總結

依照功能的重要性與使用頻率安排優先序次、提供介面操作的視覺提示,並使用常見且流暢手勢,你可以把 App 設計得更加平易近人。降低用戶的學習門檻,也節省他們操作時的耐心與時間。

但這些心法畢竟只是概略的方向,重要的是不斷地迭代,與用戶們進行測試、學習、優化,祈能使得 App 的操作直覺得不言而喻。


參考資料

更多來自 Melissa Hsiung
太好了!您已成功訂閱。
歡迎回來!您已成功登入。
您已成功訂閱Melissa Hsiung。
您的連結已過期。
成功!請查看您的電子郵件中是否有用於登入的連結。
成功!您的帳單資訊已更新。
您的帳單未更新。