我最喜欢的设计元素是按钮。实际上，我爱按钮。在本备忘单中，我们将介绍不同类型的按钮，状态和交互。出于本故事的目的，我们将忽略单选按钮，选项卡，复选框和其他类型的按钮-我们仅查看“常规”按钮。
我们将在本备忘单中介绍以下内容：
- 按钮动作
- 常用按钮样式
- 按钮颜色和样式
- 按钮状态和反馈
- 按钮标签
- 接触目标
- 按钮位置
- 按钮名人堂
- 总结思想
1、按钮动作
在本节中，我们将研究按钮的层次结构以及它们交流的语言。按钮动作不是由外观决定的（尽管用户应该能够了解按钮的样式含义），而是由按钮的使用方式决定。
1.号召性用语（CTA / C2A）
根据情况，一个号召性用语按钮通常会提示用户注册/注册/立即购买/等。如果平台要强烈建议用户应做的事情，则应使用CTA按钮。
对于CTA按钮，我喜欢使用圆形按钮，因为它们引人注目且引人注目。
2.主要行动
尽管CTA按钮和主按钮看起来一样，但我还是希望将它们分开。虽然CTA按钮是界面要你执行的操作，但主按钮应该是强大的视觉指示器，以帮助用户完成旅程。主按钮应该用于用户想要点击“下一步”、“完成”、“开始”等的情况。。
对于主要动作，我喜欢使用固定按钮。
3.次要行动
辅助按钮是“返回”到主按钮的“下一个”，或“取消”按钮到“提交”的按钮。辅助按钮是我们为用户提供的主要操作的替代方法。
我（以及互联网的其余部分）倾向于将行按钮或文本链接作为辅助按钮。
4.三级行动
第三级按钮通常用于其他操作：该操作很重要，但可能不是用户当时想要做的事情。比如“添加好友”、“添加新”、“编辑”或“删除”，只要它们不是主要操作。
一般来说，为此将使用较小或不太突出的按钮样式。
2、常用按钮样式
在本节中，我们将介绍常见的按钮样式。样式只是按钮的美观，而不是应如何使用。
实心按钮
实心按钮确实听起来像–它们是实心填充按钮。做完了。
线条和幽灵按钮
线按钮也听起来像是：没有填充的按钮-只是轮廓。尽管通常可以互换使用，但我更喜欢将行按钮视为浅色（带有深色轮廓和文本），将幽灵按钮视为暗色（带有浅轮廓和文本）。
圆形按钮
圆形按钮是指其边缘设置为最大圆形边界半径的按钮。
旁注：圆形按钮堆叠起来看起来很可怕。每当你堆叠圆形按钮时，UI Designer都会哭。
如果你想了解更多关于圆角按钮的信息，我最近读了山申写的关于圆角按钮的故事，我非常推荐它。
FAB（浮动操作按钮）
浮动操作按钮是一种巧妙的设计模式，受到Google的Material Design的欢迎。尽管它们看起来像是图标按钮，但实际上是用于屏幕上的主要操作。
文字链接
文本链接是一种非常简单的按钮类型。有几种不同的方法来表明某物是一个链接。这可能是带有颜色，下划线，链接的位置，甚至可能是文本本身（例如，“阅读更多”）。
关于颜色，大多数站点使用蓝色，因为它是最容易识别的链接。为什么你可能会问经典文本链接为“蓝色”？它可以追溯到蒂姆·伯纳斯·李爵士（Tim Berners-Lee），他通常被认为是万维网的发明者（旁注：想象一下，在你的简历上“发明了万维网”）。尽管当他选择颜色时似乎并不在意可访问性-蓝色的妙处在于，即使是有色盲的人也通常仍然可以看到它。
带标签按钮的图标
图标按钮已经越来越流行，但是某些按钮仍需要标签以确保按钮正确通信。
处理图标和标签时最棘手的事情是弄清楚与字体有关的图标大小。
选项1：使图标的大小类似于字体的字体高度。
选项2：使图标的大小比行高大很多。
请注意：如果图标仅比上限高度大一点，它将看起来不平衡或出现错误。它应该大约相同的上限高度，或者更大一些-避免介于两者之间。
图标按钮
图标按钮没有标签，只是一个图标。由于它们没有标签，因此可以在接口中节省大量空间。图标按钮还允许你将其他图标按钮放在它们旁边的小空间中。
请注意：如果你是为计算机知识水平较低的人设计产品，我总是建议你使用带有标签的按钮-特别是对于更抽象的含义。
带有文本链接的图标
某些文本链接可能带有图标。这些通常不位于正文中。
3、按钮的颜色和样式
设计按钮时，需要考虑几个不同的元素。
1.颜色
在设计产品时，你应该始终考虑残障人士。为确保所有人都能使用你的颜色，可以使用在线对比度检查器。这是我用的那个。
另外，在选择调色板时，请考虑颜色语言。与绿色按钮相反，使用红色按钮可能会在上下文中传递不同的消息。
例如，绿色的“删除”按钮和红色的“保存”按钮会引起混淆（除非你是Pinterest）。
2.边界半径
在我看来，边界半径赋予了button很多个性。锐利的边缘按钮看起来更严肃，而圆形半径的按钮看起来更有趣。
旁注：如前所述，圆形按钮堆叠起来看起来不太好。
3.阴影
按钮上的阴影会让按钮感觉像是离开了页面，自然会让人注意到它。阴影也可以用来表示不同的状态。Material Design通过使按钮在悬停时更“贴近”你的手指，可以做到这一点。
4.标签样式
标签样式取决于字体以及它的易读性。选择字体时，请确保其清晰易读。
这是使字体易于阅读的一些简单方法：
确保标签颜色相对于按钮填充突出。你可以使用http://accessible-colors.com/进行检查。始终确保你的颜色符合AAA要求。
选择字体时，请确保其清晰易读，足够大以至可以看到并且粗细适中。
5.垂直填充
按钮的大小在界面的可访问性中起着重要作用。大多数没有经验的设计师都会说：“按钮的高度应为36像素”。这不是最佳方法，尤其是在为Web设计时。你应该始终使所用字体的行高并为其添加单位。例如：“我的按钮的标签的行高为20px，垂直填充为8px”。
这有两个原因。1，有视觉障碍的人可能会在他们的浏览器中增加字体大小，因此，他们需要在不改变按钮高度的情况下改变字体大小。2，这就是开发人员创建按钮的方式——他们在div容器中添加填充，而不是高度。
6.水平填充
有两种方法可以处理水平填充。
第一种选择：
使按钮的宽度与网格对齐。这是使所有按钮保持一致长度的一种好方法。但是，它确实限制了你可以使用的内容数量。
第二种选择：
在侧面固定填充物。我通常还会添加一个用于按钮最小宽度的子句，以避免按钮过小。虽然这考虑到你可以有不同数量的文字，它可以使你的按钮非常不平衡。
