2021-1-20 資深UI設計者
彈窗作為應用的輔助窗口之一，在B端產(chǎn)品中占據(jù)重要作用，很多產(chǎn)品甚至大部分功能都需要在彈窗中完成。有些彈窗會被用來承擔復雜的設置、有些彈窗會被頻繁調(diào)用、有些彈窗需要提供更詳細和更結(jié)構(gòu)化的信息，如何處理好彈窗在整個任務流中的交互對UI來說非常重要，因此本文主要探討B(tài)端產(chǎn)品中的彈窗設計和規(guī)范。文末會提供可供調(diào)研學習的B端網(wǎng)站。
如果你想了解B端系統(tǒng)圖標的設計方法，可以瀏覽上一篇《小白適用：如何快速掌握系統(tǒng)圖標的設計方法》，歡迎討論指正。
不知道你們有沒有思考過“對話框”和“彈窗”的區(qū)別，我們平常所稱呼的“彈窗”主要著眼于動作，意思就是彈出來的窗口，是泛指，在GUI（Graphical User Interface）屏幕中幾乎所有彈出來的對象都可以稱之為“彈窗”。
在常用的兩個前端網(wǎng)頁開發(fā)組件Ant Design和ElementUI中，沒有單獨命名為“彈窗”的組件，都是細分在各個功能分類中。比如Ant Design中相關的細分就有警告提示、全局提示、對話框、通知提醒框、氣泡確認框等，而ElementUI中則又是不一樣的細分法，除了分類方法和命名不一樣，歸根結(jié)底達到的目的是一樣的，以上我們都可稱之為“彈窗”，當然在工作中用細分的稱呼會更專業(yè)更明確。
這里的“窗口”對標“對話框”和“彈窗”的概念，窗口是承載應用程序的區(qū)域，應用程序的窗口被打開，則表示該應用程序正在運行中。窗口可以移動、可以放大縮小，主要有二種姿態(tài)，一種是“獨占式”，一種是“暫時式”。顧名思義，“獨占式”就是需要占據(jù)大部分屏幕的應用，ps、ai的窗口就是“獨占式”窗口，而“暫時式”則大部分時間在后臺運行，比如音樂播放器、殺毒軟件等，只需在必要時打開即可。
一個應用通常由一個主窗口和若干輔助窗口構(gòu)成，彈窗就是典型的輔助窗口之一。
對話框強調(diào)了用戶與計算機進行對話的過程，是疊加在應用主窗口上的彈出框，一般在對話中它會給出消息或要求輸入。當對話完成后，即可關閉對話框。說人話就是，對話框一般需要用戶進行操作，當用戶輸入或者點擊“確認”、“取消”等按鈕時，計算機會根據(jù)指令進行工作，這是一個人機“對話”的過程，因此稱之為“對話框”。
無論在現(xiàn)實中還是界面交互中，我們都不希望對話被打斷，所以對話框通常是模態(tài)的（下文會解釋模態(tài)和非模態(tài)的定義）。
梳理完三個容易混淆的概念之后，接下來主要從彈窗的二個角度展開討論：彈窗的分類和應用場景；彈窗的設計細節(jié)和技巧。
彈窗可分為兩大類型：“模態(tài)彈窗”和“非模態(tài)彈窗”。
模態(tài)彈窗：用戶必須給予彈窗反饋，除非點擊關閉或者操作完成，否則彈窗會一直在。形式上來說就是給當前頁面添加蒙層，使用戶將注意力集中在彈窗上。上文提到，無論在現(xiàn)實中還是界面交互中，我們都不希望對話被打斷，模態(tài)彈窗不會輕易被打斷，所以對話框通常也都是模態(tài)彈窗。
模態(tài)彈窗的常見場景：你打開了一個應用的模態(tài)彈窗后沒有管它，然后切換到其他應用程序中去，等你忙完回到原來的應用時，那個當初的模態(tài)彈窗仍舊在那兒等你。這就是模態(tài)彈窗，雖然看起來僵硬死板，但是它的目的和使用范圍通常是非常清晰的。
非模態(tài)彈窗：不需要給出反饋，不影響用戶的其他操作，主要有屬性配置彈窗、Tooltips、消息通知、氣泡框等類型。
下圖紅框中就是典型的非模態(tài)彈窗，它們可以同時開啟且互不影響，不會影響主程序的進程。
非模態(tài)彈窗的另一個特點就是：實時生效。點開非模態(tài)彈窗的同時仍然可以看見主界面，主界面會根據(jù)你的操作實時變化，你可以隨心所欲地不斷選擇、改變、選擇、改變，而模態(tài)彈窗則無法在你點擊其中一個表單的當下立即做出改變。
下圖例子就是非模態(tài)的屬性配置彈窗。
出于營銷目的，這類彈窗都會第一時間出現(xiàn)在你面前，直到手動關閉，它的特點就是不用登錄也會出現(xiàn)，提高曝光率，便于拉新和轉(zhuǎn)化。
主要是為了將一些重要信息通知給用戶，這些信息要么來自一些被觸發(fā)的事件，要么來自應用開發(fā)者的信息，一般在用戶登錄后第一時間彈出，確保用戶不會錯過。需要注意的是，在應用的通知中心一般也需要保留這類重要或者高級別的通知，以便用戶可以隨時查看回顧。
提示類彈窗是由應用程序主動彈出的消息，主要有三種狀態(tài)：錯誤、警告、確認。通常是用戶進行某項操作后給出的反饋信息，會中斷當前工作流，屬于阻塞型提示。
以上都屬于通知公告類的“模態(tài)彈窗”，特點就是一般不需要用戶具體操作，用戶將其關閉或者點擊“確認”等按鈕即代表用戶已經(jīng)接收到該消息，彈窗就完成了它的任務。
“簡單”意義上的彈窗可以理解為只有平鋪的表單讓你選擇或輸入，交互清晰明了。比如創(chuàng)建項目、分享鏈接、更改名稱等操作。
有些應用的功能配置中有很多復雜的屬性，簡單平鋪的彈窗無法滿足需求，需要分層分類歸納，于是從20世紀90年代開始出現(xiàn)了選項卡/標簽頁彈窗。它的優(yōu)點是合理利用了空間，也能讓用戶更好的理解信息層級。
mac os 8.5系統(tǒng)的彈窗（發(fā)布于1998年10月）
monday.com的配置彈窗（簡潔的標簽頁）
標簽頁彈窗的設計必須合理且適度，找到信息之間的因果關系，仔細斟酌并加以連接整理。同時，單個彈窗中的標簽頁不宜過多，一般不超過五個（動態(tài)可增減的標簽頁除外）。
如果你的標簽頁過度堆疊，你需要嘗試改變交互方式，重新整理信息。一種辦法是增加標簽頁的深度，將能夠歸納在一起的內(nèi)容盡量整合，放置在單個標簽頁中；另一種辦法是拆分信息，分成多個簡單的彈窗。
下圖中的例子就是第一種辦法，整個彈窗有三個標簽頁，但是單個標簽頁中又劃分了更詳細的結(jié)構(gòu)化信息，是一個典型的標簽頁少但信息量大的彈窗。
流程步驟彈窗與標簽頁彈窗接近，區(qū)別就是步驟彈窗需按順序進行，一般上一步未完成之前無法進入下一步，用戶注冊常用這種方式。
屬性配置彈窗主要為了讓用戶改變某一對象的屬性，可以是局部屬性也可以是全局屬性。
屬性配置也可以用模態(tài)彈窗，如何選擇用“模態(tài)”還是“非模態(tài)”？當你需要讓用戶實時看到界面的變化或者表單項簡單的時候可以選擇“非模態(tài)”，如果操作復雜或者信息加載比較耗時，則采用“模態(tài)”更合理。
下圖為實時生效的日期選擇彈窗
下拉菜單幾乎都是非模態(tài)，它的優(yōu)勢明顯，沒有復雜操作和各種表單，只需要鼠標劃過點擊即可，快速。
上文中應用級的消息提示通常是模態(tài)彈窗，而非模態(tài)的消息提示彈窗則通常從頁面的頂部或者右側(cè)彈出，這類彈窗可以長時間駐留在屏幕邊緣，也可以一段時間后自動消失。
點擊按鈕時，彈出氣泡式的彈窗就是氣泡框，氣泡框可以針對元素進行簡單的操作，尺寸也會根據(jù)內(nèi)容大小不一。
Tooltips跟上圖的氣泡框很類似，區(qū)別在于Tooltips更輕量，屬于頁面中最小的彈窗類型，用于功能的提示說明，通常都是文字，背景用深色來與主界面拉開層次。
一般來說，如果是明確的屬性配置彈窗都應該有一個標題來說明用途或功能，以及關聯(lián)的動詞來方便理解。比如“創(chuàng)建列表”、“刪除列表”、“修改配置”、“配置參數(shù)”等，不同標題對應不同的功能場景，前提是方便理解。另外，動詞在名詞前面或者后面都可以，注意統(tǒng)一規(guī)范即可，不要一會兒在前一會兒在后。
標題字號一般比默認文本字號大2px或4px，也有應用為了突出標題，選擇使用更大的字號，但大的字號也應該符合文字規(guī)范，而不是隨意使用。
模態(tài)彈窗應至少包含一個以上的關閉方式，常見的彈窗關閉方式有4種：（1）、右上角的關閉按鈕；（2）、彈窗底部的“取消”按鈕；（3）、彈窗外的任意區(qū)域；（4）、一段時間后自動消失。
“關閉”按鈕在彈窗外：常見于營銷彈窗，一方面按鈕遠離彈窗，比較隱蔽，拖延用戶關閉彈窗的時間，提高信息的曝光率。
“關閉”按鈕在彈窗上：版式設計中有一個“破型”的概念，是一種打破規(guī)矩的設計技巧，能讓畫面快速吸引眼球，所以營銷類彈窗經(jīng)常采用這種設計方法。這種概念可以理解為，我們希望用戶關注于被強調(diào)的部分，常見的場景就是ios系統(tǒng)批量刪除App的時候，應用圖標左上角會出現(xiàn)“移除”按鈕。這種方式強調(diào)了“關閉”按鈕，視覺上增加層次外，用戶的關閉體驗也更佳，減輕干擾性彈窗對用戶的負面情緒。
“關閉”按鈕在彈窗內(nèi)：這是應用最廣泛最不容易出錯的方式，對用戶來說，固定在彈窗右上角的“關閉”按鈕代表了安全感，在誤操作或者想中斷操作時我們會自然而然地去右上角點擊“關閉”。
彈窗底部的按鈕一般有2種功能:（1）、取消或者確認；（2）、進入下一步流程。基于大多數(shù)用戶右手掌握鼠標的習慣，一般按鈕居右下角的設計方式更廣泛。這些按鈕上的文字大不相同，代表了對計算機的不同指令，但相同的結(jié)果都是關閉了當前彈窗。
有些應用也會采取按鈕居左的設計，這種方式有一個優(yōu)點就是減少誤操作，讓按鈕遠離鼠標點擊熱區(qū)。
這種方式一般用于模態(tài)彈窗，除了彈窗中的關閉按鈕外，點擊彈窗外的任意區(qū)域關閉體驗更佳。操作配置類彈窗不建議采用這種方式，容易誤操作導致正在配置中的彈窗被關閉。
B端彈窗的標題字號通常比內(nèi)容文本大2px或4px，常用字號為12px、14px、16px，14px為默認文本字號，12px為輔助說明字號，也有緊湊型頁面將12px作為常規(guī)字號。無論選用何種字號，都應跟主界面的字體規(guī)范保持一致。
左對齊：彈窗中應用最多的對齊方式，適合表單較多的配置類彈窗。
居中對齊：常見于消息提示類彈窗，適合圖文結(jié)合或者信息較少時的排版方式。
兩邊對齊：兩邊對齊的方式讓彈窗看起來更規(guī)整，適用于平鋪的配置類彈窗。一般表單較多的情況下不建議使用兩邊對齊的方式，一方面左對齊比兩邊對齊看起來更有層次，另一方面多表單時兩邊對齊會使彈窗看起來冗長。
除了對齊方式，表單的排列是B端彈窗中最令人頭疼的一塊內(nèi)容了，在一些復雜的操作彈窗中，常常包含各種類型的表單，例如下拉框、輸入框、日期框、穿梭框以及各種組合模式的表單項，很容易讓表單看起來凌亂，也影響了交互操作。
單行一個表單項：常見的表單排列，適用于表單較少的排版方式。
單行多表單并排：在復雜場景中，單行只排列一個表單項會讓彈窗超長，因此會采用多個表單并列分布的方式。這種方式存在2個問題：（1）、如果表單的標題長短不一，看起來參差不齊，下圖中的表單標題一樣長是最理想的場景；（2）、橫向距離長，導致彈窗過大。
標題與表單分行排列：越來越多的應用采用這種表單排版方法，這種方法可以兼顧更多場景，可拓展性也更高。這種方法會增加縱向空間的占用，不過眼睛焦點的縱向瀏覽比橫向瀏覽獲取信息效率更高，所以在表單復雜的情況下，相比于上一種方法也是一種更優(yōu)解。
表單的排版不只局限于一種，我們需要根據(jù)表單內(nèi)容來設計。但是需要注意3點：
(1)、當表單標題長短不一，上下無法等距排列時，我們要盡量將標題和表單分行排列；
(2)、一行不要出現(xiàn)太多的表單項，一般來說彈窗中最多一行排列三個；
(3)、表單的靈活性很強，哪些需要寬度固定，哪些需要根據(jù)內(nèi)容可擴展可換行，我們都要在設計中加以規(guī)范說明，多考慮可能會出現(xiàn)的樣式問題，提前規(guī)避。
彈窗是一個容器，容器的大小取決于放置其中的內(nèi)容物。這里主要討論場景復雜的對話框的尺寸規(guī)范，其他例如Tooltips之類可作為單獨的組件在需要的場景直接調(diào)用即可。
對話框的大小主要根據(jù)內(nèi)容而定，B端應用中，一個尺寸無法滿足所有類型的彈窗需求，所以我們要設定幾種常規(guī)尺寸，一般可設定為4種：S（通知提示類）、M（配置簡單）、L（配置復雜或者擴展詳情）、特殊（根據(jù)實際情況而定）。pc的小屏幕分辨率為1024*768，所以高度盡量控制在600px以內(nèi)（除去導航欄、工具欄高度），寬度控制在1000px以內(nèi)，如果你所設計的B端產(chǎn)品在某個固定的場景中使用，也可以根據(jù)使用場景而定，原則就是要讓彈窗能夠一屏展示完全。
這里主要分享一個小技巧，對于彈窗來說很實用。sketch右側(cè)屬性面板有一個“調(diào)整尺寸“功能，非常適合各種組件化的應用。不同場景下我們會需要不同尺寸的彈窗，有了這個功能，我們不需要每個彈窗都畫一遍，只需要創(chuàng)建一組基本的彈窗規(guī)范，其他尺寸可以根據(jù)所需場景調(diào)整。
未調(diào)整過的組件不能隨意更改尺寸，否則將變形不可用。
創(chuàng)建彈窗組件時，把彈窗里需要固定不便的尺寸參數(shù)設置好。（設置方法：靠左的左邊固定，靠右的右邊固定，對角的靠兩個邊固定，分割線高度固定，文字圖標寬高都固定）。
設置好后的彈窗組件即可在設計稿中隨意調(diào)整大小，固定參數(shù)不會發(fā)生變化，因此我們在設計規(guī)范中只需要做一種或二三種常見的彈窗樣式即可，不需要把設計稿中的每種尺寸都放到設計規(guī)范中。
表單同理，在組件中設置好參數(shù)后，調(diào)用時可以根據(jù)情況替換圖標、文字和寬高，非常方便。
在B端設計中，隨著數(shù)據(jù)量的增加和業(yè)務線的擴大，設計師在設計時，常常需要考慮到交互的可擴展性，我們設計的交互至少要滿足未來半年到一年的產(chǎn)品應用。因此作為使用頻率很高的彈窗，我們在設計時尤其需要考慮全面，不只為了滿足當前的場景，也要考慮未來可能應用的場景。
最后碎碎念一下，這是一篇從2020年跨越到2021年的文章，加上拖延癥，寫了很久...原本只打算簡單的分享和總結(jié)，結(jié)果越寫越多，越寫越擴展。其中很多內(nèi)容是自己在實際工作中遇到的坑中摸索出來的，做個總結(jié)也便于自己的成長，歡迎各位大佬們批評指正。
文章來源：站酷 作者：time不休
藍藍設計( tweetduck.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務