关于
应用具体的设计工程细节让界面更精致。适用于审查或改进 UI 间距、排版、边框、阴影、动效、点击区域、图标、文本换行和交互状态。
name: make-interfaces-feel-better description: 应用具体的设计工程细节使界面感觉更精致。在审查或改进 UI 间距、排版、边框、阴影、动效、点击区域、图标、文本换行和交互状态时使用。 origin: community
让界面感觉更好
用于那些累积起来能让界面更精致的小型设计工程细节。
来源：从社区 PR #1659（linus707）中抢救的过期内容。
何时使用
- 用户说 UI 感觉不对、扁平、通用、拥挤、跳动或未完成。
- 你正在构建控件、卡片、列表、仪表板、导航、表单或工具栏。
- 组件需要 hover、active、focus、进入、退出、加载或空状态。
- 前端审查需要具体的前后对比建议。
核心原则
同心圆角
对于相邻嵌套的圆角表面：
outer radius = inner radius + padding
如果内边距很大，将各层视为独立表面而非强行套用公式。重点是视觉一致性，而非公式崇拜。
视觉对齐
几何居中并不总是视觉居中。图标按钮、播放三角形、箭头、星形和不对称图标通常需要小偏移。尽可能修复 SVG；否则用像素级的 margin 或 padding 调整。
阴影和边框
使用边框进行分隔和焦点环。当卡片、按钮、下拉菜单或弹出框需要深度时使用分层阴影。阴影应该透明且足够微妙，能在不同背景上工作。
文本换行
- 在标题和短标题上使用
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 保留给分阶段的一次性入场或加载序列。
良好的动效默认值：
- 进入：组合 opacity、小的
translateY，可选 blur。 - 退出：比进入更短更安静，通常 150ms。
- 按下：
scale(0.96)用于触感按钮，提供禁用方式以防动作分散注意力。 - 图标切换：用 opacity、scale 和 blur 交叉淡入淡出，而非瞬间可见性切换。
过渡范围
永远不要使用 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 | 明确的过渡属性 |
当代码片段不明显时包含文件路径和属性。省略检查过但未更改的原则。
检查清单
- 嵌套圆角元素视觉一致。
- 图标视觉居中。
- 按钮、卡片和弹出框正确使用边框或阴影。
- 标题和短文本避免尴尬换行。
- 动态数字使用表格数字。
- 需要时图片有中性轮廓。
- 进入和退出动画分离、微妙，适当时可中断。
- 按钮有触感的 active 状态但无夸张动效。
- 不存在
transition: all和will-change: all。 - 小控件仍有可用的点击区域。
