Cookie 同意条
Cookie Consent Banner
别名:Cookie 同意条Cookie 提示条cookie 小横幅隐私同意条追踪同意弹条cookie bannercookie consentconsent banner
这是什么
在写入非必要 Cookie 前向用户征求同意的横幅或浮层，属于合规门槛而非系统告警。提供接受、拒绝或颗粒度选项，并记住选择；未作出选择前不得落下追踪类 Cookie。常驻底部或首入居中，不应遮挡核心操作。
名词辨析
易与 Alert 混淆：Alert 是系统消息提示，用于状态与错误；Cookie 同意条是写入追踪前的法律门槛， 必须等用户做出选择后才可落下非必要 Cookie，不能用"知道了"糊弄过去。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 站点要写入分析、广告等非必要 Cookie
- 面向 GDPR / ePrivacy 等有同意要求的地区
- 需要记录并可撤回用户的同意选择
✕ 不适用场景
- 只用严格必要 Cookie，无需打扰用户
- 把它当通用公告条复用（语义与法律效力都错位）
- 拒绝按钮比接受更难找到（暗黑模式，合规与信任双输）
常见形式
最简告知
Minimal notice
一句话说明 + 接受/拒绝两钮，最克制
颗粒度选择
Granular choices
按类别开关（必要/分析/营销），必要项锁定
墙式
Wall-style
不同意就不能继续，争议大，慎用
实现要点
positiontransitionaria-liveform同意前不加载非必要脚本；选择写入长期存储（cookie 或 localStorage）并可从设置页撤回。 横幅用 position: fixed 贴底，移动端改为全宽卡片；按钮层级上"拒绝"与"接受"同等可发现。 入场过渡时长乘 var(--demo-speed, 1)，尊重 prefers-reduced-motion。
相关概念
嵌在页面流内、带状态色底色的横条，用于必须被看见的消息：错误、警告、重要通知。 它占据文档流而不是覆盖内容，通常常驻直到问题被处理或用户手动关闭。
组件替代方案在视口角落短暂出现、自动消失的小消息条，用来告知操作结果（已保存、已复制、上传完成）。 不打断当前流程，通常附一个操作入口（撤销、查看），停留约 3~5 秒后淡出。
组件相似概念在用户填写表单的过程中或提交时检查输入合法性，并把错误就地显示在对应字段旁边。 目标是让用户在离错误最近的位置、以最小的打断成本知道"哪里错了、怎么改"，而不是提交后被一整个错误页打回。
交互模式搭配使用