本文目录导读：
这是一个很经典的设计问题。并没有一个绝对固定的“黄金比例”，因为设计风格（极简、活泼、商务）和品牌调性不同,比例会有所浮动。
业界普遍遵循一个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为例）
-
建立色彩系统： 不要只设一个色值,应该创建：
- Primary（主品牌色）：对应30%的辅助色。
- Secondary（次要品牌色/强调色）：对应10%的强调色。
- Neutral（中性色/背景色）：对应60%的主色。
- System Colors（系统色）：成功、警告、错误、信息色（这些独立于比例，通常只占1-2%）。
-
使用色板变体：
- 为每种颜色建立 10个明度等级（50/100/200…900）。
- 主色（30%区域）：多用 500 (中调) / 700 (深调)。
- 强调色（10%区域）：多用 400/500 (中高调),保证与背景对比鲜明。
- 背景色（60%区域）：多用 50/100 (极浅) 或 800/900 (极深)。
如果你没有特别的设计指导，可以直接套用这个比例：
- 60% 用于 背景/大面积中性色（白、灰、黑）
- 30% 用于 品牌主色（你的核心品牌色，用于导航、卡片底色）
- 10% 用于 强调色（一个对比鲜明、用于交互操作的亮色）
核心检查清单：
- [ ] 60%的区域色彩是否足够中性、不抢戏？（让用户专注内容）
- [ ] 30%的区域是否建立了品牌统一感？
- [ ] 10%的区域是否足够醒眼,能引导用户点击关键按钮？
版权声明：除非特别标注，否则均为本站原创文章，转载时请以链接形式注明文章出处。
