R2.05.6stacked-edge frames设计

多种边界叠加时的表现要单独给出

别名: 叠加边界帧 · compound edge case · 组合极值画面

概念解释

单独成立的边界,叠在同一槽位上会生成新的几何,而不是把两份策略加在一起。叠加边界帧(stacked-edge frames)要求把产品里会同时出现的组合单独画出来:极长标题碰上多枚标签再碰上行内警告,零条列表碰上筛选仍开启,短名字碰上超长次要字段。交付若只给「长」「多」「警告」三张单因素图,实现只能在运行时把它们线性叠加,而线性叠加会撞车。

它处理的是已经分别定义过的边界如何共处,不是再去发明第三条单因素。组件里悬停加禁用那种交互态优先级,也不是这里的对象——这里叠的是内容形状。

机制

每条单因素策略都在抢同一份空间。长标题要换行,多标签要换行或折叠,警告图标要占一列:三者都按自己的单因素图去要高度和左缘时,行高会被加三次,操作会被挤到视口外,或警告盖住标题的最后几个字。策略在纸面上并不冲突,因为它们从未被要求同时为真。

叠加还改变优先级。单看「多标签」时,折叠成「+N」是合理的;叠上「整行已有错误色条」时,+N 可能变得不可点,或与错误色对比不足。单看「短名」时居中是整齐的;叠上右侧超长时间戳时,短名会像被时间戳拽走。这些都不是平均两帧能猜出来的第三态。实现者若没有组合帧,只能选一个赢家(通常是自己最近改过的那条),另一条边界在联调里被牺牲,且不会回到设计源。

边界

结构上不可能共现的组合不必画:零条集合不可能同时溢出,未加载完成时不应叠加「多条」的折叠。组合爆炸不能靠穷举拯救——只画生产里会共现的栈,用共现计数或客服记录来挑,而不是笛卡尔积。两条边界若根本不共享几何(例如色盲模式下的配色与另一区块的长文本互不挤压),分开验证即可,硬画一张组合帧没有新信息。打印分页、导出 PDF 时的叠加是另一套页面几何,屏幕组合帧不能直接充当。

怎么落地

  • 从生产日志或走查记录里列出「同一行/同一卡片上同时为真」的边界对,每对至少交一帧,帧上写清两条边界各自的策略谁让谁。
  • 组合帧使用真实会共现的数据,不要把所有极值同时堆进一张演示用的灾难卡;灾难卡会逼实现写死一种只在演示里出现的布局。
  • 在组合帧上标出不可挤压的元素(主操作、错误图标、价格),让实现知道哪一项在冲突时最后才动。
  • 构造两条边界同时为真的测试记录,打开实现后的那一行,对照组合帧:若警告挡住了标题末尾,或折叠后的 +N 落在错误色条上不可读,说明实现在做线性叠加。把这一帧补进交付,而不是只改代码里的 z-index。

延伸

  • 同组R2.05.1 极长与极短内容需在设计中给出 · R2.05.2 零、一与多的状态需分别定义 · R2.05.3 未定义的情况会由实现者随意决定 · R2.05.4 边界值取自真实数据分布而非想象的极值 · R2.05.5 溢出策略需按内容类型分别指定
  • 相邻R1.03 组件状态的完备性 · R2.01 标注与切图
  • 站内检索stacked-edge frames · compound edge case · co-occurring extrema

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/R2.05.6