華文網

iOS和Android規範解析:警告框(Alerts)

在iOS的設計規範以及Android的MD規範中,都有警告框(Alerts)這個元件。

筆者研究了這個元件,發現在兩種系統中,它們有以下兩個共同點:

1.都出現在頁面的中央且自帶蒙層;

iOS和Android警告框

2.警告框的選項通常是兩個,且應避免“是/否“這樣的選項,選項應明確告知使用者操作的結果。

在其它方面,兩種規範都存在著各自的特點。

下面我們來一起探究一下。

Google Material Design

先來說說設計師相對不熟悉的Android。MD規範對於警告框的定義是這樣神兒的:

警告框是一種緊急的打擾(提示),以告知使用者一個發生了的情況。

需要注意的是,警告框和之前提到的snackbars都是在用戶進行操作之後出現的提示框,那麼同樣是提示框,他們出現的時機有什麼區別呢?警告框可以看作是操作的確認,可以理解為操作的“最後一步”,只有當用戶點擊了“確認”按鈕這個操作才算是真正完成;但snackbars是當用戶真正操作完了之後才出現的提示資訊,

其資訊的重要程度比警告框要低。另外,在很多情況下,snackbars會有“撤銷”按鈕,留給使用者反悔的餘地。

MD規範把警告框分成兩種:有標題的和沒有標題的。

MD規範認為大多數的警告框應該都是沒有標題的,用一到兩句描述一個告知決定的文案。在寫這句文案時,有兩點需要注意:

使用疑問句,
例如:“刪除這個對話?”文案與警告框中的按鈕文案要相關聯

按鈕的文案,應告知用戶操作的結果。儘量避免使用“是/否”這樣的文案。如下圖:

左邊的警告框,按鈕文案“刪除”明確地告知了操作的結果;右邊的按鈕文案,回答了上面“刪除草稿嗎?”這個問題,

但是沒有告知操作的結果(其實也就是告知的不直接),所以不被建議使用。

對於有標題的警告框,MD提出,“只在高風險的操作時使用(如,操作將導致網路失去連接)”。並且,使用者通過標題和操作按鈕,就應該能明白是在做什麼選擇。

對於標題,需注意以下兩點:

(與無標題的Alerts一樣)使用詢問操作的疑問句,例如,“清除USB存儲內容?”避免道歉或者有歧義的問句,例如,“警告!”、“你確定嗎?(Are you sure?)”

有標題的警告框

以上是MD規範中對於警告框的介紹。

iOS Human Interface Guideline

在iOS規範中,對於警告框的定義是醬紫的:

警告框傳達了你的應用或設備某種狀態的重要資訊,並且常常需要使用者來進行操作。

規範中,對警告框包含的元素做出了如下規定:標題(必選)、描述資訊(可選)、輸入框(可選)、按鈕(必選)。同時,警告框的樣式都是磨砂效果的圓角白框,不可更改。如下圖所示:

幾種警告框

關於警告框的使用,蘋果給出了兩個原則:

儘量少使用。蘋果認為警告框只用在重要的場景下,像是購買、刪除、報錯。警告框不常出現,確保了它能夠引起用戶足夠的重視。一定要確保每一個警告框都提供重要的資訊和有用的操作選項。確保警告框在豎屏、橫屏條件下都顯示正常。

關於iOS警告框中的標題、描述資訊和按鈕這三個元素,蘋果又分別給出了指導原則。

標題和描述資訊

由於這兩部分都是文案,所以蘋果放在一起進行了介紹。

標題要儘量簡潔,字越少越好。標題可以考慮使用疑問句或者簡短的陳述句。對於描述資訊,首先它不是必須的。如果一定需要描述資訊,則儘量保證描述資訊盡可能短(一到兩行)。

另外,在寫這些文案的時候,要儘量避免顯得“指責”、“審判”和“羞辱”(國內應該沒有哪個應用敢出一個有羞辱意思的警告框吧,不要命了吧,呵呵呵呵)。因為用戶都知道,警告框的出現,是來告知他們出現了問題或者比較危險的情況的,所以文案要明確地告知這些資訊。It’s better to be negative and direct than positive and oblique(傳達壞消息但文案直截了當也比傳達好消息但文案表意模糊要更好一些)。最後,儘量避免使用“你”、“你的”、“我”、“我的”這樣的文案,有時候它們會被理解為帶有羞辱意味或者高傲的。

按鈕

對於按鈕的設計,有以下幾點需要注意:

通常情況下,使用兩個按鈕。只有一個按鈕的警告框通常用於告知(重要資訊)。如果需要三個按鈕,蘋果建議考慮使用上拉功能表(action sheets)。按鈕的文案建議使用能夠描述操作結果的文案。避免使用“是/否”這樣的文案。(這一點和MD規範相同)一般來說,左邊放“取消”按鈕,右邊放使用者最可能點擊的按鈕。蘋果建議左邊那個表達取消操作的按鈕都叫作“取消”,不要使用別的詞(“撤銷”、“不要~~~”同時,警告框的樣式都是磨砂效果的圓角白框,不可更改。如下圖所示:

幾種警告框

關於警告框的使用,蘋果給出了兩個原則:

儘量少使用。蘋果認為警告框只用在重要的場景下,像是購買、刪除、報錯。警告框不常出現,確保了它能夠引起用戶足夠的重視。一定要確保每一個警告框都提供重要的資訊和有用的操作選項。確保警告框在豎屏、橫屏條件下都顯示正常。

關於iOS警告框中的標題、描述資訊和按鈕這三個元素,蘋果又分別給出了指導原則。

標題和描述資訊

由於這兩部分都是文案,所以蘋果放在一起進行了介紹。

標題要儘量簡潔,字越少越好。標題可以考慮使用疑問句或者簡短的陳述句。對於描述資訊,首先它不是必須的。如果一定需要描述資訊,則儘量保證描述資訊盡可能短(一到兩行)。

另外,在寫這些文案的時候,要儘量避免顯得“指責”、“審判”和“羞辱”(國內應該沒有哪個應用敢出一個有羞辱意思的警告框吧,不要命了吧,呵呵呵呵)。因為用戶都知道,警告框的出現,是來告知他們出現了問題或者比較危險的情況的,所以文案要明確地告知這些資訊。It’s better to be negative and direct than positive and oblique(傳達壞消息但文案直截了當也比傳達好消息但文案表意模糊要更好一些)。最後,儘量避免使用“你”、“你的”、“我”、“我的”這樣的文案,有時候它們會被理解為帶有羞辱意味或者高傲的。

按鈕

對於按鈕的設計,有以下幾點需要注意:

通常情況下,使用兩個按鈕。只有一個按鈕的警告框通常用於告知(重要資訊)。如果需要三個按鈕,蘋果建議考慮使用上拉功能表(action sheets)。按鈕的文案建議使用能夠描述操作結果的文案。避免使用“是/否”這樣的文案。(這一點和MD規範相同)一般來說,左邊放“取消”按鈕,右邊放使用者最可能點擊的按鈕。蘋果建議左邊那個表達取消操作的按鈕都叫作“取消”,不要使用別的詞(“撤銷”、“不要~~~”