2020年如何设计移动端的点击目标？

时间：2024-05-22 04:30:01 | 来源：建站知识

时间：2024-05-22 04:30:01 来源：建站知识

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

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

渐变和颜色

蓝色，紫色和绿色渐变可轻敲目标是当前最受欢迎的一些设计选择。

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

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

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

蓝色，紫色和绿色渐变可轻敲目标是当前最受欢迎的一些设计选择。它们适用于浅色或深色背景（或模式），因此对于用户可以控制默认配色方案的设计而言，这是一个可行的选择。

大小事项

轻击目标的大小不仅仅是美观，在可及性方面同样重要。

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

这并不是说所有视觉元素都至少要具有此大小，但是您应确保元素周围的整个可点击区域都超过此大小。（想想在应用内广告上关闭一个很小的“ x”会很烦人，通常会导致错误地点击广告本身。）足够的可点击区域可以解决此问题。

AAA级成功的可访问性准则指出，“指针目标”的大小必须至少为44 x 44 CSS像素，并带有少数与链接上下文有关的异常。

设计视觉能力

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

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

可点击目标的常见视觉承受能力包括：

• 内联文本链接的下划线或不同颜色
• 为对象放置阴影或内部阴影
• 圆角或圆
• 具有可操作文本的元素，例如“登录”或“提交”
• 列中的分隔位置，两侧均无其他对象

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

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

悬停状态对于设计的桌面版本很重要。在移动性方面，这种微交互作用演变为活动状态，该状态显示/何时以触摸方式激活或“按下”按钮或点击元素。

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

填充足够 除非您要设计深色图案，否则您可能要确保用户点击预期的目标，而不是附近的物体。在每个可轻敲元件周围进行足够的填充可以解决此潜在问题。

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

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

关于文本指令的外观，有两件事正在发展。

• 按钮和水龙头元素使用标题大小写
• 字体很简单，有常规或中型风格

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

• 文字可直接执行，并告诉用户接下来会发生什么，即使比“单击此处”更长
• 但要消除任何不必要的词
• 避免使用行话或可爱的语言并保持直率
• 在设计中保持一致并使用相同的术语（用户是“登录”还是“登录”？）

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

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

最好的建议是谨慎使用它们，并尽可能使用更多按钮式链接。

下一个最佳建议是在文本链接周围创建一个扩展的光晕或点击区域，以使其更容易有效地点击。这在菜单中的文本链接或页脚中的链接中很常见。（在主体内容中这没有什么意义。）

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

点按目标可以（并且应该）具有层次结构 您的设计可能包括多种类型的可轻敲目标，每种都有自己的外观。

基于网站或业务目标的按钮选择或可点击目标的级别，这种设计层次结构变得越来越普遍。

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

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

首先，确定您需要多少级。对于大多数项目而言，主要和次要选项就足够了，但是某些项目属于第三级和第四级单击元素。

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

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

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

分接元素的设计应具有一定的大小和突出度，对于用户来说应该被触摸（请注意上方的中心橙色+按钮）。就帮助预测用户意图而言，大小可能是最重要的考虑因素之一。

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

结论 是的，我们仍在设计。不管手机多大（或多小），可触碰的目标可以是任何东西，从按钮到控件，再到文本链接，用户可以使用它们来使网站或应用程序按设计正常工作。

一个好的可点击目标看起来应该被触摸（或单击）并执行用户期望的操作。

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