make-interfaces-feel-better

提升 UI 界面质感与细节 (Make Interfaces Feel Better)

在需要通过叠加设计工程细节来让界面看起来更精致、更有高级感时使用此 Skill。

来源：挽救自 linus707 废弃的社区 PR #1659。

适用场景

• 用户反馈 UI 看起来不对劲、太扁平、大众脸、拥挤、卡顿跳动或未完成感。
• 你正在构建控件、卡片、列表、仪表盘、导航、表单或工具栏。
• 组件需要设置 hover（悬停）、active（按压）、focus（聚焦）、enter（进场）、exit（离场）、loading（加载）或 empty（空状态）等交互状态。
• 前端审查（Review）需要具体的优化前/优化后（before/after）建议。

核心原则

同心圆角 (Concentric Radius)

对于相近嵌套的圆角表面：

outer radius = inner radius + padding

如果 padding 很大，直接将两层视作独立的表面即可，没必要死板套公式。重点是视觉协调度（optical coherence），而不是公式崇拜。

视觉对齐 (Optical Alignment)

几何居中不等于视觉居中。图标按钮、播放三角、箭头、星星以及不对称图标通常需要微微偏移。能改 SVG 最好；改不了就用像素级的 margin 或 padding 来调。

阴影与边框 (Shadows And Borders)

用边框做分隔线和焦点环（focus ring）。当卡片、按钮、下拉菜单或弹窗（popover）需要空间层次感时，使用多层叠加阴影。阴影应当带有透明度且足够克制，以便适配各种背景。

文本换行 (Text Wrapping)

• 标题和短标题使用 text-wrap: balance。
• 短到中等长度的正文、图注、描述文本和列表项使用 text-wrap: pretty。
• 长篇大段的文字、代码和预格式化内容切勿使用以上两种设置。
• 计数器、倒计时、价格、表格及其他动态更新的数字，使用 font-variant-numeric: tabular-nums。

字体平滑渲染 (Font Smoothing)

在 macOS 上，若项目根布局未设置平滑渲染，请在根布局添加抗锯齿：

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

图片描边 (Image Outlines)

图片通常需要一层微妙的内嵌描边，避免边缘模糊融入背景表面。

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 channel）。切勿用品牌主色给图片描边上色。

动效 (Motion)

交互状态变更优先选择 CSS transition，因为当用户在动画播放到一半改变意图时，transition 能顺畅重定向。keyframes 仅用于分阶段的单次进场或加载序列。

推荐的动效默认配置：

• 进场 (Enter)：组合透明度 (opacity)、微幅 translateY，可选模糊度 (blur)。
• 离场 (Exit)：比进场更快更安静，通常建议 150ms。
• 按压 (Press)：针对按钮触感使用 scale(0.96)，如果动画干扰了用户操作，要保留关闭手段。
• 图标切换 (Icon swaps)：使用透明度、缩放和模糊渐隐渐现 (cross-fade)，而不是直接显隐切换。

动效作用域 (Transition Scope)

绝对不要使用 transition: all。必须明确指定变更的属性：

.button {
  transition-property: transform, background-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

仅在合成器友好属性（如 transform、opacity 和 filter）出现首帧卡顿（stutter）时使用 will-change。绝对不要用 will-change: all。

点击热区 (Hit Areas)

可交互控件的点击热区应至少达到 40x40px，在版面允许的情况下最好达到 44x44px。当可见图标偏小时，可用伪元素扩展热区，但切记不要让扩展后的热区发生重叠。

Review 输出规范

在做 UI 打磨 Review 时，请用优化前/优化后对比表格汇报具体的改动：

原则	优化前 (Before)	优化后 (After)
同心圆角	父元素与子元素使用相同圆角	父元素圆角计算了 padding 边距
等宽数字	数字变化时计数器发生跳动	计数器启用 tabular-nums
动效作用域	transition: all	显式指定 transition 属性

如果代码片段不够明显，请注明文件路径和属性名。已检查但未改动的原则直接忽略。

自查清单 (Checklist)

• 嵌套圆角元素在视觉上自然协调。
• 图标已完成视觉居中对齐。
• 按钮、卡片和弹窗合理使用了边框或阴影。
• 标题和短句避免了尴尬的文本换行。
• 动态变化的数字启用了等宽数字格式。
• 需要的图片都加了中性描边。
• 进场和离场动画已拆分，克制细腻，且支持中途打断。
• 按钮按压有触觉反馈，且不会过于夸张。
• 严禁出现 transition: all 和 will-change: all。
• 小控件依然保持了良好的可点击热区。