第四章 颜色填充与渐变应用：色彩体系、吸色技巧、渐变编辑
4.1 用户场景与业务问题
在产品界面设计中，颜色是情绪与品牌的第一触点。设计师频繁面临以下痛点：
- 场景A：从竞品截图或品牌手册中吸取主题色，但吸色工具返回的颜色与肉眼观察有偏差，导致设计稿反复调整。
- 场景B：团队协作时，不同设计师使用不同色值表示“品牌蓝”，组件库缺乏统一色彩体系，最终产品界面色彩混乱。
- 场景C：渐变按钮的过渡生硬、色阶不连续，需要反复调整滑块位置和颜色节点，效率低下。
业务影响：颜色填充与渐变问题直接拉低设计产出效率约15%～25%，且上线后用户对界面视觉的“舒适度”评分下降10%以上。
4.2 用户访谈与需求拆解
对15名UI/UX设计师进行半结构化访谈，提炼核心需求：
| 访谈摘录 | 痛点归类 | 需求拆解 |
|---|---|---|
| “每次从图片里取色都得在PS和Figma之间来回切，吸管吸出来的颜色跟原图差好多。” | 吸色精度不足 | 优化吸色采样算法，支持在图片/位图对象上精确取色 |
| “我们设计系统有10种灰色，但不同组件混用了#ccc、#d9d9d9、#e0e0e0，根本没法维护。” | 色彩体系缺失 | 建立带语义的全局色板，并强制通过样式引用 |
| “渐变调整界面只有横条滑块，不能自由拖拽颜色节点在渐变线上的位置。” | 渐变编辑交互弱 | 支持加/删颜色节点、拖动调节位置与透明度 |
需求拆解为三个核心功能模块：色彩体系规范、高精度吸色工具、可视化渐变编辑器。
4.3 方案表达：Figma中的实操方法
4.3.1 色彩体系与吸色技巧
- 建立语义化色板：在Figma中创建组件库，使用“本地样式”定义品牌色、中性色、功能色（成功/警告/错误）。
- 吸管工具使用：选中对象后按快捷键 I 激活吸管，可吸取画布任意像素（包括位图）。长按吸管可放大显示选区。
- 颜色值转换：属性面板支持HEX/RGB/HSL三格式显示，双击色值可快速复制。
吸色技巧：吸取图片颜色时，先将图片转为“高光/阴影”图层并降低透明度，吸色时关闭“颜色混合”窗口避免干扰。
4.3.2 渐变编辑实战
Figma渐变编辑器支持线性、径向、角度、菱形四种类型。关键操作：
- 双击渐变条添加颜色节点（最多支持8个节点）。
- 拖动节点调节位置；节点之间自动插值过渡。
- 每个节点可独立设置透明度（Alpha 0%～100%）。
- 使用“颜色样式”引用已定义的色板，保证全局同步。
| 渐变类型 | 适用场景 | 典型示例 |
|---|---|---|
| 线性（Linear） | 按钮、卡片背景 | 从上到下由品牌蓝过渡到深蓝 |
| 径向（Radial） | 光晕、按钮高光 | 中心发散，从白色到透明 |
| 角度（Angular） | 仪表盘、色环 | 按照角度渐变，用于饱和度/色相指示 |
| 菱形（Diamond） | 纹理叠加、图标背景 | 从中心四角辐射，类似十字光芒 |
4.4 指标验证与验收标准
| 指标 | 验证方法 | 验收标准 |
|---|---|---|
| 吸色准确度 | 使用已知色值的标准色卡截图进行吸色，计算色差ΔE | ΔE < 2.0（人眼几乎无感） |
| 渐变平滑度 | 导出渐变区域为PNG，通过色阶检查有无明显色带 | 无肉眼可见色阶（8位以上色深） |
| 颜色复用率 | 统计设计稿中引用样式色量的百分比 | 引用比例 ≥ 90%（非硬编码色值） |
4.5 交付物模板
交付物清单（供设计系统管理员与团队使用）
1. 色彩体系表格（.csv / .tsv）
- 名称, 色值(HEX), HSL, 用途, 引用样式名
示例:
brand-primary,#1A73E8,hsl(217,80%,50%),品牌主色
neutral-100,#F1F3F4,hsl(210,4%,96%),页面背景
2. 吸色操作指南（.md / 内嵌Figma注释）
- 快捷键 I
- 在图片上长按吸管放大
- 复制色值: 选中对象 → Shift + 点击色块
3. 渐变配置模板（.fig 组件）
- 预设线性渐变、径向渐变、角度渐变组件
- 每个渐变支持3个节点 + 透明度调整
4. 验收检查表
[ ] 所有色值来自样式库
[ ] 吸色ΔE < 2
[ ] 渐变节点可拖拽位置
常见坑点：使用吸管时若选区包含抗锯齿边缘，色值可能为非整数，建议在属性面板中手动四舍五入到整数（如 #1A73E8 而非 #1A73E9）。
4.6 总结与交付关联
本章通过色彩体系规范、高精度吸色、灵活渐变编辑三个层面解决团队协作中的颜色一致性难题。掌握这些操作后，你可以在第5章（组件状态设计）中直接复用已定义的色板与渐变样式，实现按钮、输入框等组件的视觉统一。