“彈窗” 究竟應(yīng)該如何設(shè)計(jì)？

時(shí)間：2023-10-02 03:30:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-02 03:30:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

“彈窗” 究竟應(yīng)該如何設(shè)計(jì)？：

彈窗又稱(chēng)為對(duì)話框，是App與用戶進(jìn)行交互的常見(jiàn)方式之一。

1、什么是彈窗

1.1 彈窗的定義

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

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

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

1.2 彈窗的分類(lèi)

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

模態(tài)層：使用半透明黑色在頁(yè)面中進(jìn)行整體覆蓋，主要是在彈窗的底層，襯托彈窗，使彈窗不會(huì)被忽視掉，想要繼續(xù)使用就必須先與彈窗進(jìn)行交互。
優(yōu)勢(shì)：通過(guò)全局的半透明黑色能夠讓用戶更加聚焦，集中精力去處理好當(dāng)前事情，能夠通過(guò)透明度展示背景，讓用戶了解到自己并沒(méi)有離開(kāi)當(dāng)前頁(yè)面；
劣勢(shì)：打擾用戶，感到強(qiáng)烈的中斷的感受。

1）模態(tài)彈窗

是位于瀏覽器的主頁(yè)面核心區(qū)域，需要用戶對(duì)它做出相應(yīng)交互，模態(tài)才會(huì)消失。

而彈窗會(huì)因?yàn)樽陨淼奈潭取⑼Ａ魰r(shí)間、信息量承載多少被劃分為多種彈窗類(lèi)型進(jìn)行區(qū)分，常見(jiàn)的彈窗分別為：對(duì)話彈窗、內(nèi)嵌表單彈窗、分步表單彈窗、文件選擇彈窗、復(fù)雜信息展示。

2）非模態(tài)彈窗

與模態(tài)完全相反，它更加溫和，不會(huì)打擾到用戶的正常使用。通常這類(lèi)彈窗只會(huì)在屏幕上短暫停留，幾秒就會(huì)消失，也因此用戶感受不到他的存在。

它的缺點(diǎn)也非常明顯，展示時(shí)間較短，不適合展示重要信息、不能承載大量文案；常見(jiàn)的類(lèi)型有：通知提醒、全局提示、警告提示、氣泡卡片、文字提示。

2、彈窗的拆解

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

2.1 模態(tài)層（Modal）

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

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

1）顏色深度的思考

顏色能給用戶傳達(dá)出許多信息，模態(tài)層上也是一樣，在制定相應(yīng)的規(guī)范開(kāi)始前，我們需要思考自身產(chǎn)品的定位，這樣在整個(gè)產(chǎn)品的顏色規(guī)范層面能夠做的到統(tǒng)一。

模態(tài)層顏色較淺，這樣能盡可能減少用戶的跳出感，讓產(chǎn)品更加親民、貼切；模態(tài)層顏色較深，這樣會(huì)讓用戶更加專(zhuān)注當(dāng)前彈窗頁(yè)面，讓產(chǎn)品更加專(zhuān)業(yè)。

2）多模態(tài)層檢查

因?yàn)槲恼麻_(kāi)頭解釋過(guò)模態(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)層前后的過(guò)程中，流程是否足夠精簡(jiǎn)清晰，能否通過(guò)優(yōu)化，將流程變得更加合理，減少不必要的多模態(tài)層的使用；
• 內(nèi)容量展示優(yōu)化：當(dāng)內(nèi)容量較少時(shí)，可以采取下拉菜單進(jìn)行設(shè)計(jì)上的優(yōu)化，這樣可以解決多模態(tài)層進(jìn)行疊加的問(wèn)題；
• 彈窗形式是否合適：當(dāng)頁(yè)面涉及到很多交互時(shí)，不建議直接使用彈窗。

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

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

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

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

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

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

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

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

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

1）多形態(tài)的關(guān)閉

一個(gè)體驗(yàn)良好的彈窗需要提供多個(gè)關(guān)閉入口，讓用戶進(jìn)行退出。

一方面彈窗是打斷用戶正常流程的操作，而為了不讓用戶感到反感需要提出多個(gè)入口；另一方面用戶更能夠通過(guò)多個(gè)入口的設(shè)計(jì)，快速返回到正常操作流程，降低用戶不必要的流失。

我一共總結(jié)有四種入口途徑，方便大家在設(shè)計(jì)時(shí)對(duì)照查看是否做到。

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

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

入口二：取消按鈕

取消按鈕一般和確定按鈕成對(duì)出現(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è)電腦鍵盤(pán)的左上方，為英文單詞escape的縮寫(xiě)。

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

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

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

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

2）固定位置出現(xiàn)

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

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

3）錄入場(chǎng)景的特殊處理

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

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

1. 對(duì)于大型文本的錄入過(guò)程中，如果使用彈窗，建議采取草稿箱進(jìn)行自動(dòng)保存、或者放棄彈窗使用新建頁(yè)面進(jìn)行展示。例如：常見(jiàn)的本站就是通過(guò)彈窗+自動(dòng)保存進(jìn)行實(shí)現(xiàn)；
2. 對(duì)于普通文本的錄入過(guò)程中，如果使用彈 窗，建議采取點(diǎn)擊關(guān)閉進(jìn)行提示；
3. 彈窗中有用戶下拉菜單進(jìn)行選擇的，可采取前端記住用戶選項(xiàng)，當(dāng)用戶發(fā)生誤操作時(shí)，可重新呼出彈窗即可。

2.3 彈窗主體（Mian）

在彈窗的主體中，會(huì)因?yàn)閺棿暗念?lèi)型不同會(huì)有所加減，但無(wú)外乎就是我總結(jié)的一下五類(lèi)：

1）圖標(biāo)

在彈窗中，圖標(biāo)的使用主要是為了更直觀表達(dá)彈窗的具體狀態(tài)，例如：“放置警告圖標(biāo)代表用戶需要謹(jǐn)慎操作、放置成功圖標(biāo)代表用戶已經(jīng)完成操作?！?br>
2）彈窗標(biāo)題

使用簡(jiǎn)短的語(yǔ)言告訴用戶功能，如果是對(duì)話彈窗，一般是疑問(wèn)句。

例如：“是否刪除列表？”；若是其他具有特定功能的彈窗，一般為動(dòng)詞短語(yǔ)，例如：“刪除客戶、查看詳情”，一般不可刪除。

3）內(nèi)容信息

在對(duì)話彈窗中，主要是對(duì)使用彈窗后產(chǎn)生的結(jié)果進(jìn)行具體描述，講出你操作可能造成的結(jié)果以及一些說(shuō)明。

例如：“刪除客戶后，你可以在公海找到該客戶”；而如果是非對(duì)話框彈窗，則一般不需要內(nèi)容信息。

4）按鈕選擇

按鈕選擇主要是對(duì)彈窗交互進(jìn)行的結(jié)果，一般是相對(duì)立的兩個(gè)操作進(jìn)行出現(xiàn)，例如：“確定/取消、保存/刪除等…”

如果你對(duì)按鈕有疑惑，建議看我上一篇文章的總結(jié)。

5）選項(xiàng)操作

在彈窗中，還有因?yàn)闃I(yè)務(wù)的不同，在彈窗中增加相應(yīng)的選項(xiàng)操作，選項(xiàng)操作通常是一些常規(guī)控件，不宜進(jìn)行特殊處理，例如：“輸入框、單選框、復(fù)選框等…”

彈窗會(huì)根據(jù)主體的不同，分為不同的彈窗類(lèi)型，通過(guò)上面素材進(jìn)行組合，形成下面不同類(lèi)型的彈窗，下面為大家講講彈窗的類(lèi)型。

3、彈窗的類(lèi)型

3.1 模態(tài)彈窗

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

1）對(duì)話彈窗

對(duì)話彈窗是我們?nèi)粘Ｊ褂弥凶顬轭l繁的彈窗形式，對(duì)話彈窗最初用于很重要或者有風(fēng)險(xiǎn)的操作，這時(shí)會(huì)彈出一個(gè)對(duì)話形式的彈窗給用戶，需要用戶根據(jù)提示來(lái)進(jìn)行判斷。

隨著B(niǎo)端產(chǎn)品的不斷發(fā)展，對(duì)話框已經(jīng)演變成用戶注冊(cè)、提交、信息修改、編輯、形式各樣的操作承載體。

2）內(nèi)嵌表單彈窗

內(nèi)嵌表單彈窗作為彈窗最為重要的組成部分，在B端產(chǎn)品的日常使用中幾乎存在的方方面面。因其里面經(jīng)常會(huì)添加各種選項(xiàng)操作，例如：“ckeckbox、radio、下拉菜單等等“，通過(guò)彈窗去完成形式各樣的操作。

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

3）分步彈窗

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

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

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

4）附件選擇彈窗

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

5）復(fù)雜信息彈窗

復(fù)雜信息彈窗是一些大型B端項(xiàng)目經(jīng)常遇到的問(wèn)題。在遇到多信息需要進(jìn)行展示與交互時(shí)，通常很難給出很好的解決辦法，因此復(fù)雜信息展示彈窗也就誕生。

我們團(tuán)隊(duì)對(duì)其的定義主要是彈窗面積足夠大，同時(shí)在彈窗內(nèi)部存在很多交互，與新建頁(yè)抽屜等情況類(lèi)似。

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

3.2 非模態(tài)彈窗

1）通知提示框

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

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

2）全局提示

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

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

3）警告提示

提醒用戶需要立即處理的錯(cuò)誤，提示方式與全局提示類(lèi)似，但是與全局提示不同的是，警告提示為常駐展示，需要用戶進(jìn)行手動(dòng)關(guān)閉，但并不會(huì)打斷用戶操作。

同時(shí)在設(shè)計(jì)形式上，也需要與全局提示有所區(qū)別，建議采取背景顏色進(jìn)行對(duì)比。

4）氣泡卡片

氣泡卡片是對(duì)當(dāng)前元素進(jìn)行相關(guān)操作或相應(yīng)描述，可以收納到卡片中，根據(jù)用戶的操作行為進(jìn)行展示。通?？梢酝ㄟ^(guò)點(diǎn)擊、鼠標(biāo)Hover進(jìn)行觸發(fā)，氣泡卡片與Tooltip 的區(qū)別是，用戶可以對(duì)浮層上的元素進(jìn)行操作。

因此它可以承載更復(fù)雜的內(nèi)容，比如鏈接或按鈕等。

5）文字提示（Tooltip）

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

重要提示優(yōu)先級(jí)，按量級(jí)從重到輕排序：通知提醒框 > 警告提示 > 全局提示> 氣泡卡片>文字提示。

3.3 特殊類(lèi)彈窗

在彈窗中，有一些雖然不是彈窗的形式，但是做的是彈窗的活，例如：“抽屜、新建頁(yè)”。

1）抽屜

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

2）新建頁(yè)

新建頁(yè)基本就是萬(wàn)精油，無(wú)論頁(yè)面內(nèi)容量是多少、頁(yè)面間是否連貫、以及使用頻率怎樣，都可以采取新建頁(yè)，但是新建頁(yè)往往也不是最優(yōu)的解決辦法。

在新建頁(yè)中又分為：覆蓋當(dāng)前窗口以及新窗口跳轉(zhuǎn)兩種形式，在場(chǎng)景上可以根據(jù)兩者差異進(jìn)行選擇，究其本質(zhì)，就是a標(biāo)簽href屬性與target屬性上的差異。

4、如何選擇彈窗、抽屜、新建頁(yè)？

4.1 頁(yè)面內(nèi)容量

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

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

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

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

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

4.2 頁(yè)面連貫性

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

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

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

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

4.3 頁(yè)面切換的成本

頁(yè)面切換成本決定用戶使用效率。

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

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

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

在以前的視圖彈窗中，用戶經(jīng)常忘了此前他們進(jìn)行的操作任務(wù)，而iOS13能夠讓用戶更加明確，減少了頁(yè)面間的切換成本；在微信與本站中，因?yàn)橛脩粜枰?jīng)常切換，之前用戶難以在幾個(gè)頁(yè)面來(lái)回跳轉(zhuǎn)。

而浮窗的出現(xiàn)，剛好能夠解決這一問(wèn)題，減少了頁(yè)面間的切換成本。




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

舉一個(gè)簡(jiǎn)單例子，現(xiàn)在你需要去設(shè)計(jì)一個(gè)客戶詳情頁(yè)，但是因?yàn)榭蛻粼斍轫?yè)需要展示大量信息以及表格，同時(shí)還會(huì)有各種各樣的交互行為：“點(diǎn)擊、錄入、甚至拖拽”，這時(shí)候你會(huì)怎么選擇？

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

紛享銷(xiāo)客、銷(xiāo)售易——抽屜形式，方便用戶切換。

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

其次在內(nèi)容量上，可以從截圖上看出，內(nèi)容大多以文字記錄為主，不會(huì)存在大段文字以及大圖的情況，因此不會(huì)存在寬度過(guò)寬的情況。

只是在字段數(shù)量上會(huì)有所增多，導(dǎo)致字段的高度會(huì)隨之增加，因此滿足上面條件的交互控件只有抽屜與新建頁(yè)。

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

[5]aPaas平臺(tái)：aPaaS的全稱(chēng)是application Platform as a Service，即應(yīng)用程序平臺(tái)即服務(wù)。Gartner對(duì)其所下的定義是：“這是基于PaaS（平臺(tái)即服務(wù)）的一種解決方案，支持應(yīng)用程序在云端的開(kāi)發(fā)、部署和運(yùn)行，提供軟件開(kāi)發(fā)中的基礎(chǔ)工具給用戶，包括數(shù)據(jù)對(duì)象、權(quán)限管理、用戶界面等?！?br>[6]騷操作：主要是aPaas平臺(tái)可以連續(xù)點(diǎn)擊同類(lèi)型的關(guān)鍵詞進(jìn)行相互跳轉(zhuǎn)，實(shí)現(xiàn)我們團(tuán)隊(duì)內(nèi)部所說(shuō)的不斷”套娃”，看似很不符合產(chǎn)品邏輯，實(shí)際是為了提升用戶在詳情頁(yè)中的體驗(yàn)。通過(guò)多模態(tài)層的設(shè)計(jì)圖就能夠明白。

1）Hubspot、Zoho——新建頁(yè)形式，查看全量信息

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

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

因此使得頁(yè)面需要更加專(zhuān)注，需要看到更加全量的信息，再次國(guó)外Saas用戶也是對(duì)完整流程的操作更加青睞（一個(gè)操作只干一件事），而國(guó)內(nèi)喜歡快捷融合（喜歡有很多快捷操作），因此造成Hubspot與Zoho都采取新建頁(yè)的形式查看數(shù)據(jù)。

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

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

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

5、彈窗設(shè)計(jì)規(guī)范

5.1 彈窗高度

主要講的是模態(tài)彈窗，大家根據(jù)自身產(chǎn)品進(jìn)行使用。

1）頂部固定高度

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

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

2）全局居中

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

5.2 彈窗尺寸

市面上主流電腦分辨率進(jìn)行調(diào)研統(tǒng)計(jì)

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

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

1）定義彈窗高度

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

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

2）定義彈窗寬度

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

1. small：提示
2. medium：對(duì)話彈窗
3. large：多文本錄入
4. x-large：客戶詳情展示內(nèi)容滾動(dòng)

彈窗出現(xiàn)模態(tài)層時(shí)，一定要將背景滾動(dòng)條進(jìn)行鎖定，不然兩個(gè)滾動(dòng)條的出現(xiàn)，會(huì)導(dǎo)致十分混亂。

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