Halo，這里是設(shè)計夾，今天分享的是「B端彈窗設(shè)計」。

相信大多B端設(shè)計師對web彈窗設(shè)計的規(guī)范都不陌生：比如彈窗按交互形式可分為模態(tài)彈窗和非模態(tài)彈窗；按承載內(nèi)容類型分為：提示類、操作類、展示類彈窗；按彈窗承載信息量的大小可以分為：小尺寸彈窗、中尺寸彈窗、大尺寸彈窗...等等

但最近，在做一個操作提效的需求設(shè)計時遇到了需求方對彈窗尺寸的規(guī)范挑戰(zhàn)~

大致需求是這樣：為節(jié)省彈窗內(nèi)對選項選擇的時間，現(xiàn)將原本彈窗內(nèi)的級聯(lián)選擇下拉框改成平鋪按鈕的形式。（見下圖）

ps：本平臺為人工審核平臺，使用用戶為審核員，平臺設(shè)計要為審核員的審核效率負責(zé)，審核效率一般表示為：單人單天（8小時）xxx條審核量。

問題點：承載內(nèi)容信息量不固定

原因：彈窗內(nèi)用戶選擇項為不通過原因，而此選擇項是用戶根據(jù)自身企業(yè)的風(fēng)險標簽來自定義配置，這就涉及到級聯(lián)選擇數(shù)量的問題，有的客戶風(fēng)險標簽體系細，多則幾百個，有的客戶只需要粗粒度標簽，例如只有一級標簽，總數(shù)可能不超過十個...

設(shè)計思路

1.與用戶溝通-明確信息量的承載量級范圍

需求方：我要一個這么大的彈窗！好讓信息呈現(xiàn)更全面！

但做設(shè)計從來不是憑空定義一個彈窗大小，要做到有理有據(jù)；前期選擇先跟使用此平臺的審核負責(zé)人溝通，來確定目前已接入的客戶在此處自定義配置的原因數(shù)量量級并整理出溝通結(jié)論：

存在少量客戶10個以內(nèi)的原因個數(shù)、常規(guī)客戶在30個左右的原因個數(shù)、現(xiàn)存一家客戶使用最大量級100+原因個數(shù)。但由于控制權(quán)在客戶方，原因量級不可控，未來也可能出現(xiàn)幾百的數(shù)量。

在以上結(jié)論中，可以確定出可能的備選 600px中彈窗、800px的大彈窗、或者需求方提出的將近1200px的超大彈窗，但到底哪個最為合適需要進一步判斷。

2.確定彈窗彈窗尺寸

在有可能的600px、800px、1200px三種寬度中選取最合適的彈窗尺寸，分別從操作效率與適配性角度對其進行判斷。

操作效率層面：

當原因個數(shù)在30個以下時：

若不同寬度時，都選擇第一個處置原因，根據(jù)交互方法論菲茨定律，指點設(shè)備到達目標的與兩個因素有關(guān)：（1）設(shè)備當前位置和目標位置的距離（D）。距離越長，所用時間越長；（2）目標的大?。⊿）。目標越大，所用時間越短。

由此可見此操作的最終目標按鈕為右下角的確定按鈕，目標按鈕大小不變，但整體的選擇距離是相對兩個較小彈窗要遠的。D3>D2>D1，所用時間 T3>T2>T1。由于對審核員任務(wù)操作時間和效率要考慮到秒或毫秒級別，此大小對用戶快速完成此操作起到負向作用。

另外，當原因個數(shù)10個以內(nèi)時，可見此時彈窗寬度過寬，導(dǎo)致空白區(qū)域過大。當原因個數(shù)在30個以下時，操作效率評分：

1200px ????800px ??????600px ??????

當超過100個原因個數(shù)時：1200px 一屏內(nèi)展示完全，不需要滾屏滑動；800px 可在兩屏內(nèi)展示完全，需要滾屏滑動；600px 超出兩屏展示才可展示完全，需要滾屏滑動。

當原因個數(shù)超過100時，操作效率評分：

1200px ??????800px ??????600px ????

適配性層面：

根據(jù)市面主流屏幕分辨率尺寸調(diào)研：

市面上存在部分 1024 分辨率的顯示屏，所以：600px能夠適配所有市面主流分辨率顯示器；800px能夠適配所有市面主流分辨率顯示器；1200px不能能夠適配市面主流1024*768的分辨率顯示器，彈窗不能在顯示器內(nèi)顯示完全，固適配性相對較弱。

綜合三種彈窗大小的操作效率和適配性：

800px的表現(xiàn)最優(yōu)，固選取800px的彈窗大小。

3.確定彈窗基本規(guī)范

高度規(guī)范：由于信息量的不同可以根據(jù)內(nèi)容多少進行自適應(yīng)高度，限定max high 700px。由于一般超出800px可能出現(xiàn)瀏覽器外滾動條，所以選取高度為600-800px之間。

滾動條規(guī)范：限高后，若信息超出max high支持出現(xiàn)內(nèi)滾動條。

瀏覽器適配規(guī)范：瀏覽器窗口>800px，彈窗寬度保持固定寬度800px。瀏覽器窗口600-800px之間彈窗同步在600-800之間自適應(yīng)。瀏覽器窗口<600px，彈窗寬度保持600px，出現(xiàn)瀏覽器外滾動條。

最后

本文提供了一種解決問題的思路，對于此類彈窗的選取和判斷上或有不科學(xué)、不嚴謹、不正確的地方，還請各位路過同行指正，感謝閱讀~

看完覺得寫得好的，不防打賞一元，以支持藍海情報網(wǎng)揭秘更多好的項目。

標簽： 原因 操作 個數(shù) 隨筆