5种设计有效按钮的最佳做法

web前端开发

共 1514字,需浏览 4分钟

 ·

2021-04-12 10:11

英文 | https://uxplanet.org/5-best-practices-for-designing-effective-buttons-71a4a33e6d26

翻译 | web前端开发公众号


按钮是创建流畅对话的重要元素。

对我来说,一位伟大的设计师是一个有足够经验来做出实际决策的人。还有知道如何设计直观产品的人。我渴望成为这样的人。
因此,我尝试在每个步骤中学习和更新我的知识。
在设计按钮方面,到目前为止,已证明一些基本实践是有效的。重点在于了解什么能引起注意并激发用户采取行动。
有5种最好的做法,我很乐意与大家分享。

1、按钮功能明确

你如何设计“取消”和“确定”按钮?它们如何在交互设计中顺利发挥作用?
它们是主要的操作按钮,在与你拥有的任何设备轻松创建对话流程中发挥着关键作用。
因此,最重要的是这些关键操作按钮的含义要明确。应该有一些不言自明的东西,例如,图像或一些文本。
而且,“取消”按钮永远都不应引起人们的注意。它不会对系统进行更改,通常会使用户返回其先前的屏幕。
Mac OS的废纸button按钮就是一个很好的例子。我们所有人都在不知不觉中知道,“清空垃圾箱”表示可以。Apple选择使用操作动词,而不是OK来增强警告效果。

2、让重要按钮脱颖而出

制作按钮时的重要规则之一是不要让用户玩按按钮搜索。尤其是当它们看起来非常相似时。
用户从未阅读过。他们扫描界面以查找所需的东西。使按钮脱颖而出很重要。
给用户一些帮助。花几秒钟使操作按钮更加突出。因为我们正在尝试使其变得明显,所以为什么不将其扩大一些,或尝试使用较亮的颜色。只是不要让它变得微妙。

3、做每个人都可以理解的设计按钮

假设你正在设计调查表。你将如何设计它来传达内容并减少视觉偏见?
你将“下一步”按钮放在哪里?“上一步”按钮如何设计?你如何将它们放在一起?哪一个去左边,哪一个去右边?
你可以从各种研究中找到不同的调查结果,这是一个很好的证明。在很大程度上,这取决于文化和语言差异。
从逻辑上讲,对于从左到右阅读的语言,“上一步”按钮应位于左侧。那从右到左阅读的人呢?你是否制作其他调查表?
为了避免这种情况,你只需要简单的键盘语言“ < ”和“ > ”即可实现。因为它们是通用的。
小时候就在你的卡带播放器中。他们也在你的车里。它们在每个电视遥控器中。他们无处不在。

4、避免做太多的按钮

不要一次提供太多选择。对于许多网站来说,这似乎仍然是一个普遍的问题。
如果提供的选项太多,用户将感到沮丧,并且在最佳情况下什么也不做。
因此,请首先考虑最关键的操作,然后按重要性顺序进行尝试。

5、让按钮看起来像是按钮

最后也是最重要的是,使按钮看起来像是按钮。
按钮的关键在于它们需要看起来像按钮。尽管看起来很明显,但我们仍然时不时地看到凌乱的旧按钮。按钮是如此重要,它们是人与设备进行交互的唯一来源。
在边缘周围加一点阴影。从而它们就可以从背景中脱颖而出。

总结并快速回顾

在任何交互式系统中,按钮都很重要,也值得关注,它可以帮助用户实现其目的。
设计按钮的5种最佳做法是:
  • 使按钮功能明确。
  • 让重要的按钮脱颖而出。
  • 设计每个人都可以理解的按钮。
  • 避免制作太多按钮。
  • 让按钮看起来像是按钮。
这些快速提示曾经对我有很多帮助。我希望他们也能为你提供帮助。
感谢阅读。

学习更多技能

请点击下方web前端开发


浏览 13
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报