B端設(shè)計(jì)指南 —— 彈窗 究竟應(yīng)該如何設(shè)計(jì)

時(shí)間：2023-10-02 04:42:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-10-02 04:42:02 來源：網(wǎng)站運(yùn)營

B端設(shè)計(jì)指南 —— 彈窗 究竟應(yīng)該如何設(shè)計(jì)：

感謝：PMCAFF產(chǎn)品社區(qū)/CE青年 原文鏈接

篇文章是我自己在工作中受到各種摧殘、無數(shù)次開會(huì)討論總結(jié)而來，如果你現(xiàn)在深處B端行業(yè)，強(qiáng)烈建議大家一定要看完。

收到很多同學(xué)關(guān)于彈窗的疑問，因?yàn)樵贐端的設(shè)計(jì)過程中，會(huì)接觸到很多信息展示方面的疑惑，他們咨詢的維度各不相同，但是大致分為以下幾類：







由于B端產(chǎn)品的復(fù)雜多樣，我們今天所要討論的不單單局限于彈窗這一種控件的設(shè)計(jì)，而是一個(gè)“泛彈窗”的話題，透過彈窗去分析理解其他類型信息展示的業(yè)務(wù)邏輯。

從宏觀上講，目前B端設(shè)計(jì)中信息展示的控件可以分為三類：彈窗、抽屜、新建頁。在這三種展示形式中，我們需要明白它們四類分別是什么、有哪些、在什么場景中使用、以及在優(yōu)缺點(diǎn)和適應(yīng)的不同業(yè)務(wù)，這樣可以更好的為我們設(shè)計(jì)服務(wù)。







01·什么是彈窗？

1·彈窗的定義：

彈窗是一種中斷用戶當(dāng)前操作并對其進(jìn)行補(bǔ)充、或者對當(dāng)前操作進(jìn)行強(qiáng)制反饋的交互形式。

一般需要用戶進(jìn)行強(qiáng)交互[1]。它可以告知用戶關(guān)鍵的信息，需要用戶去做決定。彈窗越來越廣泛地被應(yīng)用于軟件、網(wǎng)頁、以及移動(dòng)設(shè)備中。它可以保留用戶當(dāng)前進(jìn)程的情況下，指引用戶完成一個(gè)特定的操作 。

[1] 強(qiáng)交互：是指想要完成用戶正常流程時(shí)必須先完成當(dāng)前交互的操作后才繼續(xù)正常流程







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

1.1模態(tài)（modal）：

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

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

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







同類型的例子還有數(shù)字鍵盤鎖（Num Lock）、滾動(dòng)鎖(Scroll Lock)。

根據(jù)時(shí)間進(jìn)行不斷演化，我們B端設(shè)計(jì)師工作中碰到的模態(tài)類型大多數(shù)都屬于模態(tài)層。

模態(tài)層：使用半透明黑色在頁面中進(jìn)行整體覆蓋。主要是在彈窗的底層，襯托彈窗，使彈窗不會(huì)被忽視掉，想要繼續(xù)使用就必須先與彈窗進(jìn)行交互

優(yōu)勢：通過全局的半透明黑色能夠讓用戶更加聚焦，集中精力去處理好當(dāng)前事情，能夠通過透明度展示背景，讓用戶了解到自己并沒有離開當(dāng)前頁面

劣勢：打擾用戶，感到強(qiáng)烈的中斷的感受

02·彈窗的分類：

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

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

非模態(tài)彈窗：與模態(tài)完全相反，它更加溫和，不會(huì)打擾到用戶的正常使用。通常這類彈窗只會(huì)在屏幕上短暫停留，幾秒就會(huì)消失，也因此用戶感受不到他的存在。它的缺點(diǎn)也非常明顯，展示時(shí)間較短，不適合展示重要信息、不能承載大量文案，常見的類型有：通知提醒、全局提示、警告提示、氣泡卡片、文字提示。







03·彈窗的來源：

彈窗雖然在2010年被《時(shí)代》周刊評選為50大最糟糕的發(fā)明之一，但是彈窗最開始的出現(xiàn)，其實(shí)是為了簡化用戶頁面、節(jié)約用戶瀏覽器頁簽。

因?yàn)樵缙诰W(wǎng)頁設(shè)計(jì)中，常常需要保留當(dāng)前頁但又需要進(jìn)行跳轉(zhuǎn)的頁面，比如登錄頁，但用戶每次使用時(shí)都需要跳轉(zhuǎn)到一個(gè)新頁面中，而登錄最后都是需要回到之前的頁面中，在未使用彈窗之前，往往需要新開很多頁面，而且用戶的使用不會(huì)聚焦。







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

2004年，淘寶網(wǎng)剛成立一年，像大多數(shù)創(chuàng)業(yè)網(wǎng)站一樣，活得很艱辛。

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







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

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

而采取這種方式的淘寶，經(jīng)由幾年的努力，從2003年的ebay份額80%，到2004年淘寶份額41%，ebay份額53%。

在互聯(lián)網(wǎng)早期，廣告彈窗確實(shí)幫助很多產(chǎn)品起勢，到如今雖說十分煩人但也是每個(gè)公司盈利的重要手段之一。因此彈窗也在中國的互聯(lián)網(wǎng)行業(yè)中，留下濃墨重彩的一筆

04·彈窗的現(xiàn)狀：

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

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


彈窗的拆解

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







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

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

在一個(gè)看似簡單的模態(tài)層中，需要進(jìn)行三方面的思考

a.顏色深度的思考

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







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

因?yàn)槲恼麻_頭解釋過模態(tài)的特殊性，所以在正常情況下模態(tài)的狀態(tài)只允許出現(xiàn)一層，即模態(tài)層的唯一。如果需要出現(xiàn)多個(gè)模態(tài)層時(shí)，就需要進(jìn)行深入考慮流程、設(shè)計(jì)形式是否合理。這里建議從以下幾個(gè)方面進(jìn)行思考。

流程優(yōu)化：

在使用多模態(tài)層前后的過程中，流程是否足夠精簡清晰，能否通過優(yōu)化，將流程變得更加合理，減少不必要的多模態(tài)層的使用。

內(nèi)容量展示優(yōu)化：

當(dāng)內(nèi)容量較少時(shí)，可以采取下拉菜單進(jìn)行設(shè)計(jì)上的優(yōu)化，這樣可以解決多模態(tài)層進(jìn)行疊加的問題

彈窗形式是否合適：

當(dāng)頁面涉及到很多交互時(shí)，不建議直接使用彈窗（文章第四模塊會(huì)講到）

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

但在很多實(shí)際B端業(yè)務(wù)中，通過上面的方法也不可避免會(huì)遇到多模態(tài)層的情況。這時(shí)你需要冷靜面對而不是慌張，這里給大家講解當(dāng)你遇到需要多層模態(tài)展示時(shí)，需要注意的點(diǎn)：

多模態(tài)層超過2層時(shí)最好只展示固定顏色

在模態(tài)過多的情況，我們會(huì)給一個(gè)最大值，即當(dāng)彈窗超過3層只展示固定顏色即可

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







模態(tài)位置錯(cuò)層，讓用戶知道現(xiàn)在處在第幾層

在多模態(tài)疊加的過程中，用戶很容易不清楚自己所在時(shí)那一層當(dāng)中，導(dǎo)致視覺層級(jí)混亂。

這通常的處理辦法就是將多個(gè)模態(tài)層疊加的狀態(tài)進(jìn)行錯(cuò)層，這樣能夠讓用戶知道自己所在的層級(jí)，幫助用戶了解邏輯關(guān)系







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

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

a.多形態(tài)的關(guān)閉

一個(gè)體驗(yàn)良好的彈窗需要提供多個(gè)關(guān)閉入口，讓用戶進(jìn)行退出。一方面彈窗是打斷用戶正常流程的操作，而為了不讓用戶感到反感需要提出多個(gè)入口；另一方面用戶更能夠通過多個(gè)入口的設(shè)計(jì)，快速返回到正常操作流程，降低用戶不必要的流失。我一共總結(jié)有四種入口途徑，方便大家在設(shè)計(jì)時(shí)對照查看是否做到。







入口一：關(guān)閉按鈕

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

入口二：取消按鈕

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

入口三：點(diǎn)擊模態(tài)層

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

入口四：Esc鍵

Esc鍵誕生于1960年，位于每一個(gè)電腦鍵盤的左上方，為英文單詞escape的縮寫。

escape翻譯成中文為逃脫， 逃跑，漏出， 泄漏之意。在很多設(shè)計(jì)師的認(rèn)知層面中，Esc鍵退出似乎是一個(gè)可有可無的按鍵存在。

而在我們實(shí)際調(diào)研自己產(chǎn)品當(dāng)中發(fā)現(xiàn)，經(jīng)常習(xí)慣使用Esc鍵的用戶占33.7%，。而這類快捷鍵上的優(yōu)化恰恰能夠提升用戶使用的核心效率，在很多時(shí)候能夠減輕使用者的操作成本。

在B端產(chǎn)品中，調(diào)用鍵盤進(jìn)行操作優(yōu)化，是一個(gè)不可忽視的用戶爽點(diǎn)。

例如：我們使用聊天軟件，在用戶輸入完成后總是習(xí)慣點(diǎn)擊Enter進(jìn)行提交、使用PageUp 以及 PageDown用來替代鼠標(biāo)進(jìn)行列表頁翻頁、空格用來對頁面進(jìn)行整體一屏滾動(dòng)，這些都是調(diào)用鍵盤進(jìn)行快捷操作，提升效率

b.固定位置出現(xiàn)

在關(guān)閉入口設(shè)計(jì)當(dāng)中，無論是將入口設(shè)計(jì)在彈窗內(nèi)或者是彈窗外，都需要在固定位置出現(xiàn)。

固定位置的出現(xiàn)能夠讓用戶養(yǎng)成良好的習(xí)慣，減少用戶的思考成本。常見的彈窗關(guān)閉按鈕基本都在右上角進(jìn)行展示，因此不建議在位置上進(jìn)行創(chuàng)新，會(huì)適得其反。

c.錄入場景的特殊處理

在關(guān)閉入口設(shè)計(jì)中，常常會(huì)遇到這種情況，用戶在彈窗中進(jìn)行錄入的場景下，誤操作點(diǎn)到模態(tài)層后，用戶辛苦錄入的大段文字丟失。

這類情況的出現(xiàn)，常常表示用戶在彈窗的全流程場景中沒有進(jìn)行深入的思考。我總結(jié)了市面上對于錄入彈窗這種特殊的處理方式，共有以下幾點(diǎn)：

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

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

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







03·彈窗的類型

第一節(jié)講到，在彈窗的類型中，主要分為兩類：模態(tài)彈窗和非模態(tài)彈窗

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

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

a.對話彈窗

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

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

內(nèi)嵌表單彈窗作為彈窗最為重要的組成部分，在B端產(chǎn)品的日常使用中幾乎存在的方方面面

因其里面經(jīng)常會(huì)添加各種選項(xiàng)操作，例如：“ckeckbox、radio、下拉菜單等等“，通過彈窗去完成形式各樣的操作

內(nèi)嵌表單的好處是能夠通過小面積的彈窗完成對數(shù)據(jù)的編輯修改，方便快捷進(jìn)行增刪改的處理。

c.分步彈窗

分步彈窗是分步表單的衍生品，因?yàn)樵趯?shí)際項(xiàng)目中，發(fā)現(xiàn)大型的分步表單難以滿足現(xiàn)階段對于小型內(nèi)容展示的需求，因此分步彈窗便誕生

分步彈窗的主要特點(diǎn)是頁腳上會(huì)有下一步、上一步兩個(gè)選項(xiàng)供用戶進(jìn)行選擇，同時(shí)用戶點(diǎn)擊下一步后，就會(huì)在左上角提示用戶可以進(jìn)行返回。

分步彈窗能實(shí)現(xiàn)具有先后條件且內(nèi)容較少的需求，在工作中主要是新手引導(dǎo)或者有前后關(guān)系錄入的彈窗會(huì)用到。例如：“簡道云的新手引導(dǎo)、XXXX步驟注冊”都可以采取分步彈窗的形式。

d.附件選擇彈窗

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

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

復(fù)雜信息彈窗是一些大型B端項(xiàng)目經(jīng)常遇到的問題。在遇到多信息需要進(jìn)行展示與交互時(shí)，通常很難給出很好的解決辦法。因此復(fù)雜信息展示彈窗也就誕生。我們團(tuán)隊(duì)對其的定義主要是彈窗面積足夠大，同時(shí)在彈窗內(nèi)部存在很多交互，與新建頁抽屜等情況類似。

例如：Trello、Teambition的任務(wù)彈框雖然信息較多，但好處是能快速切換到不同的任務(wù)，增加效率。

04·非模態(tài)彈窗

a.通知提示（Notification）

通常在頁面右上角，顯示通知提醒信息，給用戶進(jìn)行重度的打擾。經(jīng)常用于產(chǎn)品系統(tǒng)主動(dòng)推送以及消息提醒。

例如：在我們自家產(chǎn)品中，通知提醒框用戶對用戶審批信息進(jìn)行展示，同時(shí)可讓用戶進(jìn)行跳轉(zhuǎn)查看，方便用戶進(jìn)行快速使用。

b.全局提示（Message）

全局提示是希望不中斷用戶正常操作的前提下，顯示一條簡短的消息。這條消息通常都是輕量的一般在短時(shí)間就會(huì)自動(dòng)消失，并不會(huì)干擾到用戶。全局提示一般在整個(gè)頁面居中的位置，會(huì)展示3-5秒鐘或者用戶進(jìn)行點(diǎn)擊后就會(huì)消失。

例如：在我們產(chǎn)品的詳情頁當(dāng)中會(huì)有列表快捷編輯功能，當(dāng)用戶每進(jìn)行一次編輯操作，都會(huì)給用戶進(jìn)行全局提示，操作成功

c.警告提示 (Alert)

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

d.氣泡卡片（Popover/Popup）

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

e.文字提示（Tooltip）

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

重要提示優(yōu)先級(jí)

按量級(jí)從重到輕排序：通知提醒框 > 警告提示 > 全局提示 > 氣泡卡片 > 文字提示

3.特殊類型彈窗

因?yàn)樵趶棿爸?，有一些雖然不是彈窗的形式，但是做的是彈窗的活，例如：“抽屜、新建頁”

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

a.抽屜

抽屜適合與主頁面有著強(qiáng)連貫性的頁面進(jìn)行展示。它與彈窗都有著相類似甚至相同的API，只是在展示形式上存在較大差異。

抽屜演化出來的形式有很多，比如：iOS的Human Interface Guidelines 中的Sheets [3]，MaterialDesign 中的BackDrop [4]，抽屜涉及的范圍廣，因此用戶對于此類交互的理解以及操作成本都相應(yīng)減小。

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

[4]BackDrop：一個(gè)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屬性上的差異。

05·如何選擇彈窗 抽屜 新建頁

在我們?nèi)粘ＴO(shè)計(jì)中，常常抉擇于：彈窗、抽屜、新建頁之間，總覺得使用某一種交互形式會(huì)更好，但是卻說不出其中的原因，猶豫究竟應(yīng)該使用那種展現(xiàn)形式，這就需要我們通過具體的要素方法進(jìn)行相應(yīng)的分析。

常常看見設(shè)計(jì)師麻木的進(jìn)行簡單的拖拽組件，并沒有進(jìn)行深入思考，也根本不會(huì)通過頁面的分析方法，去了解事物的本質(zhì)，今天告訴大家這三種要素能夠幫助你進(jìn)行交互分析

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

頁面內(nèi)容量決定呈現(xiàn)形式

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

內(nèi)容量：

通常包含了你頁面當(dāng)中文字、圖片、視頻、表格、以及各種復(fù)雜的交互。如果你覺得頁面已經(jīng)密密麻麻，在彈窗中根本無法呈現(xiàn)，這時(shí)候你就需要考慮彈窗是否合適～

而彈窗、抽屜、新建頁，如何抉擇，它們承載內(nèi)容的量也存在一個(gè)大小關(guān)系

新建頁 > 抽屜 > 彈窗

但是不能從一個(gè)緯度去思考頁面內(nèi)容量的多少，內(nèi)容的寬度以及深度都是需要去分析，通常：內(nèi)容的深度較深最好采取抽屜、內(nèi)容寬度較寬則彈窗形式更為合理、而新建頁合適寬度與深度同時(shí)較大的產(chǎn)品中。

也就是彈窗只能承載較小內(nèi)容、抽屜其次、新建頁最優(yōu)，但是在實(shí)際工作中往往并沒有這么簡單，在本節(jié)最后，舉了幾個(gè)實(shí)例進(jìn)行簡單分析～

2.頁面連貫性

頁面連貫性直接決定用戶的使用體驗(yàn)

當(dāng)瀏覽器新開一個(gè)標(biāo)簽進(jìn)行展示時(shí)，頁面的連貫性是最弱的，因?yàn)橛脩粜枰M(jìn)行困難的操作返回到之前頁面，并讓用戶感到十分懵逼，同時(shí)你也可以理解新開頁面是較為獨(dú)立的，不會(huì)受到前頁面的干擾，而要決定頁面連貫性的核心，還是以自身業(yè)務(wù)出發(fā)

從三個(gè)不同交互形式上看，頁面連貫性明顯抽屜小于彈窗小于新建頁

例如：使用紛享逍客在客戶列表頁與詳情頁之間連貫性就很強(qiáng)，因?yàn)橛脩粜枰斍榕c列表之間來回看進(jìn)行對比，也因此紛享逍客將抽屜模態(tài)層都給去除，更方便自身業(yè)務(wù)。

3.頁面切換成本

頁面切換成本決定用戶使用效率

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

頁面切換成本越來越受到重視，從最近iOS13更新的幾點(diǎn)以及微信、本站app更新上可以發(fā)現(xiàn)

在IOS12到IOS13中，一個(gè)較大更新便是新版視圖彈窗

在以前的視圖彈窗中，用戶經(jīng)常忘了此前他們進(jìn)行的操作任務(wù)，而iOS13能夠讓用戶更加明確，減少了頁面間的切換成本。

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

想用B端幾個(gè)典型產(chǎn)品的幾個(gè)案例來解釋彈窗、抽屜與新建頁

我舉一個(gè)簡單例子，現(xiàn)在你需要去設(shè)計(jì)一個(gè)客戶詳情頁，但是因?yàn)榭蛻粼斍轫撔枰故敬罅啃畔⒁约氨砀瘢瑫r(shí)還會(huì)有各種各樣的交互行為：“點(diǎn)擊、錄入、甚至拖拽”，這時(shí)候你會(huì)怎么選擇？

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

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

它們采取抽屜的形式，因?yàn)榧娤礓N客與銷售易都是屬于aPaas平臺(tái)[5]，存在用戶去設(shè)置不同字段以及不同展示邏輯，每個(gè)詳情頁又會(huì)存在快速跳轉(zhuǎn)等一系列方便用戶同時(shí)也會(huì)帶來交互問題的“騷操作”[6]，導(dǎo)致抽屜的選擇是大于其他兩種彈窗形式。

其次在內(nèi)容量上，可以從截圖上看出，內(nèi)容大多以文字記錄為主，不會(huì)存在大段文字以及大圖的情況，因此不會(huì)存在寬度過寬的情況。只是在字段數(shù)量上會(huì)有所增多，導(dǎo)致字段的高度會(huì)隨之增加，因此滿足上面條件的交互控件只有抽屜與新建頁。

最后在連貫性與切換成本上，明顯在CRM產(chǎn)品中，用戶需要經(jīng)常來回切換去對比客戶信息以及銷售的更進(jìn)狀態(tài)，因此在抽屜的體驗(yàn)上，能夠讓用戶進(jìn)行連貫的用戶體驗(yàn)，因此抽屜最為合適。

[5]aPaas平臺(tái)：aPaaS的全稱是application Platform as a Service，即應(yīng)用程序平臺(tái)即服務(wù)。Gartner對其所下的定義是：“這是基于PaaS（平臺(tái)即服務(wù)）的一種解決方案，支持應(yīng)用程序在云端的開發(fā)、部署和運(yùn)行，提供軟件開發(fā)中的基礎(chǔ)工具給用戶，包括數(shù)據(jù)對象、權(quán)限管理、用戶界面等?！?

[6]騷操作：主要是aPaas平臺(tái)可以連續(xù)點(diǎn)擊同類型的關(guān)鍵詞進(jìn)行相互跳轉(zhuǎn)，實(shí)現(xiàn)我們團(tuán)隊(duì)內(nèi)部所說的不斷"套娃"，看似很不符合產(chǎn)品邏輯，實(shí)際是為了提升用戶在詳情頁中的體驗(yàn)。通過多模態(tài)層的設(shè)計(jì)圖就能夠明白

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

Hubspot與Zoho都是國外兩款非常出名的CRM，如果在做CRM領(lǐng)域的同學(xué)沒有體驗(yàn)過的一定要試試

首先，因?yàn)?b>Hubspot、Zoho是屬于國外產(chǎn)品傳入中國，因此在使用習(xí)慣上，更偏向于專注去做一件事，比如Hubspot上，在其客戶詳情頁能夠直接進(jìn)行添加日程、撥打電話、發(fā)送郵件等幾十項(xiàng)操作，并且一切圍繞著Marketing、Sales展開，因此使得頁面需要更加專注，需要看到更加全量的信息。

再次國外Saas用戶也是對完整流程的操作更加青睞（一個(gè)操作只干一件事），而國內(nèi)喜歡快捷融合（喜歡有很多快捷操作）因此造成Hubspot與Zoho都采取新建頁的形式查看數(shù)據(jù)（有機(jī)會(huì)一定與大家聊聊國內(nèi)外B端產(chǎn)品的差異）

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

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

它們采取大彈窗的形式，因?yàn)閮烧叨际菍⑿畔⒎譃樽笥覂刹糠郑髠?cè)信息展示方便用戶進(jìn)行關(guān)鍵信息的閱讀，滿足用戶的實(shí)際需求；右側(cè)進(jìn)行靈活的展示，能夠通過不同業(yè)務(wù)的信息進(jìn)行相應(yīng)分配。

復(fù)雜信息彈窗都會(huì)在左上角進(jìn)行快速切換，通過上下箭頭滿足用戶快速切換的需求。

05·彈窗細(xì)節(jié)

1.彈窗高度

關(guān)于彈窗高度，主要講的是模態(tài)彈窗。我也只是講行業(yè)中現(xiàn)在的集中做法羅列出來，大家根據(jù)自身產(chǎn)品進(jìn)行使用。

頂部固定高度

彈窗與頁面左右兩邊進(jìn)行居中，所以主要標(biāo)注的就是彈窗的高度問題，固定高度就是將彈窗整個(gè)固定在對應(yīng)的尺寸高度，一般為120px、160px、200px，根據(jù)彈窗尺寸進(jìn)行相應(yīng)調(diào)整。

需要注意，如果是固定高度，一定需要在頁面中進(jìn)行相應(yīng)標(biāo)注。同時(shí)需要思考彈窗的多個(gè)場景場景，否則會(huì)造成交互混亂，影響用戶使用。

全局居中

全局居中也是最為常見的一種做法，放在用戶視覺的正中心，讓用戶的使用上也更加友好。

2.彈窗尺寸

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

從數(shù)據(jù)上可以看出，目前市面上的屏幕分辨率占比1920x1080還是占據(jù)主導(dǎo)

基本上最小的分辨率都為1280x768 （因1024x768占比實(shí)在太小，在頁面中，可以采取滾動(dòng)條進(jìn)行兼容）所以一般將彈窗寬度設(shè)置到1000px以內(nèi)，基本能滿足日常需求。

定義彈窗高度：

我們以最小屏幕尺寸：768px來定義，一般瀏覽器輸入框+菜單欄的高度為80px，底部系統(tǒng)工具欄高度為40px

768px-80px-40px=約648px

對于頁面中自適應(yīng)的情況所以上需留出固定安全舉例，所以彈窗的高度必須小于600px。

定義彈窗寬度：

彈窗寬度會(huì)根據(jù)內(nèi)容量，進(jìn)行寬度的調(diào)整，我總結(jié)目前常見的彈窗尺寸共有四種，分別為：small、medium、large、x-large

四種彈窗的使用場景也會(huì)不同

small：提示

medium：對話彈窗

large：多文本錄入

x-large：客戶詳情展示

3.內(nèi)容滾動(dòng)

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

最后，彈窗在B端場景中，起到了很關(guān)鍵的作用，大家可以透過彈窗的思考方式去思考關(guān)于整個(gè)B端控件層面的信息展現(xiàn)問題。