本文授权转自：Clip联想夹（ID：ClippDesign）
信托大多B端联想师对web弹窗联想的步调齐不生疏：比如弹窗按交互形状可分为模态弹窗和非模态弹窗；按承载骨子类型分为：教导类、操作类、展示类弹窗；按弹窗承载信息量的大小不错分为：小尺寸弹窗、中尺寸弹窗、大尺寸弹窗...等等
但最近，在作念一个操作提效的需求联想时际遇了需求方对弹窗尺寸的步调挑战~
简短需求是这样：为圣洁弹窗内对选项接受的技巧，现将蓝本弹窗内的级联接受下拉框改成平铺按钮的形状。（见下图）
ps：本平台为东说念主工审核平台，使用用户为审核员，平台联想要为审核员的审核效果认真，审核效果一般示意为：单东说念主单天（8小时）xxx条审核量。
问题点：承载骨子信息量不固定
原因：弹窗内用户接受项为欠亨过原因，而此接受项是用户把柄本身企业的风险标签来自界说确立，这就触及到级联接受数目的问题，有的客户风险标签体系细，多则几百个，有的客户只需要粗粒度标签，举例只好一级标签，总和可能不卓绝十个...
联想想路
1.与用户相易-明笃信息量的承载量级限制
需求方：我要一个这样大的弹窗！好让信息呈现更全面！
但作念联想从来不是杜撰界说一个弹窗大小，要作念到有理有据；前期接受先跟使用此平台的审核认真东说念主相易，来详情当今已接入的客户在此处自界说确立的原因数目量级并整理出相易论断：
存在极少客户10个以内的原因个数、成例客户在30个傍边的原因个数、现有一家客户使用最多数级100+原因个数。但由于戒指权在客户方，原因量级不可控，异日也可能出现几百的数目。
在以上论断中，不错详情出可能的备选 600px中弹窗、800px的大弹窗、或者需求方建议的快要1200px的超大弹窗，但到底哪个最为安妥需要进一步判断。
2.详情弹窗弹窗尺寸
在有可能的600px、800px、1200px三种宽度中及第最安妥的弹窗尺寸，区分从操作效果与适配性角度对其进行判断。
操作效果层面：
当原因个数在30个以下时：
若不同宽度时，齐接受第一个处置原因，把柄交互门径论--菲茨定律，指引建立到达贪图的与两个要素相干：（1）建立现时位置和贪图位置的距离（D）。距离越长，所用技巧越长；（2）贪图的大小（S）。贪图越大，所用技巧越短。
由此可见此操作的最终贪图按钮为右下角的详情按钮，贪图按钮大小不变，但举座的接受距离是相对两个较小弹窗要远的。D3>D2>D1，所用技巧 T3>T2>T1。由于对审核员任务操作技巧和效果要沟通到秒或毫秒级别，此大小对用户快速完成此操作起到负向作用。
另外，当原因个数10个以内时，可见此时弹窗宽渡过宽，导致空缺区域过大。当原因个数在30个以下时，操作效果评分：
1200px ⭐️⭐️800px ⭐️⭐️⭐️600px ⭐️⭐️⭐️
当卓绝100个原因个数时：1200px 一屏内展示满盈，不需要滚屏滑动；800px 可在两屏内展示满盈，需要滚屏滑动；600px 超出两屏展示才可展示满盈，需要滚屏滑动。
当原因个数卓绝100时，操作效果评分：
1200px ⭐️⭐️⭐️800px ⭐️⭐️⭐️600px ⭐️⭐️
适配性层面：
把柄市面主流屏幕分辨率尺寸调研：
市面上存在部分 1024 分辨率的清楚屏，是以：600px卤莽适配统共市面主流分辨率清楚器；800px卤莽适配统共市面主流分辨率清楚器；1200px不可卤莽适配市面主流1024*768的分辨率清楚器，弹窗不可在清楚器内清楚满盈，固适配性相对较弱。
详细三种弹窗大小的操作效果和适配性：
800px的发扬最优，固及第800px的弹窗大小。
3.详情弹窗基本步调
高度步调：由于信息量的不同不错把柄骨子若干进行自适合高度，划定max high 700px。由于一般超出800px可能出现浏览器外转动条，是以及第高度为600-800px之间。
转动条步调：限高后，若信息超出max high赈济出现内转动条。
浏览器适配步调：浏览器窗口>800px，弹窗宽度保捏固定宽度800px。浏览器窗口600-800px之间弹窗同步在600-800之间自适合。浏览器窗口
终末
本文提供了一种处置问题的想路，关于此类弹窗的及第和判断上或有不科学、不严谨、不正确的场地，还请诸君途经同业指正，感谢阅读~
