前端如何提高用户体验：增强可点击区域的大小 _用户体验

你是否曾经试着点击或点击一个元素(例如:按钮、链接)，并且注意到只有单击该元素的特定区域，它才会响应？
必生这种情况是因为可点击区域未应用于整个元素。为了更加清楚，请参见下图，左图可点击区别(圈红部分)明显比右图的小很多，所以右图的实现用户体验会更好。

文章插图

对于本文，会介绍一些事例，并通过事例演示如何增加可点击区别，提高用户体验。
WCAG准则WCAG全称Web Content Accessibility Guidelines 网页内容无障碍浏览准则，简单的说就是为了方便残障人士（包括低视患者，盲人，聋人，学习障碍，行动不便，认知障碍....）访问Web内容而制定的相关标准，可以使网站更加人性化。
举个例子，在WCAG准则2.3.2中规定：网页不包含任何闪光超过3次/秒的内容。
用户应该能够使用台式机/笔记本电脑上的键盘以及移动设备或平板电脑上的触摸屏来操作输入。不要在移动设备屏幕上将按钮设置得太小，以免按下正确的按钮。触摸目标的最小尺寸最好至少为44 x 44像素。
费兹法则**费兹法则（Fitts law)**是一个人机互动以及人体工程学中人类活动的模型；它预测了快速移动到目标区域所需的时间是目标区域的距离和目标区域大小的函数。
在下面的图中，我模拟了两个按钮的不同情况。在左侧，按钮更小，更远，用户需要更多的时间与它互动。在右侧，按钮大小更大，更接近于它的同级输入元素，这将使交互更容易、更快。

文章插图

接着，我们再来看看一些更加真实例子。注意：记住WCAG准则和费兹法则的概念。
按钮在需要时使用实际真实<button>(包含可点击区域)非常重要。下面的示例来自我使用的在线银行系统：
<div class="navig next" onclick="validateLogin()">Next</div>这是上面按钮的html的GIF图像。我把鼠标悬停在按钮上，光标仍然是一个指针，这很好。不过，我也可以选择文本和悬停时，有一个文本光标!如果使用了正确的元素，就不会发生这种情况。

文章插图

当使用HTML<button>元素时，会获得下面效果：

可通过鼠标，键盘或触摸访问
可以通过键盘选中
有对应的 JAVAScript 方法

有些元素，我们需要添加 padding，原因有二：

让它更美观
让它变大，这样更容易被注意到

文章插图

链接之前在做导航的时候，犯了一个错误，应该是给 a 标签添加 padding 而不是 li:

<nav>  <ul>    <li class="nav-item"><a href=https://www.isolves.com/it/cxkf/bk/2020-07-06/"#">Home    Products
    Store
    Team
  // css.nav-item {  padding: 12px 16px;}

基于上面的HTML和CSS，可点击的区域将只是文本，如下图所示：

文章插图

正确的方法是在a 标签本身上添加padding 。请注意，默认情况下，padding 需要块元素才有效，而 a 标签是行内元素，所以可以给 a 标签设置block，inline-element或 flex 。
.nav-item a { display: block; padding: 12px 16px;}添加了上面的样式后，可点击的效果如下：