图像对比滑块系统
目的
图像对比滑块系统提供了一种系统化的设计和空间方法论，用于构建交互式的“前后对比”视觉比较组件。该系统解决了呈现同一图像两种重叠状态（例如照片修复、色彩分级、设计模型、环境变化或医疗结果）的设计挑战，使用户能够动态滑动、揭示和对比细节。它防止视觉迷失、保持布局稳定、确保触摸目标针对移动端优化，并通过结构化键盘交互和屏幕阅读器公告满足 WCAG AA 无障碍标准。
使用场景
- 创意与编辑软件展示： 比较未编辑的原始RAW文件与最终编辑的照片、色彩分级预设或修饰作品。
- 建筑与设计作品集： 展示施工前后阶段、改造项目、室内设计或网站设计系统改造的前后对比。
- 电子商务与产品演示： 展示产品在不同条件下的表现（例如防水织物测试、屏幕保护膜、清洁产品或用旧磨损对比）。
- 环境与科学可视化： 展示随时间的变化，例如冰川退缩、城市扩张或再造林项目的卫星地图。
- 化妆品与医学案例研究： 在相同的照明和空间条件下展示高保真治疗结果。
何时不应使用
- 多项对比发现： 如果需要比较 2-5 个不同产品的离散属性，请使用
comparison-matrix-system。 - 通用图像网格： 对于标准的图像显示、媒体轮播或画廊，请使用
imagery-and-media-system或carousel-and-slider-system。 - 文本密集型比较： 如果主要内容是文本或表格数据（例如软件版本功能），请使用
data-table-ui-system或<dl>列表元素。 - 低对比度细微变化： 如果两张图像之间的视觉差异很小且不易察觉，则并排或堆叠布局并附带清晰标题更有帮助。
输入
- 双核心资源： 两张从完全相同的空间视角、画面和分辨率拍摄的高质量图像（“前”和“后”）。
- 组件尺寸： 宽高比（例如 16:9、4:3 或 1:1）和视口边界（来自
imagery-and-media-system）。 - 排版和品牌令牌： 标签、手柄和说明文字的排版大小和颜色（来自
fluid-typography-system）。 - 触摸与运动偏好： 用户关于触摸手势和系统级减少运动状态的偏好。
输出
- 滑块结构蓝图： 定义容器、背景轨道、剪切路径叠加层、手柄栏、抓取拇指和状态标签的布局规范。
- 键盘控制规范： 可访问的坐标跟踪，将
ArrowLeft、ArrowRight、Home和End等键映射到相对的剪切路径百分比。 - 移动端与触控行为指南： 精确的触摸目标尺寸、手势拖动阈值和拇指间距规范。
- 布局保持规则： 防止布局偏移 (CLS) 的结构规则（例如宽高比保持和绝对尺寸）。
工作流程
1. 建立空间轨道和容器
保持宽高比和结构对齐：
- 宽高比锁定： 容器必须具有明确的宽高比（例如
aspect-ratio: 16 / 9或aspect-ratio: 1 / 1）以预留布局空间并防止累积布局偏移 (CLS)。 - 绝对定位叠加层： 将容器设置为
position: relative; overflow: hidden;。将“后”图像放置为标准背景图像块（width: 100%; height: 100%; object-fit: cover;）。 - 裁剪叠加块： 将“前”图像放置在绝对定位的叠加包装器中（
position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;）。 - 图像同步： 确保背景图像和叠加图像具有相同的尺寸、缩放属性（
object-fit: cover）和对齐方式（object-position: center），以便它们精确重叠。
2. 实施揭示裁剪路径
使用现代 CSS 裁剪而不是双图像调整大小，以防止视觉扭曲：
- Clip-Path 值： 对叠加包装器应用
clip-path: inset(0 calc(100% - var(--exposure-ratio)) 0 0);，其中--exposure-ratio是一个 CSS 自定义属性（例如50%），表示滑块位置。 - 动态变量绑定： 通过鼠标、触摸或键盘输入动态更新
--exposure-ratio。 - 避免图像扭曲： 滑动时不要调整图像本身的大小；仅裁剪包装容器。图像必须相对于彼此保持静止。
3. 设计手柄和触摸拇指
手柄是交互的主要视觉提示：
- 垂直分隔线： 设置一个绝对定位在
left: var(--exposure-ratio);的垂直条。将宽度设置为高对比度细线（例如2px到4px），并添加阴影以在多样化的图像背景中突出显示。 - 抓取拇指目标： 在垂直线上居中放置一个圆形或圆角的抓取拇指。
- 视觉指示器： 在抓取拇指内部嵌入双向水平箭头（← →）或对比纹理，以指示水平拖动能力。
- 触摸目标尺寸 (WCAG 2.2 SC 2.5.8)： 在移动端/触摸界面上，交互式抓取拇指的物理触摸目标必须至少为
44px x 44px，无论其视觉尺寸如何。通过透明的伪元素（::after）或内边距实现。
4. 构建可访问的文本标签
保持用户上下文和方向感：
- 文本标签放置： 将标签（例如“BEFORE”和“AFTER”）放置在容器的对角处（例如“前”在左上角，“后”在右上角）。
- 高对比度设计： 在白色文本标签后面使用半透明深色背景（遮罩），以确保无论图像内容如何，对比度均达到
4.5:1的最小值 (WCAG AA)。 - 交互状态反馈： 可选地在滑块激活时淡出文本标签以最小化视觉干扰，在交互结束时恢复它们。
5. 定义键盘导航和 ARIA 集成
界面必须完全可通过键盘独立导航：
- 范围滑块支持： 在视觉比较背后放置一个原生的、视觉隐藏的
<input type="range">元素。这提供了原生的范围处理、焦点状态和 aria 角色。 - ARIA 属性关联： 分配
aria-label（例如“前后图像对比”）、aria-valuemin="0"、aria-valuemax="100"和动态的aria-valuenow，代表百分比。 - 键盘事件映射：
ArrowLeft/ArrowDown：位置减少 1%（或 5% 以实现更快的移动）。ArrowRight/ArrowUp：位置增加 1%（或 5%）。PageUp/PageDown：滑块位置移动 10% 的增量。Home：立即移动到 0%（完全显示“后”图像）。End：立即移动到 100%（完全显示“前”图像）。
- 焦点指示器： 当滑块获得焦点时，在抓取拇指周围显示一个高对比度、清晰的焦点环。切勿隐藏焦点样式。
决策规则
滑块移动模式选择
| 交互模式 | 使用场景标准 | 实现方法 |
|---|---|---|
| 主动点击/轻触并拖动（默认） | 高精度比较；最适合详细分析。 | 仅当鼠标/触摸点在拇指上按下时，在 pointermove 上更新 --exposure-ratio。 |
| 悬停跟随 | 随意/探索性比较；低门槛登录页面功能。 | 当光标在容器的任何部分上移动时直接更新 --exposure-ratio。不适合作为唯一方法；移动端需要回退到点击/拖动。 |
| 双图切换（任意位置点击） | 简单、快速的比较；最适合视觉变化非常明显的小屏幕。 | 在容器的任意位置单击触发 0% 到 100% 曝光之间的转换，并带有平滑的 0.3s 缓动效果。 |
约束条件
- 无障碍性 (WCAG AA)： 文本标签必须满足
4.5:1的对比度。交互控制器必须支持完整的键盘焦点、可见指示器（:focus-visible）以及最小44px x 44px的触摸目标。 - 累积布局偏移 (CLS)： 两张图像及其容器必须共享完全相同的预定义宽高比。切勿让容器在图像加载时塌陷到
0px高度。使用 CSSaspect-ratio或内联内边距百分比。 - 响应式流畅性： 组件必须动态缩放到移动视口。在屏幕宽度
< 480px时，按比例缩放标签或将它们直接移到图像下方，以防止重叠其他核心视觉特征。 - 减少运动： 如果用户偏好减少运动（
@media (prefers-reduced-motion: reduce)），在使用键盘导航时禁用平滑过渡，并避免悬停跟随触发器，转而使用明确的点击/轻触操作。
常见失败模式
- “图像挤压”陷阱： 在拖动交互过程中调整或拉伸图像而不是裁剪它们，导致视觉变形。
- “零 CLS 塌陷”： 未能设置容器尺寸，导致图像最终下载时布局剧烈跳动。
- 键盘排除： 创建一个只能用鼠标拖动的滑块，使其对键盘、屏幕阅读器以及某些辅助开关用户完全无法使用。
- 明亮图像上的“隐形拇指”： 未向手柄和拇指添加阴影、边框或高对比度叠加层，导致它们完全融入明亮/复杂的图像中。
- 触摸目标陷阱： 使抓取拇指非常小（例如
10px宽）且没有触摸内边距，导致在移动设备上引起极大的用户挫败感。
验证标准
- 精确叠加对齐： “前”和“后”图像完美对齐，滑动过程中没有水平偏移、挤压或扭曲。
- 零累积布局偏移： 容器在图像加载前使用一致的宽高比或明确尺寸预留布局空间。
- 移动触摸安全： 在移动/触摸视口上，抓取手柄/拇指的触摸目标至少为
44px x 44px。 - 完全键盘导航： 用户可以使用标准键盘键（
箭头键、Home、End）导航、聚焦和调整滑块位置。 - 符合 ARIA 标准： 交互控制器使用语义元素（如
<input type="range">）或正确的 ARIA 角色（role="slider"、aria-valuenow、aria-label）。 - 对比度 AA 合规性： 文本标签（“前”和“后”）和焦点指示器与相邻表面之间满足 4.5:1 的 WCAG 对比度。
- 运动敏感性： 交互行为尊重用户对减少运动的偏好（
prefers-reduced-motion: reduce）。