我最喜欢的设计元素是按钮。 在这个备忘单中，我们将介绍不同类型的按钮，状态和交互。 出于这个故事的目的，我们将忽略单选按钮，选项卡，复选框和其他类型的按钮 – 我们将只看到’普通’按钮。
接下来要介绍的按钮分类如下：
* 动作按钮
* 常用按钮样式
* 按钮的颜色和形状
* 按钮状态和反馈
* 标签按钮
* 触摸屏按钮
* 按钮的位置
* 系统按钮
* 总结
一.动作按钮
我们将分析按钮的层次结构和它们通信的语言。虽然有些按钮通熟易懂，但按钮操作不取决于它们的外观，而是取决于用户的行为。
1. Call to action (CTA / C2A) 行为按钮
在设计中行为按钮通常会提示用户注册/立即购买等。在产品设计中如果强烈建议用户应该做的事情应该使用CTA按钮。
对于CTA按钮，我喜欢使用圆形按钮，这样会更引人注目。
2. Primary action 主要操作按钮
虽然CTA按钮和主按钮看起来相同，但我喜欢将它们分开。主按钮应该是一个强大的视觉指示器，可以帮助用户完成他们的旅程。主按钮应该在用户可能想要“下一步”、“完成”、“开始”等的情况下使用。
对于主要操作，我喜欢使用实心按钮。
3.次要操作
辅助按钮是“返回”到主按钮的“下一个”，或“取消”按钮到“提交”按钮。辅助按钮是我们为用户提供主要操作的替代方案。
我更倾向于使用线性按钮或文本链接作为辅助按钮。
4.三级操作
三级按钮通常用于其他操作：操作很重要，但可能不是用户当时想要做的事情。这是“添加朋友”，“阅读更多”，“编辑”或“删除”之类的内容，前提是它们不是主要操作。
二、常用按钮形式
下面我们将介绍常见的按钮样式，不同风格的按钮样式和他们的使用技巧。
1.实心按钮
实心按钮是带有实心填充的按钮。
2.线条和幽灵按钮
线性按钮和实心按钮正好相反，一个没有填充的按钮 – 只是一个轮廓。虽然经常互换使用，但我更喜欢将线性按钮视为浅色（在白底下按钮的轮廓和文本颜色深一点更明显），将幽灵按钮视为深色（在黑底下按钮的轮廓和文本颜色浅一点更明显）。
3.圆形按钮
圆形按钮其边缘设置为最大圆角半径。
如果你想了解更多有关圆形按钮的信息，我最近看了一下Shan Shen关于圆形按钮的故事，十分推荐。
4.FAB（浮动动作按钮）
浮动动作按钮是一种巧妙的设计模式，受到Google Material Design的欢迎。虽然它们可能看起来像一个图标按钮，但它们实际上用于屏幕上的主要操作。
如果您想了解有关FAB的更多信息，我建议您在Material Design的网站上查看“按钮：浮动操作按钮”。
5.文字链接
文本链接是一种非常简单的按钮类型。有几种不同的方式可以表明某些东西是一个链接。这可以是颜色，下划线，或链接的位置，甚至只是文本本身（例如“阅读更多”）。
在颜色方面，大多数网站使用蓝色，因为它是最容易识别的链接。为什么经典文字链接’蓝色’你可能会问？它一直追溯到Tim Berners-Lee爵士，一般被认为是万维网的发明者（旁注：想象在你的简历中’发明了万维网’）。虽然在他选择颜色时看起来并不是他的想法 – 蓝色很酷的事情是，即使是色盲的人通常也能看到它。
6.带图标的标签按钮
图标按钮越来越受欢迎，一些按钮仍然需要一个标签来确保按钮的语意明了。
处理图标和标签时最棘手的事情是弄清楚字体组合的图标有多大。
方法1：让图标的大小对齐字体的顶线。
方法2：让图标的大小对齐字体的行高。需要注意的是确保图标和字体的组合视觉均衡。
7.图标按钮
图标按钮没有标签，只是一个图标。因为它们没有标签，所以它们在界面中节省了大量空间。图标按钮还可以将其他图标按钮一起排列在它们的小空间中。
如果你在为计算机认知度较低的人群设计产品时，我建议使用带标签的按钮 – 尤其是那些很抽象的语意。
8.带有文本链接的图标
某些文本链接可能带有图标。这些通常不会在正文中使用。
三、按钮配色和造型
在设计按钮时，需要考虑以下几个不同的元素。
1.颜色
在设计产品时，你应该要考虑有视觉障碍的人。为确保每个人都可以访问你的颜色，你可以使用在线对比度检查器。我使用的是那个。( https://accessible-colors.com/ )
另外，在选择颜色时应该考虑色彩心理学。红色按钮多用于删除，黄色按钮多用于警示等。
2.边界半径
边界半径为按钮提供了很多个性化设计。具有更圆半径的按钮看起来更有趣。
3.投影
按钮上的阴影使按钮感觉它就像立在页面上一样，自然会引起注意。阴影也可用于指示不同的状态。Material Design通过使按钮在悬停时投影更深来实现这一点。
4.标签文本样式
标签文本样式归结为字体以及阅读的容易程度。选择字体时，请确保它清晰可辨。
以下是一些简单的方法可以让字体清晰易读：
* 选择大写的标签或大标题。（Material Design使用过带有大写标签的按钮。）
* 确保标签颜色与按钮填充对比较为突出。您可以使用( http://accessible-colors.com/ ) 查看。始终确保您的颜色符合AAA要求。
* 选择字体时，请确保字体清晰易读。中等字重
5.垂直内间距
按钮的大小对界面的可访问性起着很大的作用。大多数没有经验的设计师会说“按钮的高度应该是36像素”（这里的意思是将高度固定死）。如果你是为产品系统的设计按钮。你应该采用所用字体的行高，并在其中添加一定单位的内间距。例如：“我的按钮文本标签的行高为20px，垂直内间距为8px”。 （这里是将按钮高度跟着字体高度变化）
为什么会这样设定呢？这里有两个原因：
1）有视觉障碍的人可能会增大浏览器中的字体，因此他们需要更改字体大小而不会将按钮高度定死。
2）这也是开发人员创建按钮的方式-他们在DIV容器中添加内间距，而不是固定高度。
5.水平内间距
第一种选项：
使按钮宽度与网格对齐。这是保持所有按钮长度一致的好方法。但是，它确实限制了您可以使用的单词数量。
第二种选择：
两侧有固定内间距。 我通常还会定按钮最小宽度，虽然避免了很窄的按钮，但是最小宽度按钮可容纳的不同字段会让按钮看上去不是很均匀。
四、按钮状态和反馈
按钮状态让用户知道他们是否可以点击或点击，或者是否已成功点击按钮。您还应该记住，按钮可以具有重叠状态。例如，它可以同时“点击”和“悬停”。
1.点击和禁用状态
点击状态就是鼠标可以点击按下按钮的状态，当然如果用户没有完成必要的步骤，按钮可以被禁用。例如用户没有输入他们的姓名和电子邮件地址，他们就不能提交他们的详细信息。
2.悬停和悬停离开（鼠标悬停和鼠标悬停离开）
在PC端按钮应具有不同的状态，让用户知道它是可点击的。通常“悬停”状态和“悬停离开”状态相反，但也不一定。你应该有效的区分让用户感知鼠标悬停在某个按钮上。
平板电脑和移动设备上永远不会出现悬停状态，因为你的手指无法“悬停”。如果您正在为应用程序进行设计，请不要担心此状态。
3.焦点
焦点状态可能会让用户困惑。
如果您的用户精细运动技能较差，他们可能需要使用跳格导航。用户将点击键盘上的“Tab”键在网站上跳转导航，从一个导航链接移动到下一个。这意味着按钮需要有一个“焦点”状态才能显示它是“可点击的，但尚未点击”。
焦点状态的另一个示例是单击输入字段时。如果你要开始输入，只有那个开始输入字段 ，而不是另一个。
默认的焦点状态是蓝色“发光”，幸运的是，我们生活在一个可以自定义按钮状态的时代。大多数设计师对悬停和焦点状态使用相同的视觉提示。
4.按住
按住状态是当用户的光标或手指“按住”按钮时的状态。当用户将手指或光标“释放”在按钮上时，该按钮会指示为“已点击”。
5.点击
按钮需要“点击”状态以向用户指示它已被点击。
五、按钮标签
按钮标签的诀窍是一致性。我们在产品设计前期需要制定按钮标签的规范，以避免以后花更多时间去改变你所有的按钮标签。
1.使用动词
大多数按钮包含动词以指示按钮将执行的操作，例如“保存”，“发布”，“编辑”。虽然’Back’和’Next’不是动词，但在界面的上下文中它们似乎以相同的方式工作。我喜欢在编写按钮标签时保留’动词’+’名词’结构 – 这使得动作更具说明性，例如’保存帖子’，’下一步’等，而不是’保存’，’下一步’ – 但是选择取决于您和您的用户。
2.大小写（英文）
您还应该决定使用什么字体大小写。以下是我使用的一些通用指南：
- 所有大写，例如’NEXT SECTION’。我将它们用于更“专业”的平台。Material Design使用全部大写的按钮。
- 首字母大写，例如“ Next section ”，我倾向于避免使用首字母大写，因为它不像句子首字母大写那样容易阅读。在语气方面，我认为它介于“专业”和“对话”之间。
- 句首字母大写，例如“ Next section ”，我将句子用于更“友好”或“对话”的平台。注意：这是句首字母大写（句子） 一般是一个完整的句子，本应该有句号，但是设计美观，请不要添加句号。
- 小写，例如“ next section ”。与首字母大写一样，我不倾向于经常使用小写按钮标签。我认为他们是最“随意”的。
3.一致性
为按钮编写标签时，请确保一致性。以下是一些我在项目使用的指导原则：
选择字数：每个按钮一个、两个或多个字
选择大小写：句子大小写，或大写，或标题大小写，或小写
标签结构：如“动词”+“名词”，或“动词”等。
六、触摸屏按钮
1.桌面按钮大小（单击）
由于桌面上的光标小于触摸屏上的手指，因此可以使按钮更小。但是你想要吗？
用户永远不必去寻找按钮，因此您可以为您的界面设计正确的层次结构和导航。
2.触摸屏按钮尺寸（手指点击）
麻省理工学院触摸实验室的研究表明，用于触摸屏的手指部分为8-10mm，因此如果你想避免用户手指点击错误，最小目标尺寸必须是10mm或更大。如前所述 – 我是关于大按钮的。
那么，按钮应该是多大？专家们建议：
Material Design
虽然我找不到有关iOS设计系统目标尺寸的任何文档，但一般的理解是其最小目标尺寸为44 x 44pts。
如果您在设计大小尺寸方面遇到困难 ，我强烈推荐Zac Dickerson 关于可访问性的故事。
七、按钮位置
如果你非要放置2个按钮，主按钮应放在哪一侧？
选项A显示左侧的主按钮。这里的论点是它可能是用户想要首先看到的，所以先显示它。
选项B显示右侧的主按钮。这里的论点是我们希望用户首先看到辅助按钮，以便他们在继续前知道有哪些选项可供选择。
八、系统按钮
这里会介绍一些很酷的设计原则和系统。我喜欢Material Design System的按钮，因为他们的原理是经过深思熟虑的。
Material Design System的按钮
Material Design中介绍了按钮的操作，以及按钮如何与系统中的其他组件交互。我喜欢用户在触摸屏上使用按钮的交互方式。
查看按钮部分：
https://material.io/design/components/buttons.html
悬浮按钮部分：
https://material.io/design/components/buttons-floating-action-button.html
九、总结
如果没有按钮，你就不能真正构建界面；我们应该更多的关注它们。了解按钮在界面中是如何设计的，怎样正确的使用按钮并为你的用户提供最佳的体验。
