如何正確使用控件系列之頁面提示框

從今天 起，我們開始介紹iOS和Android設(shè)計(jì)規(guī)范中的各種控件。掌握它們，能有效地幫你設(shè)計(jì)出一個(gè)高質(zhì)量的交互稿。今天創(chuàng)新互聯(lián)要介紹的是提示框，英文是toast。

交互設(shè)計(jì)師在設(shè)計(jì)交互稿的時(shí)候，時(shí)常需要一些反饋手段，以提示用戶操作的結(jié)果。Toast是其中很常用的一種：它簡單、小巧、對(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)和消失

簡潔：提示的文案要簡短，包含的操作按鈕最多只有一個(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(警告框)。但警告框的使用場景與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。

最近把這個(gè)系列的專題都做成了音頻+幻燈片形式的分享，同時(shí)整理了交互方面對(duì)實(shí)戰(zhàn)很有幫助的一些知識(shí)點(diǎn)，在千聊上跟大家分享，希望可以幫助大家提高交互技能。

網(wǎng)站標(biāo)題：如何正確使用控件系列之頁面提示框
本文URL：http://muchs.cn/news9/171809.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、品牌網(wǎng)站制作、面包屑導(dǎo)航、域名注冊(cè)、外貿(mào)建站、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)