设计稿主色辅助色比例多少

本文目录导读：

1. 核心法则：60-30-10 法则
2. 典型场景与示例解析
3. 特殊情况：辅助色可能有多个
4. 设计工具中的实际操作建议（以Figma/Sketch为例）

这是一个很经典的设计问题。并没有一个绝对固定的“黄金比例”，因为设计风格（极简、活泼、商务）和品牌调性不同,比例会有所浮动。

业界普遍遵循一个60%-30%-10% 的配色法则（源于室内设计，同样适用于UI/平面）,这个法则能帮你快速建立起视觉平衡。

核心法则：60-30-10 法则

这是最主流、最稳妥的配色比例，适用于大多数UI/UX设计和平面设计。

• 60%：主色（中性色/背景色）

  • 作用： 奠定整体基调,提供视觉呼吸感。
  • 通常是： 白色、浅灰、米白、极深灰（用于暗色模式）。
  • 目的： 让用户的眼睛休息,不干扰主要内容。

• 30%：辅助色（次要色/大面积强调色）

  • 作用： 建立品牌识别度，平衡主色,构成主要视觉区域。
  • 通常是： 品牌主色（Primary Color）。
  • 应用： 导航栏、侧边栏背景、次要按钮、大型卡片、图标等。

• 10%：强调色（点睛色/行动色）

  • 作用： 吸引注意力，引导用户操作（CTA）。
  • 通常是： 品牌辅助色（Secondary/Accent Color，如橙色、蓝色、红色）,或者品牌色中的高亮色。
  • 应用： 主要按钮、链接、重要提示、促销标签、错误或成功提示。

典型场景与示例解析

下面以几个常见的设计类型为例,说明在实际中如何分配：

场景 1：B2B 后台管理界面（沉稳、专业）

• 主色 (60%)： 浅灰色或白色 (#F5F7FA 或 #FFFFFF)。
• 辅助色 (30%)： 深蓝色或深绿色（如 #1A73E8 或 #0D6EFD）,用于侧边栏和顶部导航。
• 强调色 (10%)： 明亮的蓝色或橙色（如 #E8A87C 或 #FF6B6B），用于“保存”、“提交”等核心按钮。

场景 2：电商或活动落地页（活泼、引导性强）

• 主色 (60%)： 白色或浅色背景。
• 辅助色 (30%)： 品牌的主色调（例如淘宝的橙色 #FF4400、或者爱彼迎的红色 #FF5A5F），用于Banner、大标题、或商品卡片的底色。
• 强调色 (10%)： 品牌辅助色（例如互补的蓝绿色 #00B8D4 或淡黄色），用于“立即购买”、“限时折扣”标签、小图标。

场景 3：极简主义/高端品牌（留白多、质感强）

• 主色 (70%-80%)： 大量留白或深灰色背景。
• 辅助色 (15%-20%)： 金色、暗红、墨绿等低饱和度色彩,用于Logo和关键元素。
• 强调色 (5%)： 一个非常鲜艳的颜色（如亮红或电光蓝），仅用于CTA按钮,非常克制。

特殊情况：辅助色可能有多个

很多品牌不止一个辅助色，如果你的辅助色有 2-3 个,可以这样分配：

• 主色： 60%（背景/基础色）
• 辅助色 1： 20%（品牌主色，用于导航/大区块）
• 辅助色 2： 10%（品牌辅助色，用于图标/次要卡片）
• 强调色： 10%（用于CTA按钮/高亮）

设计工具中的实际操作建议（以Figma/Sketch为例）

1. 建立色彩系统： 不要只设一个色值,应该创建：

   • Primary（主品牌色）：对应30%的辅助色。
   • Secondary（次要品牌色/强调色）：对应10%的强调色。
   • Neutral（中性色/背景色）：对应60%的主色。
   • System Colors（系统色）：成功、警告、错误、信息色（这些独立于比例，通常只占1-2%）。

2. 使用色板变体：

   • 为每种颜色建立 10个明度等级（50/100/200…900）。
   • 主色（30%区域）：多用 500 (中调) / 700 (深调)。
   • 强调色（10%区域）：多用 400/500 (中高调),保证与背景对比鲜明。
   • 背景色（60%区域）：多用 50/100 (极浅) 或 800/900 (极深)。

如果你没有特别的设计指导，可以直接套用这个比例：

• 60% 用于 背景/大面积中性色（白、灰、黑）
• 30% 用于 品牌主色（你的核心品牌色，用于导航、卡片底色）
• 10% 用于 强调色（一个对比鲜明、用于交互操作的亮色）

核心检查清单：

• [ ] 60%的区域色彩是否足够中性、不抢戏？（让用户专注内容）
• [ ] 30%的区域是否建立了品牌统一感？
• [ ] 10%的区域是否足够醒眼,能引导用户点击关键按钮？

标签： 主色比例 辅助色比例