按钮的工作原理总结（按钮设计的11个问题）
按钮的工作原理总结（按钮设计的11个问题）“删除帐户”是一种潜在的危险操作，这就是为什么负责此操作的按钮被涂成红色Gmail界面中的“发送”按钮会立即吸引用户的注意无边框与有边框按钮颜色是我们用来与用户交流的视觉语言的重要组成部分。选择颜色时，需要记住以下几点：
按钮是几乎所有用户界面的关键元素，它们允许用户采取行动。页面、对话框、输入表单、工具栏——所有这些组件都需要按钮。
在这篇文章中，我想回顾一下视觉设计师关于按钮设计的最常见的问题。
1.我可以设计无边框的按钮吗？好按钮设计的基本规则很简单——按钮应该看起来像按钮。边框增强了传统按钮的感觉，并为用户创造了醒目的目标。没有边框，UI元素看起来更像是一个链接而不是按钮。这就是为什么如果可以选择的话，使用可见边框会更安全。
无边框与有边框按钮
2.我应该为按钮选择什么颜色？颜色是我们用来与用户交流的视觉语言的重要组成部分。
选择颜色时，需要记住以下几点：
- 对比色让你更容易在布局中找到按钮。
Gmail界面中的“发送”按钮会立即吸引用户的注意
- 颜色增强了动作的本质，在选择特定颜色时，可以依赖于常见颜色的含义。例如，对于可能存在危险的操作（如删除用户信息），请坚持使用红色。
“删除帐户”是一种潜在的危险操作，这就是为什么负责此操作的按钮被涂成红色
但是，无论你选择使用什么颜色，要确保每个使用你产品的人都能使用这些颜色。
3.我应该使用圆形还是锋利的按钮？
圆形和锋利的按钮
圆形按钮对用户有两个好处：
- 圆形对于人眼来说更令人愉悦，人类天生会避免尖锐的东西，有些人甚至有恐尖症(害怕尖锐的东西，比如铅笔、针、刀)。
- 圆形将用户的焦点指向按钮的中心，即文本标签所在的位置。因此，用户更有可能阅读标签。
但是，在进行设计决策时，应根据产品的视觉设计选择按钮的形状。如果视觉设计使用了很多严格的几何对象，则你可能应该使用边缘锐利的按钮。
锋利的按钮，图片由transferwise提供
4.我应该制作多大/小按钮？其目标是使用户能够舒适地与UI进行交互。这意味着你需要设计所有的UI元素来最小化错误操作的风险。按钮的大小应该:
- 使用户更容易阅读标签（清晰易读的文本标签），选择一种适合多种尺寸和重量的字体是很重要的，这样可以保持每种尺寸的可读性(确保你选择的字体在较小的屏幕上都是易读的！)
- 使用户更易于与UI元素进行交互（易于单击/点击）。这一点对于触摸界面尤为重要，因为小的触摸目标会增加错误操作的风险。建议创建一个大小为9毫米大小的控件，以便可以用手指准确地点击它们。这样的目标可以让使用者的手指舒适地放入目标中。
适当大小的触摸目标使用户更容易与产品交互，苹果图片
5.何时使用实心按钮与ghost 按钮？
近年来，空心按钮是近年来最流行的，它们对于登录页面特别常见。但是当涉及到用户体验方面，重要的是要记住，重影按钮在吸引用户注意力方面的效率要差得多（因为它们在视觉上的重量较小）。
这就是为什么应根据要对按钮进行强调的程度来选择重影与填充按钮的原因。通常，填充按钮用于高强调，因为有更多的颜色对比。出于同样的原因，不建议将幻影按钮用作主要的号召性用语按钮。
有时你需要并排显示两个号召性操作按钮。在这种情况下，填充按钮应用于主要CTA，而空心按钮应用于次要动作。这个高强调按钮吸引了最多的注意力，而ghost 将用作替代。
一起使用填充和重影按钮，图片来自特斯拉
6.如何写一个好的文本标签？文本标签描述了用户点击按钮时将发生的操作，大多数设计人员都知道按钮的操作对用户应该是清楚的。
好的标签是可行的，它们通过说明用户点击某个动作时会发生什么，来提示用户完成某个动作。这就是为什么建议使用动词（如，发送、获取、应用）来清楚地描述操作的原因。例如，当你的用户要发送一封电子邮件时，设计按钮的标签是“发送”而不是“提交”。
“提交”不能描述动作
7.按钮标签可以使用多少文本?有时候，设计师会在文本标签中使用过多的单词。虽然更多的单词可能意味着更清晰，但同时，它也意味着更多的视觉混乱。
这里有两件事要记住：
- 避免换行，为了使文本清晰易读，文本标签应保留在一行上。
不要换行
- 按钮容器的宽度不应窄于其文本。
为按钮容器选择合适的尺寸
试着在每个按钮上使用一个或两个单词。
8.文本标签可以使用全大写吗？设计师倾向于避免在文本中使用全大写，原因有两个：
- 全大写会使文本难以阅读和理解，如果用大写字母打字、标题和常规文本都不容易辨认。所有大写字母的标题阅读时间要长13％至20％（Breland K. & Breland的研究）
- 人们不喜欢用大写字母阅读说明，因为他们觉得对方正在教他们如何正确做事。
但是按钮标签呢？所有大写字母自然需要用户的更多关注，当您希望用户在执行特定操作时避免出错时，可以将所有的大写用于按钮标签。如删除重要文件。
常规标签与全大写标签
9.我可以用图标替换文本标签吗？当然可以，但前提是该图标具有通用含义（例如主页、打印、共享或购物车）。对于其他图标，你需要确保用户可以解码你的图标含义。如果用户不清楚含义，则可以将图标与文本一起使用以传达含义。图标将自然地唤起对按钮对象的注意，而文本标签将阐明该按钮的含义。
购物车是大多数用户熟悉的图标
但是不要在同一按钮中使用两个图标。
同一按钮上使用的两个图标可能会使用户感到困惑
10.我应该在按钮上使用阴影吗？通常，阴影将帮助你增加按钮的视觉突出度，并将重点放在按钮上。但最终，是否要对按钮使用阴影的决定应基于用户界面的样式。如果大多数UI元素是平面的，也许你不应该为按钮使用阴影。
平面vs.伪3D按钮（带阴影）
11.如何传达按钮状态？不仅一个按钮的动作对用户来说应该是清晰的，你还需要确保状态是清晰的。通常，可以定义按钮的以下状态:
- 正常（活动），活动状态是当一个按钮是可单击/可执行的。
- 悬停（仅限桌面），这种额外的状态可以使用户确信某个元素是交互式的。
- 按下 Button 的视觉设计承认用户单击/轻击了按钮。
- 禁用，当用户尚未完成必要的操作时，可以禁用该按钮。
颜色和不透明度可用于传达状态。
与不透明通信的正常和禁用状态
在涉及用户界面设计时，你需要考虑很多事情——可靠性、可用性、可访问性，这只是其中的几个。
文中所用图片来自网络，如侵权，请联系删除
想要了解汽车更多内容，就留言联系我们吧！
来源：Nick Babich：11 Questions About Button Design
- 服务内容 -
