你是否留意過B端產品中彈窗的應用？你是否曾猶豫過該用彈窗還是頁面呢？
可能很多產品經理覺得這是一個無關緊要的點，只要功能實現了就可以了，畢竟只是一種展示形式而已。
其實不然，我們之前在用戶調研中收到這樣的反饋：感覺流程很長，操作太複雜了。但是該有的功能不能少啊！怎麼辦？我們把很多頁面改成了彈窗，用戶說：我覺得這樣流暢多了。
之前我們也一直在強調B端產品的精細化設計，本文就這個小點來深入地探討下，可能會讓你有所啟發，讓產品設計更加的人性化。
彈窗 VS 頁面
彈窗和頁面就是2種展現形式，沒有絕對的好和不好，只有怎麼應用會帶來更好的用戶體驗。
1. 減少跳出感：彈窗勝
我們點擊按鈕後，如果是跳轉到新頁面，就會有很強的跳出感，特別是當加載速度慢時感受尤為強烈。
比如說患者到診所後的登記流程，從登記頁面到完成掛號收費，再回到登記頁，要跳轉4次，讓前臺感覺操作很繁瑣：
如果我們把其中2個頁面做成彈窗，用戶感知上流程就變成了下圖這樣，2步就可以完成登記，比之前少了2步操作，簡單多了。
2. 減少跳轉引起的錯誤：彈窗勝
因為頻繁的跳轉，有些用戶跳出去以後不知道怎麼回去了。我們可以看下面這個小視頻，本來是在醫生門診的，因為點擊了預約，直接跳到了新頁面，然後點擊預約頁面上的返回按鈕，返回到了預約列表頁面，而不是原先的醫生門診頁。
我估計很多醫生都懵了，明明只想簡化操作，直接在門診時就給患者約好下次看診時間，卻在跳出後還要找到入口重新進去。
更糟糕的情況是，如果頁面上的內容填寫到一半沒有保存，跳出回去之後全軍覆沒了，醫生還要重新填寫一遍，真是欲哭無淚啊。每次在點擊這個按鈕前都要仔細地想想：我的內容都保存了嗎？這是最後一步操作了嗎，一會還要回來嗎？如此左思右想的時間，直接拉低了工作效率。
為了驗證我的猜想，我去看了下後臺的埋點數據，果真使用率很低，不排除說開展預約服務的用戶數量少，也不排除直接在門診時就約下次的情況少，但這功能做的我也不敢用啊，一點就有膽戰心驚的感覺。
後來設計的時候就把這個功能改成了彈窗，不管任何時候想進行預約，都不用擔心找不到回來的路，也不用擔心沒有保存了。
當然還有一種做法是不直接覆蓋原頁面，新開窗口進行跳轉，這種能減少很多錯誤。但有一個缺點是：當新開頁面很多時，用戶想要點擊回去的那個頁面也得找一下，有時還沒直接點擊左側菜單欄快。
但畢竟不是所有的功能都適合做成彈窗形式的，比如我在門診時想看下患者的完整資料，這個時候就適合新開窗口跳轉，因為病人資料庫裡面的內容太多了，而且兩個頁面可以對比來看，更加清晰。
新開窗口跳轉的方法也是很常用的，但要注意的是不要太多，否則就會像上面那個密集的tab了。
3. 信息承載量：頁面勝
從面積來看，彈窗會比頁面小，故容納的信息量也比較少，如果內容較多，彈窗要麼會看起來很擠，要麼需要滾動，會減低用戶的使用效率，畢竟大部分的B端用戶恨不得一頁上能顯示所有的東西。這也是上面說到的病人庫不適合做成彈窗形式的原因。
但信息量多不代表只能用頁面 ，比如說這個系統，雖然患者信息很多，但還是用了彈窗的形式，因為他在很多地方都調用到了這個彈窗，為了減少跳出率，也為了使多處的體驗一致且更流暢，他在原先有頁面的情況下還是做了個彈窗。
現在有些系統為了讓彈窗的信息承載量變大，做成了全屏彈窗。這個下面會講到。
如何選擇合適的彈窗？
當我們決定使用彈窗了，下面就要挑個漂亮的彈窗了。根據頁面信息量的多少，我們會給出幾個彈窗大小的標準。
1. 根據信息量選擇
（1）全屏彈窗
這種和頁面相比肩，又有彈窗性質的彈窗，真是讓人又愛又恨。完美解決了頁面跳出的問題，也解決了信息量承載少的問題。但在現實中發現，有些用戶剛用時比較懵，右上角的叉號小且不明顯，菜單欄還被遮住了，不知道該如何操作。
這也是因為全屏彈窗還不夠普遍的原因，用戶習慣還沒有被培養起來。你可以試下培養用戶習慣，不然的話就還是縮小一點，用個超大屏彈窗，四周留點底，用戶認知更輕鬆點。
至於大、中、小、提示彈窗大家都很好理解，這邊只是提示一下，系統裡面要制定好這3個彈窗的尺寸標準，千萬不要讓開發隨意發揮，導致每個彈窗大小都不一樣，比如：這是我們定的標準。
（2）大彈窗
（3）中彈窗
（4）小彈窗
2. 彈窗不只能居中
一般彈窗的位置就2種，居中和右側。右側彈窗的好處是：如果比較窄的話，左側內容不會被遮擋住，信息量更大。
如果對覆蓋住的信息展示要求不高的話，居中彈窗就可以了。
居中：
右側：
彈窗使用小tip
最後提示2個注意事項。
1. 彈窗疊彈窗
這是交互最不喜歡的，他們的理念是：彈窗就是一個最小集合了，不能在彈窗上疊加彈窗，這樣無限制疊加下去，豈不亂了規則。
但對於B端產品來說，哪有那麼多規則，效率第一，好用第一。你看下面這張圖，就包含了3個彈窗：全屏彈窗、右側大彈窗、居中小彈窗。並沒有不和諧的感覺。
所以不要多顧慮彈窗疊彈窗的問題，大膽去用吧。
2. 彈窗關閉
這個需要注意下，彈窗裡面的信息分2類：一類是填寫的數據需要保存的，比如說病歷；一類就是選擇瀏覽的，比如說選擇模板。
需要保存信息的就不能點擊空白處就消失，點擊關閉按鈕時最好也提示下是否需要保存；另一類就可以簡單地處理，點擊空白和關閉按鈕時直接消失。
總結
用彈窗還是頁面，沒有絕對的標準，有的系統很喜歡用彈窗，有的系統很喜歡用頁面，但刨除個人喜好，我們希望彈窗的使用是讓用戶體驗更好，更少的跳出感，更少的錯誤，更流暢的操作。
至於選擇什麼尺寸的彈窗，位置怎麼放，根據內容量和性質來定就行。
最後，千萬不要被彈窗不能疊彈窗這類的規則束縛住 ，勇敢的去用吧。
#專欄作家#
司馬特小隊，公眾號：司馬特小分隊，人人都是產品經理專欄作家。8年+互聯網資深產品經驗，多年B端產品管理經驗。具有多個從0到1的大型B端產品的孵化、重構、迭代經驗；主要教授產業互聯網產品相關的硬核知識點。
本文原創發佈於人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議。
