规范化 (normalize)

规范化（normalize）

概述

normalize 是确保界面符合设计系统标准的技能。它的核心是：让所有页面和组件保持一致。

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

“这个按钮颜色怎么和那个不一样？”
“这个间距怎么忽大忽小？”
“这个字体怎么不统一？”

normalize 就是解决这些的。

为什么需要规范化

1. 一致性体验

用户在不同页面应该获得一致的体验

✅ 统一的视觉语言
❌ 每个页面像不同的产品

2. 效率提升

使用设计系统可以：
- 开发速度提升 50%+
- 维护成本降低 30%+
- 新功能接入更快

3. 品牌统一

设计系统 = 品牌语言

一致的设计 = 专业的形象

规范化维度

1. 颜色

检查点：
- [ ] 品牌色使用正确？
- [ ] 语义色使用正确？（成功/警告/错误/信息）
- [ ] 中性色系一致？
- [ ] 深色/浅色模式颜色正确？

2. 字体

检查点：
- [ ] 字体家族正确？
- [ ] 字阶系统一致？
- [ ] 字重使用正确？
- [ ] 行高/字间距一致？

3. 间距

检查点：
- [ ] 使用间距 token？
- [ ] 组件内边距一致？
- [ ] 组件间距一致？
- [ ] 页面边距一致？

4. 组件

检查点：
- [ ] 按钮样式一致？
- [ ] 输入框样式一致？
- [ ] 卡片样式一致？
- [ ] 模态框样式一致？

实践案例

案例 1：按钮规范化

问题：项目中按钮有 5 种不同的样式

normalize 后：

主按钮：
- 背景：品牌色
- 圆角：8px
- 高度：44px
- 字体：16px/600

次按钮：
- 背景：透明
- 边框：1px 品牌色
- 其他：同上

文字按钮：
- 无背景/边框
- 品牌色文字
- 下划线 hover

危险按钮：
- 背景：红色
- 其他：同主按钮

案例 2：间距规范化

问题：项目中用了 20+ 种不同的 padding

normalize 后（4px 基础）：

xs: 4px
sm: 8px
md: 16px
lg: 24px
xl: 32px
2xl: 48px
3xl: 64px

使用：
- 按钮内边距：sm md
- 卡片内边距：md lg
- 页面边距：lg xl

案例 3：颜色规范化

问题：项目中红色有 8 种

normalize 后（语义化）：

基础色：
- primary: #007AFF
- secondary: #5856D6
- success: #34C759
- warning: #FF9500
- error: #FF3B30
- info: #5AC8FA

使用语义：
- 成功：success
- 警告：warning
- 错误：error
- 信息：info

Design Token

{
  "color": {
    "primary": "#007AFF",
    "success": "#34C759",
    "warning": "#FF9500",
    "error": "#FF3B30"
  },
  "spacing": {
    "xs": "4px",
    "sm": "8px",
    "md": "16px",
    "lg": "24px"
  },
  "font": {
    "family": "Inter",
    "size": {
      "sm": "12px",
      "md": "14px",
      "lg": "16px"
    }
  },
  "border": {
    "radius": {
      "sm": "4px",
      "md": "8px",
      "lg": "12px"
    }
  }
}

速查卡片

规范化维度

颜色
字体
间距
组件

核心原则

使用 token
语义化命名
全局一致

好处

一致体验
效率提升
品牌统一

与其他技能

polish - 打磨细节
distill - 精简
frontend-design - 设计基础

查看源文件: GitHub原始文件