這篇文章是我自己在工作中受到各種摧殘、無數次開會討論總結而來，如果你現在深處B端行業，強烈建議大家一定要看完。

收到很多同學關于彈窗的疑問，因為在B端的設計過程中，會接觸到很多信息展示方面的疑惑，他們咨詢的維度各不相同，但是大致分為以下幾類：

由于B端產品的復雜多樣，我們今天所要討論的不單單局限于彈窗這一種控件的設計，而是一個“泛彈窗”的話題，透過彈窗去分析理解其他類型信息展示的業務邏輯。

從宏觀上講，目前B端設計中信息展示的控件可以分為三類：彈窗、抽屜、新建頁。在這三種展示形式中，我們需要明白它們四類分別是什么、有哪些、在什么場景中使用、以及在優缺點和適應的不同業務，這樣可以更好的為我們設計服務。

01

什么是彈窗？

1.彈窗的定義：

彈窗是一種中斷用戶當前操作并對其進行補充、或者對當前操作進行強制反饋的交互形式。

一般需要用戶進行強交互[1]。它可以告知用戶關鍵的信息，需要用戶去做決定。彈窗越來越廣泛地被應用于軟件、網頁、以及移動設備中。它可以保留用戶當前進程的情況下，指引用戶完成一個特定的操作 。

[1] 強交互：是指想要完成用戶正常流程時必須先完成當前交互的操作后才繼續正常流程

首先咱們老規矩，先普及一個知識點，什么是模態？

模態（modal）：

是杰夫·拉斯金在自己書中《Humane Interface》 (Page 42)的定義：人機界面對于跟定的動作(gesture)是模態的(modal) ，如果界面的當前狀態不在 用戶的注意之處；依賴于系統的狀態，界面對動作會從幾種不同的響應執行中選擇一種執行。

通俗一點講是用來表示使用相同行為具有兩種以上不同狀態的操作。當系統在這些狀態之間切換時，操作的動作相同但操作的結果卻又產生皆然不同的意義。

最典型模態的例子便是鍵盤中 Caps Lock鍵，當按下 Caps Lock鍵后輸入的a-z由小寫字母變為大寫；雖然用戶還是按下相同的字母，卻顯示兩種不同意義的字母類型。

同類型的例子還有數字鍵盤鎖（Num Lock）、滾動鎖(Scroll Lock)。

根據時間進行不斷演化，我們B端設計師工作中碰到的模態類型大多數都屬于模態層。

模態層：使用半透明黑色在頁面中進行整體覆蓋。主要是在彈窗的底層，襯托彈窗，使彈窗不會被忽視掉，想要繼續使用就必須先與彈窗進行交互

優勢：通過全局的半透明黑色能夠讓用戶更加聚焦，集中精力去處理好當前事情，能夠通過透明度展示背景，讓用戶了解到自己并沒有離開當前頁面

劣勢：打擾用戶，感到強烈的中斷的感受

2.彈窗的分類：

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

模態彈窗：是位于瀏覽器的主頁面核心區域，需要用戶對它做出相應交互，模態才會消失。而彈窗會因為自身的吸引程度、停留時間、信息量承載多少被劃分為多種彈窗類型進行區分，常見的彈窗分別為：對話彈窗、內嵌表單彈窗、分步表單彈窗、文件選擇彈窗、復雜信息展示。

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

3.彈窗的來源：

彈窗雖然在2010年被《時代》周刊評選為50大最糟糕的發明之一，但是彈窗最開始的出現，其實是為了簡化用戶頁面、節約用戶瀏覽器頁簽。

因為早期網頁設計中，常常需要保留當前頁但又需要進行跳轉的頁面，比如登錄頁，但用戶每次使用時都需要跳轉到一個新頁面中，而登錄最后都是需要回到之前的頁面中，在未使用彈窗之前，往往需要新開很多頁面，而且用戶的使用不會聚焦。

在淘寶的早期，遭受ebay的圍追堵截，聲稱要致淘寶于死地，18個月內結束這場戰爭！

2004年，淘寶網剛成立一年，像大多數創業網站一樣，活得很艱辛。

當時中國互聯網流量主要集中在三大門戶，新浪、網易、搜狐，ebay與三大門戶簽訂了排他性協議，三大門戶不能和其他電商網站合作。ebay又陸續與其他有大型網站簽訂排他性協議。有點像現在的京東、淘寶二選一，于是被逼無奈的淘寶開始向中小網站發力，采取流氓彈窗的形式，在各個網站進行刷臉操作，讓大家不斷熟悉。

2005年，北京網絡行業協會在收集網民對“流氓軟件”投訴的排名中，淘寶位居第二

2006年，淘寶當時的總經理——孫彤宇，他表示當年使用流氓彈窗是不得已而為之。

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

在互聯網早期，廣告彈窗確實幫助很多產品起勢，到如今雖說十分煩人但也是每個公司盈利的重要手段之一。因此彈窗也在中國的互聯網行業中，留下濃墨重彩的一筆

4.彈窗的現狀：

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

[2]巴甫洛夫條件反射：是指一個刺激和另一個帶有獎賞或懲罰的無條件刺激多次聯結，可使個體學會在單獨呈現該一刺激時，也能引發類似無條件反應的條件反應。

02

彈窗的拆解

以最簡單的彈窗為例，我們來對整個彈窗部分進行拆解，彈窗在宏觀上來看一般包含模態層、關閉入口以及彈窗主體

1.模態層（Modal）

模態層通常是一個半透明的黑色，將整個頁面進行遮蓋，使得用戶在使用彈窗或其他控件時會更加專注。同時采用半透明的設計，能通過半透明的模態層讓用戶了解到自己并沒有跳出當前頁面，不必慌張。

在一個看似簡單的模態層中，需要進行三方面的思考

a.顏色深度的思考

顏色能給用戶傳達出許多信息，模態層上也是一樣，在制定相應的規范開始前，我們需要思考自身產品的定位，這樣在整個產品的顏色規范層面能夠做的到統一。模態層顏色較淺，這樣能盡可能減少用戶的跳出感，讓產品更加親民，貼切；模態層顏色較深，這樣會讓用戶更加專注當前彈窗頁面，讓產品更加專業。

b.多模態層檢查

因為文章開頭解釋過模態的特殊性，所以在正常情況下模態的狀態只允許出現一層，即模態層的唯一。如果需要出現多個模態層時，就需要進行深入考慮流程、設計形式是否合理。這里建議從以下幾個方面進行思考。

流程優化：在使用多模態層前后的過程中，流程是否足夠精簡清晰，能否通過優化，將流程變得更加合理，減少不必要的多模態層的使用。

內容量展示優化：當內容量較少時，可以采取下拉菜單進行設計上的優化，這樣可以解決多模態層進行疊加的問題

彈窗形式是否合適：當頁面涉及到很多交互時，不建議直接使用彈窗（文章第四模塊會講到）

c.多模態層的設計

但在很多實際B端業務中，通過上面的方法也不可避免會遇到多模態層的情況。這時你需要冷靜面對而不是慌張，這里給大家講解當你遇到需要多層模態展示時，需要注意的點：

多模態層超過2層時最好只展示固定顏色

在模態過多的情況，我們會給一個最大值，即當彈窗超過3層只展示固定顏色即可

例如：在紛享銷客的產品中，因為是一個aPaaS產品，就會有很多開放用戶進行配置的邏輯，考慮到方便用戶進行編輯，會存在用戶進行來回跳轉的情況，因此就會存在不停進行來回跳轉，形成多模態層的狀況

模態位置錯層，讓用戶知道現在處在第幾層

在多模態疊加的過程中，用戶很容易不清楚自己所在時那一層當中，導致視覺層級混亂。

這通常的處理辦法就是將多個模態層疊加的狀態進行錯層，這樣能夠讓用戶知道自己所在的層級，幫助用戶了解邏輯關系

2.關閉入口（Close）

關閉入口作為用戶退出的重要途徑，主要是為了方便用戶進行快速的退出。而在關閉入口的設計中，需要注意以下幾點：

a.多形態的關閉

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

入口一：關閉按鈕

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

入口二：取消按鈕

取消按鈕一般和確定按鈕成對出現，取消按鈕的出現主要是為了輔佐確定按鈕，當用戶看到確定并想要反悔時，能夠給他提供給他相應的回退機制。

入口三：點擊模態層

用戶可以點擊模態層，進行取消。因為用戶點擊模態層，默認是想要回到模態層下方的界面中，這個入口就顯得尤為必要。通常點擊模態窗是用戶最方便的退出方式，能夠使用戶快速退出。

入口四：Esc鍵

Esc鍵誕生于1960年，位于每一個電腦鍵盤的左上方，為英文單詞escape的縮寫。

escape翻譯成中文為逃脫， 逃跑，漏出， 泄漏之意。在很多設計師的認知層面中，Esc鍵退出似乎是一個可有可無的按鍵存在。

而在我們實際調研自己產品當中發現，經常習慣使用Esc鍵的用戶占33.7%，。而這類快捷鍵上的優化恰恰能夠提升用戶使用的核心效率，在很多時候能夠減輕使用者的操作成本。

在B端產品中，調用鍵盤進行操作優化，是一個不可忽視的用戶爽點。

例如：我們使用聊天軟件，在用戶輸入完成后總是習慣點擊Enter進行提交、使用PageUp 以及 PageDown用來替代鼠標進行列表頁翻頁、空格用來對頁面進行整體一屏滾動，這些都是調用鍵盤進行快捷操作，提升效率

b.固定位置出現

在關閉入口設計當中，無論是將入口設計在彈窗內或者是彈窗外，都需要在固定位置出現。

固定位置的出現能夠讓用戶養成良好的習慣，減少用戶的思考成本。常見的彈窗關閉按鈕基本都在右上角進行展示，因此不建議在位置上進行創新，會適得其反。

c.錄入場景的特殊處理

在關閉入口設計中，常常會遇到這種情況，用戶在彈窗中進行錄入的場景下，誤操作點到模態層后，用戶辛苦錄入的大段文字丟失。

這類情況的出現，常常表示用戶在彈窗的全流程場景中沒有進行深入的思考。我總結了市面上對于錄入彈窗這種特殊的處理方式，共有以下幾點：

1.對于大型文本的錄入過程中，如果使用彈窗，建議采取草稿箱進行自動保存、或者放棄彈窗使用新建頁面進行展示。例如：常見的知乎就是通過彈窗+自動保存進行實現

2.對于普通文本的錄入過程中，如果使用彈 窗，建議采取點擊關閉進行提示

3.彈窗中有用戶下拉菜單進行選擇的，可采取前端記住用戶選項，當用戶發生誤操作時，可重新呼出彈窗即可

3.彈窗主體（Mian）

在彈窗的主體中，會因為彈窗的類型不同會有所加減，但無外乎就是我總結的一下五類

a.圖標

在彈窗中，圖標的使用主要是為了更直觀表達彈窗的具體狀態。例如：“放置警告圖標代表用戶需要謹慎操作、放置成功圖標代表用戶已經完成操作。”

b.彈窗標題

使用簡短的語言告訴用戶功能，如果是對話彈窗，一般是疑問句，例如：“是否刪除列表？“；若是其他具有特定功能的彈窗，一般為動詞短語，例如：“刪除客戶、查看詳情”，一般不可刪除。

c.內容信息

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

d.按鈕選擇

按鈕選擇主要是對彈窗交互進行的結果，一般是相對立的兩個操作進行出現，例如：“確定/取消、保存/刪除等...”

如果你對按鈕有疑惑，建議看我上一篇文章的總結。

e.選項操作

在彈窗中，還有因為業務的不同，在彈窗中增加相應的選項操作，選項操作通常是一些常規控件，不宜進行特殊處理，例如：“輸入框、單選框、復選框等...”

彈窗會根據主體的不同，分為不同的彈窗類型，通過上面素材進行組合，形成下面不同類型的彈窗，下面為大家講講彈窗的類型

03

彈窗的類型

第一節講到，在彈窗的類型中，主要分為兩類：模態彈窗和非模態彈窗

1.模態彈窗：

在實際項目中，我們把模態彈窗進行拆分，分為五小類：“對話彈窗、內嵌表單彈窗、分步彈窗、文件選擇、復雜信息展示。”

a.對話彈窗

對話彈窗是我們日常使用中最為頻繁的彈窗形式，對話彈窗最初用于很重要或者有風險的操作，這時會彈出一個對話形式的彈窗給用戶，需要用戶根據提示來進行判斷。隨著B端產品的不斷發展，對話框已經演變成用戶注冊、提交、信息修改、編輯、形式各樣的操作承載體。

b.內嵌表單彈窗

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

因其里面經常會添加各種選項操作，例如：“ckeckbox、radio、下拉菜單等等“，通過彈窗去完成形式各樣的操作

內嵌表單的好處是能夠通過小面積的彈窗完成對數據的編輯修改，方便快捷進行增刪改的處理。

c.分步彈窗

分步彈窗是分步表單的衍生品，因為在實際項目中，發現大型的分步表單難以滿足現階段對于小型內容展示的需求，因此分步彈窗便誕生

分步彈窗的主要特點是頁腳上會有下一步、上一步兩個選項供用戶進行選擇，同時用戶點擊下一步后，就會在左上角提示用戶可以進行返回。

分步彈窗能實現具有先后條件且內容較少的需求，在工作中主要是新手引導或者有前后關系錄入的彈窗會用到。例如：“簡道云的新手引導、XXXX步驟注冊”都可以采取分步彈窗的形式。

d.附件選擇彈窗

附件上傳彈窗是用戶文件上傳的重要途徑，在Human Interface Guidelines中，明確指出分為Window Anatomy、Column Views，而在B端產品中，現都采取拖動文件上傳，相對而言更簡便。

e.復雜信息彈窗

復雜信息彈窗是一些大型B端項目經常遇到的問題。在遇到多信息需要進行展示與交互時，通常很難給出很好的解決辦法。因此復雜信息展示彈窗也就誕生。我們團隊對其的定義主要是彈窗面積足夠大，同時在彈窗內部存在很多交互，與新建頁抽屜等情況類似。

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

2.非模態彈窗

a.通知提示（Notification）

通常在頁面右上角，顯示通知提醒信息，給用戶進行重度的打擾。經常用于產品系統主動推送以及消息提醒。

例如：在我們自家產品中，通知提醒框用戶對用戶審批信息進行展示，同時可讓用戶進行跳轉查看，方便用戶進行快速使用。

b.全局提示（Message）

全局提示是希望不中斷用戶正常操作的前提下，顯示一條簡短的消息。這條消息通常都是輕量的一般在短時間就會自動消失，并不會干擾到用戶。全局提示一般在整個頁面居中的位置，會展示3-5秒鐘或者用戶進行點擊后就會消失。

例如：在我們產品的詳情頁當中會有列表快捷編輯功能，當用戶每進行一次編輯操作，都會給用戶進行全局提示，操作成功

c.警告提示 (Alert)

提醒用戶需要立即處理的錯誤，提示方式與全局提示類似，但是與全局提示不同的是，警告提示為常駐展示，需要用戶進行手動關閉，但并不會打斷用戶操作。同時在設計形式上，也需要與全局提示有所區別，建議采取背景顏色進行對比

d.氣泡卡片（Popover/Popup）

氣泡卡片是對當前元素進行相關操作或相應描述，可以收納到卡片中，根據用戶的操作行為進行展示。通常可以通過點擊、鼠標Hover進行觸發，氣泡卡片與Tooltip 的區別是，用戶可以對浮層上的元素進行操作，因此它可以承載更復雜的內容，比如鏈接或按鈕等。

e.文字提示（Tooltip）

Tooltip是簡潔版的氣泡卡片，一般提示文字為主。最開始在瀏覽器默認的形式中，就有Tooltip的身影，而隨后隨著對設計的不斷要求，逐漸演化，便形成了氣泡卡片的形式。

重要提示優先級

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

3.特殊類型彈窗

因為在彈窗中，有一些雖然不是彈窗的形式，但是做的是彈窗的活，例如：“抽屜、新建頁”

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

a.抽屜

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

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

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

[4]BackDrop：一個Backdrop出現在應用程序中的所有其他界面底部, 顯示相關信息內容和可操作的內容。

b.新建頁

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

在新建頁中又分為：覆蓋當前窗口以及新窗口跳轉兩種形式，在場景上可以根據兩者差異進行選擇，究其本質，就是a標簽href屬性與target屬性上的差異。

04

如何選擇彈窗 抽屜 新建頁

在我們日常設計中，常常抉擇于：彈窗、抽屜、新建頁之間，總覺得使用某一種交互形式會更好，但是卻說不出其中的原因，猶豫究竟應該使用那種展現形式，這就需要我們通過具體的要素方法進行相應的分析。

常常看見設計師麻木的進行簡單的拖拽組件，并沒有進行深入思考，也根本不會通過頁面的分析方法，去了解事物的本質，今天告訴大家這三種要素能夠幫助你進行交互分析

1.頁面內容量：

頁面內容量決定呈現形式

不知道大家閱讀了這么久，有沒有發現一個問題，在這篇文章中，我不斷強調內容量。因為無論是彈窗、抽屜、新建頁，究其本身就是一個內容載體，因此選擇如何使用，很大程度上取決你的內容量的多少。

內容量：通常包含了你頁面當中文字、圖片、視頻、表格、以及各種復雜的交互。如果你覺得頁面已經密密麻麻，在彈窗中根本無法呈現，這時候你就需要考慮彈窗是否合適～

而彈窗、抽屜、新建頁，如何抉擇，它們承載內容的量也存在一個大小關系

新建頁?>?抽屜?>?彈窗

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

也就是彈窗只能承載較小內容、抽屜其次、新建頁最優，但是在實際工作中往往并沒有這么簡單，在本節最后，舉了幾個實例進行簡單分析～

2.頁面連貫性

頁面連貫性直接決定用戶的使用體驗

當瀏覽器新開一個標簽進行展示時，頁面的連貫性是最弱的，因為用戶需要進行困難的操作返回到之前頁面，并讓用戶感到十分懵逼，同時你也可以理解新開頁面是較為獨立的，不會受到前頁面的干擾，而要決定頁面連貫性的核心，還是以自身業務出發

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

例如：使用紛享逍客在客戶列表頁與詳情頁之間連貫性就很強，因為用戶需要詳情與列表之間來回看進行對比，也因此紛享逍客將抽屜模態層都給去除，更方便自身業務。

3.頁面切換成本

頁面切換成本決定用戶使用效率

當一個二級頁面使用頻率過高時，就證明用戶需要在A與B頁面之間進行來回切換，這時候考慮頁面反復出現是否流暢，是否有切換成本的產生，而B端產品效率至上的原則，便需要思考用戶怎樣切換成本更低。

頁面切換成本越來越受到重視，從最近iOS13更新的幾點以及微信、知乎app更新上可以發現

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

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

在微信與知乎中，因為用戶需要經常切換，之前用戶難以在幾個頁面來回跳轉，而浮窗的出現，剛好能夠解決這一問題，減少了頁面間的切換成本

想用B端幾個典型產品的幾個案例來解釋彈窗、抽屜與新建頁

我舉一個簡單例子，現在你需要去設計一個客戶詳情頁，但是因為客戶詳情頁需要展示大量信息以及表格，同時還會有各種各樣的交互行為：“點擊、錄入、甚至拖拽”，這時候你會怎么選擇？

現在你覺得采取彈窗就不太合適，感覺抽屜進行展示會更加合理。帶著疑問，我們看看市面上不同的產品給出了完全不同的解決辦法，當然他們每個產品的側重點不同，導致最后的結果不同。

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

它們采取抽屜的形式，因為紛享銷客與銷售易都是屬于aPaas平臺[5]，存在用戶去設置不同字段以及不同展示邏輯，每個詳情頁又會存在快速跳轉等一系列方便用戶同時也會帶來交互問題的“騷操作”[6]，導致抽屜的選擇是大于其他兩種彈窗形式。

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

最后在連貫性與切換成本上，明顯在CRM產品中，用戶需要經常來回切換去對比客戶信息以及銷售的更進狀態，因此在抽屜的體驗上，能夠讓用戶進行連貫的用戶體驗，因此抽屜最為合適。

[5]aPaas平臺：aPaaS的全稱是application Platform as a Service，即應用程序平臺即服務。Gartner對其所下的定義是：“這是基于PaaS（平臺即服務）的一種解決方案，支持應用程序在云端的開發、部署和運行，提供軟件開發中的基礎工具給用戶，包括數據對象、權限管理、用戶界面等。”

[6]騷操作：主要是aPaas平臺可以連續點擊同類型的關鍵詞進行相互跳轉，實現我們團隊內部所說的不斷"套娃"，看似很不符合產品邏輯，實際是為了提升用戶在詳情頁中的體驗。通過多模態層的設計圖就能夠明白

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

Hubspot與Zoho都是國外兩款非常出名的CRM，如果在做CRM領域的同學沒有體驗過的一定要試試

首先，因為Hubspot、Zoho是屬于國外產品傳入中國，因此在使用習慣上，更偏向于專注去做一件事，比如Hubspot上，在其客戶詳情頁能夠直接進行添加日程、撥打電話、發送郵件等幾十項操作，并且一切圍繞著Marketing、Sales展開，因此使得頁面需要更加專注，需要看到更加全量的信息。

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

不過非常推薦大家體驗hubspot，細節滿滿～

明道云、Teambition——復雜信息彈窗

它們采取大彈窗的形式，因為兩者都是將信息分為左右兩部分，左側信息展示方便用戶進行關鍵信息的閱讀，滿足用戶的實際需求；右側進行靈活的展示，能夠通過不同業務的信息進行相應分配。

復雜信息彈窗都會在左上角進行快速切換，通過上下箭頭滿足用戶快速切換的需求。

05

彈窗細節

1.彈窗高度

關于彈窗高度，主要講的是模態彈窗。我也只是講行業中現在的集中做法羅列出來，大家根據自身產品進行使用。

頂部固定高度

彈窗與頁面左右兩邊進行居中，所以主要標注的就是彈窗的高度問題，固定高度就是將彈窗整個固定在對應的尺寸高度，一般為120px、160px、200px，根據彈窗尺寸進行相應調整。

需要注意，如果是固定高度，一定需要在頁面中進行相應標注。同時需要思考彈窗的多個場景場景，否則會造成交互混亂，影響用戶使用。

全局居中

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

2.彈窗尺寸

在討論尺寸之前，我們先對市面上主流電腦分辨率進行調研統計

數據來源與百度統計流量研究院

從數據上可以看出，目前市面上的屏幕分辨率占比1920x1080還是占據主導

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

定義彈窗高度：

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

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

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

定義彈窗寬度：

彈窗寬度會根據內容量，進行寬度的調整，我總結目前常見的彈窗尺寸共有四種，分別為：small、medium、large、x-large

四種彈窗的使用場景也會不同

small：提示

medium：對話彈窗

large：多文本錄入

x-large：客戶詳情展示

3.內容滾動

其實這是一個很久遠的話題，因為在我剛開始學設計時踩過彈窗同時出現兩個滾動出現的坑，導致現在都還記憶猶新，大家的彈窗出現模態層時，一定要將背景滾動條進行鎖定，不然兩個滾動條的出現，會導致十分混亂

最后，彈窗在B端場景中，起到了很關鍵的作用，大家可以透過彈窗的思考方式去思考關于整個B端控件層面的信息展現問題。

↘好文推薦：

萬字好文 | B端產品設計指南

費米估算 | 產品面試中的估算問題解法

產品復盤 | 字節跳動-飛書團隊工作1年收獲

點個“在看”吧

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。