视觉层级

本词条尚无可操作示例；插画为编辑示意，用对照的方式展示有层级与无层级的差别，不代表已验证的实现。应用到产品前仍须确认标记结构与视觉次序一致，并对降级后的文本单独验证对比度。

{
  "evidenceType": "源自格式塔知觉理论的组织原则，在设计实践中被广泛沿用；本词条不引用具体的注视测量数据",
  "limit": "本词条不规定任何具体的字号比例或对比度数值，也不主张某一种层级安排普遍最优；它只说明层级由相对差异造成，且必须与标记结构一致。"
}

{
  "id": "visual-hierarchy",
  "type": "principle",
  "name": {
    "zh": "视觉层级",
    "en": "Visual Hierarchy"
  },
  "aliases": [
    "Visual Order",
    "Information Hierarchy",
    "视觉次序",
    "信息层级"
  ],
  "granularity": "experience",
  "intents": [
    "organize-content",
    "read-content"
  ],
  "tags": [
    "层级",
    "对比",
    "尺寸",
    "分组",
    "注意力"
  ],
  "definition": "通过尺寸、粗细、颜色、对比与分组的差异，让页面上的元素呈现出可感知的轻重次序，使读者先看到最重要的部分，再依次看到其余部分。",
  "boundary": "视觉层级说的是元素之间的相对关系，不是任何单个元素的绝对取值：把标题调大并不自动建立层级，只有当它与周围元素的差异足够明显时才成立。它也不等于信息架构：信息架构决定内容如何分类与嵌套，视觉层级决定同一屏上谁先被看到。它必须与结构层级一致——视觉上像标题的东西也应当在标记上是标题，否则读屏用户与视觉用户会得到两套不同的次序。当页面上所有元素都被强调时，层级就消失了；强调是一种相对资源，用得越多越不值钱。",
  "signature": [
    "相邻层级之间有明显可见的差异，而不是细微差别",
    "同一层级的元素在尺寸、颜色与间距上保持一致",
    "被强调的元素数量很少，强调没有被稀释"
  ],
  "when": [
    "一屏上同时存在多类信息，读者需要知道从哪里看起",
    "页面有一个明确的主要动作，它必须比其余元素更突出",
    "内容需要被快速扫读而不是逐字阅读"
  ],
  "when_not": [
    "把所有元素都加粗放大，结果彼此抵消、谁都不突出",
    "视觉上的次序与标记结构不一致，读屏用户得到另一套顺序",
    "用层级把不利信息压到几乎不可见，而它本应被看到"
  ],
  "tradeoff": "强调少数元素能显著加快扫读，代价是强调的总量有限：每多强调一处，原本突出的部分就弱一分，最终所有元素回到同一水平。",
  "comparison": {
    "focus": "决定同一屏上谁先被看到",
    "mechanism": "尺寸、粗细、颜色、对比与分组上的可见差异",
    "cost": "强调总量有限，且必须与标记结构保持一致"
  },
  "sources": [
    {
      "id": "visualhierarchy-wikipedia",
      "title": "Wikipedia · Visual hierarchy",
      "url": "https://en.wikipedia.org/wiki/Visual_hierarchy",
      "claim": "该条目说明视觉层级在格式塔心理学中描述视野内某些元素比其他元素更突出、从而形成被感知的重要性次序；该次序由感知场中各形态之间的视觉对比造成，与周围对比最强的对象最先被人脑识别；条目还指出这一术语最常用于设计领域，元素被有意安排得显得比其他元素更重要。本词条的定义与机制据此转述。",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260916*/https://en.wikipedia.org/wiki/Visual_hierarchy",
        "status": "available",
        "checkedAt": "2026-09-22T11:56:40.708Z",
        "jobId": "spn2-b7eba1c09595f9fe1c984a76be0289018decfc71",
        "url": "https://web.archive.org/web/20260922115705/https://en.wikipedia.org/wiki/Visual_hierarchy",
        "timestamp": "20260922115705"
      }
    },
    {
      "id": "visualhierarchy-nng",
      "title": "NN/g · Visual Hierarchy in UX: Definition",
      "url": "https://www.nngroup.com/articles/visual-hierarchy-ux-definition/",
      "claim": "该文说明清晰的视觉层级把视线引向页面上最重要的元素，并可以通过颜色与对比、尺寸以及分组的变化建立；文中还举出反例：当页面元素在尺寸与颜色上大体相当、又缺少留白时，读者难以找到从哪里看起。本词条的建立手段与\"全都强调等于没有强调\"据此转述。",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260916*/https://www.nngroup.com/articles/visual-hierarchy-ux-definition/",
        "status": "pending",
        "checkedAt": "2026-09-22T11:57:01.012Z",
        "error": "status-request-failed",
        "jobId": "spn2-391e964af384ee6889215ec08209d6527818763d"
      }
    }
  ],
  "relations": [
    {
      "target": "focal-point",
      "kind": "composes_with",
      "condition": "层级的最高一级需要落到某个具体元素上",
      "reason": "焦点是层级的第一级：层级安排整体次序，焦点是这一次序的起点。",
      "basis": "editorial"
    },
    {
      "target": "proximity",
      "kind": "composes_with",
      "condition": "同一层级内的元素需要被读作一组",
      "reason": "间距决定分组，分组是层级的组成部分之一：先分出组，再在组之间建立轻重。",
      "basis": "editorial"
    },
    {
      "target": "contrast-legibility",
      "kind": "conflicts_when",
      "condition": "次要层级靠降低文字对比度来实现",
      "reason": "把文字调淡是最常见的降级手段，但它会让次要文本跌破可读的对比度门槛；降级应优先用尺寸与间距。",
      "basis": "editorial"
    },
    {
      "target": "visual-interference",
      "kind": "conflicts_when",
      "condition": "重要信息被刻意安排在层级的最低处以减少被看到的机会",
      "reason": "层级是一种引导手段，用它掩盖用户本应知道的信息就变成了视觉干扰。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "元素在视觉上被安排成标题、正文或说明",
      "instruction": "让标记结构与视觉次序一致：看起来是标题的元素使用真正的标题标记，层级连续不跳级。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "页面上需要强调的元素超过两三处",
      "instruction": "重新排定优先级而不是继续加强调；先确定唯一的第一级，其余元素相对它降级。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "principle": {
    "evidenceType": "源自格式塔知觉理论的组织原则，在设计实践中被广泛沿用；本词条不引用具体的注视测量数据",
    "limit": "本词条不规定任何具体的字号比例或对比度数值，也不主张某一种层级安排普遍最优；它只说明层级由相对差异造成，且必须与标记结构一致。"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "本词条尚无可操作示例；插画为编辑示意，用对照的方式展示有层级与无层级的差别，不代表已验证的实现。应用到产品前仍须确认标记结构与视觉次序一致，并对降级后的文本单独验证对比度。",
  "image": {
    "src": "/images/visual-hierarchy.webp",
    "alt": "一张对照示意图：左侧页面上所有灰色占位条尺寸与深浅几乎相同、间距均匀；右侧同样的内容被分成明显的三级——一条粗大的标题条、若干中等正文条与一组更小更浅的说明条，组与组之间留出空白。"
  },
  "searchTerms": [
    "hierarchy",
    "contrast",
    "scale",
    "grouping",
    "attention"
  ]
}