App設計中,反應與提示真的不重要嗎?

  • UI 設計
  • 更新:2025-02-07
  • 初版:2013-12-09

每次看到 App 沒有任何反應或提示,我都想問:「這是要我猜嗎?」
設計中,適當的反應與提示,能讓使用者操作更順暢,體驗更佳。

8.jpg
在易用性原則裡,系統狀態的能見度、辨識而非記憶這兩點與「反應」有關。

在操作 App 時,「反應」扮演著重要角色,它有著引導使用者至下一步的功能,幫助使用者理解目前狀況、繼續操作。

在 iOS 上,常見的反應有數種:視覺、聽覺、觸覺。

點擊某個按鈕,按鈕會變成被擊中凹下去的樣子,輸入正確會聽到叮叮的成功提示音,操作錯誤或失敗手機會震動並聽到嘟嘟的錯誤提示音等等。

如果對於 App 的「反應」置之不理,使用者就無法知道自己操作的結果,對於自己的操作產生疑慮、逐漸失去對這個 App 的信賴度。

「反應」的形式有很多種,在不同操作模式下會有不同的反應方式。

受到硬體、手持操作限制與使用者慣性,在設計反應時須留意使用者是否能看懂「反應」傳達什麼消息。

除了操作提示外,「反應」也擁有通知、說明、確認的含意在。

像是密碼輸入錯誤、刪除重要檔案的再次確認等等。

「反應」非必要不要打斷使用者的操作,這會讓使用者感到厭煩,因此出現時機與位置相當重要。

Popover

可放置文字、按鈕、列表,幾乎所有元件都可用 Popover 呈現。在 iPad 上則有內建元件可以運用,若要使用在 iPhone 上則須自行客製。

可運用使用教學或是提示操作的說明上(Grid Lens)。
1.jpg

強調某個功能或是引導使用者操作時(Facebook)。
3.jpg

某個按鈕群的延伸功能(PS Express)。
2.jpg

在 iPad 上出現的 Popover,有可能會是按鈕、列表或是延伸功能(Safari、App Store、iBooks )。
4.jpg
6.jpg
5.jpg

HUD(抬頭顯示器)

為了提示一些狀態的改變、使用者即使沒看到也不影響操作的訊息。以任何方式擋在原始頁面中央處、過段時間就消失的文字、圖片,皆可稱為 HUD。因 HUD 過段時間就會自動消失,所以在出現時畫面通常不會讓使用者進行操作。

按下 iPhone 側邊的音量按鈕,畫面出現狀態(音量)。
7.jpg

照片處理中的提示訊息,此時畫面無法被操作(PS Express)。
8.jpg

正在讀取資料的提示畫面(App Store)。
9.jpg

Alert

Alert 和 HUD 不同,Alert 用於要需要使用者操作的場合,一定要選擇或點選才能進行下一步。

Alert,針對 Apple ID 有數種可操作的方式(Apple Store)。
10.jpg

根據 Apple 規定,當 App 裡有使用推播功能時,需跳出提示訊息讓使用者決定是否開放權限(Petapic)。
11.jpg

輸入錯誤時跳出的 Alert,說明為什麼出現錯誤及使用者該如何處理(Gmail)。
12.jpg

進度條

不管在電腦介面、網頁或是手機上都十分常見,主要在告知使用這目前運行進度與狀況,可運用各種型式的進度條,或直接使用數字表示。

顯示照片下載進度,結合 Alert 讓使用者隨時可中止下載(Dropbox)。
13.jpg

將進度條放在 icon 上,提示目前下載進度(App Store)。
14.jpg

直接用數字百分比顯示目前同步情況(Awsome Note)。
15.jpg

Status Bar

有物件在背景運作時,StatusBar 會轉變成另一種形式,此為系統提示功能,無法客製化。常見如電話、網路分享、錄音、Facetime。

顯示錄音中的狀態(語音備忘錄)。
16.jpg

iPhone 3G 網路分享給 iPad 使用時(個人熱點)。
17.jpg

通話時將電話縮小在背景模式中(電話)。
18.jpg

動畫

提示使用者下一步的操作、目前的頁面是怎麼進入、目前操作的狀態等等。

刪除相片,可以看到照片縮小飛進右下角的垃圾筒中(相機膠捲)。
19.jpg

採用小怪物咀嚼的簡單動畫(左下角)提示使用者照片處理中,稍候可點擊此處進入瀏覽(Grid Lens)。
20.jpg
21.jpg

聲音

提示音,對應某個操作發出的音效。如螢幕解鎖、螢幕上鎖、相機快門聲等。

手指滑動解鎖,會發出解鎖音效(上鎖畫面)。
22.jpg

在 iPhone 設定裡可以自行訂定各種不同情況下的提示音效。
23.jpg

震動

在靜音模式下無法使用聲音提示使用者時即會轉變成震動提示,如 iPhone 側邊的靜音模式切換扭,當使用者切換到靜音模式時 iPhone 會震動,提示使用者已切換成功。

在 iPhone 設定裡可以設定震動啟用方式。
24.jpg

以上,Popover、HUD(抬頭顯示器)、Alert、進度條、Status Bar、動畫、聲音、震動。

共 8 種常見的反應與提示方式。

本想拆2篇寫的,後來懶了乾脆一次發完。

圖還是很舊、再不趕快放出來就不用放了。

話說這拖稿的毛病實在是…以後還想把Popover、HUD(抬頭顯示器)、動畫、聲音、震動這幾塊做更深入的探討,現在暫時就先這樣子吧。

不知道設計卡在哪?

👉 第一次來?從這裡開始

下面這些文章,從不同角度整理那些容易被忽略的地方

wave
推播通知越多越好?這樣設計反而更有效
推播通知越多越好?這樣設計反而更有效

「叮咚!」深夜收到促銷通知,氣到直接刪 App?
推播訊息設計不好,真的會讓使用者崩潰!
到底怎樣的通知才不討人厭,還能提升互動?

拆解 UI:EZ WAY 易利委-1-Tab Bars
拆解 UI:EZ WAY 易利委-1-Tab Bars

不曉得大家有沒有注意到,因為全球受到疫情的影響,很多實體店面都關閉只靠線上商店獲利。

非常多人失業,購買能力下降,銷售狀況更是雪上加霜。我自己習慣購買的幾個品牌甚至給出了 70% off 這種折扣。(然後我就買買買了。)

購買國外的商品進到台灣,必需先過海關,需要使用EZ WAY 易利委這款 App 報關,但當我打開 App,就像是開啟一場莫名奇妙之旅…

從 Yep! 中學習 Animation

又是看了某篇文章,然後有感而發寫了分析筆記。UI 和資訊業一樣瞬息萬變,眨眼就從擬物風進化到扁平+動態特效,總覺得自己追的挺辛苦的。推薦設計師們都訂一下 Medium 的 RSS,常常有好文章可以讀,英文跟我一樣破爛可以靠 Google 的整頁翻譯(遮臉)。感謝優設網的 子木 常翻譯好文章(有時候我也會扔英文文章壓搾他)。

工作清單:切圖

切圖有很多種方法,但切出來的圖只會有兩種:1.可以用。2.被退件。圖切出來會交給 F2E 或 RD 接手,請給他們能夠使用的圖方便作業。有不懂、不確定的部份請在切圖之前就先問過他們要怎麼處理,他們肯定會回答你。(不回答就是他們有很大的機率拿到爛圖拖長自己工時,誰敢不理你啊?)

Akane Lee

Akane Lee

我是 Akane Lee,10 年 UI/UX 設計教學,帶過 1000+ 學員擺脫焦慮,找出人生方向。不只聊設計,也教你怎麼少繞遠路,摔坑也知道怎麼自己爬起來。

Comments

wave
comments powered by Disqus

Press ESC to close