這篇文章是我自己在工作中受到各種摧殘、無(wú)數(shù)次開(kāi)會(huì)討論總結(jié)而來(lái)，如果你現(xiàn)在深處B端行業(yè)，強(qiáng)烈建議大家一定要看完。

收到很多同學(xué)關(guān)于彈窗的疑問(wèn)，因?yàn)樵贐端的設(shè)計(jì)過(guò)程中，會(huì)接觸到很多信息展示方面的疑惑，他們咨詢的維度各不相同，但是大致分為以下幾類：

由于B端產(chǎn)品的復(fù)雜多樣，我們今天所要討論的不單單局限于彈窗這一種控件的設(shè)計(jì)，而是一個(gè)“泛彈窗”的話題，透過(guò)彈窗去分析理解其他類型信息展示的業(yè)務(wù)邏輯。

從宏觀上講，目前B端設(shè)計(jì)中信息展示的控件可以分為三類：彈窗、抽屜、新建頁(yè)。在這三種展示形式中，我們需要明白它們四類分別是什么、有哪些、在什么場(chǎng)景中使用、以及在優(yōu)缺點(diǎn)和適應(yīng)的不同業(yè)務(wù)，這樣可以更好的為我們?cè)O(shè)計(jì)服務(wù)。

01

什么是彈窗？

1.彈窗的定義：

彈窗是一種中斷用戶當(dāng)前操作并對(duì)其進(jìn)行補(bǔ)充、或者對(duì)當(dāng)前操作進(jìn)行強(qiáng)制反饋的交互形式。

一般需要用戶進(jìn)行強(qiáng)交互[1]。它可以告知用戶關(guān)鍵的信息，需要用戶去做決定。彈窗越來(lái)越廣泛地被應(yīng)用于軟件、網(wǎng)頁(yè)、以及移動(dòng)設(shè)備中。它可以保留用戶當(dāng)前進(jìn)程的情況下，指引用戶完成一個(gè)特定的操作 。

[1] 強(qiáng)交互：是指想要完成用戶正常流程時(shí)必須先完成當(dāng)前交互的操作后才繼續(xù)正常流程

首先咱們老規(guī)矩，先普及一個(gè)知識(shí)點(diǎn)，什么是模態(tài)？

模態(tài)（modal）：

是杰夫·拉斯金在自己書(shū)中《Humane Interface》 (Page 42)的定義：人機(jī)界面對(duì)于跟定的動(dòng)作(gesture)是模態(tài)的(modal) ，如果界面的當(dāng)前狀態(tài)不在 用戶的注意之處；依賴于系統(tǒng)的狀態(tài)，界面對(duì)動(dòng)作會(huì)從幾種不同的響應(yīng)執(zhí)行中選擇一種執(zhí)行。

通俗一點(diǎn)講是用來(lái)表示使用相同行為具有兩種以上不同狀態(tài)的操作。當(dāng)系統(tǒng)在這些狀態(tài)之間切換時(shí)，操作的動(dòng)作相同但操作的結(jié)果卻又產(chǎn)生皆然不同的意義。

最典型模態(tài)的例子便是鍵盤(pán)中 Caps Lock鍵，當(dāng)按下 Caps Lock鍵后輸入的a-z由小寫(xiě)字母變?yōu)榇髮?xiě)；雖然用戶還是按下相同的字母，卻顯示兩種不同意義的字母類型。

同類型的例子還有數(shù)字鍵盤(pán)鎖（Num Lock）、滾動(dòng)鎖(Scroll Lock)。

根據(jù)時(shí)間進(jìn)行不斷演化，我們B端設(shè)計(jì)師工作中碰到的模態(tài)類型大多數(shù)都屬于模態(tài)層。

模態(tài)層：使用半透明黑色在頁(yè)面中進(jìn)行整體覆蓋。主要是在彈窗的底層，襯托彈窗，使彈窗不會(huì)被忽視掉，想要繼續(xù)使用就必須先與彈窗進(jìn)行交互

優(yōu)勢(shì)：通過(guò)全局的半透明黑色能夠讓用戶更加聚焦，集中精力去處理好當(dāng)前事情，能夠通過(guò)透明度展示背景，讓用戶了解到自己并沒(méi)有離開(kāi)當(dāng)前頁(yè)面

劣勢(shì)：打擾用戶，感到強(qiáng)烈的中斷的感受

2.彈窗的分類：

在彈窗的交互形式上，它主要分為模態(tài)彈窗與非模態(tài)彈窗兩種形式：

模態(tài)彈窗：是位于瀏覽器的主頁(yè)面核心區(qū)域，需要用戶對(duì)它做出相應(yīng)交互，模態(tài)才會(huì)消失。而彈窗會(huì)因?yàn)樽陨淼奈潭取⑼Ａ魰r(shí)間、信息量承載多少被劃分為多種彈窗類型進(jìn)行區(qū)分，常見(jiàn)的彈窗分別為：對(duì)話彈窗、內(nèi)嵌表單彈窗、分步表單彈窗、文件選擇彈窗、復(fù)雜信息展示。

非模態(tài)彈窗：與模態(tài)完全相反，它更加溫和，不會(huì)打擾到用戶的正常使用。通常這類彈窗只會(huì)在屏幕上短暫停留，幾秒就會(huì)消失，也因此用戶感受不到他的存在。它的缺點(diǎn)也非常明顯，展示時(shí)間較短，不適合展示重要信息、不能承載大量文案，常見(jiàn)的類型有：通知提醒、全局提示、警告提示、氣泡卡片、文字提示。

3.彈窗的來(lái)源：

彈窗雖然在2010年被《時(shí)代》周刊評(píng)選為50大最糟糕的發(fā)明之一，但是彈窗最開(kāi)始的出現(xiàn)，其實(shí)是為了簡(jiǎn)化用戶頁(yè)面、節(jié)約用戶瀏覽器頁(yè)簽。

因?yàn)樵缙诰W(wǎng)頁(yè)設(shè)計(jì)中，常常需要保留當(dāng)前頁(yè)但又需要進(jìn)行跳轉(zhuǎn)的頁(yè)面，比如登錄頁(yè)，但用戶每次使用時(shí)都需要跳轉(zhuǎn)到一個(gè)新頁(yè)面中，而登錄最后都是需要回到之前的頁(yè)面中，在未使用彈窗之前，往往需要新開(kāi)很多頁(yè)面，而且用戶的使用不會(huì)聚焦。

在淘寶的早期，遭受ebay的圍追堵截，聲稱要致淘寶于死地，18個(gè)月內(nèi)結(jié)束這場(chǎng)戰(zhàn)爭(zhēng)！

2004年，淘寶網(wǎng)剛成立一年，像大多數(shù)創(chuàng)業(yè)網(wǎng)站一樣，活得很艱辛。

當(dāng)時(shí)中國(guó)互聯(lián)網(wǎng)流量主要集中在三大門戶，新浪、網(wǎng)易、搜狐，ebay與三大門戶簽訂了排他性協(xié)議，三大門戶不能和其他電商網(wǎng)站合作。ebay又陸續(xù)與其他有大型網(wǎng)站簽訂排他性協(xié)議。有點(diǎn)像現(xiàn)在的京東、淘寶二選一，于是被逼無(wú)奈的淘寶開(kāi)始向中小網(wǎng)站發(fā)力，采取流氓彈窗的形式，在各個(gè)網(wǎng)站進(jìn)行刷臉操作，讓大家不斷熟悉。

2005年，北京網(wǎng)絡(luò)行業(yè)協(xié)會(huì)在收集網(wǎng)民對(duì)“流氓軟件”投訴的排名中，淘寶位居第二

2006年，淘寶當(dāng)時(shí)的總經(jīng)理——孫彤宇，他表示當(dāng)年使用流氓彈窗是不得已而為之。

而采取這種方式的淘寶，經(jīng)由幾年的努力，從2003年的ebay份額80%，到2004年淘寶份額41%，ebay份額53%。

在互聯(lián)網(wǎng)早期，廣告彈窗確實(shí)幫助很多產(chǎn)品起勢(shì)，到如今雖說(shuō)十分煩人但也是每個(gè)公司盈利的重要手段之一。因此彈窗也在中國(guó)的互聯(lián)網(wǎng)行業(yè)中，留下濃墨重彩的一筆

4.彈窗的現(xiàn)狀：

現(xiàn)如今彈窗已經(jīng)是一個(gè)可怕的存在，在PC端應(yīng)用中，廣告彈窗無(wú)時(shí)無(wú)刻都在不停的打擾用戶，無(wú)論是360的自身全家桶套件、又或者是每一個(gè)網(wǎng)頁(yè)中不斷彈出廣告，總是強(qiáng)制打斷用戶的工作流程獲取用戶的注意力。人們也逐漸形成巴甫洛夫條件反射[2]，一看到彈窗就會(huì)想快速找到關(guān)閉按鈕。用戶經(jīng)過(guò)十多年的互聯(lián)網(wǎng)產(chǎn)品的“培養(yǎng)”，使廣告彈窗變得五花八門，人們應(yīng)對(duì)彈窗，也有了自己的一套方法，相信每一個(gè)人都有被彈窗惡心的時(shí)候。而彈窗作為人人唾棄的設(shè)計(jì)形式，卻在B端產(chǎn)品中擁有獨(dú)特的一面，看完文章希望你能理解B端產(chǎn)品的彈窗。

[2]巴甫洛夫條件反射：是指一個(gè)刺激和另一個(gè)帶有獎(jiǎng)賞或懲罰的無(wú)條件刺激多次聯(lián)結(jié)，可使個(gè)體學(xué)會(huì)在單獨(dú)呈現(xiàn)該一刺激時(shí)，也能引發(fā)類似無(wú)條件反應(yīng)的條件反應(yīng)。

02

彈窗的拆解

以最簡(jiǎn)單的彈窗為例，我們來(lái)對(duì)整個(gè)彈窗部分進(jìn)行拆解，彈窗在宏觀上來(lái)看一般包含模態(tài)層、關(guān)閉入口以及彈窗主體

1.模態(tài)層（Modal）

模態(tài)層通常是一個(gè)半透明的黑色，將整個(gè)頁(yè)面進(jìn)行遮蓋，使得用戶在使用彈窗或其他控件時(shí)會(huì)更加專注。同時(shí)采用半透明的設(shè)計(jì)，能通過(guò)半透明的模態(tài)層讓用戶了解到自己并沒(méi)有跳出當(dāng)前頁(yè)面，不必慌張。

在一個(gè)看似簡(jiǎn)單的模態(tài)層中，需要進(jìn)行三方面的思考

a.顏色深度的思考

顏色能給用戶傳達(dá)出許多信息，模態(tài)層上也是一樣，在制定相應(yīng)的規(guī)范開(kāi)始前，我們需要思考自身產(chǎn)品的定位，這樣在整個(gè)產(chǎn)品的顏色規(guī)范層面能夠做的到統(tǒng)一。模態(tài)層顏色較淺，這樣能盡可能減少用戶的跳出感，讓產(chǎn)品更加親民，貼切；模態(tài)層顏色較深，這樣會(huì)讓用戶更加專注當(dāng)前彈窗頁(yè)面，讓產(chǎn)品更加專業(yè)。

b.多模態(tài)層檢查

因?yàn)槲恼麻_(kāi)頭解釋過(guò)模態(tài)的特殊性，所以在正常情況下模態(tài)的狀態(tài)只允許出現(xiàn)一層，即模態(tài)層的唯一。如果需要出現(xiàn)多個(gè)模態(tài)層時(shí)，就需要進(jìn)行深入考慮流程、設(shè)計(jì)形式是否合理。這里建議從以下幾個(gè)方面進(jìn)行思考。

流程優(yōu)化：在使用多模態(tài)層前后的過(guò)程中，流程是否足夠精簡(jiǎn)清晰，能否通過(guò)優(yōu)化，將流程變得更加合理，減少不必要的多模態(tài)層的使用。

內(nèi)容量展示優(yōu)化：當(dāng)內(nèi)容量較少時(shí)，可以采取下拉菜單進(jìn)行設(shè)計(jì)上的優(yōu)化，這樣可以解決多模態(tài)層進(jìn)行疊加的問(wèn)題

彈窗形式是否合適：當(dāng)頁(yè)面涉及到很多交互時(shí)，不建議直接使用彈窗（文章第四模塊會(huì)講到）

c.多模態(tài)層的設(shè)計(jì)

但在很多實(shí)際B端業(yè)務(wù)中，通過(guò)上面的方法也不可避免會(huì)遇到多模態(tài)層的情況。這時(shí)你需要冷靜面對(duì)而不是慌張，這里給大家講解當(dāng)你遇到需要多層模態(tài)展示時(shí)，需要注意的點(diǎn)：

多模態(tài)層超過(guò)2層時(shí)最好只展示固定顏色

在模態(tài)過(guò)多的情況，我們會(huì)給一個(gè)最大值，即當(dāng)彈窗超過(guò)3層只展示固定顏色即可

例如：在紛享銷客的產(chǎn)品中，因?yàn)槭且粋€(gè)aPaaS產(chǎn)品，就會(huì)有很多開(kāi)放用戶進(jìn)行配置的邏輯，考慮到方便用戶進(jìn)行編輯，會(huì)存在用戶進(jìn)行來(lái)回跳轉(zhuǎn)的情況，因此就會(huì)存在不停進(jìn)行來(lái)回跳轉(zhuǎn)，形成多模態(tài)層的狀況

模態(tài)位置錯(cuò)層，讓用戶知道現(xiàn)在處在第幾層

在多模態(tài)疊加的過(guò)程中，用戶很容易不清楚自己所在時(shí)那一層當(dāng)中，導(dǎo)致視覺(jué)層級(jí)混亂。

這通常的處理辦法就是將多個(gè)模態(tài)層疊加的狀態(tài)進(jìn)行錯(cuò)層，這樣能夠讓用戶知道自己所在的層級(jí)，幫助用戶了解邏輯關(guān)系

2.關(guān)閉入口（Close）

關(guān)閉入口作為用戶退出的重要途徑，主要是為了方便用戶進(jìn)行快速的退出。而在關(guān)閉入口的設(shè)計(jì)中，需要注意以下幾點(diǎn)：

a.多形態(tài)的關(guān)閉

一個(gè)體驗(yàn)良好的彈窗需要提供多個(gè)關(guān)閉入口，讓用戶進(jìn)行退出。一方面彈窗是打斷用戶正常流程的操作，而為了不讓用戶感到反感需要提出多個(gè)入口；另一方面用戶更能夠通過(guò)多個(gè)入口的設(shè)計(jì)，快速返回到正常操作流程，降低用戶不必要的流失。我一共總結(jié)有四種入口途徑，方便大家在設(shè)計(jì)時(shí)對(duì)照查看是否做到。

入口一：關(guān)閉按鈕

關(guān)閉按鈕是最為常規(guī)的操作，主要是每一個(gè)用戶對(duì)于它都足夠的熟悉。因此建議不需要改變關(guān)閉按鈕的位置，一般會(huì)有在彈窗內(nèi)與彈窗外兩種形式可供大家進(jìn)行選擇。

入口二：取消按鈕

取消按鈕一般和確定按鈕成對(duì)出現(xiàn)，取消按鈕的出現(xiàn)主要是為了輔佐確定按鈕，當(dāng)用戶看到確定并想要反悔時(shí)，能夠給他提供給他相應(yīng)的回退機(jī)制。

入口三：點(diǎn)擊模態(tài)層

用戶可以點(diǎn)擊模態(tài)層，進(jìn)行取消。因?yàn)橛脩酎c(diǎn)擊模態(tài)層，默認(rèn)是想要回到模態(tài)層下方的界面中，這個(gè)入口就顯得尤為必要。通常點(diǎn)擊模態(tài)窗是用戶最方便的退出方式，能夠使用戶快速退出。

入口四：Esc鍵

Esc鍵誕生于1960年，位于每一個(gè)電腦鍵盤(pán)的左上方，為英文單詞escape的縮寫(xiě)。

escape翻譯成中文為逃脫， 逃跑，漏出， 泄漏之意。在很多設(shè)計(jì)師的認(rèn)知層面中，Esc鍵退出似乎是一個(gè)可有可無(wú)的按鍵存在。

而在我們實(shí)際調(diào)研自己產(chǎn)品當(dāng)中發(fā)現(xiàn)，經(jīng)常習(xí)慣使用Esc鍵的用戶占33.7%，。而這類快捷鍵上的優(yōu)化恰恰能夠提升用戶使用的核心效率，在很多時(shí)候能夠減輕使用者的操作成本。

在B端產(chǎn)品中，調(diào)用鍵盤(pán)進(jìn)行操作優(yōu)化，是一個(gè)不可忽視的用戶爽點(diǎn)。

例如：我們使用聊天軟件，在用戶輸入完成后總是習(xí)慣點(diǎn)擊Enter進(jìn)行提交、使用PageUp 以及 PageDown用來(lái)替代鼠標(biāo)進(jìn)行列表頁(yè)翻頁(yè)、空格用來(lái)對(duì)頁(yè)面進(jìn)行整體一屏滾動(dòng)，這些都是調(diào)用鍵盤(pán)進(jìn)行快捷操作，提升效率

b.固定位置出現(xiàn)

在關(guān)閉入口設(shè)計(jì)當(dāng)中，無(wú)論是將入口設(shè)計(jì)在彈窗內(nèi)或者是彈窗外，都需要在固定位置出現(xiàn)。

固定位置的出現(xiàn)能夠讓用戶養(yǎng)成良好的習(xí)慣，減少用戶的思考成本。常見(jiàn)的彈窗關(guān)閉按鈕基本都在右上角進(jìn)行展示，因此不建議在位置上進(jìn)行創(chuàng)新，會(huì)適得其反。

c.錄入場(chǎng)景的特殊處理

在關(guān)閉入口設(shè)計(jì)中，常常會(huì)遇到這種情況，用戶在彈窗中進(jìn)行錄入的場(chǎng)景下，誤操作點(diǎn)到模態(tài)層后，用戶辛苦錄入的大段文字丟失。

這類情況的出現(xiàn)，常常表示用戶在彈窗的全流程場(chǎng)景中沒(méi)有進(jìn)行深入的思考。我總結(jié)了市面上對(duì)于錄入彈窗這種特殊的處理方式，共有以下幾點(diǎn)：

1.對(duì)于大型文本的錄入過(guò)程中，如果使用彈窗，建議采取草稿箱進(jìn)行自動(dòng)保存、或者放棄彈窗使用新建頁(yè)面進(jìn)行展示。例如：常見(jiàn)的知乎就是通過(guò)彈窗+自動(dòng)保存進(jìn)行實(shí)現(xiàn)

2.對(duì)于普通文本的錄入過(guò)程中，如果使用彈 窗，建議采取點(diǎn)擊關(guān)閉進(jìn)行提示

3.彈窗中有用戶下拉菜單進(jìn)行選擇的，可采取前端記住用戶選項(xiàng)，當(dāng)用戶發(fā)生誤操作時(shí)，可重新呼出彈窗即可

3.彈窗主體（Mian）

在彈窗的主體中，會(huì)因?yàn)閺棿暗念愋筒煌瑫?huì)有所加減，但無(wú)外乎就是我總結(jié)的一下五類

a.圖標(biāo)

在彈窗中，圖標(biāo)的使用主要是為了更直觀表達(dá)彈窗的具體狀態(tài)。例如：“放置警告圖標(biāo)代表用戶需要謹(jǐn)慎操作、放置成功圖標(biāo)代表用戶已經(jīng)完成操作。”

b.彈窗標(biāo)題

使用簡(jiǎn)短的語(yǔ)言告訴用戶功能，如果是對(duì)話彈窗，一般是疑問(wèn)句，例如：“是否刪除列表？“；若是其他具有特定功能的彈窗，一般為動(dòng)詞短語(yǔ)，例如：“刪除客戶、查看詳情”，一般不可刪除。

c.內(nèi)容信息

在對(duì)話彈窗中，主要是對(duì)使用彈窗后產(chǎn)生的結(jié)果進(jìn)行具體描述，講出你操作可能造成的結(jié)果以及一些說(shuō)明，例如：“刪除客戶后，你可以在公海找到該客戶”；而如果是非對(duì)話框彈窗，則一般不需要內(nèi)容信息。

d.按鈕選擇

按鈕選擇主要是對(duì)彈窗交互進(jìn)行的結(jié)果，一般是相對(duì)立的兩個(gè)操作進(jìn)行出現(xiàn)，例如：“確定/取消、保存/刪除等...”

如果你對(duì)按鈕有疑惑，建議看我上一篇文章的總結(jié)。

e.選項(xiàng)操作

在彈窗中，還有因?yàn)闃I(yè)務(wù)的不同，在彈窗中增加相應(yīng)的選項(xiàng)操作，選項(xiàng)操作通常是一些常規(guī)控件，不宜進(jìn)行特殊處理，例如：“輸入框、單選框、復(fù)選框等...”

彈窗會(huì)根據(jù)主體的不同，分為不同的彈窗類型，通過(guò)上面素材進(jìn)行組合，形成下面不同類型的彈窗，下面為大家講講彈窗的類型

03

彈窗的類型

第一節(jié)講到，在彈窗的類型中，主要分為兩類：模態(tài)彈窗和非模態(tài)彈窗

1.模態(tài)彈窗：

在實(shí)際項(xiàng)目中，我們把模態(tài)彈窗進(jìn)行拆分，分為五小類：“對(duì)話彈窗、內(nèi)嵌表單彈窗、分步彈窗、文件選擇、復(fù)雜信息展示。”

a.對(duì)話彈窗

對(duì)話彈窗是我們?nèi)粘Ｊ褂弥凶顬轭l繁的彈窗形式，對(duì)話彈窗最初用于很重要或者有風(fēng)險(xiǎn)的操作，這時(shí)會(huì)彈出一個(gè)對(duì)話形式的彈窗給用戶，需要用戶根據(jù)提示來(lái)進(jìn)行判斷。隨著B(niǎo)端產(chǎn)品的不斷發(fā)展，對(duì)話框已經(jīng)演變成用戶注冊(cè)、提交、信息修改、編輯、形式各樣的操作承載體。

b.內(nèi)嵌表單彈窗

內(nèi)嵌表單彈窗作為彈窗最為重要的組成部分，在B端產(chǎn)品的日常使用中幾乎存在的方方面面

因其里面經(jīng)常會(huì)添加各種選項(xiàng)操作，例如：“ckeckbox、radio、下拉菜單等等“，通過(guò)彈窗去完成形式各樣的操作

內(nèi)嵌表單的好處是能夠通過(guò)小面積的彈窗完成對(duì)數(shù)據(jù)的編輯修改，方便快捷進(jìn)行增刪改的處理。

c.分步彈窗

分步彈窗是分步表單的衍生品，因?yàn)樵趯?shí)際項(xiàng)目中，發(fā)現(xiàn)大型的分步表單難以滿足現(xiàn)階段對(duì)于小型內(nèi)容展示的需求，因此分步彈窗便誕生

分步彈窗的主要特點(diǎn)是頁(yè)腳上會(huì)有下一步、上一步兩個(gè)選項(xiàng)供用戶進(jìn)行選擇，同時(shí)用戶點(diǎn)擊下一步后，就會(huì)在左上角提示用戶可以進(jìn)行返回。

分步彈窗能實(shí)現(xiàn)具有先后條件且內(nèi)容較少的需求，在工作中主要是新手引導(dǎo)或者有前后關(guān)系錄入的彈窗會(huì)用到。例如：“簡(jiǎn)道云的新手引導(dǎo)、XXXX步驟注冊(cè)”都可以采取分步彈窗的形式。

d.附件選擇彈窗

附件上傳彈窗是用戶文件上傳的重要途徑，在Human Interface Guidelines中，明確指出分為Window Anatomy、Column Views，而在B端產(chǎn)品中，現(xiàn)都采取拖動(dòng)文件上傳，相對(duì)而言更簡(jiǎn)便。

e.復(fù)雜信息彈窗

復(fù)雜信息彈窗是一些大型B端項(xiàng)目經(jīng)常遇到的問(wèn)題。在遇到多信息需要進(jìn)行展示與交互時(shí)，通常很難給出很好的解決辦法。因此復(fù)雜信息展示彈窗也就誕生。我們團(tuán)隊(duì)對(duì)其的定義主要是彈窗面積足夠大，同時(shí)在彈窗內(nèi)部存在很多交互，與新建頁(yè)抽屜等情況類似。

例如：Trello、Teambition的任務(wù)彈框雖然信息較多，但好處是能快速切換到不同的任務(wù)，增加效率。

2.非模態(tài)彈窗

a.通知提示（Notification）

通常在頁(yè)面右上角，顯示通知提醒信息，給用戶進(jìn)行重度的打擾。經(jīng)常用于產(chǎn)品系統(tǒng)主動(dòng)推送以及消息提醒。

例如：在我們自家產(chǎn)品中，通知提醒框用戶對(duì)用戶審批信息進(jìn)行展示，同時(shí)可讓用戶進(jìn)行跳轉(zhuǎn)查看，方便用戶進(jìn)行快速使用。

b.全局提示（Message）

全局提示是希望不中斷用戶正常操作的前提下，顯示一條簡(jiǎn)短的消息。這條消息通常都是輕量的一般在短時(shí)間就會(huì)自動(dòng)消失，并不會(huì)干擾到用戶。全局提示一般在整個(gè)頁(yè)面居中的位置，會(huì)展示3-5秒鐘或者用戶進(jìn)行點(diǎn)擊后就會(huì)消失。

例如：在我們產(chǎn)品的詳情頁(yè)當(dāng)中會(huì)有列表快捷編輯功能，當(dāng)用戶每進(jìn)行一次編輯操作，都會(huì)給用戶進(jìn)行全局提示，操作成功

c.警告提示 (Alert)

提醒用戶需要立即處理的錯(cuò)誤，提示方式與全局提示類似，但是與全局提示不同的是，警告提示為常駐展示，需要用戶進(jìn)行手動(dòng)關(guān)閉，但并不會(huì)打斷用戶操作。同時(shí)在設(shè)計(jì)形式上，也需要與全局提示有所區(qū)別，建議采取背景顏色進(jìn)行對(duì)比

d.氣泡卡片（Popover/Popup）

氣泡卡片是對(duì)當(dāng)前元素進(jìn)行相關(guān)操作或相應(yīng)描述，可以收納到卡片中，根據(jù)用戶的操作行為進(jìn)行展示。通常可以通過(guò)點(diǎn)擊、鼠標(biāo)Hover進(jìn)行觸發(fā)，氣泡卡片與Tooltip 的區(qū)別是，用戶可以對(duì)浮層上的元素進(jìn)行操作，因此它可以承載更復(fù)雜的內(nèi)容，比如鏈接或按鈕等。

e.文字提示（Tooltip）

Tooltip是簡(jiǎn)潔版的氣泡卡片，一般提示文字為主。最開(kāi)始在瀏覽器默認(rèn)的形式中，就有Tooltip的身影，而隨后隨著對(duì)設(shè)計(jì)的不斷要求，逐漸演化，便形成了氣泡卡片的形式。

重要提示優(yōu)先級(jí)

按量級(jí)從重到輕排序：通知提醒框 > 警告提示 > 全局提示?> 氣泡卡片?>?文字提示

3.特殊類型彈窗

因?yàn)樵趶棿爸?#xff0c;有一些雖然不是彈窗的形式，但是做的是彈窗的活，例如：“抽屜、新建頁(yè)”

在講到彈窗就必須要將抽屜和新建頁(yè)一起討論，相信肯定會(huì)有很多質(zhì)疑的聲音將他們放在特殊彈窗里。但是我身邊有很多人問(wèn)過(guò)我關(guān)于彈窗、抽屜、新建頁(yè)的相關(guān)問(wèn)題，因此在文章內(nèi)將抽屜歸納為一個(gè)特殊的彈窗形式。

a.抽屜

抽屜適合與主頁(yè)面有著強(qiáng)連貫性的頁(yè)面進(jìn)行展示。它與彈窗都有著相類似甚至相同的API，只是在展示形式上存在較大差異。

抽屜演化出來(lái)的形式有很多，比如：iOS的Human Interface Guidelines 中的Sheets [3]，MaterialDesign 中的BackDrop [4]，抽屜涉及的范圍廣，因此用戶對(duì)于此類交互的理解以及操作成本都相應(yīng)減小。

[3]sheets：視圖彈窗，在iOS 13新增了一種操作視圖，操作的視圖會(huì)被縮小，同時(shí)淡化置于新跳出視圖的下方，新版的視圖有助于用戶明確信息的層級(jí)，便于用戶找回此前被暫停的任務(wù)。

[4]BackDrop：一個(gè)Backdrop出現(xiàn)在應(yīng)用程序中的所有其他界面底部, 顯示相關(guān)信息內(nèi)容和可操作的內(nèi)容。

b.新建頁(yè)

新建頁(yè)基本就是萬(wàn)精油，無(wú)論頁(yè)面內(nèi)容量是多少、頁(yè)面間是否連貫、以及使用頻率怎樣，都可以采取新建頁(yè)，但是新建頁(yè)往往也不是最優(yōu)的解決辦法。

在新建頁(yè)中又分為：覆蓋當(dāng)前窗口以及新窗口跳轉(zhuǎn)兩種形式，在場(chǎng)景上可以根據(jù)兩者差異進(jìn)行選擇，究其本質(zhì)，就是a標(biāo)簽href屬性與target屬性上的差異。

04

如何選擇彈窗 抽屜 新建頁(yè)

在我們?nèi)粘ＴO(shè)計(jì)中，常常抉擇于：彈窗、抽屜、新建頁(yè)之間，總覺(jué)得使用某一種交互形式會(huì)更好，但是卻說(shuō)不出其中的原因，猶豫究竟應(yīng)該使用那種展現(xiàn)形式，這就需要我們通過(guò)具體的要素方法進(jìn)行相應(yīng)的分析。

常常看見(jiàn)設(shè)計(jì)師麻木的進(jìn)行簡(jiǎn)單的拖拽組件，并沒(méi)有進(jìn)行深入思考，也根本不會(huì)通過(guò)頁(yè)面的分析方法，去了解事物的本質(zhì)，今天告訴大家這三種要素能夠幫助你進(jìn)行交互分析

1.頁(yè)面內(nèi)容量：

頁(yè)面內(nèi)容量決定呈現(xiàn)形式

不知道大家閱讀了這么久，有沒(méi)有發(fā)現(xiàn)一個(gè)問(wèn)題，在這篇文章中，我不斷強(qiáng)調(diào)內(nèi)容量。因?yàn)闊o(wú)論是彈窗、抽屜、新建頁(yè)，究其本身就是一個(gè)內(nèi)容載體，因此選擇如何使用，很大程度上取決你的內(nèi)容量的多少。

內(nèi)容量：通常包含了你頁(yè)面當(dāng)中文字、圖片、視頻、表格、以及各種復(fù)雜的交互。如果你覺(jué)得頁(yè)面已經(jīng)密密麻麻，在彈窗中根本無(wú)法呈現(xiàn)，這時(shí)候你就需要考慮彈窗是否合適～

而彈窗、抽屜、新建頁(yè)，如何抉擇，它們承載內(nèi)容的量也存在一個(gè)大小關(guān)系

新建頁(yè)?>?抽屜?>?彈窗

但是不能從一個(gè)緯度去思考頁(yè)面內(nèi)容量的多少，內(nèi)容的寬度以及深度都是需要去分析，通常：內(nèi)容的深度較深最好采取抽屜、內(nèi)容寬度較寬則彈窗形式更為合理、而新建頁(yè)合適寬度與深度同時(shí)較大的產(chǎn)品中。

也就是彈窗只能承載較小內(nèi)容、抽屜其次、新建頁(yè)最優(yōu)，但是在實(shí)際工作中往往并沒(méi)有這么簡(jiǎn)單，在本節(jié)最后，舉了幾個(gè)實(shí)例進(jìn)行簡(jiǎn)單分析～

2.頁(yè)面連貫性

頁(yè)面連貫性直接決定用戶的使用體驗(yàn)

當(dāng)瀏覽器新開(kāi)一個(gè)標(biāo)簽進(jìn)行展示時(shí)，頁(yè)面的連貫性是最弱的，因?yàn)橛脩粜枰M(jìn)行困難的操作返回到之前頁(yè)面，并讓用戶感到十分懵逼，同時(shí)你也可以理解新開(kāi)頁(yè)面是較為獨(dú)立的，不會(huì)受到前頁(yè)面的干擾，而要決定頁(yè)面連貫性的核心，還是以自身業(yè)務(wù)出發(fā)

從三個(gè)不同交互形式上看，頁(yè)面連貫性明顯抽屜小于彈窗小于新建頁(yè)

例如：使用紛享逍客在客戶列表頁(yè)與詳情頁(yè)之間連貫性就很強(qiáng)，因?yàn)橛脩粜枰斍榕c列表之間來(lái)回看進(jìn)行對(duì)比，也因此紛享逍客將抽屜模態(tài)層都給去除，更方便自身業(yè)務(wù)。

3.頁(yè)面切換成本

頁(yè)面切換成本決定用戶使用效率

當(dāng)一個(gè)二級(jí)頁(yè)面使用頻率過(guò)高時(shí)，就證明用戶需要在A與B頁(yè)面之間進(jìn)行來(lái)回切換，這時(shí)候考慮頁(yè)面反復(fù)出現(xiàn)是否流暢，是否有切換成本的產(chǎn)生，而B(niǎo)端產(chǎn)品效率至上的原則，便需要思考用戶怎樣切換成本更低。

頁(yè)面切換成本越來(lái)越受到重視，從最近iOS13更新的幾點(diǎn)以及微信、知乎app更新上可以發(fā)現(xiàn)

在IOS12到IOS13中，一個(gè)較大更新便是新版視圖彈窗

在以前的視圖彈窗中，用戶經(jīng)常忘了此前他們進(jìn)行的操作任務(wù)，而iOS13能夠讓用戶更加明確，減少了頁(yè)面間的切換成本。

在微信與知乎中，因?yàn)橛脩粜枰?jīng)常切換，之前用戶難以在幾個(gè)頁(yè)面來(lái)回跳轉(zhuǎn)，而浮窗的出現(xiàn)，剛好能夠解決這一問(wèn)題，減少了頁(yè)面間的切換成本

想用B端幾個(gè)典型產(chǎn)品的幾個(gè)案例來(lái)解釋彈窗、抽屜與新建頁(yè)

我舉一個(gè)簡(jiǎn)單例子，現(xiàn)在你需要去設(shè)計(jì)一個(gè)客戶詳情頁(yè)，但是因?yàn)榭蛻粼斍轫?yè)需要展示大量信息以及表格，同時(shí)還會(huì)有各種各樣的交互行為：“點(diǎn)擊、錄入、甚至拖拽”，這時(shí)候你會(huì)怎么選擇？

現(xiàn)在你覺(jué)得采取彈窗就不太合適，感覺(jué)抽屜進(jìn)行展示會(huì)更加合理。帶著疑問(wèn)，我們看看市面上不同的產(chǎn)品給出了完全不同的解決辦法，當(dāng)然他們每個(gè)產(chǎn)品的側(cè)重點(diǎn)不同，導(dǎo)致最后的結(jié)果不同。

紛享銷客、銷售易——抽屜形式，方便用戶切換

它們采取抽屜的形式，因?yàn)榧娤礓N客與銷售易都是屬于aPaas平臺(tái)[5]，存在用戶去設(shè)置不同字段以及不同展示邏輯，每個(gè)詳情頁(yè)又會(huì)存在快速跳轉(zhuǎn)等一系列方便用戶同時(shí)也會(huì)帶來(lái)交互問(wèn)題的“騷操作”[6]，導(dǎo)致抽屜的選擇是大于其他兩種彈窗形式。

其次在內(nèi)容量上，可以從截圖上看出，內(nèi)容大多以文字記錄為主，不會(huì)存在大段文字以及大圖的情況，因此不會(huì)存在寬度過(guò)寬的情況。只是在字段數(shù)量上會(huì)有所增多，導(dǎo)致字段的高度會(huì)隨之增加，因此滿足上面條件的交互控件只有抽屜與新建頁(yè)。

最后在連貫性與切換成本上，明顯在CRM產(chǎn)品中，用戶需要經(jīng)常來(lái)回切換去對(duì)比客戶信息以及銷售的更進(jìn)狀態(tài)，因此在抽屜的體驗(yàn)上，能夠讓用戶進(jìn)行連貫的用戶體驗(yàn)，因此抽屜最為合適。

[5]aPaas平臺(tái)：aPaaS的全稱是application Platform as a Service，即應(yīng)用程序平臺(tái)即服務(wù)。Gartner對(duì)其所下的定義是：“這是基于PaaS（平臺(tái)即服務(wù)）的一種解決方案，支持應(yīng)用程序在云端的開(kāi)發(fā)、部署和運(yùn)行，提供軟件開(kāi)發(fā)中的基礎(chǔ)工具給用戶，包括數(shù)據(jù)對(duì)象、權(quán)限管理、用戶界面等。”

[6]騷操作：主要是aPaas平臺(tái)可以連續(xù)點(diǎn)擊同類型的關(guān)鍵詞進(jìn)行相互跳轉(zhuǎn)，實(shí)現(xiàn)我們團(tuán)隊(duì)內(nèi)部所說(shuō)的不斷"套娃"，看似很不符合產(chǎn)品邏輯，實(shí)際是為了提升用戶在詳情頁(yè)中的體驗(yàn)。通過(guò)多模態(tài)層的設(shè)計(jì)圖就能夠明白

Hubspot、Zoho——新建頁(yè)形式，查看全量信息

Hubspot與Zoho都是國(guó)外兩款非常出名的CRM，如果在做CRM領(lǐng)域的同學(xué)沒(méi)有體驗(yàn)過(guò)的一定要試試

首先，因?yàn)?strong>Hubspot、Zoho是屬于國(guó)外產(chǎn)品傳入中國(guó)，因此在使用習(xí)慣上，更偏向于專注去做一件事，比如Hubspot上，在其客戶詳情頁(yè)能夠直接進(jìn)行添加日程、撥打電話、發(fā)送郵件等幾十項(xiàng)操作，并且一切圍繞著Marketing、Sales展開(kāi)，因此使得頁(yè)面需要更加專注，需要看到更加全量的信息。

再次國(guó)外Saas用戶也是對(duì)完整流程的操作更加青睞（一個(gè)操作只干一件事），而國(guó)內(nèi)喜歡快捷融合（喜歡有很多快捷操作）因此造成Hubspot與Zoho都采取新建頁(yè)的形式查看數(shù)據(jù)（有機(jī)會(huì)一定與大家聊聊國(guó)內(nèi)外B端產(chǎn)品的差異）

不過(guò)非常推薦大家體驗(yàn)hubspot，細(xì)節(jié)滿滿～

明道云、Teambition——復(fù)雜信息彈窗

它們采取大彈窗的形式，因?yàn)閮烧叨际菍⑿畔⒎譃樽笥覂刹糠?#xff0c;左側(cè)信息展示方便用戶進(jìn)行關(guān)鍵信息的閱讀，滿足用戶的實(shí)際需求；右側(cè)進(jìn)行靈活的展示，能夠通過(guò)不同業(yè)務(wù)的信息進(jìn)行相應(yīng)分配。

復(fù)雜信息彈窗都會(huì)在左上角進(jìn)行快速切換，通過(guò)上下箭頭滿足用戶快速切換的需求。

05

彈窗細(xì)節(jié)

1.彈窗高度

關(guān)于彈窗高度，主要講的是模態(tài)彈窗。我也只是講行業(yè)中現(xiàn)在的集中做法羅列出來(lái)，大家根據(jù)自身產(chǎn)品進(jìn)行使用。

頂部固定高度

彈窗與頁(yè)面左右兩邊進(jìn)行居中，所以主要標(biāo)注的就是彈窗的高度問(wèn)題，固定高度就是將彈窗整個(gè)固定在對(duì)應(yīng)的尺寸高度，一般為120px、160px、200px，根據(jù)彈窗尺寸進(jìn)行相應(yīng)調(diào)整。

需要注意，如果是固定高度，一定需要在頁(yè)面中進(jìn)行相應(yīng)標(biāo)注。同時(shí)需要思考彈窗的多個(gè)場(chǎng)景場(chǎng)景，否則會(huì)造成交互混亂，影響用戶使用。

全局居中

全局居中也是最為常見(jiàn)的一種做法，放在用戶視覺(jué)的正中心，讓用戶的使用上也更加友好。

2.彈窗尺寸

在討論尺寸之前，我們先對(duì)市面上主流電腦分辨率進(jìn)行調(diào)研統(tǒng)計(jì)

數(shù)據(jù)來(lái)源與百度統(tǒng)計(jì)流量研究院

從數(shù)據(jù)上可以看出，目前市面上的屏幕分辨率占比1920x1080還是占據(jù)主導(dǎo)

基本上最小的分辨率都為1280x768 （因1024x768占比實(shí)在太小，在頁(yè)面中，可以采取滾動(dòng)條進(jìn)行兼容）所以一般將彈窗寬度設(shè)置到1000px以內(nèi)，基本能滿足日常需求。

定義彈窗高度：

我們以最小屏幕尺寸：768px來(lái)定義，一般瀏覽器輸入框+菜單欄的高度為80px，底部系統(tǒng)工具欄高度為40px

768px-80px-40px=約648px

對(duì)于頁(yè)面中自適應(yīng)的情況所以上需留出固定安全舉例，所以彈窗的高度必須小于600px。

定義彈窗寬度：

彈窗寬度會(huì)根據(jù)內(nèi)容量，進(jìn)行寬度的調(diào)整，我總結(jié)目前常見(jiàn)的彈窗尺寸共有四種，分別為：small、medium、large、x-large

四種彈窗的使用場(chǎng)景也會(huì)不同

small：提示

medium：對(duì)話彈窗

large：多文本錄入

x-large：客戶詳情展示

3.內(nèi)容滾動(dòng)

其實(shí)這是一個(gè)很久遠(yuǎn)的話題，因?yàn)樵谖覄傞_(kāi)始學(xué)設(shè)計(jì)時(shí)踩過(guò)彈窗同時(shí)出現(xiàn)兩個(gè)滾動(dòng)出現(xiàn)的坑，導(dǎo)致現(xiàn)在都還記憶猶新，大家的彈窗出現(xiàn)模態(tài)層時(shí)，一定要將背景滾動(dòng)條進(jìn)行鎖定，不然兩個(gè)滾動(dòng)條的出現(xiàn)，會(huì)導(dǎo)致十分混亂

最后，彈窗在B端場(chǎng)景中，起到了很關(guān)鍵的作用，大家可以透過(guò)彈窗的思考方式去思考關(guān)于整個(gè)B端控件層面的信息展現(xiàn)問(wèn)題。

↘好文推薦：

萬(wàn)字好文 | B端產(chǎn)品設(shè)計(jì)指南

費(fèi)米估算 | 產(chǎn)品面試中的估算問(wèn)題解法

產(chǎn)品復(fù)盤(pán) | 字節(jié)跳動(dòng)-飛書(shū)團(tuán)隊(duì)工作1年收獲

點(diǎn)個(gè)“在看”吧

總結(jié)

以上是生活随笔為你收集整理的B端设计指南 —— 弹窗 究竟应该如何设计的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。