如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

某日和iOS開(kāi)發(fā)聊天，說(shuō)到iOS規(guī)范里沒(méi)有安卓中的Toast形式的提示。我有點(diǎn)驚訝，仔細(xì)回憶iOS的交互規(guī)范，似乎是有。后來(lái)找來(lái)書(shū)確認(rèn)了下，竟然是沒(méi)有。遂把這個(gè)框架整理了下，在文中同時(shí)也強(qiáng)調(diào)下Android的交互規(guī)范的差異。在對(duì)比這兩個(gè)差異的同時(shí)也能更好的了解這個(gè)框架的設(shè)計(jì)思想。

描述

用戶(hù)操作后，在APP執(zhí)行操作前以模態(tài)方式讓用戶(hù)確認(rèn)操作，或在操作告知操作結(jié)果。
（ps.非模態(tài)形式反饋暫不在討論范圍）

一、構(gòu)成元素

標(biāo)題
文字
按鈕

二、使用前提

case1：會(huì)造成嚴(yán)重破壞
case2：存在誤操作可能性，并且會(huì)造成嚴(yán)重后果或不便
case3：會(huì)造成嚴(yán)重破壞，并且可撤銷(xiāo)
case4：進(jìn)一步對(duì)所做的操作進(jìn)行確定和執(zhí)行

三、表現(xiàn)形式

1.Toast

Toast.jpg

Android中的Toast是一種簡(jiǎn)易的消息提示框。
告知用戶(hù)任務(wù)狀態(tài)，操作結(jié)果，例如：發(fā)送成功，加載中，刪除成功。
Toast會(huì)在屏幕所有層的最上方。
顯示時(shí)間有限，1s+左右消失
考慮到顯示的時(shí)間，容易被用戶(hù)忽略，不適合承載過(guò)多的文字和重要信息。
這么一來(lái)，其實(shí)這個(gè)功能似乎有點(diǎn)雞肋，怪不得在iOS中建議，設(shè)計(jì)一種引人注目但又和你的 app 的樣式相協(xié)調(diào)的方式去展示信息。很多APP中也是這么做的，脈脈的刷新成功，花瓣的上傳成功。

也有的如支付寶使用的方框形式。

但要注意，Toast的出現(xiàn)與用戶(hù)的操作行為緊密相關(guān)，所以其出現(xiàn)的位置與用戶(hù)的操作最好能聯(lián)系在一起，如上圖中今日頭條下拉刷新后的提示，支付寶轉(zhuǎn)賬成功的位置。
Toast一般有簡(jiǎn)短文字或者簡(jiǎn)單易懂的圖標(biāo)，如刪除成功字樣或者簡(jiǎn)單易懂的圖標(biāo)

Android 對(duì)Toast的作用介紹是，主要用于提示系統(tǒng)消息，但實(shí)際運(yùn)用不僅限于此。
可以看到，是否把Toast融合于界面之中，其實(shí)影響的提示框架的一個(gè)特點(diǎn)，顯示層級(jí)最高，打斷用戶(hù)的其他操作，讓用戶(hù)專(zhuān)心于提示框架顯示的信息。而Toast的信息剛好踩在了這個(gè)臨界點(diǎn)上，不太重要的信息是否需要打斷用戶(hù)的操作。這個(gè)就要看各個(gè)產(chǎn)品對(duì)這個(gè)信息傳達(dá)的重要性的判斷了。

2.Snackbars

在Android出的Material Design中又提出了一個(gè)與Toast類(lèi)似的Snackbars。
Snackbar 是一種針對(duì)操作的輕量級(jí)反饋機(jī)制，通常出現(xiàn)在手機(jī)屏幕或者桌面端左下方，以浮動(dòng)彈出框的形式存在。
與Toast相同，Snackbar也會(huì)出現(xiàn)屏幕所有層的最上方，包括浮動(dòng)操作按鈕；短暫出現(xiàn)后，會(huì)主動(dòng)消失。
但Snackbar帶有一定的交互性，用戶(hù)觸摸屏幕其他地方后自動(dòng)消失，也可以在屏幕上滑動(dòng)關(guān)閉。
而且Snackbar有時(shí)候可以帶有一個(gè)操作，如撤銷(xiāo)。對(duì)于一些可能會(huì)有不好后果的操作，并且可撤銷(xiāo)，可以以Snackbars 的形式告知并提供撤銷(xiāo)按鈕。

clipboar.png

3.Alert

在用戶(hù)進(jìn)行操作后，APP執(zhí)行操作前，如果用戶(hù)的操作的結(jié)果會(huì)帶來(lái)比較嚴(yán)重的后果，如不可撤銷(xiāo)的數(shù)據(jù)刪除，金錢(qián)交易，退出登錄等。出現(xiàn)模態(tài)的提示框，包括說(shuō)明性的標(biāo)題、文字和進(jìn)一步確定按鈕（1-N）。

Alert

使用Alert時(shí)必須傳達(dá)出清楚且可操作的信息。和其他的模態(tài)提示一樣，Alert會(huì)打斷用戶(hù)的操作，要求用戶(hù)集中精力來(lái)處理其傳達(dá)的信息，并需要一次點(diǎn)擊才能結(jié)束，因此要讓用戶(hù)明確知道警告框出現(xiàn)的合理性和必要性。并且Alert的出現(xiàn)必須非常克制，這樣用戶(hù)才不會(huì)因?yàn)轭l繁的點(diǎn)擊確定而導(dǎo)致不必要的損失。所以其中每個(gè)元素的設(shè)計(jì)都要經(jīng)過(guò)細(xì)致的考慮，如下文。

3.1標(biāo)題

iOS要求標(biāo)題的文字必須簡(jiǎn)潔易懂，快速傳達(dá)當(dāng)前的情境和對(duì)應(yīng)的解決方案。
最好使用短句，偏于理解。
恰當(dāng)?shù)氖褂脴?biāo)點(diǎn)，是一個(gè)短句或一個(gè)簡(jiǎn)單但又不是問(wèn)句的句子，句末不需要句號(hào)。如果是一個(gè)問(wèn)句，句末使用問(wèn)話(huà)。
android中提示框的標(biāo)題是可選的，用于說(shuō)明提示的類(lèi)型?？梢允桥c之相關(guān)的程序名，或者是選擇后會(huì)影響到的內(nèi)容。例如：設(shè)置，音量等。

3.2文字

在iOS中推薦使用標(biāo)題，只有在標(biāo)題無(wú)法簡(jiǎn)短清晰的傳遞意思才再補(bǔ)充文字說(shuō)明。
對(duì)正文的要求與標(biāo)題類(lèi)似，一個(gè)簡(jiǎn)短、完整的句子。同時(shí)盡量讓文字足夠簡(jiǎn)短以便能在一兩行之間顯示。不要讓警告框出現(xiàn)滾動(dòng)條，這絕對(duì)不是好的體驗(yàn)。如果必須出現(xiàn)，則需要有足夠的視覺(jué)線(xiàn)索。
不需要在文字中說(shuō)明每個(gè)按鈕的意思和結(jié)果，讓按鈕本身的文本來(lái)顯示其對(duì)應(yīng)的操作和結(jié)果。
不要用長(zhǎng)句
不要用倒裝
不要用否定
不要有歧義
要提供給用戶(hù)足夠決策的信息

3.3按鈕

在iOS中推薦使用兩個(gè)按鈕的警告框，如果更多可以考慮使用下文的操作欄?！皟蓚€(gè)按鈕的Alert通常是最有用的，因?yàn)閷?duì)人們來(lái)說(shuō)在兩個(gè)按鈕之間做選擇最容易。單個(gè)按鈕的Alert就不那么有用，因?yàn)樗ǔＶ皇翘崾居脩?hù)，并沒(méi)有賦予用戶(hù)任何對(duì)當(dāng)前狀況的控制能力。包含三個(gè)或三個(gè)以上按鈕的Alert明顯比雙按鈕Alert復(fù)雜，應(yīng)該盡可能避免使用。”
在android中倒沒(méi)這個(gè)要求，android的Alert同時(shí)起到了iOS里Alert和操作欄的警告，通知和選擇作用。如果各自遵守交互規(guī)范倒是沒(méi)有太多的好壞之分。
在各個(gè)APP中最常見(jiàn)的也是2個(gè)按鈕的Alert，所以前段時(shí)間也看見(jiàn)知乎上一個(gè)帖子在討論確定和取消按鈕的左右問(wèn)題。
這里的“確定”代表的是確定執(zhí)行操作按鈕，按鈕名稱(chēng)可以刪除，繼續(xù)，退出等等。而“取消”代表的是放棄這個(gè)操作，比如不保存，取消退出等。
在iOS中，明確這兩個(gè)之后再考慮一個(gè)前提，確定操作如果誤點(diǎn)不會(huì)帶來(lái)比較嚴(yán)重的后果，而且是用戶(hù)比較有可能的操作，那應(yīng)該放在右邊，同時(shí)可以柔和的顏色提示按鈕的安全性；取消按鈕則放在左側(cè)。
如果確定按鈕誤點(diǎn)會(huì)帶來(lái)比較嚴(yán)重的后果，且是用戶(hù)比較有可能的操作，那比較適合放在左側(cè)，并且可以用醒目的顏色（紅）作為警示。
如果取消按鈕誤點(diǎn)會(huì)帶來(lái)比較嚴(yán)重的后果，且不是用戶(hù)比較有可能的操作，那適合放在左側(cè)。
如果沒(méi)有按鈕誤點(diǎn)會(huì)帶來(lái)比較嚴(yán)重的后果，那。。。就不要用Alert~

另外，Alert中的按鈕要與其上的文本對(duì)應(yīng)，不要用爛大街的確定，取消，要用明確告知操作后果的文字，如保存，刪除，轉(zhuǎn)賬等。用戶(hù)已經(jīng)養(yǎng)成了看見(jiàn)確定就點(diǎn)確定的習(xí)慣，所以要用明確的動(dòng)作來(lái)提示。
在android中比較簡(jiǎn)單，確定類(lèi)事件都放在右側(cè)，取消類(lèi)事件就放在左側(cè)。個(gè)人比較喜歡iOS的設(shè)計(jì)規(guī)范，更人性化一點(diǎn)，產(chǎn)品人員考慮的更多一點(diǎn)，用戶(hù)就可以少考慮一點(diǎn)。
在android中Alert還起到選擇的作用，所以多個(gè)選擇的情況剛常見(jiàn)，這時(shí)候起到的有點(diǎn)類(lèi)似iOS的操作欄，進(jìn)一步確定和選擇所要的操作。

4.操作欄

在iOS中，用戶(hù)操作后，需要進(jìn)行確認(rèn)和操作的按鈕大于3個(gè)，會(huì)推薦使用操作欄的形式。
不帶標(biāo)題，可能有文字介紹，具體要求與Alert文字類(lèi)似。
顯示兩個(gè)或兩個(gè)以上的按鈕。
使用紅色和靠近操作列表頂部來(lái)提醒用戶(hù)注意那些執(zhí)行潛在破壞性操作的按鈕。
取消按鈕放在最下的位置并與其他按鈕做一定的區(qū)分。

操作欄

如果選擇按鈕太多，可以參考下圖的形式組織按鈕和滾動(dòng)顯示，但要留有足夠的視覺(jué)線(xiàn)索。

微信

四、位置：

可以發(fā)現(xiàn)，操作欄的位置一般是從頁(yè)面底部跳出，然后停留在頁(yè)面底部的地方；而Alert一般是出現(xiàn)頁(yè)面的中間；
Toast則比較多變，和用戶(hù)前置操作的位置，信息的重要性，Toast的形態(tài)相關(guān)。
主要有頂部；內(nèi)容區(qū)上方，導(dǎo)航下方（如下拉刷新）；頁(yè)面中間（整體性，比較重要的信息提示）；頁(yè)面下方，菜單欄上方（最常見(jiàn)）；頁(yè)面底部；與操作按鈕融合等。這么一算，就沒(méi)不能放的地方。除了一個(gè)點(diǎn)，不要在模態(tài)的界面上再出現(xiàn)一個(gè)模態(tài)框架，這樣會(huì)導(dǎo)致層級(jí)的復(fù)雜化和提示框任務(wù)的簡(jiǎn)單明確。

五、注意：

要注意隨時(shí)提供一個(gè)明顯而安全的退出模態(tài)框架的方式，這種方式一般是等同于點(diǎn)擊“取消”，如點(diǎn)擊空白區(qū)域，安卓的虛擬鍵等。
提示框架如非必要不要出現(xiàn)，尤其Alert形式，出現(xiàn)得少會(huì)有助于用戶(hù)對(duì)其認(rèn)真對(duì)待。
回想下自己在pc端刪除東西時(shí)點(diǎn)擊確認(rèn)的毫不猶豫，就要相信用戶(hù)在警告框出現(xiàn)的時(shí)候的點(diǎn)擊“確認(rèn)”更多的是下意識(shí)的，所以注意不要完全寄希望與提示框架。要靠比用戶(hù)想的更多更完善來(lái)避免提示框架的出現(xiàn)。

作者：靜默之思

原文鏈接：http://www.jianshu.com/p/7f9be62c9ead#

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)