反應與提示

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(抬頭顯示器)、動畫、聲音、震動這幾塊做更深入的探討,現在暫時就先這樣子吧。

Akane Lee

Akane Lee

幫助你快速學會 UI/UX 實用技巧,結合理論與實作,短時間內擺脫設計瓶頸,讓你每個專案都能交出滿意的成果!

Comments

wave
comments powered by Disqus

Press ESC to close