让界面感觉更好 是做什么的？
使用本技能处理那些累积起来能让界面更精致的小型设计工程细节。
来源：从社区 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 transitions 处理交互状态变化，因为它们可以在用户中途改变意图时重新定位。保留 keyframes 用于分阶段的一次性入场或加载序列。
良好的动效默认值：
- 进入：结合透明度、微小的
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。
点击区域
交互式控件应至少具有 40x40px 的点击区域，理想情况下，在布局允许时为 44x44px。当可见图标较小时，使用伪元素扩展点击区域，但不要让扩展后的点击区域重叠。
审查输出
在审查 UI 抛光过程时，在前后行中报告具体更改：
| 原则 | 之前 | 之后 |
|---|---|---|
| 同心圆角 | 父元素和子元素使用相同半径 | 父元素半径考虑内边距 |
| 等宽数字 | 计数器随数字变化而移动 | 计数器使用 tabular-nums |
| 过渡范围 | transition: all | 显式的过渡属性 |
当文件路径和属性不明显时，请包含它们。省略您检查过但未更改的原则。
检查清单
- 嵌套的圆角元素在视觉上协调一致。
- 图标在视觉上居中。
- 按钮、卡片和弹窗因正确原因使用边框或阴影。
- 标题和短文本避免尴尬的换行。
- 动态数字使用等宽数字。
- 图像在需要的地方具有中性轮廓。
- 进入和退出动画是分开的、微妙的，并且在适当时可中断。
- 按钮具有触感的激活状态，没有夸张的动效。
- 不存在
transition: all和will-change: all。 - 小型控件仍然具有可用的点击区域。