從今天起叠艳,我們開始介紹iOS和Android設(shè)計(jì)規(guī)范中的各種控件。掌握它們怯屉,能有效地幫你你設(shè)計(jì)出一個(gè)高質(zhì)量的交互稿蔚舀。今天我們要介紹的是提示框,英文是toast锨络。
交互設(shè)計(jì)師在設(shè)計(jì)交互稿的時(shí)候赌躺,時(shí)常需要一些反饋手段,以提示用戶操作的結(jié)果羡儿。Toast是其中很常用的一種:它簡(jiǎn)單寿谴、小巧、對(duì)用戶的打擾小失受。然而現(xiàn)在很多應(yīng)用中,存在對(duì)于toast過度使用的情況咏瑟,并且常常出現(xiàn)Android樣式的toast出現(xiàn)在iOS應(yīng)用中(反之亦然)的情形拂到。在研究了iOS和Android的規(guī)范之后,筆者驚人地發(fā)現(xiàn)iOS中其實(shí)是沒有toast這種部件的码泞。到底我們?cè)谠O(shè)計(jì)的時(shí)候應(yīng)該處理這種部件呢兄旬?且看下面的分解。
Material Design Guidelines
Google的Material Design規(guī)范中余寥,是把toast和snackbars歸為一類的领铐。下面是規(guī)范中對(duì)snackbars的定義:
Snackbars包含一行與進(jìn)行的操作直接相關(guān)的文案(文案前不可有icon)。它可以包含一個(gè)操作宋舷。
Snackbar示例
規(guī)范中對(duì)toast的定義:
Toast優(yōu)先適用于系統(tǒng)提示绪撵。它也在屏幕下方出現(xiàn),但是不能被劃出屏幕外(而被清除)祝蝠。
Toast示例
行為:Snackbars/toast從屏幕底部向上出現(xiàn)音诈,經(jīng)過設(shè)定的秒數(shù)后消失幻碱,或者用戶進(jìn)行了別的操作它們也會(huì)消失。
Snackbar的出現(xiàn)和消失
簡(jiǎn)潔:提示的文案要簡(jiǎn)短细溅,包含的操作按鈕最多只有一個(gè)褥傍,或者沒有。(注意喇聊,snackbar不能包含使其消失的“取消”按鈕;蟹纭)
左邊是正確的,右邊是錯(cuò)誤的(因?yàn)槎嗔恕叭∠卑粹o)
不可重疊:snackbar與floating action button不能重疊
一次只出現(xiàn)一個(gè):如果出現(xiàn)了一個(gè)snackbar誓篱,這時(shí)候用戶進(jìn)行了操作朋贬,需要出現(xiàn)另一個(gè),則第一個(gè)snackbar從上向下退出燕鸽,之后第二個(gè)snackbar從下向上出現(xiàn)兄世。
反例:不能同時(shí)出現(xiàn)兩個(gè)snackbars
以上是Google Material Design中對(duì)于snackbars和toast的定義。
iOS Human Interface Guidelines
對(duì)于iOS系統(tǒng)啊研,在研究了iOS的規(guī)范之后御滩,筆者有個(gè)驚人的發(fā)現(xiàn):嚴(yán)格地說,iOS規(guī)范中沒有Toast這個(gè)部件党远。筆者找遍了iOS的人機(jī)交互設(shè)計(jì)規(guī)范削解,都沒有找到對(duì)于Toast這種部件的介紹,與之最為接近的沟娱,是Alert(警告框)氛驮。但警告框的使用場(chǎng)景與Toast不同,之后將另開一篇文章介紹济似。在iOS系統(tǒng)中矫废,與toast對(duì)應(yīng)的是“HUD”(透明指示層)。
iOS系統(tǒng)中的HUD彈窗
知識(shí)運(yùn)用
請(qǐng)回答一下兩個(gè)問題砰蠢,這將幫你更好理解這周的主題蓖扑。
1. 既然iOS的設(shè)計(jì)規(guī)范不鼓勵(lì)使用toast,那么在日常的設(shè)計(jì)中台舱,toast應(yīng)該在什么情況下使用律杠?
2. 請(qǐng)查看你手機(jī)里的APP,嘗試找到一個(gè)toast使用錯(cuò)誤的地方竞惋,和使用正確的地方柜去。這將幫你理解如何正確地使用toast。