前端如何改善用户体验：增加可点击区域的大小

你有没有试过点击或点击一个元素（例如：按钮、链接）并注意到它只有在你点击特定区域时才会响应元素？这一定会发生，因为可点击区域并未应用于整个元素。为了更清楚，请参考下图。左图的可点击差异（红圈部分）明显比右图小很多，所以右图的用户体验会更好。本文将介绍一些示例，以及如何通过示例增加可点击差异，提高用户体验。WCAGguidelinesWCAG全称WebContentAccessibilityGuidelinesWeb内容无障碍指南，简单的说，就是为了方便残障人士（包括弱视患者、盲人、聋人、学习障碍、行动不便、认知障碍……）访问Web相关为内容制定标准可以使网站更加人性化。例如，在WCAG指南2.3.2中规定：网页中不包含任何闪烁超过3次/秒的内容。用户应该能够使用台式机/笔记本电脑上的键盘和手机或平板电脑上的触摸屏进行输入。不要将移动屏幕上的按钮做得太小，以至于您可以按正确的按钮。触摸目标的最小尺寸优选至少为44×44像素。菲茨定律**菲茨定律（Fittslaw）**是人体工程学中人机交互和人类活动的模型；它预测快速移动到目标区域所需的时间是目标区域的距离和目标区域大小的函数。在下图中，我模拟了两个按钮的不同情况。左边的按钮更小，距离更远，用户需要更多时间与之交互。在右侧，按钮尺寸更大，更靠近其同级输入元素，这将使交互更容易、更快速。接下来，让我们看一些更真实的例子。注意：记住WCAG指南和Fitts定律的概念。按钮在需要时使用实际的（包含可点击区域）很重要。下面的示例来自我使用的在线银行系统：Next