26uuu另类亚洲欧美日本一_欧美日韩亚洲中文高_香蕉在线观看视频精品_亚洲不卡av中文字幕_91成人爽a毛片免费网站下载_人人色综合网_波多野结衣无码视频在线观看_欧美日韩高清性色生活片_аⅴbt天堂中文在线_国产精品福利2024久久

最新動態(tài)

這里有最新的公司動態(tài),這里有最新的網(wǎng)站設計、移動端設計、網(wǎng)頁相關內容與你分享!

新聞資訊News
當前位置:首頁 - 新聞資訊

超實用!如何正確使用控件系列之提示框(TOAST)

發(fā)布時間:2017-08-22人氣:1184

從今天 起,我們開始介紹iOS和Android設計規(guī)范中的各種控件。掌握它們,能有效地幫你設計出一個高質量的交互稿。今天我們要介紹的是提示框,英文是toast。

交互設計師在設計交互稿的時候,時常需要一些反饋手段,以提示用戶操作的結果。Toast是其中很常用的一種:它簡單、小巧、對用戶的打擾小。然而現(xiàn)在很多應用中,存在對于toast過度使用的情況,并且常常出現(xiàn)Android樣式的toast出現(xiàn)在iOS應用中(反之亦然)的情形。在研究了iOS和Android的規(guī)范之后,筆者驚人地發(fā)現(xiàn)iOS中其實是沒有toast這種部件的。到底我們在設計的時候應該處理這種部件呢?且看下面的分解。

Material Design Guidelines

Google的Material Design規(guī)范中,是把toast和snackbars歸為一類的。下面是規(guī)范中對snackbars的定義:

Snackbars包含一行與進行的操作直接相關的文案(文案前不可有icon)。它可以包含一個操作。

△  Snackbar示例

規(guī)范中對toast的定義:

Toast優(yōu)先適用于系統(tǒng)提示。它也在屏幕下方出現(xiàn),但是不能被劃出屏幕外(而被清除)。

△  Toast示例

行為:Snackbars/toast從屏幕底部向上出現(xiàn),經(jīng)過設定的秒數(shù)后消失,或者用戶進行了別的操作它們也會消失。

△  Snackbar的出現(xiàn)和消失

簡潔:提示的文案要簡短,包含的操作按鈕最多只有一個,或者沒有。(注意,snackbar不能包含使其消失的“取消”按鈕?。?/p>

左邊是正確的,右邊是錯誤的(因為多了“取消”按鈕)

不可重疊:snackbar與floating action button不能重疊。

一次只出現(xiàn)一個:如果出現(xiàn)了一個snackbar,這時候用戶進行了操作,需要出現(xiàn)另一個,則第一個snackbar從上向下退出,之后第二個snackbar從下向上出現(xiàn)。

反例:不能同時出現(xiàn)兩個snackbars

以上是Google Material Design中對于snackbars和toast的定義。

iOS Human Interface Guidelines

對于iOS系統(tǒng),在研究了iOS的規(guī)范之后,筆者有個驚人的發(fā)現(xiàn):嚴格地說,iOS規(guī)范中沒有Toast這個部件。筆者找遍了iOS的人機交互設計規(guī)范,都沒有找到對于Toast這種部件的介紹,與之最為接近的,是Alert(警告框)。但警告框的使用場景與Toast不同,之后將另開一篇文章介紹。在iOS系統(tǒng)中,與toast對應的是“HUD”(透明指示層)。

△  iOS系統(tǒng)中的HUD彈窗

知識運用

請回答一下兩個問題,這將幫你更好理解這周的主題。

1. 既然iOS的設計規(guī)范不鼓勵使用toast,那么在日常的設計中,toast應該在什么情況下使用?

2. 請查看你手機里的APP,嘗試找到一個toast使用錯誤的地方,和使用正確的地方。這將幫你理解如何正確地使用toast。


?
有問必答