可靠的点击目标可以建立或破坏您的移动网站或应用程序。确定用户是否成功完成了按钮或链接的大小、形状、位置和整体设计。这似乎是一件小事，但它可能是设计中最重要的元素之一。

现代点击目标必须易于识别和吸引用户点击。今天，我们正在研究如何设计它们，制作有效的呼叫语言，以及选择颜色和字体的注意事项。

蓝色、紫色和绿色渐变是目前最受欢迎的设计选择。

你可能会注意到的最大的设计趋势之一是颜色，关于按钮和其他可以轻敲目标。渐变和鲜艳的颜色是常态。

这些吸引注意力的选择有助于用户识别目标，并将注意力转移到屏幕上。

有一次，几乎每个人都在设计红色或橙色的按钮和水龙头元素，但它实际上已经让位于其他颜色，特别是渐变色。

蓝色、紫色和绿色渐变是目前最受欢迎的设计选择。它们适用于浅色或深色背景(或模式)，是用户控制默认配色方案的可行选择。

轻击目标的大小不仅美观，而且可及性也很重要。

对于可点击元素的大小，大多数标准建议至少44px。这大约是普通成人指垫的大小。

这并不意味着所有的视觉元素至少都有这个大小，但你应该确保元素周围的整个点击区域都超过这个大小。(想想在应用广告中关闭一个非常小的 x会很烦人，通常会导致错误点击广告本身。）足够的点击区域可以解决这个问题。

AAA可访问性标准指出，指针目标的大小必须至少为44 x 44 CSS与链接上下文相关的异常有几个像素。

能轻击目标看起来像用户应该触摸的东西吗？

虽然这可能是一个非常简单的概念，但它经常被遗忘。使用知名和公认的模式和设计元素的视觉能力使用户更容易看到交互元素。

常见的视觉承受能力包括：

悬挂状态是台式设备上交互元素的广泛认可选项。当鼠标移动到可以单击的项目时，它可能会改变颜色，移动或做出与以前不同的反应。

这些动作实际上不适合移动点击目标，因为屏幕上没有鼠标或光标可以移动。但这并不意味着它们不同样重要。

悬挂状态对桌面版本的设计非常重要。在移动性方面，这种微交互作用演变为活动状态，显示/何时通过触摸激活或按按钮或点击元素。

当用户通过键盘或屏幕阅读器导航到轻击目标时，它还涉及作为可访问性工具的焦点状态。焦点状态将显示当前选择的目标，如突出显示活动框或关闭/打开切换到设计中的某些元素（如键盘开口）。

除非你想设计深色图案，否则你可能需要确保用户点击预期的目标，而不是附近的物体。这个潜在的问题可以通过在每个可轻敲元件周围充分填充来解决。

除了使Tap元素至少为44px外，还应在Tap至少保留8个区域px的空间。更好的方法是使用它等于它周围Tap填充一半元素。这有助于防止意外敲击。

轻敲元素设计中的文字为操作和交互提供了上下文。

文本指令的外观正在发展。

在编写UI副本中也有一些注意事项。

文本链接不遵循与其他可轻敲元素相同的规则，但设计应包含相同的考虑。

首先要考虑的是使用内联文本链接的频率。这些链接在小屏幕上很难点击，链接越多，点击区域可能重叠，用户使用错误链接的可能性就越大。

最好的建议是仔细使用它们，并尽可能多地使用按钮链接。

下一个最好的建议是在文本链接周围创建一个扩展的光晕或点击区域，以便更容易有效地点击。这在文本链接或页脚链接中很常见。(这在主要内容中毫无意义。）

目标可以出现在一行的任何位置，位置可以根据可用屏幕的宽度进行更改。由于目标可以出现在线的任何位置，其大小不应大于可用文本、句子或段落之间的间距，否则目标可能会重叠。因此，一个或多个句子中包含的目标被排除在目标大小要求之外。

你的设计可能包括各种类型的目标，每一种都有自己的外观。

根据网站或业务目标选择按钮或点击目标级别，这种设计级别结构变得越来越普遍。

层次结构顶部的按钮应具有最大对比度和最大尺寸，并按所需用途成比例减小。

可轻击目标的设计层次是什么样的？

首先，确定你需要多少级别。对于大多数项目来说，主要和次要选项就足够了，但有些项目属于第三级和第四级单击元素。

为每一种设置风格。从主要设计开始。它可能是一个颜色/渐变按钮。这是用户首先要点击的元素。次要设计应与主按钮相似，但应包括以下变化之一：鬼影风格，对比色较少或尺寸较小。同样的变化可以用于第三和第四级按钮。

层次结构顶部的按钮应具有最大对比度和最大尺寸，并按所需用途成比例减小。

您希望用户首先看到并与之互动的水龙头元素吗？使用具有清晰视觉层次的点击元素来建立用户流和意图。

分接元素的设计应具有一定的尺寸和突出性，应接触用户（请注意上面的中心橙色） 按钮）。大小可能是预测用户意图最重要的因素之一。

提醒你：虽然点击目标层次结构是件好事，但太多的选项可能会让用户感到沮丧。这是应该测试的微妙平衡。

是的，我们还在设计。无论手机有多大（或多小），触摸的目标都可以是任何东西，从按钮到控制器，再到文本链接，用户可以使用它们使网站或应用程序按照设计正常工作。

一个好的点击目标似乎应该被触摸(或单击)并执行用户期望的操作。

可悲的是，这些元素的设计通常是设计过程中被遗忘的一部分。请不要在您的项目中忽略这点。