设计工程
优秀的界面由许多微小的细节组成，用户永远不会逐一注意到它们。下面的每个细节都有其理由。在适用该理由的地方应用它，并研究你欣赏的界面为何给你那样的感觉。
为任务选择合适的技能
- 构建一个动画：
animate。 - 一个需要通过动效做出判断的差异对比：
review-animations。 - 对代码库的动效进行审计和规划：
improve-animations。应该开始动起来的地方：find-animation-opportunities。需要移除的动效：remove-animations。 - 多个元素一起运动：
choreograph。掉帧的动画：animation-performance。 - 网页上的拖拽、滑动和面板：
gestures。 - 用最差情况的数据对组件进行压力测试：
break-ui。 - 达到苹果级别的手势、弹簧动效、材质和排版：
apple-design。 - 在手机上感觉不对劲的Web应用：
mobile-native。 - 选择组件库：
pick-ui-library。 - 一个UI的多种方向：
prototype。
本技能涵盖其余部分：组件打磨，以及一个超越动效的UI审查。
能发现大部分问题的规则
- 决定它是否应该动画化。每天看到100次或更多，或由键盘启动的操作，不需要动画。
- 命名确切的属性。绝不要使用
transition: all。 - 进入和退出时使用
ease-out或强自定义曲线，例如cubic-bezier(0.23, 1, 0.32, 1)。绝不要在UI上使用ease-in。 - 保持UI动画在300毫秒以内。下拉菜单150至250毫秒；按压反馈100至160毫秒。
- 为每个可按压元素设置一个
:active状态，例如transform: scale(0.97)。 - 绝不要从
scale(0)进入。从scale(0.95)配合opacity: 0开始。 - 弹出框从其触发器缩放（Base UI 中使用
transform-origin: var(--transform-origin)）。模态框保持居中。 - 对于用户可以在中途再次触发的任何事物，使用过渡而非关键帧。它们会从当前值重新定位目标。
- 仅对
transform和opacity做动画。在 Motion 中，使用完整的transform字符串，而不是x和y简写。 - 通过更柔和而非完全禁止的动效来遵循
prefers-reduced-motion，并将悬停效果放在@media (hover: hover) and (pointer: fine)内部。
当无法通过代码判断感觉时，请说明情况。在开发者工具中以2到5倍时长或逐帧方式播放动画，在真实设备上测试手势，并在第二天重新审视。
审查格式
一次UI审查是一个markdown表格，包含“之前”、“之后”和“原因”三列，每个问题一行。绝不要将“之前：”和“之后：”写在单独的行上。
| 之前 | 之后 | 原因 |
|---|---|---|
transition: all 300ms | transition: transform 200ms ease-out | 明确命名属性；all 会动画化你本不打算动画的东西 |
transform: scale(0) | transform: scale(0.95); opacity: 0 | 现实世界中没有任何东西会凭空出现 |
按钮没有 :active 状态 | :active 上设置 transform: scale(0.97) | 按压需要即时反馈 |
参考
对于常见症状的快速修复（数字抖动、头像被压缩、“1个成员”），首先查看 references/ui-cheatsheet.md。
阅读 references/craft.md 以了解每条规则背后的原因和代码：动画决策框架、弹簧动效、组件原则（工具提示、模糊优于交叉淡入淡出、@starting-style）、变换、剪切路径模式（标签页、长按删除、图片揭示、比较滑条）、拖拽和手势处理、性能、无障碍、人们喜爱的组件原则、交错、调试以及审查清单。