B端的彈窗規范應該怎么做？

Sponsor

前言：彈窗是交互展示內容的重要方式，在響應式設計和多平臺統一的趨勢下，結合不同的場景和目的，彈窗類型和用法千差萬別。今天本文將就彈窗的設計做一個統一的整理和說明，幫助設計師們理解彈窗設計。

最近做內網時涉及到彈窗問題，我們來一起討論和總結下。

彈窗，是常用的一種展示內容的方式，在網頁、軟件、系統、APP中非常常見。在響應式設計和多平臺統一的趨勢下，，結合不同的場景和目的，彈窗類型和用法千差萬別，今天咱們就專門針對彈窗設計做個整理和說明，幫助大家更容易理解它。

看完本篇文章，你會學到以下內容：

1. 什么是彈窗？
2. 彈窗都有哪些分類？他們各自有什么特點？什么場景用什么類型的彈窗？
3. 彈窗的尺寸如何定？
4. 彈窗設計時，需要考慮什么？

一，什么是彈窗？

彈窗是一種交互方式，也叫彈框，主要功能是用來提醒用戶做決定，或者解決某項任務的。

彈窗主要是讓用戶能更聚焦，不被其他事物干擾，且不用離開當前頁面，能快捷的完成需要完成的任務。彈窗早已不像以前那種把一堆內容隨便羅列出來了，而是承載著越來越多的功能性需求。所以彈框設計是值得每個設計師重點關注的。

一般我們?？吹降膹棿笆怯桑阂粋€蒙版，一個主體及一個關閉入口，組成的。

二，彈窗都有哪些分類？他們各自有什么特點？什么場景用什么類型的彈窗？

彈窗在交互形式上，主要分為兩種形式：模態彈窗和非模態彈窗。

模態彈窗：

模態彈窗的特點是當它出現時，用戶需要對它作出回應，它是屬于可交互的。常見的種類有 “對話框（Dialog）”，“抽屜（Drawer）”等。模態彈窗的視覺層級非常高，很好的吸引用戶的注意，但它的出現是打斷用戶當前操作的它限制了用戶只能在該區域內操作，用戶界面中其它內容是不可操作的，它限制了用戶使用界面的自由權，屬于強彈窗。所以會導致用戶體驗不是特別好。這里就需要設計師在設計時格外注意，不建議使用的太頻繁使用。

非模態彈窗：

非模態彈窗與模態彈窗正好相反，它從出現到停留消失的時間很短暫，短到用戶不需要對它作出任何反映，大約3-5秒，它基本上不影響用戶體驗，用戶可以不需要作回應，所以它是一種輕量級的弱彈窗。（但非模態彈窗中，也有部分需要操作行為動作才會消失。例如，“文字提示”類的彈窗，需要用戶鼠標懸停在某個焦點上才會出現，移開鼠標“文字提示”才消失。用戶既可以在目標攤床上操作，也可以隨時在主界面上操作。

常見的種類有“文字提示（Tooltip）”：“警示彈窗（Alter）”，“氣泡（Popover）”、、“通知提示（Notification）”、、“氣泡確認框（Popconfirm）”、“全局提示（Message）”、“警告提示（Alert）”，浮層（Popover/Popup）等。

簡單講，模態彈窗就是當前必須完成后，才能繼續下一步；非模態彈窗隨時可關閉，不影響當前任務。

以彈窗功能和用途方面來定義的話，彈窗可分為：任務、內容反饋、信息提醒三大類。

模態彈窗一般是屬于任務類型的。

非模態彈窗一般大部分都是內容反饋和信息提示，類似“文字提示”、“通知提示”、“全局提示”，屬于信息反饋類。

下面我們來分別看看任務（模態彈窗）、內容反饋（非模態彈窗）、信息提醒（非模態彈窗）三大類區別

1，任務（模態彈窗）

在頁面中，遇到復雜的擴展功能時，會經常使用“模態彈窗“，即：“對話框”、“抽屜”兩種類型,他們除了有標題、按鈕之外，通常還會有一些任務表單之類的內容。

對話彈窗一般分為?信息下放?和?信息提交?兩大類。

例圖：

對話框 / 抽屜（模態彈窗）

在什么情況下需要使用模態彈窗？

針對信息量比較大（一頁顯示不全，需要有滾動條），或者一些比較復雜的任務，還會有一些更多的延展性操作或者選擇任務，例如很常見的場景：“登錄”、“審核”、“申請”、“編輯”……這些相對復雜的任務和操作，它除了標題和文字、說明、操作按鈕之外，通常還會有一些復雜的可編輯表單，以及點擊、選擇、拖動等操作；當然類似選擇器、輸入驗證碼、高級搜索、分享、操作權限確認、用戶反饋等一些單一、簡單操作的簡單任務，也基本上都建議使用模態的彈窗。其中使用對話框形式的彈窗居多。這樣可以讓用戶更為聚焦，減少可能產生的誤操作，專心完成需要完成的任務。

模態彈窗的對話框結構和功能，大致由標題，核心內容，操作按鈕，關閉等元素組成，例圖“

模態彈窗的常見抽屜式彈窗：

而抽屜式的“彈窗”，在表格中出現較多。通常會以側滑的形式出現，有加遮罩層的，也有不加遮罩層的模態彈窗（不加遮罩層方便方便用戶進行對比、參照和檢閱相關內容，同時并不會影響用戶對界面其他區域的操作）。

與“對話框”對比，“抽屜”在使用場景也有它的優劣勢。

優勢：“抽屜”的頁面空間更大，它能夠承載更多的內容、信息，它與主頁面親密度更高；

劣勢：“抽屜”的靈活度比較低，比如“對話框”可以根據業務的內容多少去變化它的寬度與高度，而抽屜只能橫向/縱向降低尺寸。

所以，“抽屜”適用范圍更小，大部分場景下都用在較復雜的表單及字段較多詳情頁?！俺閷稀痹赪eb端的應用中可分為：a.內容展示、b.表單編輯這兩大類型（這里就不過多討論了)。

2，內容反饋和信息提醒（非模態彈窗）

“內容反饋”及“信息提醒”這兩種類型很相似，都屬于“非模態彈窗”類型。他們存在的意義都是起到及時有效的幫助用戶完成某項任務，提高任務的操作效率和可理解程度”。

“內容反饋”是用戶在輸入信息或操作功能時，系統給出相應的提示出現的內容反饋頁面，在設計時，一般會用到“全局提示”、“通知提示”、“氣泡確認框”三種類型來反饋消息。它屬于“非模態彈窗”類型，出現時，不但不會打斷用戶的操作，還能明確告知用戶反饋結果，幫助用戶有效的完成界面中的復雜任務。

“信息提醒”常常用到“文字提示”、“氣泡提示”、“警告提示”三種形式展現出來提醒用戶。

例圖：

全局提示/通知提醒（內容反饋）

氣泡確認框（信息反饋）/文字提示和氣泡提示（信息提醒）

非模態彈窗的全局提示結構和功能大致是由：1.圖標、2.提示文本、3.關閉（可選）、4.操作（可選）四部分組成，其中可選部分是否包含可根據實際情況進行配置。

非模態的彈窗，允許用戶點擊彈窗范圍外區域關閉彈窗。目前業內大部分 提示 都采用了Toast來設計。包含： ?、更新提示條?、清理緩存 、登錄提示、離線提示 、按鍵引導?、按鍵引導?、按鍵引導，輸入框旁邊的橙色或紅色提醒文字等。他們的形式非常多。

彈窗設計，不管是模態還是非模態，只要它出現，都會對用戶的體驗感有一定影響，所以我們在設計彈窗時，需要根據不同場景選擇適合的彈窗樣式的同時，一定要注意，千萬不能高頻率的使用彈窗。

那彈窗的特性大致包含以下幾點:

a,輕量型的頁面，可以快速回到原來的界面。

b,相對比較獨立，與原來的頁面互不干擾，完全不影響原來頁面的整體布局。

c,比較適合簡單的一次性操作就能解決的內容。

所以我們在設計過程中，當遇到某些任務內容，不知道應該給它用彈框，還是用新的頁面來展示的時候，就可以根據以上三點特性來分析 ，什么場景適合用什么樣的彈窗了，就不難做出決定。

很多任務，只是一些簡單的操作的話，就不需要額外增加一個全新的頁面來展示它們，這時就可以用彈窗的方式來表達。

有一點特別要注意：發現市面上，目前有不少產品，在對一些普通的字段進行解釋說明時，特別喜歡使用帶遮罩的模態彈窗，需要用戶點擊才顯示，這種設計是屬于不合理的，一定要杜絕。因為像這樣簡單的解釋說明，只需要用非模態彈窗來展現，用戶只需要懸停就能快速預覽相關內容，還可以快速離開（移開觸發區的圖標，或點擊空白區域）。

但是，如果相關的內容特別多，設計師就需要考慮設計跳轉到新的頁面展示相關內容，而不是簡單使用彈窗了。

在設計時，還需要注意彈窗的設計規范統一性。包含：

視覺的統一性: 顏色，間距，文案風格等。

交互的統一性: 主要操作是放在左邊按鈕，還是右邊按鈕；關閉是點擊蒙版還是點擊“X”圖標。

如果覺得比較枯燥的話，還可以從視覺上入手，豐富下任務彈框，比如說有必要的話，結合些微動畫，插畫等，就會有非常驚艷，讓人過目不忘的效果。

三，彈窗的尺寸如何定？

我們在開始設計一個彈窗時, 首先要解決的問題就是確定彈窗的尺寸。

根據「百度數據」提供的主流瀏覽器分辨率可大致知道，當下比較流行的屏幕分辨率有1024*768,1366*768,1280*800,1280*1024，1440*900,1600*900，1920*1080等。一般使用常見的作為設計稿尺寸都是沒問題的，常用的是1920*1080，而我會結合公司具體需求使用1440*900(想把設計稿做成多大,以及如何適配，都需要設計師結合實際情況考慮好)。

因為我們公司用的是AntDesign的框架，而他們的設計語言中提供的一些文件參考是這個尺寸，這也是常用尺寸。設計網頁時要考慮好瀏覽器的分辨率，主流的瀏覽器有IE,谷歌，火狐，歐朋等。我們需要考慮瀏覽器的有效可視區域，就是顯示內容的區域。比如打開一個網頁后，除掉瀏覽器的工具欄和側邊欄等，真正顯示內容的地方，如下圖：

我們需要找到一個尺寸適配所有屏幕分辨率

目前，市面上800×600屏幕尺寸已經不需要考慮了，主流的最小尺寸是1024*768，并且現在主流的瀏覽器還是以IE為主，最小的常用屏幕尺寸是1024×768。所以，我們只要能保證在這個最小尺寸里放得合適, 那么其他尺寸也肯定沒有問題。

彈框的寬度一般不會設得太寬，1000px以內足夠；高度的話，以Windows為例，去掉瀏覽器的標簽高度和系統底部功能條的高度后，可以得出:

768px – 約100px(瀏覽器標簽欄等高度) – 約40px(系統底部工具欄高度) = 約620px

所以彈框高度控制在620px以內，就可以確保在小屏幕上也能正常顯示完整的彈窗，避免在小屏幕下需要滑動滾動條才能看全整個彈框的情況。因為，如果彈框本身有滾動條，而頁面又因為超出一屏多了個另外一個全局的滾動條，那這個滾動體驗就很不好的。因此，不管是從用戶體驗角度，還是從開發成本來看，我們一般都會把彈框控制在620px高以內。

所以我們大致得出當屏幕尺寸是1024×768時彈窗的 寬度和高度值一般會設為小于等于 1000*620PX的尺寸。

由于屏幕的尺寸愈來愈大，有時候為了在大屏幕下有更好的視覺表現，對于一些較復雜的彈框，可以選擇做2-3種尺寸適配。

例如:

在某些大屏幕下，彈框尺寸為640px(寬)*760px(高);

但在小屏幕下，選項及Icon則會縮小，彈框尺寸變成了640px(寬)*620px(高)

值得注意的是：現在現在越來越多的寬屏正在逐漸占據市場，相對應的越來越多的網頁設計的寬度和高度都不是固定不變的，只要在規定的最大值或最小值范圍內都可以自由組合出適合自家產品的尺寸，如果遇到別的分辨率，可以做自適應的調整（適配方面需要設計師自己先考慮好，然后傳達給開發同學的），這是一個流行的趨勢。

如果剛接觸B端產品的小白，在自己定彈窗尺寸，實在束手無策不知道從何入手時，也可以結合自己要做的產品，借鑒一些大廠成熟的彈窗尺寸規范進行設計，畢竟站在巨人肩膀上，可以看得更遠。

總結起來，彈窗的尺寸大小，需要根據屏幕大小來決定，我們能參考的只是常規屏幕大小尺寸大約為多少范圍內，但是具體數值 ，卻需要我們設計師根據具體情況，給他們做具體的尺寸適配。

四，彈窗設計時，需要考慮什么？

在B端web設計中，彈窗的視覺樣式雖然非常多，但功能卻大致只有上面我們講到的：“信息展示、任務、反饋”這三大類型。在做彈窗設計時，我們只要掌握了它的底層邏輯，

首先,就能更好地權衡彈窗適合在什么應用場景里使用：比如說某個場景是否可用彈窗？是否只能用彈窗？用二級頁面或浮層，甚至是toast弱提示這些替代，是不是會更好……

其次，就能對產品的框架，交互及視覺設計進行很好的梳理，制定和規范，如果可以，我們應該竟可能的慎重和少使用彈窗。

最后，還得格外注意一些比較容易產生歧義的按鈕文案，類似“確認”和“確定”，“提交”和“發布”，“關閉”和“取消”等，

“確定”和“確認”按鈕，常分別與“取消”按鈕組合使用。一個是做決定，一個是需要核實。

“確定”常用于用戶對某些配置修改了，或做了某些重要操作，出現彈窗需要提醒用戶做決定，等用戶同意后，才能最終執行。

“確認”用于那些不可以再逆操作的，比如說填寫某些信息提交時 ，需要用戶“核實”的操作時。

“提交”和“發布”按鈕，

“提交”，用在填寫完相關內容后，不需要系統審核 ，就能發出去的操作中，比如購物寫評論等場景。

“發布” ，用在把一些作品 ，資料等重要內容上傳到公共平臺中，這種情況秀需要系統嚴格審查通過了，才能發布的，是要負一定責任的場景。

“關閉”和“取消”按鈕

“關閉”，?一般用于把當前彈窗關掉，但不影響正在運行的操作。

“取消”，一般用于取消正在進行的操作，比如說上傳視頻圖中，被取消中斷了，繼續維持原來的樣子。

它們之間都是有區別是的 ，要知道哪些場景下用什么樣的文案才能準確地傳達給用戶相應的信息。

大致就是以上需要注意的。

最后，祝各位都有個好前程，趁著年輕，抓緊一切時間提升自己的專業能力，讓自己更有價值，更值錢。

作者 | 范幺幺
來源 | 站酷（zcool.com.cn/article/ZMTI1NzYyOA==.html）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。