子彈盒是一種重要的交互方式，主要用于完成信息傳輸和用戶反饋兩個(gè)功能。子彈盒很常見(jiàn)，但是每個(gè)看不到它的設(shè)計(jì)師都能100％理解子彈盒的概念。本文是對(duì)子彈盒系統(tǒng)的簡(jiǎn)單梳理和總結(jié)，希望能夠解決每個(gè)人心中的疑慮。

我們每天談?wù)摰淖訌椇惺且粋€(gè)非常普遍的概念。所有對(duì)話框，浮動(dòng)圖層和提示欄都通常稱(chēng)為子彈框。事實(shí)上，我們可以將子彈盒分為兩種類(lèi)型：模態(tài)框架和非模態(tài)框架。

模態(tài)框架

模態(tài)幀和非模態(tài)幀之間的最大區(qū)別在于是否強(qiáng)制用戶交互。模態(tài)框架將中斷用戶當(dāng)前的操作過(guò)程。如果用戶未對(duì)框架進(jìn)行操作，則不會(huì)使用其余功能。從這個(gè)方面，我們可以看出模態(tài)框架的優(yōu)缺點(diǎn)非常明顯：優(yōu)點(diǎn)是可以很好地獲得用戶的視覺(jué)焦點(diǎn)，缺點(diǎn)是用戶當(dāng)前的操作流程被中斷。模態(tài)框架是一種重量反饋，通常用于用戶的重要操作。常見(jiàn)的模態(tài)框架類(lèi)型是對(duì)話框（Dialog/Alter），操作欄（Actionbar/Actionsheet/ActionView）和浮動(dòng)圖層（Popover/Popup）。因?yàn)閕OS和Android的許多組件現(xiàn)在都很常見(jiàn)，所以我將在下一篇文章中介紹一個(gè)過(guò)于相似的組件。

對(duì)話框

對(duì)話通常用于用戶執(zhí)行非常重要或有風(fēng)險(xiǎn)的操作。將彈出一個(gè)對(duì)話框，提示用戶輸入信息。用戶將根據(jù)提示判斷。它通常出現(xiàn)在屏幕中間并阻止界面的主要內(nèi)容。

目前，對(duì)話框的設(shè)計(jì)風(fēng)格很多，用戶可以輸入信息，也可以用于營(yíng)銷(xiāo)宣傳。

行動(dòng)欄

在我看來(lái)，操作欄可以看作對(duì)話框的增強(qiáng)版本，因?yàn)榫瘓?bào)和對(duì)話框只有兩個(gè)按鈕。操作欄可以提供多個(gè)功能按鈕，顯示的風(fēng)格也各不相同。

但是，也有例外，操作欄只有兩個(gè)選項(xiàng)。以網(wǎng)易云音樂(lè)為例。如果要?jiǎng)h除歌曲，可通過(guò)操作欄完成“確認(rèn)刪除”提示（如左圖所示）。事實(shí)上，這里使用對(duì)話框也是完全可以的（如右圖所示），我認(rèn)為網(wǎng)易云音樂(lè)設(shè)計(jì)師在這里使用動(dòng)作欄的原因尚不清楚。但我個(gè)人的猜測(cè)是，操作欄位于屏幕的底部，界面的封面相對(duì)較小。

浮動(dòng)圖層

浮動(dòng)層是半透明臨時(shí)視圖，用戶單擊控件或界面區(qū)域。浮動(dòng)層的樣式類(lèi)似于操作欄的樣式，并且兩者都可以向用戶顯示多個(gè)功能選項(xiàng)。但浮動(dòng)圖層可以出現(xiàn)在屏幕上的任何位置，從而為用戶提供更具方向性的提示。

接下來(lái)，我們可以做一個(gè)總結(jié)：對(duì)話框適合用戶判斷操作而不考慮信息輸入，動(dòng)作欄和浮動(dòng)層適合用戶執(zhí)行選擇操作，浮動(dòng)層是更有針對(duì)性的行動(dòng)吧。

非模態(tài)子彈盒

與模態(tài)幀相比，非模態(tài)幀之間的最大區(qū)別在于不強(qiáng)制用戶交互，并且不會(huì)彈出半透明背景層。一段時(shí)間后，非模態(tài)框架消失。因此，與模態(tài)幀相比，非模態(tài)幀是輕量級(jí)反饋，并且不會(huì)對(duì)用戶造成太多干擾。常見(jiàn)的非模態(tài)墨盒是烤面包（hud）和零食吧。

吐司

Toast主要用于在用戶完成操作后告訴用戶操作結(jié)果或狀態(tài)變化。 Toast實(shí)際上是Android的一個(gè)組件。在iOS中，有一個(gè)類(lèi)似的hud。最常見(jiàn)的是音量調(diào)節(jié)提示。但是現(xiàn)在iOS和Android之間的界限不斷被打破，而吐司現(xiàn)在被廣泛用于iOS界面設(shè)計(jì)中。如果我們?nèi)タ纯碅ndroid提供的設(shè)計(jì)規(guī)范，我們會(huì)發(fā)現(xiàn)toast具有以下特征：

僅出現(xiàn)在屏幕底部

只能放文字

非模態(tài)子彈盒

但是我們會(huì)發(fā)現(xiàn)一些吐司可以出現(xiàn)在屏幕的任何地方，也可以添加圖標(biāo)，所以教條主義已經(jīng)死了。我想到前端告訴我的話，“只要你能設(shè)計(jì)它，我們都可以在理論上做到，但我們可能會(huì)破壞人。 ”的

事實(shí)上，真正的吐司可以出現(xiàn)在屏幕上的任何地方，并且您可以添加圖標(biāo)，甚至可以更改背景圖層顏色。所以我認(rèn)為設(shè)計(jì)師不僅要看這些設(shè)計(jì)規(guī)范，還要花一些時(shí)間與開(kāi)發(fā)溝通。

Toast的優(yōu)勢(shì)在于它不會(huì)中斷用戶當(dāng)前的操作過(guò)程，并且是一種輕量級(jí)的反饋方法。缺點(diǎn)是用戶容易忽視它并且不適合顯示太多的信息，這些信息可能在用戶完成閱讀之前消失。為了提高信息的可讀性并增加風(fēng)格的美感，吐司現(xiàn)在使用文本和圖標(biāo)的組合。

小吃吧

Snackbar通常由文本和功能按鈕組成。用戶可以單擊按鈕進(jìn)行交互，即使用戶沒(méi)有點(diǎn)擊快餐欄，它也會(huì)自動(dòng)消失，通常在屏幕的底部。在流行的意義上，我們可以將小吃吧視為帶有圖標(biāo)的烤面包。

Snackbar我把它放在最后，因?yàn)樗浅Ｌ貏e。雖然小吃店是非模態(tài)框架，但它也具有模態(tài)框架的一些特征。例如，小吃店還有用于用戶交互的按鈕;此外，小吃欄通常??出現(xiàn)在界面下方，類(lèi)似于操作欄中的操作表。

如果你不明白你上面寫(xiě)的是什么，那沒(méi)關(guān)系。讓我為您做一個(gè)總結(jié)：非模態(tài)子彈盒強(qiáng)調(diào)信息提示，模態(tài)子彈盒既可以告知信息又可以用戶交互; toast是一種輕量級(jí)的子彈盒，小吃吧設(shè)定了家庭的優(yōu)勢(shì)。你說(shuō)它看起來(lái)不像我。

子彈框架系統(tǒng)建立的優(yōu)化

上面我們已經(jīng)了解了子彈盒的幾種主要風(fēng)格和用法。接下來(lái)，我們將考慮如何為產(chǎn)品構(gòu)建子彈盒系統(tǒng)或如何優(yōu)化現(xiàn)有產(chǎn)品的子彈盒系統(tǒng)。實(shí)際上，子彈框架系統(tǒng)的建立和優(yōu)化的原理可以用一句話概括：它可以在不使用子彈框架的情況下在界面中顯示，并且可以在沒(méi)有模態(tài)框架的情況下使用非模態(tài)子彈框架。

因?yàn)槿魏巫訌椇卸紩?huì)對(duì)用戶造成干擾，即使是最輕的吐司。從用戶體驗(yàn)的角度來(lái)看，操作過(guò)程引起的干擾必須盡可能小。例如，用戶可能不知道“速度間隔”和“速度穩(wěn)定性”的術(shù)語(yǔ)，因此他們將點(diǎn)擊“問(wèn)號(hào)”圖標(biāo)。

目前我們有3個(gè)解決方案：

通過(guò)新界面顯示。但是我們可以看到?jīng)]有太多信息需要解釋?zhuān)矝](méi)有必要通過(guò)新頁(yè)面顯示它。

使用對(duì)話框或浮動(dòng)圖層，我們不能在這里使用Toast，因?yàn)門(mén)oast時(shí)間太短而且用戶無(wú)法完成它。

顯示在當(dāng)前界面中。

事實(shí)上，在我看來(lái)，情景2和3是一個(gè)很好的解決方案。但考慮到減少用戶干擾和操作步驟，我認(rèn)為方案3在這里更好。

多態(tài)按鈕

此外，使用多狀態(tài)按鈕還可以幫助我們解除子彈盒的壓力。例如，支付寶的支付界面，即時(shí)支付按鈕可以跳轉(zhuǎn)到成功支付的狀態(tài)，那么就沒(méi)有必要使用子彈框來(lái)提示用戶。

確定優(yōu)先順序

具有不同優(yōu)先級(jí)的信息應(yīng)該具有不同的視覺(jué)權(quán)重，因此具有最大視覺(jué)權(quán)重的模態(tài)框應(yīng)該顯示重要內(nèi)容。因此，我們需要對(duì)需要顯示的信息進(jìn)行優(yōu)先安排，以便真正重要的信息可以使用模態(tài)框架。只有低頻率和合理使用，用戶才會(huì)認(rèn)真對(duì)待。過(guò)度使用會(huì)給用戶帶來(lái)“狼來(lái)了”的心理。

總結(jié)

由于許多交互設(shè)計(jì)條款不統(tǒng)一，很多人在子彈盒類(lèi)型的定義上有很大差異。本文是從我個(gè)人的角度總結(jié)，希望對(duì)大家有所幫助。如果您有任何想法，請(qǐng)留言或留言。

« 網(wǎng)易，小米，支付寶，海底勞24個(gè)品牌“搖”運(yùn)營(yíng)分析 | 淘寶40元指紋貼膜解鎖手機(jī)測(cè)：結(jié)果令人震撼！ »