規(guī)范是最標(biāo)準(zhǔn)的情況，場(chǎng)景是千變?nèi)f化的，具體運(yùn)用的時(shí)候還是需要根據(jù)場(chǎng)景來(lái)靈活應(yīng)用。

在iOS的設(shè)計(jì)規(guī)范以及Android的MD規(guī)范中，都有警告框（Alerts）這個(gè)組件。筆者研究了這個(gè)組件，發(fā)現(xiàn)在兩種系統(tǒng)中，它們有以下兩個(gè)共同點(diǎn)：

1.都出現(xiàn)在頁(yè)面的中央且自帶蒙層；

iOS和Android警告框

2.警告框的選項(xiàng)通常是兩個(gè)，且應(yīng)避免“是/否“這樣的選項(xiàng)，選項(xiàng)應(yīng)明確告知用戶(hù)操作的結(jié)果。

在其它方面，兩種規(guī)范都存在著各自的特點(diǎn)。下面我們來(lái)一起探究一下。

Google Material Design

先來(lái)說(shuō)說(shuō)設(shè)計(jì)師相對(duì)不熟悉的Android。MD規(guī)范對(duì)于警告框的定義是這樣神兒的：

警告框是一種緊急的打擾（提示），以告知用戶(hù)一個(gè)發(fā)生了的情況。

需要注意的是，警告框和之前提到的snackbars都是在用戶(hù)進(jìn)行操作之后出現(xiàn)的提示框，那么同樣是提示框，他們出現(xiàn)的時(shí)機(jī)有什么區(qū)別呢？警告框可以看作是操作的確認(rèn)，可以理解為操作的“最后一步”，只有當(dāng)用戶(hù)點(diǎn)擊了“確認(rèn)”按鈕這個(gè)操作才算是真正完成；但snackbars是當(dāng)用戶(hù)真正操作完了之后才出現(xiàn)的提示信息，其信息的重要程度比警告框要低。另外，在很多情況下，snackbars會(huì)有“撤銷(xiāo)”按鈕，留給用戶(hù)反悔的余地。

MD規(guī)范把警告框分成兩種：有標(biāo)題的和沒(méi)有標(biāo)題的。

MD規(guī)范認(rèn)為大多數(shù)的警告框應(yīng)該都是沒(méi)有標(biāo)題的，用一到兩句描述一個(gè)告知決定的文案。在寫(xiě)這句文案時(shí)，有兩點(diǎn)需要注意：

1. 使用疑問(wèn)句，例如：“刪除這個(gè)對(duì)話(huà)？”
2. 文案與警告框中的按鈕文案要相關(guān)聯(lián)

按鈕的文案，應(yīng)告知用戶(hù)操作的結(jié)果。盡量避免使用“是/否”這樣的文案。如下圖：

左邊的警告框，按鈕文案“刪除”明確地告知了操作的結(jié)果；右邊的按鈕文案，回答了上面“刪除草稿嗎？”這個(gè)問(wèn)題，但是沒(méi)有告知操作的結(jié)果（其實(shí)也就是告知的不直接），所以不被建議使用。

對(duì)于有標(biāo)題的警告框，MD提出，“只在高風(fēng)險(xiǎn)的操作時(shí)使用（如，操作將導(dǎo)致網(wǎng)絡(luò)失去連接）”。并且，用戶(hù)通過(guò)標(biāo)題和操作按鈕，就應(yīng)該能明白是在做什么選擇。

對(duì)于標(biāo)題，需注意以下兩點(diǎn)：

1. （與無(wú)標(biāo)題的Alerts一樣）使用詢(xún)問(wèn)操作的疑問(wèn)句，例如，“清除USB存儲(chǔ)內(nèi)容？”
2. 避免道歉或者有歧義的問(wèn)句，例如，“警告！”、“你確定嗎？（Are you sure?）”

有標(biāo)題的警告框

以上是MD規(guī)范中對(duì)于警告框的介紹。

iOS Human Interface Guideline

在iOS規(guī)范中，對(duì)于警告框的定義是醬紫的：

警告框傳達(dá)了你的應(yīng)用或設(shè)備某種狀態(tài)的重要信息，并且常常需要用戶(hù)來(lái)進(jìn)行操作。

規(guī)范中，對(duì)警告框包含的元素做出了如下規(guī)定：標(biāo)題（必選）、描述信息（可選）、輸入框（可選）、按鈕（必選）。同時(shí)，警告框的樣式都是磨砂效果的圓角白框，不可更改。如下圖所示：

幾種警告框

關(guān)于警告框的使用，蘋(píng)果給出了兩個(gè)原則：

1. 盡量少使用。蘋(píng)果認(rèn)為警告框只用在重要的場(chǎng)景下，像是購(gòu)買(mǎi)、刪除、報(bào)錯(cuò)。警告框不常出現(xiàn)，確保了它能夠引起用戶(hù)足夠的重視。一定要確保每一個(gè)警告框都提供重要的信息和有用的操作選項(xiàng)。
2. 確保警告框在豎屏、橫屏條件下都顯示正常。

關(guān)于iOS警告框中的標(biāo)題、描述信息和按鈕這三個(gè)元素，蘋(píng)果又分別給出了指導(dǎo)原則。

標(biāo)題和描述信息

由于這兩部分都是文案，所以蘋(píng)果放在一起進(jìn)行了介紹。

標(biāo)題要盡量簡(jiǎn)潔，字越少越好。標(biāo)題可以考慮使用疑問(wèn)句或者簡(jiǎn)短的陳述句。對(duì)于描述信息，首先它不是必須的。如果一定需要描述信息，則盡量保證描述信息盡可能短（一到兩行）。

另外，在寫(xiě)這些文案的時(shí)候，要盡量避免顯得“指責(zé)”、“審判”和“羞辱”（國(guó)內(nèi)應(yīng)該沒(méi)有哪個(gè)應(yīng)用敢出一個(gè)有羞辱意思的警告框吧，不要命了吧，呵呵呵呵）。因?yàn)橛脩?hù)都知道，警告框的出現(xiàn)，是來(lái)告知他們出現(xiàn)了問(wèn)題或者比較危險(xiǎn)的情況的，所以文案要明確地告知這些信息。It’s better to be negative and direct than positive and oblique（傳達(dá)壞消息但文案直截了當(dāng)也比傳達(dá)好消息但文案表意模糊要更好一些）。最后，盡量避免使用“你”、“你的”、“我”、“我的”這樣的文案，有時(shí)候它們會(huì)被理解為帶有羞辱意味或者高傲的。

按鈕

對(duì)于按鈕的設(shè)計(jì)，有以下幾點(diǎn)需要注意：

1. 通常情況下，使用兩個(gè)按鈕。只有一個(gè)按鈕的警告框通常用于告知（重要信息）。如果需要三個(gè)按鈕，蘋(píng)果建議考慮使用上拉菜單（action sheets）。
2. 按鈕的文案建議使用能夠描述操作結(jié)果的文案。避免使用“是/否”這樣的文案。（這一點(diǎn)和MD規(guī)范相同）
3. 一般來(lái)說(shuō)，左邊放“取消”按鈕，右邊放用戶(hù)最可能點(diǎn)擊的按鈕。蘋(píng)果建議左邊那個(gè)表達(dá)取消操作的按鈕都叫作“取消”，不要使用別的詞（“撤銷(xiāo)”、“不要~~~”? 之類(lèi)）。如果想強(qiáng)調(diào)取消按鈕，可以將它加粗。如果按鈕中包含毀滅性操作，如刪除，則在樣式上應(yīng)該讓按鈕文案體現(xiàn)出這個(gè)感覺(jué)。
4. Home鍵自帶取消警告框功能。如果頁(yè)面上有一個(gè)警告框，此時(shí)用戶(hù)按了iPhone上的Home鍵而退出了應(yīng)用，那么用戶(hù)再次回到應(yīng)用，警告框應(yīng)該消失（相當(dāng)于在按了Home鍵的時(shí)候取消了警告框）。

以上介紹了iOS和Android規(guī)范中對(duì)于警告框的規(guī)定。還是那句話(huà)，規(guī)范是最標(biāo)準(zhǔn)的情況，場(chǎng)景是千變?nèi)f化的，具體運(yùn)用的時(shí)候還是需要根據(jù)場(chǎng)景來(lái)靈活應(yīng)用。這就像先掌握數(shù)學(xué)公式，之后遇到不同的題目，運(yùn)用公式來(lái)靈活解題。

歡迎大家留言討論，共同提高，在討論中獲得人生的升華。

相關(guān)閱讀：

iOS和Android規(guī)范解析：提示框（Toast）對(duì)比

#專(zhuān)欄作家#

沐風(fēng)，微信公眾號(hào)：“沐風(fēng)與體驗(yàn)設(shè)計(jì)”。人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家，2017年度作家評(píng)選最佳人氣獎(jiǎng)。愛(ài)奇藝Phone和PC端交互團(tuán)隊(duì)負(fù)責(zé)人。留德海龜，曾任職騰訊微生活、網(wǎng)易、宜信。6年交互設(shè)計(jì)經(jīng)驗(yàn)，專(zhuān)注設(shè)計(jì)領(lǐng)域，歡迎關(guān)注。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議。