前言
原文链接: ishadeed.com/article/cli…
这篇文章翻译的目的，也是希望平时我们自己在写自己的网站应用的时候，也能注意注意点击区域的大小问题，增加我们自己的应用的用户交互体验，顺便对工作中一些产品的设计提出疑问。希望每个人在前端路上越来越好哦😋
在很多网站中，我们会遇到一个问题，就是当我们尝试去单击或者点击某个元素（按钮、链接）似乎不起作用，后来意识到只有单击钙元素的特定区域，功能才会生效。
发生这种情况是因为可点击区域未应用于整个元素。为了更加清楚，请参见下图：
我们可以发现，右边的用户体验肯定要比左边的用户体验好，特别是option的区域，我们很多时候处理都会只对前面的小圈圈做处理，用户需要将鼠标移动到很小的特定区域去点击。
对于本文，我将介绍很多我注意到的示例，同时展示如何正确解决处理可点击区域的大小。
用户体验注意事项
WCAG 准则
根据 WCAG 2.1，触摸或鼠标的最小目标尺寸应为 44×44 像素。大小不是固定的，可能会根据使用情况而改变。但是，44×44 像素是一个很好的起点。
Fitts 定律
Fitts 定律是 UX 设计中要遵循的重要定律。简而言之，触摸或点击目标越大，越接近，则需要用户与其进行交互的时间越短。
在下图中，我为主按钮模拟了两种不同的情况。在左侧，按钮更小，更远，这需要用户花费更多时间与之交互。在右侧，按钮的大小更大且更接近其同级输入元素，这将使其更容易，更快地进行交互。
在上面我介绍了关于 WCAG 准则和 Fitts 定律，下面主要是相关的例子。
按钮 Buttons
实际中，我们在写网页的时候，按钮是非常必要而且使用很多的。下面列举一个银行系统的按钮展示。
<div class="navig next" onclick="validateLogin()">Next</div>
下面上述按钮的 HTML 的 GIF 图片。我将鼠标悬停在按钮上，光标仍然是指针，并且在文本Next悬停时还有一个文本光标！如果使用正确的button元素，就不会出现这种情况。
很多开发者可能会因为button的默认样式比较丑，会选择使用div替换，同时加上cursor:pointer去减少去button样式的重置。这里我比较建议，还是使用button，合适的内容使用合适的标签，然后在全局下对一些样式进行统一管理即可。同时我们也可以通过键盘的tab标签去选择以及触摸功能。
当我们使用正确的标签button以后，我们也需要padding去扩充按钮的大小，主要有两个原因
- 给按钮合适的“呼吸空间”
- 加大按钮，使其容易被人注意到（Fitts 定律）
如图：
链接 Links
当有导航菜单时，应将填充赋给<a>元素而不是<li>，一般我们会如下处理：
<nav>
<ul>
<li class="nav-item"><a href="#">Home</a></li>
<li class="nav-item"><nav href="#">Products</nav></li>
<li class="nav-item"><a href="#">Store</a></li>
<li class="nav-item"><a href="#">Team</a></li>
</ul>
</nav>
.nav-item {
padding: 12px 16px;
}
根据上述 HTML 和 CSS，可点击区域将仅为文本。检查下图：
但实际上，我们需要对整体进行点击。正确的方法是在链接本身上添加填充。默认情况下，顶部和底部填充是行内元素，因此无法使用。无论是哪种情况，它都可以是block或inline-element或flex。
.nav-item a {
display: block;
padding: 12px 16px;
}
通过上面的处理结果，整个链接现在是可单击/可点击的。下面显示差异的图：
菜单 Menus
Hamburger Menus 重要的是增加它们的可点击区域，因为它们大多会在触摸设备上使用。
假设可点击区域如下：
上面展示不是很好，并用户且将很难使鼠标或手指指向屏幕上如此小的目标。在下图中，它更大并且更易于交互：
复选框和单选按钮 Checkboxes & Radio
当存在复选框或单选按钮元素时，我希望可以单击它或关联的标签来激活/禁用它。
在下图中，可单击区域仅与复选框或单选元素绑定。换句话说，我们不能单击标签来激活/禁用它。
从用户体验的角度来看，这样的效果看起来是不好的。在 HTML 中，可以使用 for 属性将标签与输入绑定。
<input type="checkbox" id="option1" /> <label for="option1">Option 1</label>
可以将输入内容放置在标签内:
<label for="option1">
Option 1
<input type="checkbox" id="option1" />
</label>
然后，我们需要在元素上添加填充，以使可点击区域变大。这样，问题得以解决，整个复选框或单选按钮都是可单击的，如下图所示：
侧边栏 Sidebar
对于带有类别的页面，有些网站会注意到列表链接没有扩展到其父页面的整个宽度。也就是说，可点击区域仅在文本上。如下图显示：
解决方法是：
- 从
<li>元素中删除填充，而是将其移动到<a>元素 - 通过添加
display：block，使链接采用其父对象的完整宽度。
.nav-item a {
/*Other styles*/
padding: 12px 16px;
display: block;
}
最终的效果如下：
总结
上面展示了一些常用的场景，解决办法一般是增加padding等，实际上我们也可以使用伪类元素，类似于:after等。
希望这篇文章对你有用~😋
