设计稿品牌色怎么延展应用

本文目录导读：

1. 第一步：构建完整的色彩家族
2. 第二步：制定应用规则（什么场景用什么色）
3. 第三步：具体场景下的应用技巧
4. 第四步：避免的常见误区
5. 一个可复用的品牌色延展模板

品牌色（主色）的延展是设计系统中最关键的环节之一，很多设计师拿到主色后不知道该怎么用，容易导致界面单调、缺乏层次感。

下面我将从色彩系统构建到具体应用规则，给你一套可执行的延展方案。

第一步：构建完整的色彩家族

不要只用单一的颜色,你需要为品牌色配备“亲属色”，形成一套色彩体系。

色相延展（主色的变体）

• 浅色/浅色调：用于大面积背景、卡片底色、分割线，通常在品牌色基础上叠加白色（或降低饱和度、提高明度）。
• 深色/深色调：用于深色模式、按压状态、重要的强调文字，在品牌色基础上叠加黑色（或降低明度、增加饱和度）。
• 纯色/标准色：用于核心按钮、关键图标、品牌符号。
• 辅助色：用于信息层次区分（如成功绿、警示橙、危险红、信息蓝），建议主色偏冷时，辅助色可以偏暖一些，反之亦然。

灰度延展（文字与界面结构）

• 极黑（#1A1A1A）：主要文字标题，正文。
• 深灰（#333333 / #595959）：次级文字。
• 中灰（#999999）：禁用状态、占位符、说明文字。
• 浅灰（#D9D9D9 / #F0F0F0）：边框、分割线。
• 极白（#FFFFFF）：页面底色、卡片底色。

——这一步的目标是： 建立6-10个色阶的品牌色家族（从最浅到最深），以及一套完整的灰色体系。

第二步：制定应用规则（什么场景用什么色）

这是防止设计混乱、保持视觉一致性的核心。

品牌色 = 行动点与品牌触点

• 按钮：主按钮用品牌色（或品牌色的深色变体用于悬停状态）。
• 链接：关键链接（如“查看更多”、“立即购买”）用品牌色。
• 图标/标签：代表品牌的核心图标、功能图标（如购物车、收藏）用品牌色。
• 品牌元素：Logo、启动页、海报、主视觉。切忌：不要把品牌色刷满整个页面，会显得刺眼且廉价。

延展色 = 信息层级与状态

• 成功/完成：绿色
• 警告/错误：橙色/红色
• 信息/提示：蓝色（如果品牌色不是蓝色）
• 中性/普通：灰色

灰度色 = 界面骨架与阅读体验

• 背景：最浅的灰色（#F5F5F5 或 #FAFAFA）或白色。
• 卡片：白色（#FFFFFF）。
• 文字 (按权重)：极黑 > 深灰 > 中灰。
• 分割线：浅灰。
• 禁用状态：中灰色（文字和背景都变灰）。

冷暖规则

• 暖色品牌（如红、橙、黄）：在需要表达激情、促销、紧迫感时使用，界面其余部分多用冷灰（带蓝相的灰）或白色做背景以平衡。
• 冷色品牌（如蓝、青、紫）：在需要表达专业、信赖、稳定时使用，可少量使用暖色（如橙色按钮）做对比或引导。

第三步：具体场景下的应用技巧

按钮状态设计

• 默认：品牌色（60%-80%饱和度）。
• Hover/悬停：品牌色的深色变体（如 brand-color-700）。
• Active/点击：品牌色的更深色变体（如 brand-color-900）。
• Disabled/禁用：品牌色变浅（如 brand-color-200）或整体变灰。

导航与布局

• 顶部导航栏：可以用品牌色做背景（强调品牌感），配合白色文字。或：用白色做背景，品牌色用于导航激活状态（下划线/高亮）。
• 左侧栏菜单：通常用深色或白色，选中状态使用品牌色（文字/图标变色，或背景色块变品牌色）。

信息层级

• 黑色/深灰色（不要用品牌色，除非是特殊标题）。
• 深灰色。
• 次要文字/提示：中灰色。
• 高亮/重点：品牌色（加粗或加下划线，或背景色块）。

数据可视化

• 折线图/柱状图：品牌色作为第一条数据（主要指标），辅助色作为第二条数据，灰色作为基础数据或对比数据。
• 饼图/环形图：品牌色作为核心部分，其余用渐变色或辅助色。

第四步：避免的常见误区

1. 滥用品牌色：整个页面全是主色，导致视觉疲劳、阅读困难、分不清主次。品牌色占比建议在10%-25%。
2. 颜色太多：一套设计不超过3-4种主色（包括品牌色和对比色），加上辅助色，过犹不及。
3. 忽略对比度：品牌色+白色文字不一定能通过WCAG无障碍标准，使用深色变体作为按钮背景时，要确保白色文字清晰可读；浅色变体作为背景时，深色文字也要清晰。
4. 不考虑深色模式：品牌色在深色背景上会显得更亮，需要为深色模式准备一套微调过的色彩（通常品牌色饱和度降低，明度降低，或使用其浅色变体做文字/图标）。

一个可复用的品牌色延展模板

假设品牌色是 #3366FF (蓝)

• 主色：#3366FF → 按钮、链接、核心图标
• 浅色1：#E0E7FF → 卡片/模块的背景填充
• 浅色2：#F0F4FF → 页面/区域的背景
• 深色1：#1A40CC → 按钮Hover状态、深色模式下的强调文字
• 深色2：#002099 → 按钮Active状态、深色模式下的主按钮背景
• 成功绿：#22C55E
• 警告橙：#F59E0B
• 错误红：#EF4444
• 信息蓝：#3B82F6 (如果品牌色不是蓝)
• 中性灰：#F8FAFC, #E2E8F0, #CBD5E1, #94A3B8, #64748B, #475569, #1E293B (7个灰度层级)

无论你采用什么方案，请务必建立一个色彩代码规范文档（Figma组件、Sketch样式、或CSS变量），确保团队所有成员遵循同一套规则。

标签： 品牌色 延展应用