Page 195 - css揭秘

35 交互式的图片对比控件

难题

有时，我们需要展示两张图片的外观差异，通常是“之前和之后”形式
的对比。例如，照片在经过一系列操作前后的对比效果，美容网站上某种护
肤疗法前后的对比效果，某个地区在灾难事件前后的现场对比结果。

最常见的解决方案就是把两张图片并排放置。不过在这种情况下，人眼
只能观察到非常明显的差异，从而忽略掉相对细小的区别。如果对比的意图
并不强烈，或者图片的差异已经足够明显，这个方法基本上也可以胜任；但
在其他场景下，我们就要找到更有表现力的展示手法。
从用户体验的角度来看，这个问题可以有很多解决方案。比如说，我们
可以把两张图片放置在同一个位置，然后通过 GIF 动画或 CSS 动画来让它
们快速轮播。这个方案比并排图片的方式要好很多，但对用户来说，找出所
有的差异需要花些时间——他们需要等待多次轮播循环，因为在每个循环周
期内只能盯住图片的一块区域。
另一种更友好的解决方案叫作“图片对比滑动控件”。这个控件会把两
1
①
张图片叠加起来，允许用户拖动分割条来控制这两张图片的显露区域 。 当
然，在 HTML 中并不存在这样一种控件，我们只能通过已有的元素来模拟
出这种效果。这些年来，这个控件已经有了多种实现了，但通常都需要依赖
JavaScript 框架，外加一大块 JavaScript 代码。

① 这个控件还有一些变种：用户只需要移动鼠标，而不需要拖动。这种方式的好处在于它易于
发现和使用，但体验可能并不是很舒服。

164 第 6 章 用户体验

඀ࠡ JOEC