最终打磨 (polish)

最终打磨（polish）

概述

polish 是发布前的最终打磨技能。它的核心是：把”做完”变成”做好”，把”可用”变成”极致”。

作为设计师/开发者，你可能遇到过：

“总觉得哪里不对，但说不上来”
“看起来还行，但不够精致”
“用户说好用，但不够惊艳”

polish 就是解决这些的。

为什么需要打磨

1. 细节决定品质

用户会注意到：
- 按钮的微妙变化
- 动画的流畅程度
- 文字的细微差别

这些细节：
- 单个看很小
- 整体看很重要
- 决定产品品质感

2. 打磨是区分点

普通产品：
- 功能可用
- 设计合格
- 体验尚可

优秀产品：
- 功能可用
- 设计精致
- 体验极致

差异就在"打磨"

3. 打磨有方法

打磨不是随意调整：
- 有检查清单
- 有优先级
- 有方法论

打磨是系统性工作

打磨维度

1. 微交互

微交互是用户与界面互动的细微反馈：

按钮交互：

基础：hover / active / disabled

打磨后：
- hover：背景色变化
- active：按压效果（scale: 0.98）
- loading：加载动画
- success：成功图标

输入交互：

基础：输入文字

打磨后：
- focus：边框高亮
- valid：绿色勾选
- invalid：红色提示
- typing：实时反馈

卡片交互：

基础：静态展示

打磨后：
- hover：轻微上浮 + 阴影
- click：按压效果
- enter：加载内容

2. 动画打磨

过渡时间：

太快：突兀
太慢：拖沓

推荐：
- 微交互：150-200ms
- 页面切换：200-300ms
- 复杂动画：300-500ms

缓动函数：

线性：linear（机械感）
标准：ease-in-out（自然）

推荐：
- 进入：ease-out
- 退出：ease-in
- 强调：ease-in-out

动画属性：

性能优先级：
1. transform（ GPU 加速）
2. opacity（ GPU 加速）
3. color（ 需要重绘）
4. layout（ 性能最差）

✅ 正确：
transform: translateY(-4px)

❌ 错误：
margin-top: -4px

3. 间距微调

检查点：

- 元素之间间距一致？
- 组件内边距统一？
- 页面边距合理？
- 跨组件间距有规律？

微调原则：

基础间距单位：4px

4px：紧凑元素
8px：关联元素
16px：分隔元素
24px：区块分隔
32px：区块间距

4. 颜色微调

检查点：

- 品牌色使用一致？
- 语义色（成功/警告/错误）统一？
- 灰色调层次分明？
- 深色模式适配？

微调原则：

品牌色：
- 主色：品牌核心色
- 浅色：主色 10-20% 透明度
- 深色：主色加深

语义色：
- 成功：#10B981
- 警告：#F59E0B
- 错误：#EF4444
- 信息：#3B82F6

5. 字体微调

检查点：

- 标题层级分明？
- 正文字号舒适？
- 行高适合阅读？
- 字重有层次？

微调原则：

标题：Bold / SemiBold
正文：Regular / Medium
辅助：Light / Regular

字号差：
- 至少 2px
- 越大差越大

6. 边界情况

空状态：

❌ 之前：空白 + "暂无数据"
✅ 之后：插画 + 说明 + 行动按钮

加载状态：

❌ 之前：空白或转圈
✅ 之后：骨架屏 + 加载内容

错误状态：

❌ 之前：红色文字 + "出错了"
✅ 之后：友好提示 + 解决建议 + 重试按钮

断网状态：

❌ 之前：无提示
✅ 之后：友好提示 + 自动重试 + 手动刷新

打磨流程

第一步：全面检查

按照清单逐项检查：

1. 交互
   - [ ] 按钮 hover / active / disabled
   - [ ] 输入框 focus / valid / invalid
   - [ ] 卡片 hover / click

2. 动画
   - [ ] 过渡时间合适
   - [ ] 缓动函数自然
   - [ ] 性能良好

3. 间距
   - [ ] 元素间距一致
   - [ ] 组件内边距统一

4. 颜色
   - [ ] 品牌色一致
   - [ ] 语义色统一

5. 边界
   - [ ] 空状态友好
   - [ ] 加载状态清晰
   - [ ] 错误状态可恢复

第二步：逐项优化

优先级排序：

P0 - 必须修复
- 影响使用的 bug
- 明显的视觉问题

P1 - 应该优化
- 不够精致的细节
- 可以更好的交互

P2 - 锦上添花
- 微调
- 增强

第三步：整体回顾

最后检查：

1. 整体风格一致？
2. 细节精致？
3. 体验流畅？
4. 无遗漏问题？

实践案例

案例 1：按钮打磨

打磨前：

.btn {
  background: #007AFF;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
}

打磨后：

.btn {
  background: #007AFF;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn:hover {
  background: #0056CC;
  transform: translateY(-1px);
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

案例 2：表单打磨

打磨前：

标签：用户名
输入框：纯白背景
错误：红色文字

打磨后：

标签：用户名 *（14px，灰色）
输入框：
  - 默认：灰色边框 #E5E5E5
  - focus：蓝色边框 #007AFF + 阴影
  - valid：绿色边框 #10B981
  - invalid：红色边框 #EF4444
  - 圆角：8px
  - 内边距：12px 16px

错误提示：
  - 红色文字 #EF4444
  - 14px
  - 字段下方显示
  - 带图标

案例 3：卡片打磨

打磨前：

白色背景
黑色文字
静态

打磨后：

白色背景
投影：0 2px 8px rgba(0,0,0,0.08)
圆角：12px
内边距：20px

hover 效果：
- 上浮：translateY(-4px)
- 阴影增强：0 8px 24px rgba(0,0,0,0.12)
- 过渡：0.2s ease

打磨检查清单

交互

按钮 hover / active / disabled 效果
输入框 focus / valid / invalid 状态
卡片 hover / click 效果

动画

过渡时间 150-300ms
缓动函数自然
性能良好

间距

元素间距一致（4px 系统）
组件内边距统一
页面边距合理

颜色

品牌色一致
语义色统一
灰色调有层次

边界

空状态友好
加载状态清晰
错误状态可恢复
断网状态处理

与工作流

Impeccable 工作流：

audit（审计）→ critique（评审）→ polish（打磨）→ ship（发布）

audit：技术问题
critique：体验问题
polish：细节问题

速查卡片

打磨维度

微交互
动画
间距
颜色
边界情况

交互细节

hover / active / disabled
focus / valid / invalid
骨架屏 / 加载动画

时间

微交互：150-200ms
页面切换：200-300ms
复杂动画：300-500ms

优先级

P0: 影响使用 P1: 影响体验 P2: 锦上添花

与其他技能

audit - 技术质量审计
critique - UX 评审
distill - 精简
normalize - 规范化

查看源文件: GitHub原始文件