策略
- 主色优先
- 功能性色彩
- 中性色层次
- 强调色点缀
添加色彩 (colorize)
添加色彩（colorize）
Section titled “添加色彩（colorize）”colorize 是为单调的设计添加战略性色彩的技能。它的核心是：让灰色/单调的界面变得有活力，同时保持专业和可用性。
作为设计师，你可能遇到过：
- “界面太灰了”
- “看起来很无聊”
- “没有视觉焦点”
colorize 就是解决这些的。
为什么需要添加色彩
Section titled “为什么需要添加色彩”1. 色彩引导注意力
Section titled “1. 色彩引导注意力”用户的眼睛会自然被颜色吸引：
✅ 正确使用：- 重要按钮用品牌色- 状态用语义色- 焦点用对比色
❌ 错误使用：- 所有地方都是颜色- 颜色没有意义- 太花哨2. 色彩传达信息
Section titled “2. 色彩传达信息”颜色 = 信息：
- 红色 = 错误/危险- 绿色 = 成功/安全- 黄色 = 警告/注意- 蓝色 = 信息/链接3. 色彩增加个性
Section titled “3. 色彩增加个性”产品个性：
- 彩色 = 活泼/年轻- 灰色 = 专业/低调- 品牌色 = 独特/记忆点1. 主色优先
Section titled “1. 主色优先”从哪里开始：
1. 确定主色（品牌色）2. 主色用在核心场景3. 逐步扩展到其他场景
主色应用：- 主要按钮- 关键指标- Logo2. 功能性色彩
Section titled “2. 功能性色彩”语义色系统：
成功：#10B981（绿色）警告：#F59E0B（黄色）错误：#EF4444（红色）信息：#3B82F6（蓝色）
使用场景：- 表单验证- 状态显示- 提示信息3. 中性色层次
Section titled “3. 中性色层次”灰色调（不单调）：
- 标题：#111827（接近黑色）- 正文：#374151（深灰）- 次要：#6B7280（中灰）- 辅助：#9CA3AF（浅灰）- 背景：#F3F4F6（淡灰）4. 强调色
Section titled “4. 强调色”突出重点：
1. 用在： - 促销标签 - 新功能提示 - 关键数据
2. 不要： - 到处使用 - 掩盖主色 - 随机使用主按钮：- 背景：品牌色- 文字：白色- hover：深色
次按钮：- 背景：透明- 边框：品牌色- hover：浅色背景状态颜色：
- 在线：绿色- 离线：灰色- 忙碌：红色- 离开：黄色数据可视化：
- 正向：绿色- 负向：红色- 中性：灰色/蓝色- 趋势：渐变色4. 空状态
Section titled “4. 空状态”空状态插画：
- 单色 → 品牌色点缀- 灰色 → 彩色强调- 无聊 → 有趣红色：- 热情/紧迫- 危险/错误- 促销/折扣
橙色：- 活力/友好- 警告/注意- 创意
黄色：- 快乐/乐观- 警告- 明亮
绿色：- 自然/生长- 成功/安全- 环保
蓝色：- 专业/信任- 科技/冷静- 可靠
紫色：- 奢华/创意- 神秘- 高端选择依据：
1. 行业 - 科技 → 蓝色 - 金融 → 蓝色/绿色 - 食品 → 橙色/红色 - 环保 → 绿色
2. 受众 - 年轻 → 活泼 - 专业 → 稳重
3. 差异化 - 竞品分析 - 独特性案例 1：仪表盘色彩
Section titled “案例 1：仪表盘色彩”问题：数据太多，看起来很乱
优化：
- 正向数据：绿色 + 上箭头- 负向数据：红色 + 下箭头- 中性数据：蓝色- 背景：浅灰色- 卡片：白色 + 阴影案例 2：表单色彩
Section titled “案例 2：表单色彩”问题：表单看起来很无聊
优化：
- 输入框：浅灰边框- focus：蓝色边框 + 阴影- 错误：红色边框 + 红色文字- 成功：绿色边框 + 绿色文字- 必填星号：红色案例 3：空状态色彩
Section titled “案例 3：空状态色彩”问题：空状态太灰了
优化：
- 插画：品牌色点缀- 文字：深灰色- 按钮：品牌色- 图标：彩色色彩检查清单
Section titled “色彩检查清单”- 主色用在核心场景？
- 语义色有明确含义？
- 灰色有层次？
- 颜色不冲突？
- 对比度足够？
- 不超过 3 种主色？
- 同类场景用同类颜色？
- 颜色含义一致？
- 全局使用统一色值？
应用
- 按钮
- 状态
- 数据
- 空状态
原则
- 战略性使用
- 功能性优先
- 不要过度
检查
- 有层次？
- 一致？
- 可访问？
- normalize - 规范化色彩
- bolder - 增强色彩
- quieter - 降低色彩
- polish - 打磨
查看源文件: GitHub原始文件