Page 178 - css揭秘

30 扩大可点击区域

难题

如果对用户体验感兴趣，那你很可能听说过 Fitts 法则。它是由美国心
小提示
理学家 Paul Fitts 于 1954 年首次提出的。Fitts 法则认为，人类移动到某个
目标区域所需的最短时间是由目标距离与目标宽度之比所构成的对数函数。 你可以在 simonwallner.at/
ext/fitts 以图形化的交互方式来了
D
如果要用数学公式把它表达出来，通常就是： T =+ log(1+ W ) 。T 表示 解 Fitts 法则。
a b
2
所需时间，D 是从起点到目标中心的距离，W 是目标区域的宽度，而 a 和 b
都是常数。

尽管图形化的 UI 在当时并不存在，但 Fitts 法则仍然完美适用于指定设
备，并已成为最广为人知的人机交互（Human-Computer Interaction，HCI）
原则。这乍听起来可能有些令人意外，但别忘了 Fitts 法则与人类的运动控
制能力更加相关，而非局限于某种特定硬件。
根据这个公式，我们可以很容易地推导出：目标越大，越容易到达。因
此，对于那些较小的、难以瞄准的控件来说，如果不能把它的视觉尺寸直接
放大，将其可点击区域（热区）向外扩张往往也可以带来可用性的提升。随
着触屏的不断普及，这一点变得愈发重要。没有人愿意对一个狭小的按钮尝
试点按很多次，但实际上这样的无奈之举仍然每天都在发生。
还有一些时候，我们想让某个元素在鼠标接近窗口某侧时自动滑入。举
个例子，一个自动隐藏的页头会在鼠标接近时自动从顶部滑入并完整展现，
这也涉及（只在单一方向上）放大热区的问题。只借助纯 CSS 可以做到这
一点吗？

解决方案

假设有一个图 6-4 中那样的简单按钮，我们想将其热区在四个方向
上均向外扩大 10px。我们已经给它应用了一些简单的样式以及 cursor:
1①
pointer，它既可以为鼠标交互提供自释性（affordance） ，又可以帮助我们
图 6-4
① 在可用性领域中，“自释性”是控件的一种属性，表示它能以视觉的方式来提示我们如何与 按钮最初的样子，图中的两种状
之进行交互。举例来说，一个按钮的立体感暗示着它可以被按下，一个门把手的形状就在引 态分别是：鼠标光标接近按钮边
导用户去拉动或旋动。更多信息请参阅 en.wikipedia.org/wiki/Affordance。至于鼠标光标的变 缘时（左图），鼠标光标移动到按
化是否属于一种自释性或是视觉反馈，可用性专家内部还存有争议。 钮的范围内（右图）

30 扩大可点击区域 147

඀ࠡ JOEC