最常見(jiàn)的網(wǎng)頁(yè)交互控件怎么用

移動(dòng)端設(shè)計(jì)中有三個(gè)名字經(jīng)常被提到：Dialog、Toast 和 Snackbar，大部分同學(xué)從 Google 設(shè)計(jì)規(guī)范中第一次了解它們。

原本無(wú)論作為系統(tǒng)規(guī)范還是應(yīng)用組件它們都已足夠成熟，我也自以為對(duì)它們有足夠的了解。但最近工作、交流中發(fā)現(xiàn)對(duì)這三者尤其 Snackbar 的了解非常淺，所以花了一點(diǎn)時(shí)間重新學(xué)習(xí)了一下。

我并非專業(yè)工程師，更多僅從設(shè)計(jì)師角度來(lái)闡述自己的心得。

作為應(yīng)用中承擔(dān)“操作反饋”和“信息傳遞”的組件，Dialog、Toast 和 Snackbar 三者很相似但又各有不同。尤其從 Snackbar 被提出之后，網(wǎng)絡(luò)上有很多文章討論它們?nèi)叩膽?yīng)用場(chǎng)景和使用方法。

Toast 翻譯過(guò)來(lái)叫“吐司”，非常形象的一小片;Snackbar 則是“快餐店”，聽(tīng)起來(lái)就比吐司要牛逼一點(diǎn)。

眾所周知，iOS 規(guī)范中是沒(méi)有 Toast/Snackbar 這兩個(gè)名字的，但由于設(shè)計(jì)“跟隨操作且超輕量”的反饋交互比較困難，所以直接將文字、icon 在操作后甩到用戶臉上成為了一種簡(jiǎn)單、有效的做法。

理想的反饋是發(fā)生在操作空間自身，如 Twitter 的 Favorite 按鈕，觸發(fā)與否都用動(dòng)畫(huà)來(lái)表達(dá)。第一做到了操作與反饋一體，第二避免了 按鈕被反復(fù)點(diǎn)擊觸發(fā)多個(gè) Toasts 所引起的壞體驗(yàn)。

最初我想當(dāng)然的以為，那些出現(xiàn)在屏幕正中間、黑色半透明底色，顯示文字或圖案的東西叫做 Toast;而那些自帶操作項(xiàng)，可以滑動(dòng)或點(diǎn)擊刪除消息的東西則是 Snackbar。但實(shí)際上，通過(guò)位置、顏色、是否帶操作和如何消失都無(wú)法準(zhǔn)確定義它們。

首先，來(lái)復(fù)習(xí)一下 Material Design 的官方說(shuō)明。(值得注意的是，現(xiàn)在 Snackbar 和 Toast 在同一個(gè)文檔中，但誰(shuí)能告訴我為什么這兩個(gè)單詞要用復(fù)數(shù)?)

Snackbars

contain a single line of text directly related to the operation performed. They may contain a text action, but no icons.

Only one snackbar may be displayed at a time. Each snackbar may contain a single action, neither of which may be “Dismiss” or “Cancel.”

Snackbars animate upwards from the bottom edge of the screen.

譯文：

1. Snackbar 包含一條簡(jiǎn)單的、與操作行為相關(guān)的文字消息，它也可以包含一個(gè)文字操作項(xiàng)目，但不能包含 icon。

2. 同一時(shí)間只能出現(xiàn)一個(gè) Snackbar，每個(gè) Snackbar 可以包含。

3. Snackbar 從屏幕底部向上移動(dòng)出現(xiàn)。

Toasts (Android only) are primarily used for system messaging. They also display at the bottom of the screen, but may not be swiped off-screen.

譯文：

Toast(Android only?顯然已經(jīng)不是了…)主要用于傳遞系統(tǒng)消息，展示于屏幕底部并且不能滑動(dòng)消除。

可以看到，官方設(shè)計(jì)規(guī)范對(duì) Toast 的描述已經(jīng)很少了，似乎更傾向于讓大家使用 Snackbar，而且它們的定義也非常含糊，顯然大多數(shù) App 都不是這么設(shè)計(jì)的……

從代碼層面我們可以看到關(guān)于它們更多的特性 [1]。

首先，與 Dialog不同，Toast 和 Snackbar 都不屬于模態(tài)。這意味著它們不獲取當(dāng)前屏幕焦點(diǎn)，用戶依然可以操作屏幕中的其他內(nèi)容，這也正是所謂的“輕量化信息和反饋”。當(dāng)設(shè)計(jì)者不希望用戶任務(wù)被打斷時(shí)，使用它們比 Dialog 更輕量。

其次，Toast 默認(rèn)是展示在當(dāng)前屏幕內(nèi)所有控件之外，Snackbar 則是在控件的最頂層。從我的角度來(lái)看，似乎 Snackbar 更像應(yīng)用的一部分而 Toast 則更接近系統(tǒng)消息。這可能就是官方所謂的“Toast are primarily used for system messaging”。

實(shí)際效果上，Toast 不會(huì)改變已有控件的布局，而 Snackbar 常常把懸浮按鈕往上推。

再次，很多人會(huì)問(wèn)，這兩個(gè)消息顯示多長(zhǎng)時(shí)間比較合適?雖然設(shè)計(jì)規(guī)范中沒(méi)有給出具體的時(shí)間建議，但代碼卻已經(jīng)告訴我們。

在 Toast 和 Snackbar 的參數(shù)中，有 LENGTH_SHORT 和 LENGTH_LONG 兩個(gè)狀態(tài)，測(cè)試后分別為約1.8s和3s [2]。所以，即便可以自己想辦法設(shè)置時(shí)間，不如遵從官方1.8s/3s的建議比較合理。

然后，顏色、位置、操作和帶不帶 icon 真的很?chē)?yán)格嗎?答案是否定的。為了應(yīng)對(duì)變態(tài)且任性的需求，有兩篇文章 [3][4] 詳細(xì)介紹了如何花式使用 Toast 和 Snackbar，簡(jiǎn)而言之就是技術(shù)上要做到給它們換個(gè)底色、加個(gè) icon、換個(gè)位置都是很容易的。

比如你想要的話，可以做到這樣：

但是，設(shè)計(jì)師還是要有基本的節(jié)操，在追求最流暢用戶體驗(yàn)的時(shí)代，不要輕易給用戶太多的干擾。

總結(jié)

1. 關(guān)于差別。從用戶感知層面，Toast 和 Snackbar 的最核心區(qū)別在于后者可以帶一個(gè)操作項(xiàng)，并且可以主動(dòng)消除。這樣看來(lái) Toast 似乎沒(méi)有什么優(yōu)點(diǎn)了，完全可以用 Snackbar 取代。當(dāng)然，大部分用戶對(duì) Toast 更加熟悉，認(rèn)知成本會(huì)更低。

2. 它們真的只是給你展示輕量級(jí)信息的。我見(jiàn)過(guò)有人在 Toast 里寫(xiě)小作文的，大概三四十個(gè)字。如果真的有這么多事要說(shuō)明，真的應(yīng)該考慮一下是否可以從流程上來(lái)解決交互問(wèn)題，而不是單純靠文字來(lái)說(shuō)明操作反饋?；蛘呷绻匾?，請(qǐng)使用 Dialog，不然用戶真的來(lái)不及看，也顯得消息并不重要。

3. 關(guān)于時(shí)間。能直接通過(guò)動(dòng)畫(huà)交互反饋的請(qǐng)不要使用 Toast 或 Snackbar，如成功加入購(gòu)物車(chē)、成功收藏、成功發(fā)送消息等。如果要用，請(qǐng)將時(shí)間控制在1.8s或3s，我覺(jué)得1.8s就足夠了。

4. 規(guī)范只是建議。技術(shù)層面上大概可以做到你想要的一切改變，不過(guò)作為設(shè)計(jì)師還是要慎重。畢竟 Google 的設(shè)計(jì)規(guī)范是經(jīng)過(guò)大量用戶測(cè)試和試驗(yàn)確定的，除非你自認(rèn)為你的設(shè)計(jì)更加合理。

5. 才疏學(xué)淺，歡迎大家批評(píng)指導(dǎo)，也歡迎指出錯(cuò)別字和語(yǔ)病。

分享題目：最常見(jiàn)的網(wǎng)頁(yè)交互控件怎么用
文章出自：http://www.muchs.cn/news9/162409.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、搜索引擎優(yōu)化、響應(yīng)式網(wǎng)站、App開(kāi)發(fā)、網(wǎng)站設(shè)計(jì)、全網(wǎng)營(yíng)銷推廣

廣告

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