TOB產(chǎn)品設(shè)計(jì)-彈窗

由于B端產(chǎn)品的復(fù)雜多樣，這里討論的不僅限于彈窗這一種控件的設(shè)計(jì)，而是一個(gè)“泛彈窗” 的話題。

從宏觀上講，B端設(shè)計(jì)中信息展示的控件可以分為3類：彈窗、抽屜、新建頁(yè)。

在這3種展示形式中，我們需要明白它們分別是什么（樣式）、有哪些（功能）、在什么場(chǎng)景中使用（使用方式）、以及在優(yōu)缺點(diǎn)和適應(yīng)的不同業(yè)務(wù)，這樣可以更好的為我們?cè)O(shè)計(jì)服務(wù)。

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

彈窗功能：彈窗是一種中斷用戶當(dāng)前操作井對(duì)當(dāng)前信息or動(dòng)作進(jìn)行補(bǔ)充、或者對(duì)當(dāng)前操作進(jìn)行強(qiáng)制反饋的交互形式。一般需要用戶進(jìn)行強(qiáng)交互完成預(yù)訂動(dòng)作。（備注：強(qiáng)交互是指想要完成用戶正常流程時(shí)必須先完成當(dāng)前交互的操作后才繼續(xù)正常流程）

一、彈窗的分類

在彈窗的交互形式上，它主要分為模態(tài)彈窗與非模態(tài)彈窗兩種形式（B端工作中碰到的模態(tài)類型大多數(shù)都屬于模態(tài)層。）

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

非模態(tài)彈窗：與模態(tài)完全相反，它更輕量化，不會(huì)打擾到用戶的正第使用。通常這類彈窗只會(huì)在屏幕上短暫停留，幾秒就會(huì)消失，也因此用戶感受不到他的存在。（缺點(diǎn)：展示時(shí)間較短，常見的類型有：通知提醒、全局提示、警告提示、泡卡片、文字提示。）

二、模態(tài)彈窗-彈窗的拆解

彈窗部分進(jìn)行拆解，彈窗在宏觀上來看一般包含模態(tài)層、關(guān)閉入口以及彈窗主體

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

關(guān)閉入口：作為用戶退出的必要途徑，在關(guān)閉入口的設(shè)計(jì)中，需要注意以下幾點(diǎn)：

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

關(guān)閉路徑NO.1：關(guān)閉按鈕

關(guān)閉按鈕是最為常規(guī)的操作，主要是每一個(gè)用戶對(duì)于它都足夠的熱悉。

關(guān)閉路徑NO.2：取消按鈕

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

關(guān)閉路徑NO.3：點(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鍵

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

彈窗主體：

彈窗的主體，因彈窗的類型不同會(huì)有所增加OR減少，視應(yīng)用場(chǎng)景決定。

1、標(biāo)題

使用簡(jiǎn)短的語(yǔ)言告訴用戶功能，如果是對(duì)話彈窗，一般是疑問句，例如：“是否刪除列表？“；若是其他具有特定功能的彈窗，一般為動(dòng)詞短語(yǔ)，例如：〝別除客戶、查看詳情”，一般不可刪除。

2、關(guān)閉Icon

提供彈窗的關(guān)閉路徑

3、內(nèi)容區(qū)

彈窗中，主要是對(duì)使用彈窗后產(chǎn)生的結(jié)果進(jìn)行具體描述，或者新建、信息展示等；以及你操作可能造成的結(jié)果的說明

4、邊距

邊距是必須要保留的，合適是邊距可以保證整體視覺的重心不偏移

5、按鈕組

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

三、非模態(tài)彈窗

3.1. 通知提示 

通常在頁(yè)面右上角或頁(yè)面中間，顯示通知提醒信息，給用戶進(jìn)行較重的提醒。經(jīng)常用于系統(tǒng)主動(dòng)推送以及消息提醒。通知用戶對(duì)信息進(jìn)行查看，同時(shí)可讓用戶進(jìn)行跳轉(zhuǎn)查看，方便用戶進(jìn)行快速使用。

3.2.全局提示

全局提示是希望不中斷用戶正常操作的前提下，顯示一條簡(jiǎn)短的消息。全局提示一般在整個(gè)頁(yè)面居中的位置，會(huì)展示 3-5 秒鐘或者用戶進(jìn)行點(diǎn)擊關(guān)閉。

3.3.警告

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

3.4.氣泡卡片

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

3.5.文字提示Tooltip 

是簡(jiǎn)潔版的氣泡卡片，一般提示以文字為主。

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

備注：抽屜、和頁(yè)面及的本文不作過多說明

四、彈窗尺寸設(shè)計(jì)

彈窗寬度：

目前市面上的屏幕分辨率占比1920x1080 還是占據(jù)主導(dǎo)，考慮到適配問題我們以1440X900來定義，所以一般將彈窗寬度設(shè)置到 1080px 以內(nèi)，基本能滿足日常需求。

彈窗高度：

一般瀏覽器輸入框 ＋ 標(biāo)簽欄的高度為 80px，底部系統(tǒng)工具欄高度為 40px；所以頁(yè)面的高度900p×-80px-40px=780px；對(duì)于頁(yè)面中自適應(yīng)的情況所以上需留出固定安全距離，所以彈窗的最大高度建議小680px。

彈窗類型：

彈窗根據(jù)內(nèi)容量，進(jìn)行寬度的調(diào)整，常見的彈窗尺寸分類共有四種。分別為：小、中、大、大~全屏（大~全屏：大彈窗信息量過多時(shí)提供大彈窗轉(zhuǎn)全屏，在B端的場(chǎng)景下更加方便用戶操作）

寫在最后：

彈窗在B端場(chǎng)景中，應(yīng)用非常廣泛，大家可以透過彈窗的思考方式去思考關(guān)于整個(gè) B 端控件層面的信息展現(xiàn)問題。碼字不易，覺得還不錯(cuò)的請(qǐng)點(diǎn)個(gè)贊/關(guān)注，是最大鼓歷。

Powered by Froala Editor