设计教程
配色法则详解：如何运用 60-30-10 黄金比例设计完美空间
颜色代码表
2025-01-12
10 min 阅读
这是一个简单却极其有效的室内设计与 UI 设计法则。60% 的主色，30% 的辅助色，10% 的强调色。掌握了这个比例，你也能设计出平衡和谐的色彩方案。
在设计领域，无论是室内装潢、平面海报还是 App 界面设计，新手面临的最大挑战往往不是“选什么颜色”，而是“每种颜色该用多少”。面对成千上万种色彩组合，如何避免杂乱无章？这就是 60-30-10 法则 大显身手的地方。这个经典的比例原则能帮助你轻松构建出层次分明、视觉舒适且具有专业感的配色方案。
法则核心解析
60% 主色 (Primary Color)
这是画面的基调色，通常是中性色。它占据了画面的大部分空间，起到统一视觉、衬托其他色彩的作用。
- 室内设计： 墙壁、地板、大型地毯。
- UI 设计： 页面背景、大面积的留白、卡片底色。
- 男士西装： 外套和裤子的颜色。
30% 辅助色 (Secondary Color)
这是定义视觉个性的颜色。它通常与主色色相不同，但能形成和谐的对比。它的作用是增加画面的趣味性和层次感。
- 室内设计： 窗帘、沙发、床品、单椅。
- UI 设计： 顶部导航栏、侧边栏、卡片标题、非主要按钮。
- 男士西装： 衬衫的颜色。
10% 强调色 (Accent Color)
这是画面的点睛之笔，也是整个设计的灵魂。通常选择高饱和度、高亮度的颜色，用于吸引眼球和引导视线。
- 室内设计： 抱枕、插花、装饰画、台灯。
- UI 设计： Call to Action (CTA) 按钮、通知红点、超链接、图标高亮。
- 男士西装： 领带或口袋巾的颜色。
实际案例演示
案例一：现代电商 App
想象一个典型的电商应用界面：
- 60% 主色： 干净的白色背景 (#FFFFFF) 和浅灰色的分割线 (#F5F5F5)。这保证了商品图片和文字信息的清晰可读。
- 30% 辅助色： 深蓝色的顶部品牌栏、底部的 Tab 栏图标以及黑色的标题文字。这传达了品牌的专业性和信任感。
- 10% 强调色： 鲜艳的橙红色 (#FF5722)。用于“立即购买”、“加入购物车”按钮和价格标签。这个颜色在冷色调的背景中极其跳跃，能最大程度地引导用户点击。
案例二：北欧风客厅
- 60% 主色： 米白色或浅灰色的墙面与木色地板。营造温馨、明亮的基础氛围。
- 30% 辅助色： 灰蓝色的布艺沙发和深灰色的地毯。增加空间的重量感和质感。
- 10% 强调色： 姜黄色的抱枕和一束鲜花。瞬间点亮整个空间，打破沉闷。
进阶技巧：如何打破规则？
当然，60-30-10 只是一个指导原则，而非不可逾越的铁律。当你熟练掌握后，可以尝试更复杂的变体：
- 双强调色 (60-30-5-5)： 如果你觉得一种强调色太单调，可以将 10% 拆分为两种互补色（如 5% 的红和 5% 的蓝），用于区分不同类型的交互（如“确认”和“取消”）。
- 单色系配色 (Monochromatic)： 在 60-30-10 的框架下，不使用不同色相，而是使用同一色相的不同明度（Lightness）。例如：深蓝背景(60%) + 中蓝卡片(30%) + 亮蓝文字(10%)。这种搭配非常高级且耐看。
- 扩大辅助色 (60-40-0)： 在极简主义设计中，有时会完全去掉强调色，只保留主色和辅助色，通过排版和留白来引导视线。
总结： 60-30-10 法则的本质是平衡 (Balance)。它帮助我们在统一性（主色）与多样性（辅助色/强调色）之间找到最佳支点。下次当你觉得设计作品“看起来有点乱”或者“找不到重点”时，不妨试着套用一下这个比例，往往能药到病除。
