{ "_description": "本文件由 data/ 生成：请改动来源文件，不要改这里。各字段的证据边界见接入指南。", "schemaVersion": "1.0.0", "kind": "entry", "locale": "zh-CN", "id": "sixty-thirty-ten", "name": { "zh": "60-30-10 配色法则", "en": "60-30-10 Rule" }, "page": "https://designvocabulary.com/zh/entries/sixty-thirty-ten/", "self": "https://designvocabulary.com/zh/entries/sixty-thirty-ten.json", "alternates": { "zh-CN": "https://designvocabulary.com/zh/entries/sixty-thirty-ten.json", "en": "https://designvocabulary.com/en/entries/sixty-thirty-ten.json" }, "site": { "catalogSchemaVersion": "0.1.0", "entries": 158, "index": "https://designvocabulary.com/zh/entries/index.json", "query": "https://designvocabulary.com/api/query?lang=zh", "guide": "https://designvocabulary.com/zh/agents/", "llms": "https://designvocabulary.com/llms.txt" }, "provenance": { "sourceBacked": [ "entry.definition" ], "editorial": [ "entry.boundary", "entry.signature", "entry.when", "entry.when_not", "entry.tradeoff", "entry.comparison", "entry.rules", "entry.relations", "entry.implementationNote", "entry.principle" ], "scope": "定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。", "editorialStatus": "drafted", "specimenData": "fictional", "specimenNote": "示例为原创虚构界面；定义附来源，用法与配方为编辑建议。", "sources": [ { "id": "sixtythirtyten-homesandgardens", "url": "https://www.homesandgardens.com/advice/60-30-10-rule", "title": "Homes & Gardens · The 60-30-10 rule – how to use it to create a balanced color palette", "checkedAt": "2026-10-20", "archive": { "status": "pending", "confirmed": false, "url": null, "capturedAt": null, "lookupUrl": "https://web.archive.org/web/20261020*/https://www.homesandgardens.com/advice/60-30-10-rule" } }, { "id": "sixtythirtyten-logrocket", "url": "https://blog.logrocket.com/ux-design/60-30-10-rule", "title": "LogRocket Blog · Master UI design: Enhance aesthetics with the 60-30-10 rule", "checkedAt": "2026-10-20", "archive": { "status": "pending", "confirmed": false, "url": null, "capturedAt": null, "lookupUrl": "https://web.archive.org/web/20261020*/https://blog.logrocket.com/ux-design/60-30-10-rule" } } ], "lists": [], "ordered": false, "listDisclaimer": "席位号是编辑位置，不是评分、排名或人气统计；清单未收满时保持原样，不补足。" }, "entry": { "id": "sixty-thirty-ten", "type": "principle", "name": { "zh": "60-30-10 配色法则", "en": "60-30-10 Rule" }, "aliases": [ "60-30-10 Color Rule", "60/30/10 Rule", "Dominant, Secondary and Accent Colors", "60-30-10 法则", "主色辅色点缀色比例" ], "granularity": "component", "intents": [ "organize-content", "express-brand" ], "tags": [ "配色", "比例", "主色", "强调色", "室内设计" ], "definition": "一条来自室内设计的配色经验法则：把一个空间或画面里的颜色按大约 60%、30%、10% 的面积分成三个角色——主色铺满最大的面积并定下基调，辅色用在次一级的面积上形成对比，强调色只占一小部分、用来点出少数需要被看到的地方。它规定的是各颜色占用的面积比例，而不是该选哪几种颜色。", "boundary": "这是一条行业惯例，不是经过实验验证的知觉规律：本词条找到的来源都把它称作「窍门」或「指南」，没有给出发明者、年代或任何关于这组比例更悦目、更易用的测量证据；60、30、10 这三个数字也只是好记的整数，不应被当作需要精确达到的目标。它与焦点律、视觉层级相关但层次不同：后两者解释「为什么少量的不同会被先看到」，本法则只是把这一点落实为一条面积分配的经验口诀。它也不涉及对比度——三种颜色按比例分配之后，文字与控件是否看得清，仍须按对比度要求单独检查；强调色也不能成为传达状态或含义的唯一通道。", "signature": [ "画面里能分辨出一种占据大部分面积的主色", "第二种颜色用在明显较少但仍成片的区域", "第三种颜色只出现在少数几处需要被注意的地方" ], "when": [ "需要从零搭一套配色，又缺少一个起步的分配思路", "已有的配色里各颜色面积相近，画面显得没有主次", "强调色被到处使用，已经点不出真正重要的元素" ], "when_not": [ "把 60、30、10 当成需要量算达标的精确数值", "以「符合 60-30-10」作为配色好用或无障碍的证明", "强调色是唯一能让用户分辨状态或含义的线索" ], "tradeoff": "一条好记的面积口诀让配色讨论有了共同起点，也让强调色因为稀少而保持效力；代价是它只回答「各用多少」，不回答「选哪几种、对比够不够」，照搬数字反而可能让人误以为配色问题已经解决。", "comparison": { "focus": "在主色、辅色、强调色之间分配面积", "mechanism": "按约 60%、30%、10% 的面积划分三种颜色角色", "cost": "行业惯例而非实证结论，也不检查对比度与选色本身" }, "sources": [ { "id": "sixtythirtyten-homesandgardens", "title": "Homes & Gardens · The 60-30-10 rule – how to use it to create a balanced color palette", "url": "https://www.homesandgardens.com/advice/60-30-10-rule", "claim": "这篇发表于 2021 年 10 月 8 日的室内设计文章（作者 Ruth Doherty）把 60-30-10 称为一种经典的室内设计配色窍门：60% 的主色通常用在墙面等最大的面积上，30% 的颜色用量约为主色的一半、见于单椅、窗帘或一面主题墙，10% 的强调色出现在靠垫、摆件、灯具或画作上，并说明它只是一条帮助配色的指南。本词条据此说明该法则的出处是室内设计惯例；文章没有给出来源年代或实证依据。", "checkedAt": "2026-10-20", "archive": { "lookupUrl": "https://web.archive.org/web/20261020*/https://www.homesandgardens.com/advice/60-30-10-rule", "status": "pending", "checkedAt": "2026-10-20T07:59:20.538Z", "error": "availability-request-failed", "jobId": "spn2-d4d3606b94b190f7cdd606fc25896b56a82fe00d" } }, { "id": "sixtythirtyten-logrocket", "title": "LogRocket Blog · Master UI design: Enhance aesthetics with the 60-30-10 rule", "url": "https://blog.logrocket.com/ux-design/60-30-10-rule", "claim": "这篇 2023 年 10 月 10 日的界面设计文章（作者 Himanshu Raikwar）把该法则搬到界面中：60% 的主色多用于背景等大面积区域，30% 的辅色用于侧栏或次要区块，10% 的强调色克制地用于行动号召按钮等关键元素，并明确说它是一条指南而不是硬性规定，比例可以适度调整。文章本身没有引用研究或数据；本词条据此说明该法则在界面设计中的常见用法，同时把它定位为经验做法。", "checkedAt": "2026-10-20", "archive": { "lookupUrl": "https://web.archive.org/web/20261020*/https://blog.logrocket.com/ux-design/60-30-10-rule", "status": "pending", "checkedAt": "2026-10-20T07:59:21.190Z", "error": "availability-request-failed", "jobId": "spn2-1a5e901052232835061eabb2a3ff7d728481e291" } } ], "relations": [ { "target": "focal-point", "kind": "composes_with", "condition": "强调色被用来引出一屏上的主要动作", "reason": "强调色之所以有效，是因为它稀少、与周围形成对比；这正是焦点律所描述的显著性来源，面积越小的强调越容易成为焦点。", "basis": "editorial" }, { "target": "visual-hierarchy", "kind": "informs", "condition": "用颜色面积来区分界面的主次层级", "reason": "主色、辅色、强调色的面积递减，可以作为层级在颜色维度上的一种粗略落实；层级的其余维度仍需由尺寸、位置与字重承担。", "basis": "editorial" }, { "target": "contrast-legibility", "kind": "composes_with", "condition": "三种颜色要承载文字或控件", "reason": "面积比例不保证可读性：主色背景上的文字、强调色按钮上的标签都仍须单独达到对比度要求。", "basis": "editorial" }, { "target": "perceivable-alternatives", "kind": "composes_with", "condition": "强调色被用来标出状态、错误或选中项", "reason": "颜色不是所有人都能分辨的通道；强调色标出的含义还应由文字、图标或形状同时传达。", "basis": "editorial" }, { "target": "golden-ratio", "kind": "related", "condition": "讨论为什么采用某组固定比例", "reason": "两者都是以数字形式流传的构图惯例，常被当作「好看的保证」引用；本词表对两者都只把它们当作可用的约定，而不是美学或可用性上的证明。", "basis": "editorial" } ], "rules": [ { "when": "向团队说明配色为什么这样分配", "instruction": "把 60-30-10 说成一个起步的经验口诀，不要说成经过验证的规律，也不要要求面积精确达到这三个数值。", "strength": "recommend", "basis": "editorial" }, { "when": "强调色被用在越来越多的元素上", "instruction": "收回到少数真正需要被先看到的元素上；强调色一旦铺开，就不再起强调作用。", "strength": "recommend", "basis": "editorial" }, { "when": "按比例分配完颜色后准备交付", "instruction": "另外检查文字与控件的对比度，并确认强调色传达的含义不只依赖颜色；面积比例本身不能替代这两项检查。", "strength": "must", "basis": "editorial" } ], "principle": { "evidenceType": "室内设计行业的经验惯例，后被界面设计沿用；本词条未找到支持这组比例的实证研究", "limit": "本词条不主张 60、30、10 是最优比例，不核实该法则的起源年代，也不涉及具体选色；它只说明这是一条便于记忆的面积分配口诀，对比度与色觉无障碍须另行检查。" }, "demo": null, "version": "0.1.0", "editorialStatus": "drafted", "requirements": [], "demoCapabilities": [], "implementationNote": "本词条尚无可操作示例；插画为编辑示意，用一个虚构的 FIELDNOTES 页面和一条比例色带说明三种颜色的面积分配，不代表这组比例经过验证。应用到产品前仍须检查文字与控件的对比度，并确认强调色不是唯一的含义线索。", "image": { "src": "/images/sixty-thirty-ten.webp", "alt": "一张配色示意图：左侧是一个虚构的 FIELDNOTES 网页，米色背景铺满大部分面积，石板蓝的侧栏与卡片占据次一级的面积，只有一个陶土色按钮和一处小标记使用强调色，文字以灰色占位条表示；右侧一条横向色带按约 60%、30%、10% 的长度依次排列米色、石板蓝和陶土色三段。" }, "searchTerms": [ "color scheme", "proportion", "dominant color", "accent color", "interior design" ] } }