make-interfaces-feel-better

让界面体验更好的细节

出色的界面很少只靠单一因素打造。通常是许多细节共同作用，累积成出色的体验。构建或审查 UI 代码时，请遵循这些原则。

快速参考

类别	适用场景
排版	文本换行、字体平滑、等宽数字
表面	圆角、视觉对齐、阴影、图像轮廓、点击区域
动画	可中断动画、进入/退出过渡、图标动画、按压缩放
性能	过渡属性、will-change 的用法

核心原则

1. 同心圆角

外层圆角 = 内层圆角 + 内边距。嵌套元素的圆角不匹配，是最常见的界面观感不协调原因。

2. 优先视觉对齐，而非几何对齐

几何居中看起来不对时，请按视觉效果进行对齐。带图标的按钮、播放三角形和不对称图标都需要手动调整。

3. 用阴影代替边框

叠加多个透明的 box-shadow 值，营造自然的层次感。阴影适用于任何背景，纯色边框则不然。

4. 可中断动画

交互状态变化使用 CSS 过渡——它们可以在动画进行到一半时被中断。关键帧仅用于只运行一次的分阶段序列。

5. 拆分并错开进入动画

不要为单个容器设置动画。将内容拆分为语义区块，并为每个区块错开约 100ms 的延迟。

6. 轻柔的退出动画

使用较小的固定 translateY，而非完整高度的位移。退出动画应比进入动画更柔和。

7. 根据情境设置图标动画

使用 opacity、scale 和 blur 为图标设置动画，而不是切换可见性。请严格使用以下数值：scale 从 0.25 变为 1，opacity 从 0 变为 1，blur 从 4px 变为 0px。如果项目的 package.json 中包含 motion 或 framer-motion，请使用 transition: { type: "spring", duration: 0.3, bounce: 0 }——bounce 必须始终为 0。如果未安装动画库，请让两个图标都保留在 DOM 中（其中一个采用绝对定位），并使用 cubic-bezier(0.2, 0, 0, 1) 通过 CSS 过渡实现交叉淡入淡出——这样无需任何依赖即可实现进入和退出动画。

8. 字体平滑

在 macOS 上，为根布局应用 -webkit-font-smoothing: antialiased，让文字更清晰。

9. 等宽数字

对于任何动态更新的数字，请使用 font-variant-numeric: tabular-nums，避免布局偏移。

10. 文本换行

标题使用 text-wrap: balance。正文使用 text-wrap: pretty，避免出现孤行。

11. 图像轮廓

为图像添加不显眼的 1px 轮廓，并设置较低的不透明度，以保持层次感一致。

12. 按压缩放

点击时轻微缩放至 scale(0.96)，可让按钮带来触感反馈。始终使用 0.96。绝不能使用小于 0.95 的数值——低于此值会显得夸张。如果动画会造成干扰，请添加 static 属性将其禁用。

13. 页面加载时跳过动画

在 AnimatePresence 上使用 initial={false}，避免首次渲染时播放进入动画。请确认这不会破坏有意设置的进入动画。

14. 绝不使用 transition: all

始终指定确切属性：transition-property: scale, opacity。Tailwind 的 transition-transform 会涵盖 transform, translate, scale, rotate。

15. 谨慎使用 will-change

仅用于 transform、opacity、filter——这些属性可由 GPU 合成。绝不使用 will-change: all。只有发现首帧卡顿时才添加。

16. 最小点击区域

交互元素的点击区域至少需要 40×40px。如果可见元素尺寸较小，请用伪元素扩展点击区域。绝不要让两个元素的点击区域重叠。

常见错误

错误	修正方法
父元素和子元素使用相同的边框半径	计算 outerRadius = innerRadius + padding
图标看起来没有居中	使用内边距进行视觉调整，或直接修正 SVG
区块之间的边框生硬	使用带透明度的分层 box-shadow
进入／退出动画突兀	拆分动画、错开播放，并让退出动画保持轻柔
数字导致布局偏移	应用 tabular-nums
macOS 上的文字显得粗重	对根元素应用 antialiased
动画在页面加载时播放	在 AnimatePresence 中添加 initial={false}
元素使用 transition: all	指定确切的属性
动画首帧卡顿	添加 will-change: transform（谨慎使用）
小型控件的点击区域过小	使用伪元素扩展至 40×40px

检查清单

• 嵌套的圆角元素使用同心圆边框半径
• 图标经过视觉居中，而不只是几何居中
• 在适当情况下使用阴影代替边框
• 进入动画已拆分并错开播放
• 退出动画保持轻柔
• 动态数字使用 tabular-nums
• 已应用字体平滑处理
• 标题使用 text-wrap: balance
• 图片带有轻微描边
• 在适当情况下，按钮按下时使用缩放效果
• 对于默认状态的元素，AnimatePresence 使用 initial={false}
• 不使用 transition: all——只指定具体属性
• will-change 仅用于 transform/opacity/filter，绝不用于 all
• 交互元素的点击区域至少为 40×40px

参考文件

• typography.md — 文本换行、字体平滑、等宽数字
• surfaces.md — 边框半径、视觉对齐、阴影、图片描边
• animations.md — 可中断动画、进入／退出过渡、图标动画、按下时缩放
• performance.md — 过渡属性的指定、will-change 的用法