起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識B端產(chǎn)品設(shè)計中，彈窗可以做哪些事情？
了解彈窗的類型和可以做到的事情，可以幫助我們在設(shè)計中做出更合理的決策，并且有助于我們梳理和規(guī)范現(xiàn)有產(chǎn)品框架、制定和完善設(shè)計規(guī)范。
在設(shè)計B端產(chǎn)品時，產(chǎn)品經(jīng)理和設(shè)計師總會為寫一個問題爭執(zhí)不休：在有限的頁面空間，是否還能放些什么？而彈窗它可大可小，且能在當前二維頁面之外衍生無限的空間，幾乎可以做到所有頁面能做的事，同時對于開發(fā)來說隨便在html中加一個<alert>和一句話就能生成一個最簡單的提示彈窗。是的，在產(chǎn)品設(shè)計中，彈窗真的太“方便”了！
或許正因如此，彈窗可能是產(chǎn)品設(shè)計中最被濫用的一種常用控件了。如果用戶打開一個鏈接或是按鈕后充斥的是一層層的彈窗，用戶會感覺你的產(chǎn)品太復雜太難用！更糟糕的是，有的產(chǎn)品會很粗魯?shù)膹棾龈鞣N“提示”、“警告”，還需要強制用戶去點擊或關(guān)閉——可能設(shè)計者以為這種”溫馨提示“是“已用戶為中心”，但很多時候我們完全可以以一種更為溫和的方式來提醒用戶（如toast、懸停浮層、輸入框旁邊的橙色文字等）。了解彈窗有哪些類型、可以做什么，能夠幫助我們在設(shè)計時做出更合理的決策。
彈窗，是一種“展現(xiàn)于頁面之上的一種信息容器”，在x、y軸的平面空間之外擴展了頁面的維度和深度，它是一種比頁面更靈活的信息容器。細分下來會有很多類型，但并沒有一種很明確和統(tǒng)一的叫法。在移動應(yīng)用流行以前的網(wǎng)頁設(shè)計中，有對話框（Dialog）、警示框（Alert）、彈出層、彈框、浮層（popup）、氣泡……現(xiàn)在，因為響應(yīng)式設(shè)計和多平臺統(tǒng)一的趨勢下，甚至也有將android的toast提示、Actionbar，以及ios的透明指示層（HUD）和也算作是“彈窗”的一種。同時，非模態(tài)各種浮層和窗口，類型和用法千差萬別；鑒于此，我在這里重點探討我們在B端產(chǎn)品（PC端）中常用的傳統(tǒng)意義上的“彈窗”。
以功能和用途為維度，筆者將彈窗分為三種類型：信息展示、任務(wù)、反饋。
一、信息展示
1、解釋或說明
一般由用戶主動觸發(fā)的，包含圖文信息，少數(shù)會有簡單的操作按鈕，如“確認”、“知道了”等等。典型場景有：歡迎界面、操作說明、幫助、功能引導、取數(shù)說明、查看詳情、預(yù)覽或查看大圖……
這種彈窗一般用來對頁面內(nèi)容作補充，用戶通過點擊圖標或文字按鈕，可以在當前頁面展開彈窗。比如業(yè)務(wù)介紹、圖表的取數(shù)說明、操作說明和引導等，這類信息往往與當前頁面緊密相關(guān)，且從屬于當前語境，所以并不適合用跳轉(zhuǎn)頁面、并列tab其或二級頁面的形式來表達，因為這樣無疑會加深頁面層級，增加用戶的認知負擔。尤其是對一些很重要的操作說明或引導，甚至可以在彈窗中使用翻頁或tab頁簽的形式來擴充彈窗的顯示空間。
需要說明的是，很多產(chǎn)品喜歡對那些普通的字段解釋和說明也使用帶遮罩的模態(tài)彈窗，并需要用戶點擊才顯示。這是一種很糟糕的設(shè)計。這種解釋說明，完全可以用一般的非模態(tài)浮層來代替，用戶只需要懸停就可以快速瀏覽，并且快速離開（移開觸發(fā)區(qū)按鈕或點擊空白區(qū)域）（當然，如果內(nèi)容太多，可能你要考慮設(shè)計跳轉(zhuǎn)到新的頁面而不是使用浮層或彈窗）。
類似這種頁面的補充說明，使用懸停浮層體驗會更好。
2、內(nèi)容拓展
這種類型常見于一些圖表統(tǒng)計頁面、列表頁面。由于頁面布局的限制，以及突出核心需求的原則，我們只會給用戶展示最關(guān)心的統(tǒng)計結(jié)果和字段，不會也不可能把統(tǒng)計圖表的所有詳細數(shù)據(jù)和說明展示在當前頁面。而這些內(nèi)容往往又并未多到需要一個新的頁面來容納（同樣會增加頁面層級），所以這時候就可以用彈窗來呈現(xiàn)。
內(nèi)容擴展型的彈窗，主要有以下場景：查看詳情、預(yù)覽圖片、數(shù)據(jù)透視、歷史記錄……
對于這種彈窗，模態(tài)和非模態(tài)并沒有很大的差別。一般來說，如果是內(nèi)容較少，并不會占用較大的屏幕面積，使用非模態(tài)的會更合適。因為用戶只需要掃一眼內(nèi)容就行，模態(tài)的可能會給用戶一種“被打斷”的感覺。而且，使用非模態(tài)的可以直接展現(xiàn)在目標旁邊，關(guān)聯(lián)性更好，同時可允許用戶快速切換查看其它同類彈窗，且不會影響對其他的模塊的操作和瀏覽。
3、彈窗的擴展樣式——側(cè)滑面板
還有一種比較常見的“彈窗”，會以側(cè)滑的形式出新，而不是加遮罩層的模態(tài)彈窗。這樣做的好處是，用戶在查看彈窗內(nèi)容的同時，不會失去當前頁面的信息，方便用戶進行對比、參照和檢閱；同時并不會影響用戶對界面其他區(qū)域的操作。這種形式一般在表格中出現(xiàn)較多。當然，這里的彈窗并不局限于一般的對話框樣式，我們也可以使用側(cè)滑浮層。
而對于那些信息量較大（可能有滾動條、拖拽操作等），甚至會有一些可選的支線任務(wù)或擴展操作時，建議最好使用模態(tài)的彈窗。這樣可以讓用戶的注意力更為聚焦，且可減少可能產(chǎn)生的誤操作（一些非模態(tài)的彈窗允許用戶點擊彈窗范圍外區(qū)域關(guān)閉彈窗）。
4、漸進式的展示：
除了彈窗和二級頁面，還有一種信息展示方式——漸進式的策略值得借鑒：即在頁面只展示結(jié)構(gòu)式信息和核心元素，更多細節(jié)信息在用戶需要時再作立即呈現(xiàn)。當然這樣造成洞察速度受到一定影響，但你能得到一個更清爽更簡潔的用戶界面。
二、任務(wù)
1、復雜任務(wù)
這種彈窗在B端產(chǎn)品中也非常常見。當用戶在瀏覽當前頁面時，有一些很常見的場景：“登錄”、“審核”、“申請”、“編輯”……這些相對復雜的任務(wù)和操作，它除了標題和文字、說明、操作按鈕之外，通常還會有一些復雜的可編輯表單，以及點擊、選擇、拖動等操作。在移動端，因為屏幕的控件限制，設(shè)計師更喜歡用新的頁面來容納這些內(nèi)容。但在pc上，更常見的是用模態(tài)彈窗來設(shè)計這種基于當前頁面的、承載用戶明確目標的任務(wù)。因為彈窗會讓用戶明確感知到所進行任務(wù)是基于當前語境的，且在“提交”或“取消”后可以很自然的自動返回到主頁面。
此外，對于一些任務(wù)來說，雖然信息量大，但大多數(shù)場景下用戶并不需要去編輯所有的字段，而只是修改你其中一兩個。因此，從用戶感知來說，相比二級頁面，使用彈窗會讓他們感覺更快捷、簡單。
大多數(shù)情況下，用戶只需要編輯或修改一兩個字段。
這里有必要說一下其中比較特殊的彈窗——登錄/注冊界面。雖然以彈窗的形式來呈現(xiàn)目前仍然很常見，但已經(jīng)有越來越多的產(chǎn)品在用戶點擊“登錄”時會跳轉(zhuǎn)到新的頁面，這樣做的好處是可以有更大的空間，用來增加產(chǎn)品slogan和場景圖，以達到向用戶介紹產(chǎn)品核心功能、烘托產(chǎn)品氛圍、宣傳品牌理念的目的。
2、簡單任務(wù)
如選擇器、輸入驗證碼、高級搜索、分享、操作權(quán)限確認、用戶反饋等一些單一、簡單的操作。多數(shù)情況下，這些彈窗更多的只是整個任務(wù)的一個過渡操作、前提設(shè)置，或者你可以把它看做僅僅是一個選擇器。
3、用懸停浮層來代替
有一些過渡操作，并不一定要使用傳統(tǒng)的模態(tài)彈窗，比如下面這種場景：用戶點擊“打印”時，需要用戶來選擇打印樣式（縱向和橫向），最開始我們的設(shè)計是讓用戶點擊“打印”后，顯示彈窗讓用戶選擇打印樣式，用戶需要選擇并確認（或直接確認默認選項），才能進入打印預(yù)覽界面。這樣看起來符合邏輯和用戶心理模型；但結(jié)果發(fā)現(xiàn)，對那些使用打印功能頻繁的用戶，每次這樣的彈窗“確認”讓人覺得 “多余”和“愚蠢”：我基本都是“橫向（或縱向）”打印，為什么每次都要讓我選擇？正是因為這樣，我們最終放棄了彈窗，而改用了這種浮層的設(shè)計：用戶懸停按鈕時，就即時顯示可選擇的選項，如果用戶不需要切換選項，直接點擊打印就好（這對于絕大多數(shù)用戶來說如此）。同時也允許用戶快速切換到其他選項。通過與真實用戶的溝通和觀察，我們發(fā)現(xiàn)他們很明顯更喜歡這種交互。
三、反饋
用戶點擊按鈕、完成任務(wù)，或系統(tǒng)狀態(tài)更新后，需要給用戶一個明確的反饋，這是人機交互中的一個至關(guān)重要的部分。如果只有輸入，沒有輸出，很容易造成用戶的不良情緒，如困惑、懷疑、不信任等。告知用戶發(fā)生了什么？結(jié)果如何？此外，容錯是評價一個產(chǎn)品可用性的重要標志之一，我們要在用戶可能“犯錯”前給予必要的提示、警告。
1、重要操作確認
確認退出、確認刪除、確認提交……需在彈窗中告知用戶正在進行的操和可能帶來的“危害”，減少用戶犯錯的可能。有的可使用非模態(tài)浮層，但最好能顯示在操作觸發(fā)區(qū)域旁邊，以防止用戶忽略提示。
2、告知操作結(jié)果
告知結(jié)果和影響，并引導用戶接下來可進行的任務(wù)；
如果只是普通的告知用戶操作成功（如申請成、刪除成功、提交成功……），這里建議使用toast提示即可，讓用戶“了解”即可，而不需要特別用戶關(guān)注和點擊關(guān)閉。如果是操作失敗，在告知結(jié)果同時，還需要告知用戶失敗的原因、需要做什么。
諸如導入等相對復雜、不可控和出錯率較高的任務(wù)，在操作失敗時還需要告知用戶具體出錯的位置，幫助用戶快速定位原因并找到解決方案。
3、頁面異常
斷網(wǎng)、數(shù)據(jù)出錯、系統(tǒng)崩潰等。
4、下線通知
頁面登錄超時，強制下線重新登錄；賬號被擠下等。
5、其他反饋類彈窗
四、小結(jié)
在B端web設(shè)計中，彈窗的視覺樣式可以是多種多樣的（本文也并未過多涉及這方面），但從功能上來說，無外乎以上所述信息展示、任務(wù)、反饋三大類型。一般來說，如果可以替代，我們應(yīng)慎重和少使用彈窗。但了解彈窗的各種應(yīng)用場景，可以方便我們更好地權(quán)衡設(shè)計方案：是否可用彈窗？是否只能用彈窗？用二級頁面、浮層、甚至toast提示是否會更好……從另一個角度來說，了解彈窗的各種功能，對于我們梳理和規(guī)范現(xiàn)有產(chǎn)品框架、制定和完善設(shè)計交互及視覺規(guī)范來說，也是大有裨益的。
日常設(shè)計小結(jié)，如有不足，歡迎拍磚指正！
本文由 @Rindy 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于 CC0 協(xié)議
首先作者介紹的很詳細，但是產(chǎn)品的設(shè)計不僅僅是彈窗這么一個環(huán)節(jié)，還有詳情頁、ui配色。。。如果前期沒有詳細的規(guī)劃，設(shè)計的產(chǎn)品必定難以滿足用戶的認可，這些都需要產(chǎn)品經(jīng)理有足夠的基本功，做B端產(chǎn)品，最難的是業(yè)務(wù)背后的邏輯。
這里向你推薦起點學院的B端產(chǎn)品體系課，如果你不了解這門課程，可以先來試聽B端產(chǎn)品公開課，多位10年+經(jīng)驗的B端老司機分享B端產(chǎn)品經(jīng)驗，現(xiàn)場更有1V1互動，點擊這里，立即預(yù)約>>http://996.pm/YXrVR
人家就是專門在講彈窗，你這在打廣告，合適嗎
起點是不是沒人去呀，廣告都打到這里來了
有收獲，謝謝作者~
感謝大神分享，最近在做后臺界面，很多地方不是很明白，為什么彈窗按鈕都是在右邊，是因為根據(jù)windows系統(tǒng)的習慣嗎？
win和ios系統(tǒng)比較大的區(qū)別是保存和取消的位置。win的保存（當前場景導向的操作）在左邊，ios的保存在右邊；至于保存、取消的位置，我比較傾向與文本框左對齊，這樣比較符合操作流程
對于多按鈕操作的情況，居右是是最方便也是最統(tǒng)一的樣式，這個能應(yīng)付幾乎所有的場景需要，如果與文本對齊，出現(xiàn)多個按鈕的時候，順序就是問題。
問下，彈窗可以出現(xiàn)兩級嗎？就是在彈窗頁面操作后，再彈出一個彈窗再操作?？偢杏X有點復雜且不好看。
同問！
基本上，不要彈框中在做彈框，更多的可以是用浮層和蒙層來展現(xiàn)，但具體要看具體情況
一般來說，交互設(shè)計時應(yīng)該盡量避免出現(xiàn)多級彈窗，根據(jù)實際場景可用tab切換、多頁簽切換、浮層、氣泡、展開/收起、覆蓋等方式來表現(xiàn)深層級的信息；但在很多B端產(chǎn)品中，由于本身信息層級復雜，或自身規(guī)范的限制，其實很難完全避免多層彈窗，這種情況下可采用彈窗替換的方式，只要不出現(xiàn)遮罩蓋著遮罩，一般能接受（實際上不少產(chǎn)品都有彈窗套彈窗的情況存在）
很好奇為什么是針對b端產(chǎn)品？
B端的很多業(yè)務(wù)場景的特性比較適合在電腦端以Web呈現(xiàn)，比如很多表格在手機上展現(xiàn)的時候差強人意。
感謝解答
懸停浮層的學到了~ ??
產(chǎn)品小白想請教下作者：模態(tài)和非模態(tài)有和區(qū)別，謝謝了。
模態(tài)就是比如你購物選擇購物地址的區(qū)域，那就是模態(tài)，屬于這個表單的某個項目分類的詳細表。
感謝解答～
模態(tài)就是當前必須完成后，才能繼續(xù)下一步；非模態(tài)隨時可關(guān)閉，不影響當前任務(wù)
學習了