视觉干扰式诱导

本条尚无可操作的样本；插画为编辑示意。应用到产品时仍须核对：两个选项的实际对比度是否达到可读性标准、拒绝控件的可点击目标尺寸、界面中高饱和色的实际使用位置，以及所在法域对同意界面视觉呈现的具体要求。

{
  "harm": "在视觉呈现不对等的情况下诱导用户作出有利于经营方而非用户自身利益的选择，损害知情、自愿的决策",
  "repair": "让后果相当的选项获得同等的尺寸、对比度、位置与留白，仅将视觉层级用于澄清内容主次，而非压制某一选项。"
}

{
  "id": "visual-interference",
  "type": "anti",
  "name": {
    "zh": "视觉干扰式诱导",
    "en": "Visual Interference"
  },
  "aliases": [
    "视觉诱导",
    "视觉压制",
    "Interface Interference (visual)"
  ],
  "granularity": "component",
  "intents": [
    "audit-choice"
  ],
  "tags": [
    "反模式",
    "视觉层级",
    "对比度",
    "同意",
    "操纵"
  ],
  "definition": "利用尺寸、颜色、对比度、位置或留白等视觉手段，把有利于经营方的选项做得醒目突出，同时把同样有效、用户本可选择的替代选项在视觉上压制到难以察觉，从而让人在信息呈现不对等的情况下作出选择。",
  "boundary": "视觉层级本身是合法的设计手段，用来引导注意力到真正更重要的内容；本条只针对层级被用来对抗用户自身利益、压制其应得到同等关注的选项这一用法，不反对视觉层级本身。与羞辱式拒绝文案不同：本条的机制是视觉设计（尺寸、颜色、对比度、位置、留白），而不是贬低性或施压性的措辞；同一界面可能同时存在两种手法，应分别记录。",
  "signature": [
    "两个后果相当的选项被赋予明显不对等的尺寸、颜色饱和度或对比度",
    "拒绝或次要选项使用灰色对灰色的低对比文字，且常被放在不显眼的位置或藏在留白之后",
    "界面上只有引导用户接受的按钮使用了唯一高饱和色，形成一眼可辨的前注意线索"
  ],
  "when": [
    "审查同意横幅、订阅确认或权限弹窗中并列选项的视觉权重",
    "审查结算页、续费提示中“接受”与“拒绝/暂不”按钮的尺寸、颜色与位置对比"
  ],
  "when_not": [
    "作为提高转化率的推荐手段",
    "以“突出主要操作”为由，将后果相当的选项做成不对等的视觉层级"
  ],
  "tradeoff": "修复时保留必要的视觉层级用于真正的主次内容，但后果相当的选项须获得可比的尺寸、对比度和可见位置；不得让唯一的高饱和色或唯一的强对比元素承担引导消费决策的作用。",
  "comparison": {
    "focus": "选择是否建立在对等的视觉呈现之上",
    "mechanism": "用尺寸、颜色、对比度、位置或留白压制某一选项的可见性",
    "cost": "用户在信息呈现不对等的情况下做出并非真正知情的选择，损害自主决策与信任"
  },
  "sources": [
    {
      "id": "deceptive-visual-interference",
      "title": "Deceptive Patterns · Visual interference",
      "url": "https://www.deceptive.design/types/visual-interference",
      "claim": "把“视觉干扰”定义为通过低对比度、过小的文字或混乱的界面，使本应清晰可见的信息被隐藏、模糊或掩盖，并以特斯拉退款条款文字对比度过低导致用户误购的案例为证。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.deceptive.design/types/visual-interference",
        "status": "available",
        "checkedAt": "2026-09-16T05:58:18.781Z",
        "jobId": "spn2-3f61b309252e529c37e1623c0943a841c4359df4",
        "url": "https://web.archive.org/web/20260916055945/https://deceptive.design/types/visual-interference/",
        "timestamp": "20260916055945"
      }
    },
    {
      "id": "securiti-edpb-dark-patterns",
      "title": "Securiti · EDPB Guidance on Deceptive Patterns in Social Media Interfaces",
      "url": "https://securiti.ai/blog/edpb-guidelines-on-dark-patterns-in-social-media/",
      "claim": "转述欧盟数据保护委员会（EDPB）《社交媒体平台界面中的欺骗性设计模式指南》（3/2022），指出以过小字号或不足的颜色对比呈现信息会使用户更容易忽略该信息，并建议将与数据保护相关的操作或元素做得同样醒目、以客观中立的方式呈现选项；本条仅引用该转述文本，未能直接读取 EDPB 指南 PDF 原文，不代表已核实原文全部表述。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://securiti.ai/blog/edpb-guidelines-on-dark-patterns-in-social-media/",
        "status": "available",
        "checkedAt": "2026-09-16T05:59:00.082Z",
        "jobId": "spn2-a319b91f4c43cc153f5c67d96d0a34613b9dcc4d",
        "url": "https://web.archive.org/web/20260916055926/https://securiti.ai/blog/edpb-guidelines-on-dark-patterns-in-social-media/",
        "timestamp": "20260916055926"
      }
    }
  ],
  "relations": [
    {
      "target": "confirmshaming",
      "kind": "related",
      "condition": "审查同意或退出选项是否被不正当地引导",
      "reason": "两者都压制用户自由选择，但机制不同：一个是视觉层级压制，一个是措辞羞辱。",
      "basis": "editorial"
    },
    {
      "target": "figure-ground",
      "kind": "conflicts_when",
      "condition": "图形与背景的层级手段被用来压制而非澄清信息",
      "reason": "图形与背景本是帮助用户区分主次的原则，被用于让用户自身利益相关的选项沉入背景时，就与该原则的初衷相冲突。",
      "basis": "editorial"
    },
    {
      "target": "fitts-law",
      "kind": "related",
      "condition": "审查按钮的尺寸与可触达距离是否被用作施压手段",
      "reason": "Fitts's Law 说明更大更近的目标更容易点击；本条关注这一规律被单方面用于放大接受按钮、缩小拒绝按钮时构成的施压。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "并列呈现后果相当的选项（如接受/拒绝、订阅/暂不）",
      "instruction": "给予两个选项可比的尺寸、颜色对比度与可见位置。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "提供拒绝或退出控件",
      "instruction": "拒绝或退出控件的对比度与可点击目标尺寸须达到与接受控件相同的标准。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "设计涉及后果的选择界面",
      "instruction": "不要把界面上唯一的高饱和色等前注意线索用于引导某一后果选项。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "anti": {
    "harm": "在视觉呈现不对等的情况下诱导用户作出有利于经营方而非用户自身利益的选择，损害知情、自愿的决策",
    "repair": "让后果相当的选项获得同等的尺寸、对比度、位置与留白，仅将视觉层级用于澄清内容主次，而非压制某一选项。"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "本条尚无可操作的样本；插画为编辑示意。应用到产品时仍须核对：两个选项的实际对比度是否达到可读性标准、拒绝控件的可点击目标尺寸、界面中高饱和色的实际使用位置，以及所在法域对同意界面视觉呈现的具体要求。",
  "image": {
    "src": "/images/visual-interference.webp",
    "alt": "一张虚构的 FIELDNOTES 同意卡片：一枚饱和的赭红色主按钮硕大醒目，旁边是同等重要却几乎看不清的灰色对灰色次要链接，角落有一枚细小的警示三角标记。"
  },
  "searchTerms": [
    "anti-pattern",
    "visual hierarchy",
    "contrast",
    "consent",
    "manipulation"
  ]
}