iOS和Android規范解析——警告框(Alerts)對比

在iOS的設計規范以及Android的MD規范中,都有警告框(Alerts)這個組件。筆者研究了這個組件,發現在兩種系統中,它們有以下兩個共同點:

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

iOS和Android警告框

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

在其它方面,兩種規范都存在著各自的特點。下面我們來一起探究一下。

Google Material Design

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

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

需要注意的是,警告框和之前提到的snackbars都是在用戶進行操作之后出現的提示框,那么同樣是提示框,他們出現的時機有什么區別呢?警告框可以看作是操作的確認,可以理解為操作的“最后一步”,只有當用戶點擊了“確認”按鈕這個操作才算是真正完成;但snackbars是當用戶真正操作完了之后才出現的提示信息,其信息的重要程度比警告框要低。另外,在很多情況下,snackbars會有“撤銷”按鈕,留給用戶反悔的余地。

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

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

1. 使用疑問句,例如:“刪除這個對話?”。

2. 文案與警告框中的按鈕文案要相關聯。

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

左邊的警告框,按鈕文案“刪除”明確地告知了操作的結果;右邊的按鈕文案,回答了上面“刪除草稿嗎?”這個問題,但是沒有告知操作的結果(其實也就是告知的不直接),所以不被建議使用。

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

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

1. (與無標題的Alerts一樣)使用詢問操作的疑問句,例如,“清除USB存儲內容?”

2. 避免道歉或者有歧義的問句,例如,“警告!”、“你確定嗎?(Are you sure?)”

有標題的警告框

以上是MD規范中對于警告框的介紹。

iOS Human Interface Guideline

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

警告框傳達了你的應用或設備某種狀態的重要信息,并且常常需要用戶來進行操作。

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

幾種警告框

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

1. 盡量少使用。蘋果認為警告框只用在重要的場景下,像是購買、刪除、報錯。警告框不常出現,確保了它能夠引起用戶足夠的重視。一定要確保每一個警告框都提供重要的信息和有用的操作選項。

2. 確保警告框在豎屏、橫屏條件下都顯示正常。

關于標題、描述信息和按鈕這三個元素,蘋果又分別給出了指導原則。

標題和描述信息

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

標題要盡量簡潔,字越少越好。標題可以考慮使用疑問句或者簡短的陳述句。對于描述信息,首先它不是必須的。如果一定需要描述信息,則盡量保證描述信息盡可能短(一到兩行)。另外,在寫這些文案的時候,要盡量避免顯得“指責”、“審判”和“羞辱”(國內應該沒有哪個應用敢出一個有羞辱意思的警告框吧,不要命了吧,呵呵呵呵)。因為用戶都知道,警告框的出現,是來告知他們出現了問題或者比較危險的情況的,所以文案要明確地告知這些信息。It’s better to be negative and direct than positive and oblique(傳達壞消息但文案直截了當也比傳達好消息但文案表意模糊要更好一些)。最后,盡量避免使用“你”、“你的”、“我”、“我的”這樣的文案,有時候它們會被理解為帶有羞辱意味或者高傲的。

按鈕

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

1. 通常情況下,使用兩個按鈕。只有一個按鈕的警告框通常用于告知(重要信息)。如果需要三個按鈕,蘋果建議考慮使用上拉菜單(action sheets)。

2. 按鈕的文案建議使用能夠描述操作結果的文案。避免使用“是/否”這樣的文案。(這一點和MD規范相同)

3. 一般來說,左邊放“取消”按鈕,右邊放用戶最可能點擊的按鈕。蘋果建議左邊那個表達取消操作的按鈕都叫作“取消”,不要使用別的詞(“撤銷”、“不要~~~”?? 之類)。如果想強調取消按鈕,可以將它加粗。如果按鈕中包含毀滅性操作,如刪除,則在樣式上應該讓按鈕文案體現出這個感覺。

4. Home鍵自帶取消警告框功能。如果頁面上有一個警告框,此時用戶按了iPhone上的Home鍵而退出了應用,那么用戶再次回到應用,警告框應該消失(相當于在按了Home鍵的時候取消了警告框)。

以上介紹了iOS和Android規范中對于警告框的規定。還是那句話,規范是最標準的情況,場景是千變萬化的,具體運用的時候還是需要根據場景來靈活應用。這就像先掌握數學公式,之后遇到不同的題目,運用公式來靈活解題。

各位如果有不同見解,歡迎留言討論。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,791評論 6 545
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,795評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,943評論 0 384
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 64,057評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,773評論 6 414
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,106評論 1 330
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,082評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,282評論 0 291
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,793評論 1 338
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,507評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,741評論 1 375
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,220評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,929評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,325評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,661評論 1 296
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,482評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,702評論 2 380

推薦閱讀更多精彩內容