嫁給RD的 UI Designer

UI/UX 設計、教育訓練、課程演講

高雄-6月份 UI 設計師入門班,報名頁面

反應與提示

| Comments


在易用性原則裡,系統狀態的能見度、辨識而非記憶這兩點與「反應」有關。在操作 App 時,「反應」扮演著重要角色,它有著引導使用者至下一步的功能,幫助使用者理解目前狀況、繼續操作。在 iOS 上,常見的反應有數種:視覺、聽覺、觸覺。點擊某個按鈕,按鈕會變成被擊中凹下去的樣子,輸入正確會聽到叮叮的成功提示音,操作錯誤或失敗手機會震動並聽到嘟嘟的錯誤提示音等等。如果對於 App 的「反應」置之不理,使用者就無法知道自己操作的結果,對於自己的操作產生疑慮、逐漸失去對這個 App 的信賴度。

「反應」的形式有很多種,在不同操作模式下會有不同的反應方式。受到硬體、手持操作限制與使用者慣性,在設計反應時須留意使用者是否能看懂「反應」傳達什麼消息。

除了操作提示外,「反應」也擁有通知、說明、確認的含意在。像是密碼輸入錯誤、刪除重要檔案的再次確認等等。「反應」非必要不要打斷使用者的操作,這會讓使用者感到厭煩,因此出現時機與位置相當重要。

Popover

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

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

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

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

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



HUD(抬頭顯示器)

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

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

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

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

Alert

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

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

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

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

進度條

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

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

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

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

Status Bar

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

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

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

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

動畫

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

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

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


聲音

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

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

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

震動

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

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

以上,Popover、HUD(抬頭顯示器)、Alert、進度條、Status Bar、動畫、聲音、震動。共 8 種常見的反應與提示方式。本想拆2篇寫的,後來懶了乾脆一次發完。圖還是很舊、再不趕快放出來就不用放了。話說這拖稿的毛病實在是...以後還想把Popover、HUD(抬頭顯示器)、動畫、聲音、震動這幾塊做更深入的探討,現在暫時就先這樣子吧。

UI ux Guideline

Comments

comments powered by Disqus