《同意管理机制搭建与合规审计实战课程》
第4章 同意收集界面设计
4. 同意收集界面设计：弹窗、横幅、开关按钮的UX最佳实践
4.1 弹窗设计原则：清晰、即时、可操作
4.2 横幅设计：轻量、持续、可折叠
-
✅ 顶部横幅
视觉优先级高，用户第一时间看到，适合重要通知
-
✅ 底部横幅
不干扰主内容，适合次要提醒，可折叠收起
-
✅ 可折叠性
提供“收起/展开”按钮，减少视觉疲劳
-
✅ 持久性
用户做出选择前始终可见，不自动消失
4.3 开关按钮设计：直观、即时反馈、无障碍
🎨 视觉设计规范
- 颜色对比：开启绿色
#27ae60/ 关闭灰色#bdc3c7 - 圆角设计：开关滑块半径 = 容器高度 50%
- 过渡动画：滑块移动 200ms ease-in-out
- 标签对齐：开关与文字垂直居中，间距 ≥ 12px
♿ 无障碍要求
- ARIA 角色：
role="switch" - 键盘操作：Tab 聚焦 + Space/Enter 切换
- 状态提示：
aria-checked="true/false" - 焦点样式：外发光
outline: 3px solid #4A90D9
4.4 综合设计模式：弹窗 + 横幅 + 开关联动
📋 最佳实践检查清单
4.5 代码示例：可访问的同意开关组件
<!-- 符合 WCAG 2.1 的同意开关 -->
<div class="consent-switch">
<label for="analytics-switch">
<span class="switch-label">功能分析 Cookies</span>
<span class="switch-description">用于统计页面访问数据</span>
</label>
<button
id="analytics-switch"
role="switch"
aria-checked="false"
aria-label="功能分析 Cookies 开关"
tabindex="0"
class="switch-button"
onclick="toggleSwitch(this)"
>
<span class="switch-slider"></span>
</button>
</div>
<style>
.switch-button {
width: 52px;
height: 28px;
border-radius: 14px;
border: 2px solid #bdc3c7;
background: #ecf0f1;
cursor: pointer;
position: relative;
transition: background 0.2s ease, border-color 0.2s ease;
outline: none;
}
.switch-button:focus-visible {
outline: 3px solid #4A90D9;
outline-offset: 2px;
}
.switch-button[aria-checked="true"] {
background: #27ae60;
border-color: #1e8449;
}
.switch-slider {
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
background: white;
position: absolute;
top: 1px;
left: 1px;
transition: transform 0.2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.switch-button[aria-checked="true"] .switch-slider {
transform: translateX(24px);
}
</style>
<script>
function toggleSwitch(btn) {
const current = btn.getAttribute('aria-checked') === 'true';
btn.setAttribute('aria-checked', !current);
// 触发同意状态更新事件
btn.dispatchEvent(new CustomEvent('consent-change', {
detail: { checked: !current }
}));
}
</script>💡 提示：上述代码实现了键盘可操作、屏幕阅读器兼容、状态视觉反馈的开关组件，可直接用于同意管理面板。