关注每日深度好文分享,正能量经典好文分享!

当前位置:主页 > 好文分享 >

回顾|按钮设计的7个基本原则

  • 原创
  • 好文分享
  • 2022-06-29 03:45:01
  • 本文有1038个文字,大小约为5KB,预计阅读时间3分钟

在这几种常见的模式当中,带有阴影和色彩填充的按钮,对于用户来说是最清晰的,因为它在视觉上是有三个维度的,用户会感知到这是一个可按下去的元素。

不要忘记留白

按钮本身的视觉属性很重要,而按钮附近的留白同样重要,他们让按钮更容易被识别,也更容易交互。在下面的案例当中,用户很可能会将文本内容和幽灵按钮混淆。用户在此无法判断它到底是一个盒子元素,还是个按钮。

2. 将按钮放在用户希望看到的地方

用户对于页面交互其实是有基本的感知和期望的,也就是说用户对于按钮的位置是有个基本的认知的。不要让用户到处找按钮,它最好在用户所期望的位置出现。

尽可能使用传统的布局和标准的 UI 模式

所谓传统的布局也就是贴合用户经验的布局,用户在浏览的时候会对于这样「标准」的 UI 布局有明确的预期,在对的位置看到了对的按钮,整体更容易理解,自然也就可以轻松和界面进行交互了。

想要确认设计的可用性,只需要观察用户在使用过程中是否会通过操作抵达你希望他们到达的位置,并且找到需要点击的按钮。

3. 按钮上应该加上相应操作的标签

当按钮的文本标签上的内容写的太过于宽泛,或者使用带有误解的内容,可能会让用户感到迷惑。每个标签上的文本标签都应该尽量准确,简明直接地介绍清楚它的真实功能。

用户应该清楚他们点击按钮之后,会发生什么。举个简单的例子,想象一下,你不小心触发了一个删除按钮,现在你看到了下面的报错信息:

在这个界面当中,「OK」是一个相当模糊的表述,并没有说明按钮的作用。不论是「确定」还是「取消」,都没有说清楚这个操作的真实含义。尤其当删除是一个存在潜在危险的操作,这个操作就更加需要精准的表述。所以,这个地方两个按钮应该是「删除」和「取消」更合适,而删除应该用红色进行区分标识,让用户意识到这个操作的重要性或者独特性。

4. 按钮应该拥有合理的尺寸

按钮的大小应该反映出屏幕上这一元素的优先级,更大的按钮应该意味着更重要的交互。

按钮优先级

让更重要的按钮在视觉上就足以体现它的重要性。始终尝试让主要的按钮更加突出,增加它的尺寸,并且使用高对比度的色彩来吸引用户的注意力。

在 Dropbox 的界面上,设计师就是使用了大小和色彩的对比来创造优先级。

让按钮适配用户的手指

在许多 APP 当中,按钮的设计太小了,这可能会导致用户出现误触的情况。

△ 左侧:正确的按钮尺寸;右侧:按钮尺寸太小

麻省理工学院的实验室研究发现,手指垫宽度的平均值在10~14mm 之间,指尖在8-10mm 之间,这使得10×10 mm 的按钮尺寸是比较合理的。

5. 注意按钮的次序

按钮的顺序应该反映出用户和界面之间交互的属性,问问自己用户期

回顾|按钮设计的7个基本原则

望在屏幕上看到什么样的顺序,或者说什么样的顺序更合理,然后进行相应的设计。

举个例子,比如「上一步/下一步」两个按钮应该如何安置方位呢?通常而言,「上一步」是回卷操作,应该在左边,而「下一步」则是前进操作,应该在右边。

6. 避免使用太多按钮

这是许多 APP 和网站中经常出现的一个问题。当你提供太多的选择的时候,用户往往会无所适从。无论是设计网站还是 APP,请务必尽量考虑最重要的操作,控制好优先级和复杂度。

△ 太多的按钮

7. 为按钮交互提供视觉和音频反馈

当用户点击按钮的时候,他们更希望界面能够给予适当的反馈。基于不同的操作,界面给予视觉或者音频的反馈。当用户没有收获任何反馈的时候,他们可能会觉得界面没有收到他们的操作,从而反复点击,执行多次不必要的操作。

人类和物理世界交互,获得反馈,然后执行更多的操作,这种机制是人类进化中所形成的认知,这种反馈可以是视觉,也可以是听觉,这些反馈会告诉用户发生了什么。

对于某些操作,比如下载,不仅要告诉用户他们的操作执行成功了,而且要显示当前的进度。

作者 : Nick Babich

译者/编辑 : 陈子木

译文地址:https://www.uisdc.com/7-basic-rules-button-design

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请发送邮件至1450188540@qq.com举报,一经查实,本站将立刻删除。

猜你喜欢

微信公众号