优化界面细节体验 是做什么的？
使用此技能来处理那些积累起来能让界面更精致的小型设计工程细节。
来源：从社区过时的 PR #1659 中抢救而来，作者 linus707。
何时使用
- 用户觉得 UI 感觉不对劲、平淡、千篇一律、拥挤、跳跃或未完成。
- 您正在构建控件、卡片、列表、仪表板、导航、表单或工具栏。
- 一个组件需要悬停、激活、聚焦、进入、退出、加载或空状态。
- 前端审查需要具体的改进前/改进后建议。
核心原则
同心圆角
对于附近嵌套的圆角曲面：
外半径 = 内半径 + 内边距
如果内边距很大，则将各层视为单独的曲面，而不是强制套用公式。重点是视觉上的连贯性，而不是对公式的崇拜。
光学对齐
几何中心并不总是视觉中心。图标按钮、播放三角、箭头、星形和非对称图标通常需要微小的偏移。尽可能修复 SVG；否则，使用像素级别的外边距或内边距调整。
阴影和边框
使用边框进行分隔和聚焦环。当卡片、按钮、下拉菜单或弹出窗口需要深度感时，使用分层阴影。阴影应是透明的且足够柔和，以适应不同背景。
文本换行
- 在标题和短标题上使用
text-wrap: balance。 - 在短到中等长度的正文文本、说明、描述和列表项上使用
text-wrap: pretty。 - 避免在长篇散文、代码和预格式化内容上使用这两者。
- 对计数器、计时器、价格、表格和其他会变化的数字，使用
font-variant-numeric: tabular-nums。
字体平滑
在 macOS 上，如果项目尚未设置，则在根布局应用抗锯齿字体平滑：
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
图像轮廓
图像通常需要一个微妙的内部轮廓，以免其边缘与背景模糊成一片。
img {
outline: 1px solid rgba(0, 0, 0, 0.1);
outline-offset: -1px;
}
@media (prefers-color-scheme: dark) {
img {
outline-color: rgba(255, 255, 255, 0.1);
}
}
使用中性黑色或白色的 alpha 轮廓。不要使用品牌调色板为图像轮廓着色。
动效
对交互状态变化使用 CSS 过渡，因为当用户在动画中途改变意图时，它们可以重新定位目标。将关键帧保留用于分阶段的一次性入场或加载序列。
良好的动效默认值：
- 进入：结合透明度、微小的
translateY，可选地结合模糊。 - 退出：比进入更短更安静，通常为 150ms。
- 按压：使用
scale(0.96)获得触觉反馈按钮，并提供一种在移动分散注意力时禁用的方法。 - 图标切换：使用透明度、缩放和模糊进行淡入淡出，而不是立即切换可见性。
过渡范围
切勿使用 transition: all。指定发生变化的属性：
.button {
transition-property: transform, background-color, box-shadow;
transition-duration: 150ms;
transition-timing-function: ease-out;
}
仅在合成层友好的属性（如 transform、opacity 和 filter）上，为解决首帧卡顿问题而使用 will-change。切勿使用 will-change: all。
点击区域
交互式控件应至少具有 40x40 像素的点击区域，理想情况下，在布局允许时为 44x44 像素。当可见图标较小时，使用伪元素进行扩展，但不要让扩展的点击区域重叠。
审查输出
审查 UI 润色时，以改进前/改进后表格的形式报告具体更改：
| 原则 | 改进前 | 改进后 |
|---|---|---|
| 同心圆角 | 父级和子级使用相同半径 | 父级半径考虑了内边距 |
| 表格数字 | 计数器随数字变化而跳动 | 计数器使用 tabular-nums |
| 过渡范围 | transition: all | 明确的过渡属性 |
如果代码片段不明显，请包含文件路径和属性。省略那些您已检查但未更改的原则。
检查清单
- 嵌套的圆角元素在视觉上是连贯的。
- 图标在视觉上居中。
- 按钮、卡片和弹出窗口因正确的理由使用边框或阴影。
- 标题和短文本避免尴尬的换行。
- 动态数字使用表格数字。
- 图像在需要时有中性轮廓。
- 进入和退出动画是分开的、微妙的，并且在适当时可中断。
- 按钮具有触觉激活状态，且没有夸张的动效。
transition: all和will-change: all不存在。- 小型控件仍然有可用的点击区域。