可能知道了平臺(tái)規(guī)范中的彈框類(lèi)型之后，你小小的腦袋瓜里有了大大的問(wèn)號(hào)：了解得越全面，反而無(wú)從抉擇了……這下該怎么辦？

所以這一期我們來(lái)講一下彈框的正確打開(kāi)方式。最重要的還是，在每一次控件進(jìn)階專(zhuān)題中，我們都要學(xué)會(huì)透過(guò)表面，探索它們背后值得我們學(xué)習(xí)的設(shè)計(jì)策略。

往期回顧：

思考一：你確定你需要這個(gè)彈框嗎？

在講解如何正確使用彈框之前，我想讓你先思考一個(gè)問(wèn)題：你真的需要這個(gè)彈框嗎？

有時(shí)候當(dāng)我們知道了一個(gè)控件為什么被定義出來(lái)，我們就會(huì)掉進(jìn)慣性思維的陷阱當(dāng)中。比如我們知道了彈框一般用于承載拓展、提示和反饋信息，我們總是會(huì)在這些場(chǎng)景下，不假思索地使用它。

但實(shí)際上，彈框的使用場(chǎng)景其實(shí)是很值得推敲的。在帶大家了解彈框的「How（怎么用）」、「What（用什么）」之前，我們應(yīng)該先明確「Why（為什么用）」。

先說(shuō)一說(shuō)產(chǎn)品層面的「Why」吧。

說(shuō)到微信「好看」功能，喜歡閱讀公眾號(hào)的朋友一定不會(huì)陌生（現(xiàn)已根據(jù)戰(zhàn)略將「好看」改為了「在看」）?！负每础构δ艿恼Q生初衷是微信為了突破公眾號(hào)閱讀量下降的瓶頸，讓優(yōu)質(zhì)內(nèi)容依靠閱讀者自身社交體系，擴(kuò)散給更多的用戶(hù)。

最初微信剛推出公眾號(hào)「好看」功能時(shí)，用戶(hù)點(diǎn)擊「好看」后，會(huì)彈出一個(gè) Popovers ，引導(dǎo)用戶(hù)記錄下想法，并分享至「看一看」。其好友通過(guò)「看一看」這個(gè)公共區(qū)域，可以了解到最近有哪些不錯(cuò)的公眾號(hào)內(nèi)容。該功能既可以讓用戶(hù)以文會(huì)友加深粘性，又可以依賴(lài)用戶(hù)主動(dòng)分享的意愿，給公眾號(hào)輸入更多的流量。

一開(kāi)始出于新鮮感，「好看」功能吸引了許多用戶(hù)使用。但后來(lái)愿意點(diǎn)擊「好看」的用戶(hù)越來(lái)越少，其中當(dāng)然有許多因素，但微信團(tuán)隊(duì)認(rèn)為：點(diǎn)擊「好看」之后彈出讓用戶(hù)記錄想法的 Povpovers 增加了用戶(hù)的行為路徑長(zhǎng)度，并且給一些不愿意記錄想法的用戶(hù)帶來(lái)了行為負(fù)擔(dān)，導(dǎo)致越來(lái)越多的讀者不愿意再點(diǎn)擊「好看」。

于是這個(gè) Popovers 成為了一個(gè)和產(chǎn)品目標(biāo)格格不入的控件。在微信后續(xù)的迭代中，終于還是在保留「寫(xiě)想法」的功能基礎(chǔ)上，替換了這個(gè)氣泡框。

但產(chǎn)品層面可能更多是 PM 去考慮的問(wèn)題。那對(duì)于設(shè)計(jì)師，我們說(shuō)一說(shuō)交互層面。

我們前面說(shuō)到，彈框的作用之一就是給用戶(hù)帶來(lái)行為反饋，反饋有利于搭建用戶(hù)使用產(chǎn)品過(guò)程中的信心。但即便是為了不干擾到用戶(hù)，將反饋機(jī)制盡量以非模態(tài)框的形式呈現(xiàn)，依然會(huì)增加用戶(hù)認(rèn)知成本，因?yàn)槿祟?lèi)認(rèn)知模型都是從學(xué)習(xí)到理解再到習(xí)慣。

所以在我們?cè)O(shè)計(jì)反饋機(jī)制時(shí)，有時(shí)候可以跳出「使用彈框」的設(shè)定，「彈框」僅僅是人類(lèi)五感中「視覺(jué)」這一個(gè)層面，我們還可以通過(guò)「聽(tīng)覺(jué)」和「觸覺(jué)」來(lái)傳遞用戶(hù)反饋。

例如現(xiàn)在有許多 APP 在用戶(hù)發(fā)生文本框輸入錯(cuò)誤時(shí)，會(huì)采用文本框晃動(dòng)+設(shè)備震動(dòng)等觸覺(jué)反饋。這些交互反饋的含義已經(jīng)讓用戶(hù)形成思維習(xí)慣，在不用閱讀理解文字信息的情況下也知道這是一種錯(cuò)誤提示。并且可以讓產(chǎn)品交互變得更加生動(dòng)。

所以當(dāng)你發(fā)現(xiàn)你的產(chǎn)品設(shè)計(jì)中，真的已經(jīng)有很多彈框的時(shí)候，記得問(wèn)一問(wèn)自己：我真的需要這個(gè)彈框嗎？已經(jīng)沒(méi)有更好的替代方案了嗎？

思考二：你確定要用模態(tài)框嗎？

解決了「Why（為什么用）」的問(wèn)題之后，如果你確定當(dāng)前流程真的需要用到彈框，我們就要來(lái)探究「How（怎么用）」的問(wèn)題了。

上一期文章我們講到：模態(tài)框比非模態(tài)框更容易打斷用戶(hù)心流，所以如果不是關(guān)系到危險(xiǎn)操作，我們應(yīng)該盡量選擇更輕量的非模態(tài)框。但憑借我多年使用產(chǎn)品的經(jīng)驗(yàn)，發(fā)現(xiàn)并非模態(tài)框的運(yùn)用場(chǎng)景就一定是承載危險(xiǎn)信息，所以如果以這個(gè)標(biāo)準(zhǔn)去判斷應(yīng)該選擇哪一類(lèi)彈框，稍微有些以偏概全了。

那么我們?cè)撊绾卧谀B(tài)框與非模態(tài)框之間做選擇呢？我總結(jié)了一個(gè)分析手法。

我調(diào)研了許多應(yīng)用的彈框，發(fā)現(xiàn)選擇使用模態(tài)框還是非模態(tài)框可以由以下三個(gè)維度依次進(jìn)行判斷：

維度一：是否含有交互類(lèi)操作

因?yàn)榉悄B(tài)框時(shí)間短、會(huì)自動(dòng)消失的特質(zhì)，讓它在大多數(shù)時(shí)候都是被用于承載用戶(hù)操作的反饋提示，例如「收藏成功」、「提交成功」等，而無(wú)法包含操作項(xiàng)（SnakeBars 除外）。所以「是否含有交互類(lèi)操作」成為了影響決策的第一維度。

當(dāng)你的彈框中包含交互操作項(xiàng)，用戶(hù)通過(guò)點(diǎn)擊這個(gè)操作項(xiàng)會(huì)引發(fā)下一步交互（如：刪除、提交、跳轉(zhuǎn)頁(yè)面等），那不用猶豫，直接上模態(tài)框吧。

那如果彈框中不包含交互類(lèi)操作，是否就能直接用非模態(tài)框呢？那得看接下來(lái)的第二個(gè)維度。

維度二：是否有較高的重要級(jí)別

正是因?yàn)槟B(tài)框必須由用戶(hù)手動(dòng)關(guān)閉的原因，往往可以用于承載重要信息，獲取用戶(hù)注意力。所以就算彈框中并不包含交互操作項(xiàng)，但因?yàn)樘崾緝?nèi)容非常重要（如：隱私協(xié)議、危險(xiǎn)操作信息、版本更新信息等），也應(yīng)該使用模態(tài)框來(lái)呈現(xiàn)。

維度三：是否包含大量文字

能走到第三維度的彈框，一定是既不需要交互操作，也不太重要的彈框了。那逼迫著我們邁出最后一步來(lái)決定是否使用模態(tài)框的判斷條件，就是簡(jiǎn)單粗暴的「文字量」了。

由非模態(tài)框在平臺(tái)規(guī)范中的定義就可以看出，Toast 的最長(zhǎng)時(shí)間業(yè)界定義為 3.5 秒，太長(zhǎng)的文本信息用戶(hù)根本無(wú)法完成閱讀。即便是可以停留 4-10 秒的 SnakeBars ，Material Design 也明確告訴了設(shè)計(jì)者，請(qǐng)不要在 SnakeBars 中放置過(guò)長(zhǎng)的文本內(nèi)容。

如果以上三個(gè)維度我們的答案都是「否」，那請(qǐng)用非模態(tài)框吧，大多數(shù)情況下都不會(huì)有錯(cuò)的。

思考三：你到底該用哪一個(gè)彈框？

選定了是使用模態(tài)框與非模態(tài)框之后，你終于可以思考「What（用什么）」了。

模態(tài)框是用「Alert」還是「Action Sheet」。

對(duì)于模態(tài)框，最容易產(chǎn)生糾結(jié)的主要是 Alert 與 Action Sheet 。在抉擇具體使用哪一個(gè)控件之前，只需要弄明白它們的兩大區(qū)別即可：

• 操作項(xiàng)數(shù)量區(qū)別：iOS人機(jī)交互規(guī)范規(guī)定，為了避免 Alert 選項(xiàng)溢出可視區(qū)域，讓用戶(hù)產(chǎn)生滑動(dòng)行為，應(yīng)最多承載三個(gè)選項(xiàng)，但 Action Sheet 可以承載更多；
• 位置區(qū)別：Alert 出現(xiàn)在屏幕中心，但 Action Sheet 由屏幕底部向上滑出。

對(duì)于操作項(xiàng)數(shù)量區(qū)別，很容易理解。多余三個(gè)操作項(xiàng)的模態(tài)框，我們理應(yīng)使用更符合操作體驗(yàn)的 Action Sheet。

但對(duì)于位置區(qū)別，我們?cè)撊绾渭右赃\(yùn)用呢？

來(lái)看看網(wǎng)易云音樂(lè)的案例。當(dāng)用戶(hù)在批量刪除已下載音樂(lè)時(shí)，用戶(hù)點(diǎn)擊了底部的「刪除下載」按鈕，會(huì)彈出以 Action Sheet 形式出現(xiàn)的確認(rèn)刪除框。

你可能產(chǎn)生疑問(wèn)：這個(gè)確認(rèn)刪除框包含的操作項(xiàng)數(shù)量小于三個(gè)，但為什么網(wǎng)易云音樂(lè)不使用 Alert 呢？

這是一個(gè)非常典型的費(fèi)茨定律案例（費(fèi)茨定律其中一條定律法則是：當(dāng)目標(biāo)大小一定時(shí)，起點(diǎn)離目標(biāo)中心的距離越近，所花費(fèi)的時(shí)間越短；距離越遠(yuǎn)，所花時(shí)間越長(zhǎng)。）

通過(guò) Alert 與 Action Sheet 的出現(xiàn)位置，結(jié)合費(fèi)茨定律，我們可以設(shè)計(jì)出更符合用戶(hù)體驗(yàn)的設(shè)計(jì)。

非模態(tài)框是用「Toast」還是「SnakeBars」

SnakeBars 當(dāng)初由 Material Design 創(chuàng)造出來(lái)，就是為了解決用戶(hù)無(wú)法在非模態(tài)框中進(jìn)行交互操作的問(wèn)題。所以選擇它們的手法不言而喻。但 SnakeBars 在 iOS 端被運(yùn)用的次數(shù)確實(shí)太少了，很多時(shí)候容易被設(shè)計(jì)者以相對(duì)輕量的模態(tài) Popovers 取代。

所以我認(rèn)為非模態(tài)框的選擇相對(duì)自由，只是考慮到產(chǎn)品的統(tǒng)一性，需要在設(shè)計(jì)規(guī)范中將非模態(tài)框的樣式、彈出位置等信息定義清楚，以免在類(lèi)似場(chǎng)景中出現(xiàn)不同的彈框樣式，容易讓用戶(hù)產(chǎn)生疑惑。

當(dāng)然，你也可以讓彈框更加情感化

平臺(tái)規(guī)范下的彈框大多不會(huì)考慮情感化設(shè)計(jì)，因?yàn)橄到y(tǒng)原生的控件可能被任何應(yīng)用在任何場(chǎng)景下調(diào)用。冷冰冰的彈框往往只是單純?yōu)榱艘龑?dǎo)用戶(hù)操作、給予用戶(hù)反饋，頻率過(guò)高就容易讓用戶(hù)厭煩。

所以許多應(yīng)用開(kāi)始對(duì)死板的彈框進(jìn)行情感化改良。

情感化彈框一般會(huì)出現(xiàn)在可能讓用戶(hù)產(chǎn)生敏感情緒的場(chǎng)景中。例如產(chǎn)品需要獲取到用戶(hù)提醒、訪(fǎng)問(wèn)等權(quán)限，或出于商業(yè)考慮需要進(jìn)行廣告營(yíng)銷(xiāo)，容易讓用戶(hù)產(chǎn)生抵觸情緒時(shí)，許多產(chǎn)品會(huì)借助情感化彈框?yàn)檫@一類(lèi)場(chǎng)景脫敏。

并且為了增加用戶(hù)共情，許多 APP 也會(huì)用情感化彈框鼓勵(lì)、贊揚(yáng)他們的用戶(hù)或者用于增加節(jié)日氛圍，讓用戶(hù)在使用產(chǎn)品的過(guò)程中更加愉悅。

通過(guò)增加動(dòng)效也可以讓彈框更加生動(dòng)，現(xiàn)在也已經(jīng)有許多前端框架中預(yù)設(shè)了多種類(lèi)的彈框動(dòng)畫(huà)效果。

這些情感化設(shè)計(jì)策略，可以在彈框打擾用戶(hù)心流時(shí)，給予用戶(hù)一些情感彌補(bǔ)。

總結(jié)

好像很多時(shí)候設(shè)計(jì)師都很抵觸彈框，但是出于各種原因又不得不用到它，使得「彈框」在眾多的控件中有著很尷尬的地位。

但希望這一期的內(nèi)容能夠幫助你在今后設(shè)計(jì)彈框的過(guò)程中變得更加得心應(yīng)手，堅(jiān)定而明確地選擇彈框控件，也還彈框一個(gè)清白。

要知道，彈框在輔助用戶(hù)完整完成任務(wù)的過(guò)程中，其實(shí)是功不可沒(méi)的。

拓展閱讀：

歡迎大家關(guān)注作者微信公眾號(hào)：「UCD耍家」