上文為大家介紹了平臺(tái)規(guī)范中的彈框類型，那么我們又該如何判斷在哪些場(chǎng)景中需要用彈框？需要的話又需要哪種類型的彈框？針對(duì)這些疑問(wèn)，筆者將展開(kāi)進(jìn)一步分析。

上一期我們講解了平臺(tái)規(guī)范中模態(tài)、非模態(tài)框的類型以及它們的使用方法。可回顧：《掌握“彈窗”設(shè)計(jì)規(guī)范，打造優(yōu)質(zhì)用戶體驗(yàn)》。

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

所以這一期我們來(lái)講一下彈框的正確打開(kāi)方式。最重要的還是，在每一次控件進(jì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ào)“好看”功能時(shí)，用戶點(diǎn)擊“好看”后，會(huì)彈出一個(gè) Popovers ，引導(dǎo)用戶記錄下想法，并分享至“看一看”。其好友通過(guò)“看一看”這個(gè)公共區(qū)域，可以了解到最近有哪些不錯(cuò)的公眾號(hào)內(nèi)容。該功能既可以讓用戶以文會(huì)友加深粘性，又可以依賴用戶主動(dòng)分享的意愿，給公眾號(hào)輸入更多的流量。

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

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

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

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

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

例如現(xiàn)在有許多APP在用戶發(fā)生文本框輸入錯(cuò)誤時(shí)，會(huì)采用文本框晃動(dòng)+設(shè)備震動(dòng)等觸覺(jué)反饋。這些交互反饋的含義已經(jīng)讓用戶形成思維習(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)框更容易打斷用戶心流，所以如果不是關(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)該選擇哪一類彈框，稍微有些以偏概全了。

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

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

1. 是否含有交互類操作

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

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

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

2. 是否有較高的重要級(jí)別

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

3. 是否包含大量文字

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

由非模態(tài)框在平臺(tái)規(guī)范中的定義就可以看出，Toast的最長(zhǎng)時(shí)間業(yè)界定義為3.5秒，太長(zhǎng)的文本信息用戶根本無(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（用什么）”了。

1. 模態(tài)框是用“Alert”還是“Action Sheet”

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

1. 操作項(xiàng)數(shù)量區(qū)別：iOS人機(jī)交互規(guī)范規(guī)定，為了避免 Alert 選項(xiàng)溢出可視區(qū)域，讓用戶產(chǎn)生滑動(dòng)行為，應(yīng)最多承載三個(gè)選項(xiàng)，但 Action Sheet 可以承載更多；
2. 位置區(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)用戶在批量刪除已下載音樂(lè)時(shí)，用戶點(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)茨定律在以后的文章中再詳解，有興趣可以先自行查閱資料。費(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ì)出更符合用戶體驗(yàn)的設(shè)計(jì)。

2. 非模態(tài)框是用“Toast”還是“SnakeBars”

SnakeBars 當(dāng)初由 Material Design 創(chuàng)造出來(lái)，就是為了解決用戶無(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)框的樣式、彈出位置等信息定義清楚，以免在類似場(chǎng)景中出現(xiàn)不同的彈框樣式，容易讓用戶產(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)用戶操作、給予用戶反饋，頻率過(guò)高就容易讓用戶厭煩。

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

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

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

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

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

五、總結(jié)

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

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

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

作者：UCD耍家；公眾號(hào)：UCD耍家（ID：ucdplayer）

本文由 @UCD耍家 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議