你是会员吗?寄存器要么登录

设计趋势:现代可点击目标(而如何做到这一点)

实横置目标能不能造就您的移动网站或应用。的按钮或链接的大小,形状,位置和整体设计确定用户是否成功完成一个动作或没有。这似乎是一件小事,但也可以是设计中最重要的元素之一。

现代的可点击的目标很容易识别,工作预期的方式,并鼓励参与。

今天,我们正在寻找如何设计他们的方式来有效的手艺号召性行动项目,并考虑周围的颜色和字体的选择。

渐变与色彩

手机设计
蓝色,紫色和绿色的渐变可点击目标是一些最流行的设计选择的现在。

其中一个最大的设计趋势,你可以当它涉及到的按钮和其它可点击对象注意的是颜色。渐变和鲜艳的色彩是常态。

这些引人注目的选择,帮助用户识别自来水目标,并把注意力集中于屏幕上的动作。

曾经有一段时间,几乎每个人都在设计按钮和自来水元素红色或橙色,但真的让位给其他颜色的,特别是梯度。

蓝色,紫色和绿色的渐变可点击目标是一些最流行的设计选择的现在。他们用浅色或深色背景(或模式)工作的伟大,使这个外观设计,用户可能比默认的配色方案控制一个可行的选择。

大小事项

手机设计

丝锥目标的大小不仅仅是审美的多,它在辅助功能方面同样重要。

为可点击要素的大小大多数指南建议至少44px。这大概是普通成人的手指垫的大小。

这并不是说所有的视觉元素多至少这个尺寸,但你应该确保元素周围全可点击区域超过此大小。(想想这是多么烦人上的应用内广告关闭一个微不足道的“X”,往往造成点击广告本身的错误。)足够的可点击区域解决此问题。

对于无障碍指南AAA级成功请注意,大小“指针目标”,必须至少有44与少数例外,涉及到链路上下文的44个CSS像素。

设计视觉启示

手机设计

难道一个可点击的目标模样的东西,用户应该联系吗?

虽然这可能是一个超级简单的概念,它常常被遗忘。使用众所周知的和公认的图案和设计元素,视觉启示让用户知道做什么用的互动元素做当他们看到它更容易。

对于可点击目标常见视觉启示包括:

  • 下划线或不同颜色的嵌入式文本链接
  • 放弃对物体阴影或阴影里
  • 圆角或圆
  • 提供可操作的文本元素,如“登录”或“提交”
  • 在任一侧上在柱分离位置,而不其它目的

创建悬停和聚焦状态

手机设计

悬停状态是桌面设备上的互动元素,一个被广泛认可的选择。当通过可点击项目的鼠标移动时,它可以改变颜色,移动,或在比以前的方式不同的反应。

这些行动并不真正为移动点按目标工作,因为没有鼠标或指针走动的画面。但是,这并不意味着他们不是同样重要。

悬停状态是外观设计的桌面版本的重要。

悬停状态是外观设计的桌面版本的重要。在到活动状态示出,如果/当一个按钮或抽头元件是活动的或以触觉方式“按下”移动,这microinteraction演变的条款。

本发明还涉及聚焦状态作为一个辅助工具,当用户通过键盘或屏幕阅读器导航到一个抽头目标。聚焦状态将显示什么目标当前被选择,如挑染的活性盒的形式或关闭/打开切换到在设计某些元素(如键盘开口)。

填充足够

除非你正在设计一个黑暗的模式,你可能希望确保用户轻按预期的目标,而不是附近的对象。围绕每个可点击要素充分填充可以解决这个潜在的问题。

除了使水龙头元素至少44px,包括至少另一个空间8像素周围的龙头区域的所有道路。一个更好的做法是使用填充等于它周围的水龙头元素的大小的一半。这有助于防止意外窃听。

文字也清晰和可操作

手机设计

在可点击要素的设计文本提供了一个行动和交互环境。

当涉及到文本指令的外观一对夫妇的事情趋势。

  • 按钮,然后点击要素使用首字母大写
  • 字体是简单的,以规则或中长款

有考虑,当谈到编写UI副本也是如此。

  • 文本是直接可行的,并告诉用户接下来会发生什么,哪怕是一点点时间比“点击这里”
  • 但是,消除任何不必要的词
  • 避免行话或可爱的语言,并直接
  • 是一致的,并使用相同的术语在整个设计(或“登录”做用户“符号”?)

文字链接不遵循所有相同的规则,其他可点击要素,但设计应包括平等的考虑。

考虑的第一件事是如何经常使用在线文本链接。这些也很难轻敲小屏幕和更多的链接有,越有可能是这些地区的自来水可以重叠,并引发网友参与了错误的链接。

最好的建议是谨慎地使用他们,如果你可以使用更多的按钮式链接。

接下来的最好的建议是创建一个扩展晕或周围的文本链接按区域,使其更容易有效地挖掘。这是在菜单文本链接或链接在页脚常见。(这使得在主体拷贝意义不大。)

WCAG辅助功能准则提供内联的目标多一点指导:

“目标可以在一条线上的任何地方出现,并基于可用屏幕的宽度可以改变位置。由于目标可以上线的任何地方出现,大小不能超过的句子或段落之间的可用文字和间距较大,否则目标可能重叠。这是指,被包含在一个或多个句子中被排除在目标尺寸要求为此目标“。

点击目标可以(也应该)有层次

手机设计

您的设计可能包括几种类型的可点击的目标,每个都有自己的外观和感觉。

这种设计架构正在成为这样或那样的按钮选择或基于网站或业务目标的可点击的目标水平越来越普遍。

在层次结构顶部的按钮应该有最对比度,在尺寸最大,减少比例根据所需要的用途。

这是什么的可点击目标的设计架构是什么样子?

首先,确定你多少级需要。对于大多数项目,主要和次要的选项就足够了,但有些项目进入第三和第四级的点击元素。

设置每一种风格。先从主要的设计。它可能是一个彩色/梯度按钮。这是你希望用户先点击元素。二级设计应类似于主按钮,但包括以下的变化之一:鬼风格,少对比色,或更小的尺寸。第三和第四级的按钮可以使用那些相同的更改。

在层次结构顶部的按钮应该有最对比度,在尺寸最大,减少比例根据所需要的用途。

是否有抽头的元素,你希望用户看到第一和交互使用?使用可点击要素具有明显的视觉层次,建立用户流量和意图。

点击元素应该有大小和形状这是显而易见的用户,它应该触摸的设计(注意上方的中心橙色+按钮)。大小可能是最重要的考虑因素之一,帮助方面预测用户意图。

一个忠告:尽管自来水的目标层次是一件好事,太多的选择可以创建用户受挫。这是一个微妙的平衡,应进行测试。

结论

是的,我们还在设计为大拇指。这仍是如此,无论大(或小)的手机怎么样了。可点击目标可以从按钮什么的控制与用户和他们搞,使网站或应用工作作为设计的共性文本链接。

良好的可点击的目标看起来像是应触摸(或点击)并执行年代由用户期望的动作。

可悲的是,这些设计元素往往是设计过程中的一个被遗忘的部分。不要陷入与你的项目是陷阱。