界面安静，并不意味着所有东西都要变灰、变薄、变得毫无重量。真正的安静来自秩序：读者知道先看哪里，也知道哪些元素会在需要时出现。
克制不是把所有东西变淡，而是让重要的信号只出现一次。
先建立层级，再添加氛围
我习惯先用纯灰线框完成页面。只依靠字号、字重、间距和顺序，让人能在三秒内识别主任务。到了这一步，颜色才作为语义加入，而不是负责拯救混乱的布局。
- 一级动作拥有稳定位置和最高文字对比度；
- 二级动作通过边框或背景区分，不与主按钮争夺；
- 状态变化靠文字和形状共同表达；
- 装饰只出现在不会遮挡信息的区域。
opacity: 0.5 不是次要层级的万能答案。对小字号文本来说，它往往只是把问题交给视力和屏幕质量。
| 视觉信号 | 出现时机 | 建议强度 |
|---|---|---|
| 主色填充 | 唯一主操作 | 高，但面积小 |
| 焦点环 | 键盘导航时 | 清晰且不被裁切 |
| 阴影 | 表示层级抬升 | 柔和、短距离 |
| 模糊背景 | 表示空间覆盖 | 保留足够实色兜底 |
| 微动效 | 解释状态改变 | 120–240ms |
玻璃是一种关系，不是一种滤镜
玻璃感成立的前提，是前景与背景存在明确距离。如果每张卡片都模糊、透明并带高光，页面就没有“后面”可言。我的做法是只让浮层和临时面板使用玻璃材质，正文始终拥有接近实色的阅读面。
:root {
--glass-fill: color-mix(in srgb, #fff 72%, transparent);
--glass-edge: rgba(255, 255, 255, 0.56);
--glass-shadow: 0 18px 60px rgba(37, 44, 56, 0.12);
--focus-ring: 0 0 0 3px rgba(58, 116, 128, 0.42);
}
动效应解释状态
好的动效会回答“它从哪里来”和“接下来能做什么”。搜索面板从触发按钮附近展开，能建立空间关系；保存成功只需一次短暂的状态替换，不必让整张卡片跳动。
我会逐项检查：
- 动效是否表达了位置、层级或因果？
- 在
prefers-reduced-motion下是否仍然能理解变化？ - 连续操作时，动画是否会阻塞下一步？
把可访问性当成材质的一部分
焦点环、文本对比度和触控面积不是上线前的清单，它们和圆角、阴影一样构成界面的触感。当键盘用户能顺着自然顺序抵达每个控件，当放大到 200% 仍没有内容消失，界面才真正安静下来。
有性格的界面不需要一直讲话。它只需在每个微小决定里保持一致：同一种颜色表达同一种意义，同一种动作产生同一种反馈，并在用户想专注时懂得退后一步。
