正確使用控件-提示框

從今天起叠艳,我們開始介紹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。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末拆宛,一起剝皮案震驚了整個(gè)濱河市嗓奢,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌浑厚,老刑警劉巖蔓罚,帶你破解...
    沈念sama閱讀 211,042評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件椿肩,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡豺谈,警方通過查閱死者的電腦和手機(jī)郑象,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來茬末,“玉大人厂榛,你說我怎么就攤上這事±霾眩” “怎么了击奶?”我有些...
    開封第一講書人閱讀 156,674評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)责掏。 經(jīng)常有香客問我柜砾,道長(zhǎng),這世上最難降的妖魔是什么换衬? 我笑而不...
    開封第一講書人閱讀 56,340評(píng)論 1 283
  • 正文 為了忘掉前任痰驱,我火速辦了婚禮,結(jié)果婚禮上瞳浦,老公的妹妹穿的比我還像新娘担映。我一直安慰自己,他們只是感情好叫潦,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,404評(píng)論 5 384
  • 文/花漫 我一把揭開白布蝇完。 她就那樣靜靜地躺著,像睡著了一般矗蕊。 火紅的嫁衣襯著肌膚如雪短蜕。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,749評(píng)論 1 289
  • 那天傻咖,我揣著相機(jī)與錄音忿危,去河邊找鬼。 笑死没龙,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的缎玫。 我是一名探鬼主播硬纤,決...
    沈念sama閱讀 38,902評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼赃磨!你這毒婦竟也來了筝家?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,662評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤邻辉,失蹤者是張志新(化名)和其女友劉穎溪王,沒想到半個(gè)月后腮鞍,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,110評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡莹菱,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評(píng)論 2 325
  • 正文 我和宋清朗相戀三年移国,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片道伟。...
    茶點(diǎn)故事閱讀 38,577評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡迹缀,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蜜徽,到底是詐尸還是另有隱情祝懂,我是刑警寧澤,帶...
    沈念sama閱讀 34,258評(píng)論 4 328
  • 正文 年R本政府宣布拘鞋,位于F島的核電站砚蓬,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏盆色。R本人自食惡果不足惜灰蛙,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,848評(píng)論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望傅事。 院中可真熱鬧缕允,春花似錦、人聲如沸蹭越。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)响鹃。三九已至驾霜,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間买置,已是汗流浹背粪糙。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評(píng)論 1 264
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留忿项,地道東北人蓉冈。 一個(gè)月前我還...
    沈念sama閱讀 46,271評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像轩触,于是被迫代替她去往敵國(guó)和親寞酿。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,452評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容