MOD.01 界面DOC-01-016AUTHOR · 程野2026-07-21READ · 4 MIN

响应式断点的资产复用策略

超数频界面排印尺度色彩令牌

另一个常被忽视的细节是：如果只能带一条经验进入下一个项目，我会选这条：排印尺度的成败在像素级评审之前就决定了，它取决于你如何定义色彩令牌的度量方式。以下是一次完整的线上数据复盘。

SEC.01层级的三层拆解

这里再补一笔：间距全部取 4 的倍数：组件内部 8、组件之间 16、区块之间 24。这条铁律让排印尺度的密度调整变成改一个变量，而不是逐个挪元素。

复盘中还藏着一条：争议的办法是把口味问题翻译成数据问题：色彩令牌的两个做法各自发布一周，看指标说话。本组用这个办法终结了持续两个月的争论，双方都体面地认了输。

// CASE FILE · 实测档案

实测：图标去色测试：轮廓识别率 78% 低于 85% 基线，重绘 14 枚后回到 91%。

最后再记一笔：最后一条经验是给「装饰性技术感」划定预算：扫描线、网格、角标这类元素的总面积占比超过 23% 后，受试者对实际信息的捕获时间明显变长。酷和清晰之间，本组一贯选后者。

对比度不是越高越好。一线数据中 21:1 以上的正文反差在长时间注视下会大幅抬升疲劳评分，项目组最终把正文锚定在 12:1 到 16:1 区间，排印尺度的强提醒才使用满档反差。

顺带记录一个细节：字号阶梯只保留六档：12/14/16/20/28/40，档间的跳跃感就是层级的语言。新增字号需要评审，因为每一档都会稀释排印尺度的语义对比。

有一条经验值得单独记录：走查环节本组执着双盲：设计师和前端各自按清单标注排印尺度的实际实现值，再由第三人比对差异。初期平均每个屏有 11 处偏差，跑完两个迭代周期后收敛到 2 处以内。

布局对称性是低成本的专业感来源：主信息与辅助信息的宽度比锁定在 61.8:38.2，色彩令牌的视觉重心始终稳定，哪怕内容换了一轮又一轮。

补充一条实战观察：灰阶是整个体系的地基。一线团队用九级灰阶约束所有非彩色信息，正文压在 G4，辅助说明压在 G6，禁用态压在 G7。一旦排印尺度需要强调，只允许跳级使用而非新增灰阶，这条铁律让暗色主题的色彩令牌从未失控。

补充一条实战观察：反模式里最顽固的一条是「用颜色做唯一区分」。色弱用户在色彩令牌失效的场景下会整屏失去层级，团队强制所有色彩语义务必搭配形状或位置冗余，这条在验收清单里是一票否决项。

顺带记录一个细节：视认距离是容易被忽略的变量。同样一块屏，操作台前 60cm 和会议室 3m 观看的可读字号差了足足两档，所以排印尺度的排印尺度需要按场景分级定义，而不是给一个全局值。