E4.19.1dialog size follows content设计研究
对话框尺寸应随内容量而非固定写死
别名: 对话框尺寸 · 内容撑开 · 固定弹窗 · dialog sizing
概念解释
对话框的宽高是给这份内容用的视口。尺寸跟内容走(size follows content)是让短确认用小框、长表单用够填的框,而不是所有对话共用一个写死的矩形。框比内容大出一截,问题显得空洞;框比内容小,内容被裁或过早出现内部滚动。这条先谈框与内容的匹配,不谈窄屏要不要变全屏,也不谈溢出之后怎么滚。
机制
人用框的面积估计任务分量。小小的框配两行确认,决策被看成轻;同样两行塞进一张大空框,会显得还缺步骤。反过来,真正的多字段表单被塞进小框,字段还没开始填就已经要滚,任务分量被低估,完成成本被高估。写死的尺寸把所有任务压成同一分量信号,短的被放大、长的被压缩。跟内容走不是让框随每一句换行无限长高:要有可读的最大宽(行长)和相对视口的最大高,超出才进入内部滚动。跟内容走的是「在上限之内按内容收缩」,不是「没有上限」。内容变化(校验多出一行、语言换成德文)时,框应能长一截,而不是把新字挤出按钮。
怎么研究
把同一套对话分别做成固定尺寸与按内容收缩,内容分短确认、中等表单、长说明。记录是否误判任务长度、首屏能看见的完整字段数、为看按钮而滚动的次数。自变量:尺寸策略、文案长度、语言。因变量:分量误判、未看见的必填项。固定大框上短确认的「还要做什么」犹豫应更高。
边界
需要并排比较的内容(两栏权限)有自己的最小宽,不能收到单列确认那么窄。动画或插画装饰不该撑大框——它们不是任务内容。不同对话之间尺寸跳来跳去会让人以为不是同一类控件;跟内容走仍应落在一条共享的最大最小范围内,而不是每个对话一个随意宽。
怎么落地
- 为对话规定最小与最大宽高,在其间按内容收缩,短确认用最小附近。
- 装饰性插画不计入撑开。
- 文案或字段变化后重新量一次,避免按钮被挤出首屏。
- 验证:短确认与长表单各截一张。短的不应大片留白,长的首屏应能看见问题的完整提问和主要字段。