大致需求是這樣：為節(jié)省彈窗內(nèi)對(duì)選項(xiàng)選擇的時(shí)間，現(xiàn)將原本彈窗內(nèi)的級(jí)聯(lián)選擇下拉框改成平鋪按鈕的形式。（見(jiàn)下圖）
ps：本平臺(tái)為人工審核平臺(tái)，使用用戶為審核員，平臺(tái)設(shè)計(jì)要為審核員的審核效率負(fù)責(zé)，審核效率一般表示為：?jiǎn)稳藛翁欤?小時(shí)）xxx條審核量。
原因：彈窗內(nèi)用戶選擇項(xiàng)為不通過(guò)原因，而此選擇項(xiàng)是用戶根據(jù)自身企業(yè)的風(fēng)險(xiǎn)標(biāo)簽來(lái)自定義配置，這就涉及到級(jí)聯(lián)選擇數(shù)量的問(wèn)題，有的客戶風(fēng)險(xiǎn)標(biāo)簽體系細(xì)，多則幾百個(gè)，有的客戶只需要粗粒度標(biāo)簽，例如只有一級(jí)標(biāo)簽，總數(shù)可能不超過(guò)十個(gè)...
需求方：我要一個(gè)這么大的彈窗！好讓信息呈現(xiàn)更全面！
但做設(shè)計(jì)從來(lái)不是憑空定義一個(gè)彈窗大小，要做到有理有據(jù)；前期選擇先跟使用此平臺(tái)的審核負(fù)責(zé)人溝通，來(lái)確定目前已接入的客戶在此處自定義配置的原因數(shù)量量級(jí)并
整理出溝通結(jié)論
：
存在少量客戶 10個(gè)以內(nèi)的原因個(gè)數(shù)、 常規(guī)客戶在30個(gè)左右的原因個(gè)數(shù)、現(xiàn)存一家客戶使用最大量級(jí) 100+原因個(gè)數(shù)。但由于控制權(quán)在客戶方，原因量級(jí)不可控，未來(lái)也可能出現(xiàn)幾百的數(shù)量。
在以上結(jié)論中，可以確定出可能的備選 600px中彈窗、800px的大彈窗、或者需求方提出的將近1200px的超大彈窗，但到底哪個(gè)最為合適需要進(jìn)一步判斷。
在有可能的600、800、1200px三種寬度中選取最合適的彈窗尺寸，分別從操作效率與適配性角度對(duì)其進(jìn)行判斷。
當(dāng)原因個(gè)數(shù)在30個(gè)以下時(shí)：
若不同寬度時(shí)，都選擇第一個(gè)處置原因，根據(jù)交互方法論--
菲茨定律
，指點(diǎn)設(shè)備到達(dá)目標(biāo)的與兩個(gè)因素有關(guān)：（1）設(shè)備當(dāng)前位置和目標(biāo)位置的距離（D）。距離越長(zhǎng)，所用時(shí)間越長(zhǎng)；（2）目標(biāo)的大小（S）。目標(biāo)越大，所用時(shí)間越短。
由此可見(jiàn)此操作的最終目標(biāo)按鈕為右下角的確定按鈕，目標(biāo)按鈕大小不變，但整體的選擇距離是相對(duì)兩個(gè)較小彈窗要遠(yuǎn)的。D3>D2>D1，所用時(shí)間 T3>T2>T1。由于對(duì)審核員任務(wù)操作時(shí)間和效率要考慮到秒或毫秒級(jí)別，此大小對(duì)用戶快速完成此操作起到負(fù)向作用。
另外，當(dāng)原因個(gè)數(shù)10個(gè)以內(nèi)時(shí)，可見(jiàn)此時(shí)彈窗寬度過(guò)寬，導(dǎo)致空白區(qū)域過(guò)大。
當(dāng)原因個(gè)數(shù)在30個(gè)以下時(shí)，
操作效率評(píng)分
：
當(dāng)超過(guò)100個(gè)原因個(gè)數(shù)時(shí)：
1200px 一屏內(nèi)展示完全，不需要滾屏滑動(dòng)；
800px 可在兩屏內(nèi)展示完全，需要滾屏滑動(dòng)；
600px 超出兩屏展示才可展示完全，需要滾屏滑動(dòng)。
當(dāng)原因個(gè)數(shù)超過(guò)100時(shí)，
操作效率評(píng)分
：
根據(jù)市面主流屏幕分辨率尺寸調(diào)研：
市面上存在部分 1024 分辨率的顯示屏，所以：
600px 能夠適配所有市面主流分辨率顯示器
800px 能夠適配所有市面主流分辨率顯示器
1200px 不能能夠適配市面主流1024*768的分辨率顯示器，彈窗不能在顯示器內(nèi)顯示完全，固適配性相對(duì)較弱。
800px 的表現(xiàn)最優(yōu)，固選取
800px
的彈窗大小。
高度規(guī)范：
由于信息量的不同可以根據(jù)內(nèi)容多少進(jìn)行自適應(yīng)高度，限定 max high 700px 。由于一般超出800px可能出現(xiàn)瀏覽器外滾動(dòng)條，所以選取高度為
600-800px
之間
滾動(dòng)條規(guī)范：
限高后，若信息超出 max high 支持出現(xiàn)內(nèi)滾動(dòng)條。
瀏覽器適配規(guī)范：
瀏覽器窗口>800px,彈窗寬度保持固定寬度800px。瀏覽器窗口600-800px之間彈窗同步在600-800之間自適應(yīng)。瀏覽器窗口<600px,彈窗寬度保持600px，出現(xiàn)瀏覽器外滾動(dòng)條。
作者：Squirrel_young
鏈接：https://www.zcool.com.cn/article/ZMTU5NDQzMg==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
