在iOS的設(shè)計(jì)規(guī)范以及Android的MD規(guī)范中躺酒,都有警告框(Alerts)這個(gè)組件惦费。筆者研究了這個(gè)組件,發(fā)現(xiàn)在兩種系統(tǒng)中煌茬,它們有以下兩個(gè)共同點(diǎn):
1. 都出現(xiàn)在頁(yè)面的中央且自帶蒙層累奈;
2. 警告框的選項(xiàng)通常是兩個(gè)贬派,且應(yīng)避免“是/否“這樣的選項(xiàng)急但,選項(xiàng)應(yīng)明確告知用戶操作的結(jié)果澎媒。
在其它方面,兩種規(guī)范都存在著各自的特點(diǎn)波桩。下面我們來一起探究一下戒努。
Google Material Design
先來說說設(shè)計(jì)師相對(duì)不熟悉的Android。MD規(guī)范對(duì)于警告框的定義是這樣神兒的:
警告框是一種緊急的打擾(提示)镐躲,以告知用戶一個(gè)發(fā)生了的情況储玫。
需要注意的是,警告框和之前提到的snackbars都是在用戶進(jìn)行操作之后出現(xiàn)的提示框萤皂,那么同樣是提示框撒穷,他們出現(xiàn)的時(shí)機(jī)有什么區(qū)別呢?警告框可以看作是操作的確認(rèn)裆熙,可以理解為操作的“最后一步”端礼,只有當(dāng)用戶點(diǎn)擊了“確認(rèn)”按鈕這個(gè)操作才算是真正完成;但snackbars是當(dāng)用戶真正操作完了之后才出現(xiàn)的提示信息入录,其信息的重要程度比警告框要低蛤奥。另外,在很多情況下僚稿,snackbars會(huì)有“撤銷”按鈕凡桥,留給用戶反悔的余地。
MD規(guī)范把警告框分成兩種:有標(biāo)題的和沒有標(biāo)題的蚀同。
MD規(guī)范認(rèn)為大多數(shù)的警告框應(yīng)該都是沒有標(biāo)題的缅刽,用一到兩句描述一個(gè)告知決定的文案。在寫這句文案時(shí)蠢络,有兩點(diǎn)需要注意:
1. 使用疑問句拷恨,例如:“刪除這個(gè)對(duì)話?”谢肾。
2. 文案與警告框中的按鈕文案要相關(guān)聯(lián)腕侄。
按鈕的文案,應(yīng)告知用戶操作的結(jié)果。盡量避免使用“是/否”這樣的文案冕杠。如下圖:
對(duì)于有標(biāo)題的警告框,MD提出凳干,“只在高風(fēng)險(xiǎn)的操作時(shí)使用(如晴裹,操作將導(dǎo)致網(wǎng)絡(luò)失去連接)”。并且救赐,用戶通過標(biāo)題和操作按鈕涧团,就應(yīng)該能明白是在做什么選擇。
對(duì)于標(biāo)題经磅,需注意以下兩點(diǎn):
1. (與無標(biāo)題的Alerts一樣)使用詢問操作的疑問句泌绣,例如,“清除USB存儲(chǔ)內(nèi)容预厌?”
2. 避免道歉或者有歧義的問句阿迈,例如,“警告轧叽!”苗沧、“你確定嗎?(Are you sure?)”
以上是MD規(guī)范中對(duì)于警告框的介紹犹芹。
iOS Human Interface Guideline
在iOS規(guī)范中崎页,對(duì)于警告框的定義是醬紫的:
警告框傳達(dá)了你的應(yīng)用或設(shè)備某種狀態(tài)的重要信息,并且常常需要用戶來進(jìn)行操作腰埂。
規(guī)范中飒焦,對(duì)警告框包含的元素做出了如下規(guī)定:標(biāo)題(必選)、描述信息(可選)屿笼、輸入框(可選)牺荠、按鈕(必選)。同時(shí)驴一,警告框的樣式都是磨砂效果的圓角白框休雌,不可更改。如下圖所示:
關(guān)于警告框的使用肝断,蘋果給出了兩個(gè)原則:
1. 盡量少使用杈曲。蘋果認(rèn)為警告框只用在重要的場(chǎng)景下驰凛,像是購(gòu)買、刪除担扑、報(bào)錯(cuò)恰响。警告框不常出現(xiàn),確保了它能夠引起用戶足夠的重視涌献。一定要確保每一個(gè)警告框都提供重要的信息和有用的操作選項(xiàng)胚宦。
2. 確保警告框在豎屏、橫屏條件下都顯示正常燕垃。
關(guān)于標(biāo)題枢劝、描述信息和按鈕這三個(gè)元素,蘋果又分別給出了指導(dǎo)原則卜壕。
標(biāo)題和描述信息
由于這兩部分都是文案您旁,所以蘋果放在一起進(jìn)行了介紹。
標(biāo)題要盡量簡(jiǎn)潔印叁,字越少越好被冒。標(biāo)題可以考慮使用疑問句或者簡(jiǎn)短的陳述句军掂。對(duì)于描述信息轮蜕,首先它不是必須的。如果一定需要描述信息蝗锥,則盡量保證描述信息盡可能短(一到兩行)跃洛。另外,在寫這些文案的時(shí)候终议,要盡量避免顯得“指責(zé)”汇竭、“審判”和“羞辱”(國(guó)內(nèi)應(yīng)該沒有哪個(gè)應(yīng)用敢出一個(gè)有羞辱意思的警告框吧,不要命了吧穴张,呵呵呵呵)细燎。因?yàn)橛脩舳贾溃婵虻某霈F(xiàn)皂甘,是來告知他們出現(xià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è)按鈕披坏,蘋果建議考慮使用上拉菜單(action sheets)。
2. 按鈕的文案建議使用能夠描述操作結(jié)果的文案盐数。避免使用“是/否”這樣的文案棒拂。(這一點(diǎn)和MD規(guī)范相同)
3. 一般來說,左邊放“取消”按鈕玫氢,右邊放用戶最可能點(diǎn)擊的按鈕帚屉。蘋果建議左邊那個(gè)表達(dá)取消操作的按鈕都叫作“取消”,不要使用別的詞(“撤銷”漾峡、“不要~~~”?? 之類)攻旦。如果想強(qiáng)調(diào)取消按鈕,可以將它加粗生逸。如果按鈕中包含毀滅性操作牢屋,如刪除,則在樣式上應(yīng)該讓按鈕文案體現(xiàn)出這個(gè)感覺槽袄。
4. Home鍵自帶取消警告框功能烙无。如果頁(yè)面上有一個(gè)警告框,此時(shí)用戶按了iPhone上的Home鍵而退出了應(yīng)用遍尺,那么用戶再次回到應(yīng)用截酷,警告框應(yīng)該消失(相當(dāng)于在按了Home鍵的時(shí)候取消了警告框)。
以上介紹了iOS和Android規(guī)范中對(duì)于警告框的規(guī)定乾戏。還是那句話迂苛,規(guī)范是最標(biāo)準(zhǔn)的情況,場(chǎng)景是千變?nèi)f化的鼓择,具體運(yùn)用的時(shí)候還是需要根據(jù)場(chǎng)景來靈活應(yīng)用三幻。這就像先掌握數(shù)學(xué)公式,之后遇到不同的題目呐能,運(yùn)用公式來靈活解題念搬。
各位如果有不同見解,歡迎留言討論催跪。