iOS 的 Alert View 與 Action Sheet 有什麼區別?

應該何時使用 Alert View,何時使用 Action Sheet?

下圖為 Alert View 對話框

下圖為 Action Sheet


經小強和 Elethom 提點,本文已於 2015-09-01 作出修改。多有錯漏,請指點和補充。

在日常使用應用的過程中,經常會遇到各種各樣的對話框( Alert View,下面簡稱 Alert),其濫用程度之嚴重,導致用戶認知疲勞和思覺失調,完全無視了 Alert 的重要性,大大降低了其效用。

左圖的 Alert 是搞笑的,不要學,右圖為 Action Sheet

1. 被混淆並濫用的 Alert

根據 Alert 的使用原則,「問題很嚴重」的時候就需要調用它來提醒用戶並引導用戶的下一步操作。


那麼問題來了:問題的嚴重程度如何判斷?誰說了算?對於產品利益方來說,任何問題都是嚴重的,為了最大可能地留住用戶,連取消關注都要彈個對話框。

反例:陌陌加好友,網易雲音樂刪除私信,印象筆記評價引導

左圖:陌陌加個好友都要用 Alert。陌陌看似為了幫助用戶完成目標任務(在陌陌加通訊錄好友),其實是為了滿足自己的業務目標——對方沒裝陌陌時,通過簡訊送達「好友邀請」來拉新。產品利益方覺得你加不到好友,問題很嚴重,簡訊騷擾反而不算是事兒;
中圖:網易雲音樂刪私除信。其實,左滑展示「刪除」按鈕是第一步,再點擊「刪除」按鈕其實已經等於二次確認了,無需再 Alert 進行 3 次確認;
右圖:Evernote 的評價引導,貌似是 Twitter 發明的,呵呵。

還有各種各樣的原因導致 Alert 被濫用:功能擁擠導致界面無法合理承載有效信息,只能靠彈窗提示用戶;搶奪用戶稀缺的注意力;產品設計師偷懶等等。

微信的舉報與選圖組件

左圖:微信的舉報功能,當提交時遇到未填項則彈窗提示。若判斷到有未填項,是否可以禁用「提交」按鈕?或者在未填欄目附近的界面上作出反饋提示?總比隨便彈個對話框要好。(新版已修正)
右圖:微信選圖組件,每次選擇達到上限時均彈窗提示,是否能直接展示 9/9 這樣的「已選數/上限數」形式,然後禁用選中按鈕。即使是為了讓老年人更好地理解,也只需要提示 1 次,即可達到教育目的。

很多情況下,其實應該用 Action Sheet,而非 Alert。最重要的判斷原則是,用戶主動發起的任務使用 Action Sheet,否則使用 Alert。


在深入了解細節之前,不妨先看看下圖,領會一下兩者的區別。

Alert 與 Action Sheet 的關係

2. Alert

Alert 作為一個佔據屏幕中央的臨時模態層,會嚴重打斷用戶的當前任務與操作,吸引用戶所有注意力。因此,Apple 嚴肅地建議:盡量避免使用。


Apple 還闡述了一個重要原則:在界面內能表達的信息,就不要使用 Alert。本人理解的另一層意思就是說,如果某些信息在界面上都表達不清晰、不完整,肯定是功能有問題,或是設計有問題,也許,兩者都有問題?這些就不是 Alert 能解決的了。


本人總結了一下,Alert 適用於以下場景。


2.1 輔助完成任務時使用 Alert

用戶在任務的某個關鍵位置,遇到他們不能解決的嚴重問題、需要進行某些抉擇,或補充某些信息才能讓任務進行下去。例如引導用戶允許使用各種系統許可權,或驗證密碼等。

FYUSE

FYUSE 登錄時識別到此郵箱尚未註冊導致無法登錄,就使用 Alert 來諮詢用戶是否需要用此郵箱直接註冊,這也是尊重用戶意願的表現。

微信與 App Store

左圖:最常見的許可權申請引導,不同意的話就無法正常使用某些功能,因此會詳細說明。
中圖、右圖:某些涉及隱私或者財產安全的任務中途,讓用戶在不脫離場景的情況下,填寫密碼驗證個人信息,然後進入相關隱私頁面。

2.2 提供某些必須引起用戶重視的信息時使用 Alert

某些情況必須引起用戶重視,例如網落連接失敗、低電量提示等無可避免的非人為因素。

(低電量提示在 iOS 9 已改為含有「低電量模式」選項的 Alert 了,iOS 9 之前只有一個「好」…無圖)

微信的網路連接失敗提示,為什麼不用 toast?因為用戶可能發送後就轉移場景或去忙別的事情,但必須讓他了解到發送失敗的原因,才能自行選擇下一步行動,toast 的短暫性質無法保證用戶能看到

3. Action Sheet

關於 Action Sheet,Apple HIG 官方定義了以下用途:


3.1 完成任務的不同方法

在同一場景下,Action Sheet 提供了可以完成任務的一系列方法,或者對某一目標提供多種操作手段。另一個優點是更加節省界面空間。

Safari 長按圖片調用 Action Sheet,可對圖片進行多種操作;微信的是常見的拍照/選圖流程

Apple Music 把 Action Sheet 玩出了花

3.2 完成高危操作時,徵求用戶的二次確認

這是很多設計師(包括我自己)都經常混淆的一個要點。當用戶的下一步操作,與當前任務的主要目標不符,或某些含有潛在風險的操作時,應該使用 Action Sheet,而非 Alert。如果需要,可以與第 1 點一樣,為用戶提供若干替代方案。

iOS 刪除相簿、聯繫人都只使用了 Action Sheet

Evernote 提供了保存草稿的替代方案,但並不是所有產品都支持草稿。

Evernote 編輯筆記時點擊取消,也只調用了 Action Sheet

2015-09-01 經 @Elethom H 指正,下面 3 個例子均為反例,正確姿勢應使用 Action Sheet

Apple Beta 的 Feedback 與微信、QQ的任務中斷確認,都是點擊「取消」後展示

總結

就像抗生素一樣,只要濫用,就會失效。引用 Apple 來結尾:

The infrequency with which alerts appear helps users take them seriously. Be sure to minimize the number of alerts your app displays and ensure that each one offers critical information and useful choices.

合理低頻地使用 Alert,用戶才會把它當作一回事。請嚴格控制應用的 Alert 數量,並確保每一個都用得其所。

—— Apple &


再補充下許可君的回答。

用Alert還是Action Sheet有一個關鍵的界定因素

iOS Human Interface Guidelines: Temporary Views

user-initiated tasks : 用戶發起的任務

如果是用戶發起的任務,用action sheet.

題中兩張圖就很容易理解

非用戶發起的

這明顯是用戶發起的


Alert
當有很重要的信息需要傳遞的時候,彈出警告框。
當系統需要自動彈出相關信息的時候,彈出警告框。

An alert gives people important information that affects their use of an app or the device.

Action Sheet

An action sheet displays a set of choices related to a task the user initiates.

當要求對用戶發起的動作確認或提供可選擇方法的時候,用action sheet。

  • Appears as the result of a user action

  • Displays two or more buttons

Use an action sheet to:

  • Provide alternative ways to complete a task. An action sheet lets you to provide a range of choices that make sense in the context of the current task, without giving these choices a permanent place in the UI.

  • Get confirmation before completing a potentially dangerous task. An action sheet prompts users to think about the potentially dangerous effects of the step they』re about to take and gives them some alternatives.

iOS Human Interface Guidelines: Temporary Views


iOS8統一了,都是controller,都是present


推薦閱讀:

你選擇使用 Apple Music 而不是 QQ 音樂、網易雲音樂、蝦米音樂等的原因是什麼?
你的 iPad 和 iPod 背面刻著什麼話?
求推薦ios塗色應用?類似秘密花園那種的?
為何 Safari 瀏覽器圖標會被設計成指南針呢?

TAG:iOS | 產品設計 | iOS應用 | 交互設計 | 用戶體驗設計 |