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規范相同)
- 一般來說,左邊放“取消”按鈕,右邊放用戶最可能點擊的按鈕。蘋果建議左邊那個表達取消操作的按鈕都叫作“取消”,不要使用別的詞(“撤銷”、“不要~~~”? 之類)。如果想強調取消按鈕,可以將它加粗。如果按鈕中包含毀滅性操作,如刪除,則在樣式上應該讓按鈕文案體現出這個感覺。
- Home鍵自帶取消警告框功能。如果頁面上有一個警告框,此時用戶按了iPhone上的Home鍵而退出了應用,那么用戶再次回到應用,警告框應該消失(相當于在按了Home鍵的時候取消了警告框)。
以上介紹了iOS和Android規范中對于警告框的規定。還是那句話,規范是最標準的情況,場景是千變萬化的,具體運用的時候還是需要根據場景來靈活應用。這就像先掌握數學公式,之后遇到不同的題目,運用公式來靈活解題。
歡迎大家留言討論,共同提高,在討論中獲得人生的升華。
相關閱讀:
#專欄作家#
沐風,微信公眾號:“沐風與體驗設計”。人人都是產品經理專欄作家,2017年度作家評選最佳人氣獎。愛奇藝Phone和PC端交互團隊負責人。留德海龜,曾任職騰訊微生活、網易、宜信。6年交互設計經驗,專注設計領域,歡迎關注。
本文原創發布于人人都是產品經理。未經許可,禁止轉載。
題圖來自 Unsplash,基于CC0協議。
專欄作家
沐風,微信公眾號:沐風與體驗設計。人人都是產品經理專欄作家,2017年度作家評選最佳人氣獎。愛奇藝資深交互設計師。留德海龜,曾任職騰訊微生活、網易、宜人貸。6年交互設計經驗,專注設計領域,歡迎關注。
本文原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
這篇文章提到的“snackbars會有“撤銷”按鈕,留給用戶反悔的余地。”和上一篇文章提到的“注意,snackbar不能包含使其消失的“取消”按鈕!”有沖突。
這里不沖突的。解釋一下:這篇文章的“撤銷”,是撤銷某個動作,類似于Windows的ctrl+z。上一篇的“取消”按鈕,是指讓snackbar自己消失的取消按鈕。所以兩者是不同的。
解釋完了我也沒有理解,是不是我太笨了 ?? ;不過還是感謝
0202了我還在看17年的文章hhh,只是雖然更新但是邏輯相同~
snackbars的使用場景是,用戶完成某個操作后,出現提示。
此時【撤銷】的含義是 取消之前完成的操作,可能涉及到內容的狀態等的變更;【取消】是不影響之前的操作,而是讓snackbars提示框消失,這個與設定時間自動消失的邏輯沖突,所以不能【取消】,但可以【撤銷】
只有我覺得,警告框,放是否比說結果好嗎,進入到這個界面,就已經有結果了,刪除>刪除嗎>刪除。。。。or刪除>刪除嗎>是的
我覺得按鈕上放“刪除”比“是”,要更直接一些。因為刪除就直接說要干啥,是的話還要再想一下,“是刪除”。
關鍵還是在于標題和描述信息是怎么表達的 不過我覺得盡量還是以“是否”為選項的基礎上去編寫標題和描述信息 這樣用戶在選擇的時候可以更流暢的做出判斷
有些警告框的提示內容是負向性的,直接表達結果比用“是”“否”更容易理解