B端設(shè)計指南04-彈窗

時間：2023-10-02 03:06:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-10-02 03:06:01 來源：網(wǎng)站運(yùn)營

B端設(shè)計指南04-彈窗：時隔三個月，大家久違了～從上一篇文章到現(xiàn)在已經(jīng)收到了許多粉絲的催更，我自己本想從周更、然后變成月更、最后到現(xiàn)在，很感動大家依舊不停地在關(guān)注我，也在各個平臺上結(jié)識到許許多多的小伙伴。從文章話題改變，到確定話題繼續(xù)輸出，雖然中間經(jīng)歷不少曲折，好在最后還是堅持了下來。我知道B 端對于大家而言是一個枯燥的話題，也聽過很多粉絲的建議，去融入更多控件背后有趣的故事，是B端設(shè)計指南的第四篇文章，如果沒看過之前的文章，歡迎結(jié)合進(jìn)行閱讀，會有更多收獲

這篇文章是我自己在工作中受到各種摧殘、無數(shù)次開會討論總結(jié)而來，如果你現(xiàn)在深處B端行業(yè)，強(qiáng)烈建議大家一定要看完。收到很多同學(xué)關(guān)于彈窗的疑問，因為在B端的設(shè)計過程中，會接觸到很多信息展示方面的疑惑，他們咨詢的維度各不相同，但是大致分為以下幾類：

由于B端產(chǎn)品的復(fù)雜多樣，我們今天所要討論的不單單局限于彈窗這一種控件的設(shè)計，而是一個“泛彈窗”的話題，透過彈窗去分析理解其他類型信息展示的業(yè)務(wù)邏輯。從宏觀上講，目前B端設(shè)計中信息展示的控件可以分為三類：彈窗、抽屜、新建頁。在這三種展示形式中，我們需要明白它們四類分別是什么、有哪些、在什么場景中使用、以及在優(yōu)缺點和適應(yīng)的不同業(yè)務(wù)，這樣可以更好的為我們設(shè)計服務(wù)。

一、什么是彈窗

1.彈窗的定義：

彈窗是一種中斷用戶當(dāng)前操作并對其進(jìn)行補(bǔ)充、或者對當(dāng)前操作進(jìn)行強(qiáng)制反饋的交互形式。一般需要用戶進(jìn)行強(qiáng)交互[1]。它可以告知用戶關(guān)鍵的信息，需要用戶去做決定。彈窗越來越廣泛地被應(yīng)用于軟件、網(wǎng)頁、以及移動設(shè)備中。它可以保留用戶當(dāng)前進(jìn)程的情況下，指引用戶完成一個特定的操作 。[1] 強(qiáng)交互：是指想要完成用戶正常流程時必須先完成當(dāng)前交互的操作后才繼續(xù)正常流程

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

模態(tài)（modal）：

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

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

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

同類型的例子還有數(shù)字鍵盤鎖（Num Lock）、滾動鎖(Scroll Lock)。根據(jù)時間進(jìn)行不斷演化，我們B端設(shè)計師工作中碰到的模態(tài)類型大多數(shù)都屬于模態(tài)層。模態(tài)層：使用半透明黑色在頁面中進(jìn)行整體覆蓋。主要是在彈窗的底層，襯托彈窗，使彈窗不會被忽視掉，想要繼續(xù)使用就必須先與彈窗進(jìn)行交互優(yōu)勢：通過全局的半透明黑色能夠讓用戶更加聚焦，集中精力去處理好當(dāng)前事情，能夠通過透明度展示背景，讓用戶了解到自己并沒有離開當(dāng)前頁面劣勢：打擾用戶，感到強(qiáng)烈的中斷的感受

2.彈窗的分類：

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

模態(tài)彈窗：

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

非模態(tài)彈窗：

與模態(tài)完全相反，它更加溫和，不會打擾到用戶的正常使用。通常這類彈窗只會在屏幕上短暫停留，幾秒就會消失，也因此用戶感受不到他的存在。

它的缺點也非常明顯，展示時間較短，不適合展示重要信息、不能承載大量文案，常見的類型有：通知提醒、全局提示、警告提示、氣泡卡片、文字提示。

3.彈窗的來源：

彈窗雖然在2010年被《時代》周刊評選為50大最糟糕的發(fā)明之一，但是彈窗最開始的出現(xiàn)，其實是為了簡化用戶頁面、節(jié)約用戶瀏覽器頁簽。因為早期網(wǎng)頁設(shè)計中，常常需要保留當(dāng)前頁但又需要進(jìn)行跳轉(zhuǎn)的頁面，比如登錄頁，但用戶每次使用時都需要跳轉(zhuǎn)到一個新頁面中，而登錄最后都是需要回到之前的頁面中，在未使用彈窗之前，往往需要新開很多頁面，而且用戶的使用不會聚焦。

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

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

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

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

而采取這種方式的淘寶，經(jīng)由幾年的努力，從2003年的ebay份額80%，到2004年淘寶份額41%，ebay份額53%。在互聯(lián)網(wǎng)早期，廣告彈窗確實幫助很多產(chǎn)品起勢，到如今雖說十分煩人但也是每個公司盈利的重要手段之一。因此彈窗也在中國的互聯(lián)網(wǎng)行業(yè)中，留下濃墨重彩的一筆

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

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

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

二、彈窗的拆解

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

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

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

a.顏色深度的思考

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

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

因為文章開頭解釋過模態(tài)的特殊性，所以在正常情況下模態(tài)的狀態(tài)只允許出現(xiàn)一層，即模態(tài)層的唯一。如果需要出現(xiàn)多個模態(tài)層時，就需要進(jìn)行深入考慮流程、設(shè)計形式是否合理。這里建議從以下幾個方面進(jìn)行思考。流程優(yōu)化：在使用多模態(tài)層前后的過程中，流程是否足夠精簡清晰，能否通過優(yōu)化，將流程變得更加合理，減少不必要的多模態(tài)層的使用。內(nèi)容量展示優(yōu)化：當(dāng)內(nèi)容量較少時，可以采取下拉菜單進(jìn)行設(shè)計上的優(yōu)化，這樣可以解決多模態(tài)層進(jìn)行疊加的問題彈窗形式是否合適：當(dāng)頁面涉及到很多交互時，不建議直接使用彈窗（文章第四模塊會講到）

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

但在很多實際B端業(yè)務(wù)中，通過上面的方法也不可避免會遇到多模態(tài)層的情況。這時你需要冷靜面對而不是慌張，這里給大家講解當(dāng)你遇到需要多層模態(tài)展示時，需要注意的點：多模態(tài)層超過2層時最好只展示固定顏色在模態(tài)過多的情況，我們會給一個最大值，即當(dāng)彈窗超過3層只展示固定顏色即可

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

模態(tài)位置錯層，讓用戶知道現(xiàn)在處在第幾層在多模態(tài)疊加的過程中，用戶很容易不清楚自己所在時那一層當(dāng)中，導(dǎo)致視覺層級混亂。這通常的處理辦法就是將多個模態(tài)層疊加的狀態(tài)進(jìn)行錯層，這樣能夠讓用戶知道自己所在的層級，幫助用戶了解邏輯關(guān)系

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

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

a.多形態(tài)的關(guān)閉一個體驗良好的彈窗需要提供多個關(guān)閉入口，讓用戶進(jìn)行退出。

一方面彈窗是打斷用戶正常流程的操作，而為了不讓用戶感到反感需要提出多個入口；

另一方面用戶更能夠通過多個入口的設(shè)計，快速返回到正常操作流程，降低用戶不必要的流失。我一共總結(jié)有四種入口途徑，方便大家在設(shè)計時對照查看是否做到。

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

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

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

入口四：Esc鍵Esc鍵誕生于1960年，位于每一個電腦鍵盤的左上方，為英文單詞escape的縮寫。escape翻譯成中文為逃脫， 逃跑，漏出， 泄漏之意。

在很多設(shè)計師的認(rèn)知層面中，Esc鍵退出似乎是一個可有可無的按鍵存在。而在我們實際調(diào)研自己產(chǎn)品當(dāng)中發(fā)現(xiàn)，經(jīng)常習(xí)慣使用Esc鍵的用戶占33.7%。

而這類快捷鍵上的優(yōu)化恰恰能夠提升用戶使用的核心效率，在很多時候能夠減輕使用者的操作成本。

在B端產(chǎn)品中，調(diào)用鍵盤進(jìn)行操作優(yōu)化，是一個不可忽視的用戶爽點。例如：我們使用聊天軟件，在用戶輸入完成后總是習(xí)慣點擊Enter進(jìn)行提交、使用PageUp 以及 PageDown用來替代鼠標(biāo)進(jìn)行列表頁翻頁、空格用來對頁面進(jìn)行整體一屏滾動，這些都是調(diào)用鍵盤進(jìn)行快捷操作，提升效率

b.固定位置出現(xiàn)在關(guān)閉入口設(shè)計當(dāng)中，無論是將入口設(shè)計在彈窗內(nèi)或者是彈窗外，都需要在固定位置出現(xiàn)。固定位置的出現(xiàn)能夠讓用戶養(yǎng)成良好的習(xí)慣，減少用戶的思考成本。常見的彈窗關(guān)閉按鈕基本都在右上角進(jìn)行展示，因此不建議在位置上進(jìn)行創(chuàng)新，會適得其反。

c.錄入場景的特殊處理在關(guān)閉入口設(shè)計中，常常會遇到這種情況，用戶在彈窗中進(jìn)行錄入的場景下，誤操作點到模態(tài)層后，用戶辛苦錄入的大段文字丟失。這類情況的出現(xiàn)，常常表示用戶在彈窗的全流程場景中沒有進(jìn)行深入的思考。

我總結(jié)了市面上對于錄入彈窗這種特殊的處理方式，共有以下幾點：

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

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

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

3.彈窗主體（Mian）

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




a.圖標(biāo)在彈窗中，圖標(biāo)的使用主要是為了更直觀表達(dá)彈窗的具體狀態(tài)。例如：“放置警告圖標(biāo)代表用戶需要謹(jǐn)慎操作、放置成功圖標(biāo)代表用戶已經(jīng)完成操作?！?br>
b.彈窗標(biāo)題使用簡短的語言告訴用戶功能，如果是對話彈窗，一般是疑問句，例如：“是否刪除列表？“；若是其他具有特定功能的彈窗，一般為動詞短語，例如：“刪除客戶、查看詳情”，一般不可刪除。

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

d.按鈕選擇按鈕選擇主要是對彈窗交互進(jìn)行的結(jié)果，一般是相對立的兩個操作進(jìn)行出現(xiàn)，例如：“確定/取消、保存/刪除等...”如果你對按鈕有疑惑，建議看我上一篇文章的總結(jié)。

e.選項操作在彈窗中，還有因為業(yè)務(wù)的不同，在彈窗中增加相應(yīng)的選項操作，選項操作通常是一些常規(guī)控件，不宜進(jìn)行特殊處理，例如：“輸入框、單選框、復(fù)選框等...”彈窗會根據(jù)主體的不同，分為不同的彈窗類型，通過上面素材進(jìn)行組合，形成下面不同類型的彈窗，下面為大家講講彈窗的類型

三、彈窗的類型

第一節(jié)講到，在彈窗的類型中，主要分為兩類：模態(tài)彈窗和非模態(tài)彈窗微信上處理成右滑查看

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

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

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

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

內(nèi)嵌表單彈窗作為彈窗最為重要的組成部分，在B端產(chǎn)品的日常使用中幾乎存在的方方面面因其里面經(jīng)常會添加各種選項操作，例如：“ckeckbox、radio、下拉菜單等等“，通過彈窗去完成形式各樣的操作內(nèi)嵌表單的好處是能夠通過小面積的彈窗完成對數(shù)據(jù)的編輯修改，方便快捷進(jìn)行增刪改的處理。

c.分步彈窗

分步彈窗是分步表單的衍生品，因為在實際項目中，發(fā)現(xiàn)大型的分步表單難以滿足現(xiàn)階段對于小型內(nèi)容展示的需求，因此分步彈窗便誕生分步彈窗的主要特點是頁腳上會有下一步、上一步兩個選項供用戶進(jìn)行選擇，同時用戶點擊下一步后，就會在左上角提示用戶可以進(jìn)行返回。分步彈窗能實現(xiàn)具有先后條件且內(nèi)容較少的需求，在工作中主要是新手引導(dǎo)或者有前后關(guān)系錄入的彈窗會用到。例如：“簡道云的新手引導(dǎo)、XXXX步驟注冊”都可以采取分步彈窗的形式。




d.附件選擇彈窗

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




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

復(fù)雜信息彈窗是一些大型B端項目經(jīng)常遇到的問題。在遇到多信息需要進(jìn)行展示與交互時，通常很難給出很好的解決辦法。因此復(fù)雜信息展示彈窗也就誕生。我們團(tuán)隊對其的定義主要是彈窗面積足夠大，同時在彈窗內(nèi)部存在很多交互，與新建頁抽屜等情況類似。例如：Trello的任務(wù)彈框雖然信息較多，但好處是能快速切換到不同的任務(wù)，增加效率。

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

a.通知提（Notification）

通常在頁面右上角，顯示通知提醒信息，給用戶進(jìn)行重度的打擾。經(jīng)常用于產(chǎn)品系統(tǒng)主動推送以及消息提醒。例如：在我們自家產(chǎn)品中，通知提醒框用戶對用戶審批信息進(jìn)行展示，同時可讓用戶進(jìn)行跳轉(zhuǎn)查看，方便用戶進(jìn)行快速使用。




b.全局提示（Message）

全局提示是希望不中斷用戶正常操作的前提下，顯示一條簡短的消息。這條消息通常都是輕量的一般在短時間就會自動消失，并不會干擾到用戶。全局提示一般在整個頁面居中的位置，會展示3-5秒鐘或者用戶進(jìn)行點擊后就會消失。例如：在我們產(chǎn)品的詳情頁當(dāng)中會有列表快捷編輯功能，當(dāng)用戶每進(jìn)行一次編輯操作，都會給用戶進(jìn)行全局提示，操作成功




c.警告提示 (Alert)

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




d.氣泡卡片（Popover/Popup）

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




e.文字提示（Tooltip）

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




重要提示優(yōu)先級按量級從重到輕排序：通知提醒框 > 警告提示 > 全局提示 >氣泡卡片 > 文字提示

3.特殊類型彈窗

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

a.抽屜

抽屜適合與主頁面有著強(qiáng)連貫性的頁面進(jìn)行展示。它與彈窗都有著相類似甚至相同的API，只是在展示形式上存在較大差異。抽屜演化出來的形式有很多，比如：iOS的Human Interface Guidelines中的Sheets [3]，MaterialDesign 中的BackDrop [4]，抽屜涉及的范圍廣，因此用戶對于此類交互的理解以及操作成本都相應(yīng)減小。

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

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

b.新建頁

新建頁基本就是萬精油，無論頁面內(nèi)容量是多少、頁面間是否連貫、以及使用頻率怎樣，都可以采取新建頁，但是新建頁往往也不是最優(yōu)的解決辦法。在新建頁中又分為：覆蓋當(dāng)前窗口以及新窗口跳轉(zhuǎn)兩種形式，在場景上可以根據(jù)兩者差異進(jìn)行選擇，究其本質(zhì)，就是a標(biāo)簽href屬性與target屬性上的差異。

四、如何選擇彈窗 抽屜 新建頁

在我們?nèi)粘ＴO(shè)計中，常常抉擇于：彈窗、抽屜、新建頁之間，總覺得使用某一種交互形式會更好，但是卻說不出其中的原因，猶豫究竟應(yīng)該使用那種展現(xiàn)形式，這就需要我們通過具體的要素方法進(jìn)行相應(yīng)的分析。常?？匆娫O(shè)計師麻木的進(jìn)行簡單的拖拽組件，并沒有進(jìn)行深入思考，也根本不會通過頁面的分析方法，去了解事物的本質(zhì)，今天告訴大家這三種要素能夠幫助你進(jìn)行交互分析

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

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

內(nèi)容量：通常包含了你頁面當(dāng)中文字、圖片、視頻、表格、以及各種復(fù)雜的交互。如果你覺得頁面已經(jīng)密密麻麻，在彈窗中根本無法呈現(xiàn)，這時候你就需要考慮彈窗是否合適～而彈窗、抽屜、新建頁，如何抉擇，它們承載內(nèi)容的量也存在一個大小關(guān)系

新建頁> 抽屜 > 彈窗

但是不能從一個緯度去思考頁面內(nèi)容量的多少，內(nèi)容的寬度以及深度都是需要去分析，通常：內(nèi)容的深度較深最好采取抽屜、內(nèi)容寬度較寬則彈窗形式更為合理、而新建頁合適寬度與深度同時較大的產(chǎn)品中。也就是彈窗只能承載較小內(nèi)容、抽屜其次、新建頁最優(yōu)，但是在實際工作中往往并沒有這么簡單，在本節(jié)最后，舉了幾個實例進(jìn)行簡單分析～

2.頁面連貫性

頁面連貫性直接決定用戶的使用體驗當(dāng)瀏覽器新開一個標(biāo)簽進(jìn)行展示時，頁面的連貫性是最弱的，因為用戶需要進(jìn)行困難的操作返回到之前頁面，并讓用戶感到十分懵逼，同時你也可以理解新開頁面是較為獨立的，不會受到前頁面的干擾，而要決定頁面連貫性的核心，還是以自身業(yè)務(wù)出發(fā)從三個不同交互形式上看，頁面連貫性明顯抽屜小于彈窗小于新建頁例如：使用紛享逍客在客戶列表頁與詳情頁之間連貫性就很強(qiáng)，因為用戶需要詳情與列表之間來回看進(jìn)行對比，也因此紛享逍客將抽屜模態(tài)層都給去除，更方便自身業(yè)務(wù)。

3.頁面切換成本

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

頁面切換成本越來越受到重視，從最近iOS13更新的幾點以及微信、本站app更新上可以發(fā)現(xiàn)在IOS12到IOS13中，一個較大更新便是新版視圖彈窗在以前的視圖彈窗中，用戶經(jīng)常忘了此前他們進(jìn)行的操作任務(wù)，而iOS13能夠讓用戶更加明確，減少了頁面間的切換成本。

在微信與本站中，因為用戶需要經(jīng)常切換，之前用戶難以在幾個頁面來回跳轉(zhuǎn)，而浮窗的出現(xiàn)，剛好能夠解決這一問題，減少了頁面間的切換成本

想用B端幾個典型產(chǎn)品的幾個案例來解釋彈窗、抽屜與新建頁我舉一個簡單例子，現(xiàn)在你需要去設(shè)計一個客戶詳情頁，但是因為客戶詳情頁需要展示大量信息以及表格，同時還會有各種各樣的交互行為：“點擊、錄入、甚至拖拽”，這時候你會怎么選擇？

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

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

它們采取抽屜的形式，因為紛享銷客與銷售易都是屬于aPaas平臺[5]，存在用戶去設(shè)置不同字段以及不同展示邏輯，每個詳情頁又會存在快速跳轉(zhuǎn)等一系列方便用戶同時也會帶來交互問題的“騷操作”[6]，導(dǎo)致抽屜的選擇是大于其他兩種彈窗形式。其次在內(nèi)容量上，可以從截圖上看出，內(nèi)容大多以文字記錄為主，不會存在大段文字以及大圖的情況，因此不會存在寬度過寬的情況。

只是在字段數(shù)量上會有所增多，導(dǎo)致字段的高度會隨之增加，因此滿足上面條件的交互控件只有抽屜與新建頁。最后在連貫性與切換成本上，明顯在CRM產(chǎn)品中，用戶需要經(jīng)常來回切換去對比客戶信息以及銷售的更進(jìn)狀態(tài)，因此在抽屜的體驗上，能夠讓用戶進(jìn)行連貫的用戶體驗，因此抽屜最為合適。

[5]aPaas平臺：aPaaS的全稱是application Platform as a Service，即應(yīng)用程序平臺即服務(wù)。Gartner對其所下的定義是：“這是基于PaaS（平臺即服務(wù)）的一種解決方案，支持應(yīng)用程序在云端的開發(fā)、部署和運(yùn)行，提供軟件開發(fā)中的基礎(chǔ)工具給用戶，包括數(shù)據(jù)對象、權(quán)限管理、用戶界面等?！?br>
[6]騷操作：主要是aPaas平臺可以連續(xù)點擊同類型的關(guān)鍵詞進(jìn)行相互跳轉(zhuǎn)，實現(xiàn)我們團(tuán)隊內(nèi)部所說的不斷"套娃"，看似很不符合產(chǎn)品邏輯，實際是為了提升用戶在詳情頁中的體驗。通過多模態(tài)層的設(shè)計圖就能夠明白

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

Hubspot與Zoho都是國外兩款非常出名的CRM，如果在做CRM領(lǐng)域的同學(xué)沒有體驗過的一定要試試首先，因為Hubspot、Zoho是屬于國外產(chǎn)品傳入中國，因此在使用習(xí)慣上，更偏向于專注去做一件事，比如Hubspot上，在其客戶詳情頁能夠直接進(jìn)行添加日程、撥打電話、發(fā)送郵件等幾十項操作，并且一切圍繞著Marketing、Sales展開，因此使得頁面需要更加專注，需要看到更加全量的信息，再次國外Saas用戶也是對完整流程的操作更加青睞（一個操作只干一件事），而國內(nèi)喜歡快捷融合（喜歡有很多快捷操作）因此造成Hubspot與Zoho都采取新建頁的形式查看數(shù)據(jù)（有機(jī)會一定與大家聊聊國內(nèi)外B端產(chǎn)品的差異）

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

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

它們采取大彈窗的形式，因為兩者都是將信息分為左右兩部分，左側(cè)信息展示方便用戶進(jìn)行關(guān)鍵信息的閱讀，滿足用戶的實際需求；右側(cè)進(jìn)行靈活的展示，能夠通過不同業(yè)務(wù)的信息進(jìn)行相應(yīng)分配。復(fù)雜信息彈窗都會在左上角進(jìn)行快速切換，通過上下箭頭滿足用戶快速切換的需求。

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

1.彈窗高度

關(guān)于彈窗高度，主要講的是模態(tài)彈窗。我也只是講行業(yè)中現(xiàn)在的集中做法羅列出來，大家根據(jù)自身產(chǎn)品進(jìn)行使用。頂部固定高度彈窗與頁面左右兩邊進(jìn)行居中，所以主要標(biāo)注的就是彈窗的高度問題，固定高度就是將彈窗整個固定在對應(yīng)的尺寸高度，一般為120px、160px、200px，根據(jù)彈窗尺寸進(jìn)行相應(yīng)調(diào)整。需要注意，如果是固定高度，一定需要在頁面中進(jìn)行相應(yīng)標(biāo)注。同時需要思考彈窗的多個場景場景，否則會造成交互混亂，影響用戶使用。全局居中全局居中也是最為常見的一種做法，放在用戶視覺的正中心，讓用戶的使用上也更加友好。

2.彈窗尺寸

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

數(shù)據(jù)來源與百度統(tǒng)計流量研究院從數(shù)據(jù)上可以看出，目前市面上的屏幕分辨率占比1920x1080還是占據(jù)主導(dǎo)基本上最小的分辨率都為1280x768 （因1024x768占比實在太小，在頁面中，可以采取滾動條進(jìn)行兼容）所以一般將彈窗寬度設(shè)置到1000px以內(nèi)，基本能滿足日常需求。定義彈窗高度：我們以最小屏幕尺寸：768px來定義，一般瀏覽器輸入框+菜單欄的高度為80px，底部系統(tǒng)工具欄高度為40px768px-80px-40px=約648px




對于頁面中自適應(yīng)的情況所以上需留出固定安全舉例，所以彈窗的高度必須小于600px。定義彈窗寬度：彈窗寬度會根據(jù)內(nèi)容量，進(jìn)行寬度的調(diào)整，我總結(jié)目前常見的彈窗尺寸共有四種，分別為：small、medium、large、x-large四種彈窗的使用場景也會不同small：提示medium：對話彈窗l(fā)arge：多文本錄入x-large：客戶詳情展示

3.內(nèi)容滾動

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




照常和大家嘮嘮嗑

彈窗在B端場景中，起到了很關(guān)鍵的作用，大家可以透過彈窗的思考方式去思考關(guān)于整個B端控件層面的信息展現(xiàn)問題。寫作真的很不容易，覺得不錯點個贊、按一個好看，不需要大家的贊賞，你的關(guān)注，就是對我的最大鼓勵對了，最后說一句，大家一直都在問我有沒有交流群，今天創(chuàng)建了一個，大家可以掃描文章底部的二維碼，備注加群，便可將你拉進(jìn)群內(nèi)～

花瓣關(guān)注：CE青年

便可獲取B端產(chǎn)品的高清截圖一份，同時還會有這一次文章的“彈窗”專題畫板




B端導(dǎo)航網(wǎng)站：youthce.com

一個專注B端領(lǐng)域的競品導(dǎo)航，幫助你解決沒有競品的煩惱




我是CE青年

一個2 B行業(yè)的2B設(shè)計師～




參考鏈接：

https://baike.baidu.com/item/%E5%AF%B9%E8%AF%9D%E6%A1%86

https://www.jianshu.com/p/dbbfd0eb4b2f

https://isux.tencent.com/100%E4%B8%AA%E5%BC%B9%E6%A1%86%E8%AE%BE%E8%AE%A1%E5%B0%8F%E7%BB%93.html