来源：Medium网站

作者：苔丝加德

翻译：奥创

阅读时长：13min

我最喜欢的设计元素是按钮。事实上，我超爱按钮。在这个文章中，我们将介绍不同类型的按钮，状态和交互。出于这个故事的目的，我们将忽略单选按钮，选项卡，复选框和其他类型的按钮 - 我们将只看到“普通”按钮。

我们将在这个文章中介绍：

· 按钮动作

· 常用按钮样式

· 按钮颜色和造型

· 按钮状态和反馈

· 按钮标签

· 触摸目标

· 按钮位置

· 按钮名人堂

· 结束思想

一、按钮动作

在本节中，我们将查看按钮的层次结构和它们通信的语言。按钮操作不取决于它们的外观（尽管用户应该能够通过其样式了解按钮的含义），而是根据它们的使用方式。

1.行动呼吁（CTA / C2A）

根据情况，号召性用语按钮通常会提示用户注册/注册/立即购买/等。应该在平台想要强烈建议用户应该做的事情的地方使用CTA按钮。

号召性用语按钮

对于CTA按钮，我喜欢使用圆形按钮，因为它们引人注目且引人注目。

2.主要行动

虽然CTA按钮和主按钮看起来相同，但我喜欢将它们分开。虽然CTA按钮是界面要求你做的，但主要按钮应该是一个强大的视觉指示器，以帮助用户完成他们的旅程。主要按钮应该在用户可能想要“下一步”，“完成”，“开始”等的情况下使用。

  主要操作按钮

对于主要操作，我喜欢使用实体按钮。

3.次要行动

辅助按钮是“返回”到主按钮的“下一个”，或“取消”按钮到“提交”按钮。辅助按钮是我们为用户提供主要操作的替代方案。

主要行动旁边的二次行动的两种变化

我（以及互联网的其余部分）倾向于使用线路按钮或文本链接作为辅助按钮。

4.第三次行动

三级按钮通常用于其他操作：操作很重要，但可能不是用户当时想要做的事情。这是“添加朋友”，“添加新”，“编辑”或“删除”之类的内容，前提是它们不是主要操作。

不同形式的三级行动

一般来说，人们会使用较小或较不突出的按钮样式。

二、常用按钮样式

在本节中，我们将介绍常见的按钮样式。风格只是按钮的美学而不是它应该如何使用。

实心按钮

实心按钮正是他们听起来的样子 - 它们是带有实心填充的按钮。完成。

一个坚实的按钮

线条和幽灵按钮

线条按钮也正如它们所说的那样：一个没有填充的按钮 - 只是一个轮廓。虽然经常互换使用，但我更喜欢将线条按钮视为浅色（带有黑色轮廓和文本），将鬼按钮视为深色（带有浅色轮廓和文本）。

线条按钮（左）和鬼影按钮（右）

圆形按钮

圆形按钮是按钮，其边缘设置为最大圆角边界半径。

圆形按钮

旁注：圆形按钮看起来很可怕。每次堆叠圆形按钮时，UI Designer都会哭泣。

如果你想了解更多有关圆形按钮的信息，我最近看了一下Shan Shen关于圆形按钮的故事并且不能推荐它。

FAB（浮动动作按钮）

浮动动作按钮是一种巧妙的设计模式，受到Google Material Design的欢迎。虽然它们可能看起来像一个图标按钮，但它们实际上用于屏幕上的主要操作。

一个FAB按钮

如果您想了解有关FAB的更多信息，我建议您在Material Design的网站上查看“按钮：浮动操作按钮”。

文字链接

文本链接是一种非常简单的按钮类型。有几种不同的方式可以表明某些东西是一个链接。这可以是颜色，下划线，或链接的位置，甚至只是文本本身（例如“阅读更多”）。

文本链接的样式不同

在颜色方面，大多数网站使用蓝色，因为它是最容易识别的链接。为什么经典文字链接'蓝色'你可能会问？它一直追溯到互联网发明者Tim Berners-Lee爵士。虽然在他选择颜色时看起来并不是他的想法 - 蓝色很酷的事情是，即使是色盲的人通常也能看到它。

带有标签按钮的图标

图标按钮越来越受欢迎，但有些按钮仍需要标签以确保按钮正确通信。

带有图标和标签的按钮

处理图标和标签时最棘手的事情是弄清楚与字体相关的图标有多大。选项1：使图标的大小类似于字体的上限。选项2：使图标的大小比行高大很多。需要注意的是：如果图标只比帽高一点大，那么它看起来会不平衡或者像是一个错误。它应该是大致相同的帽高，或者更大 - 避免中间。

图标按钮

图标按钮没有标签，只是一个图标。因为它们没有标签，所以它们在界面中节省了大量空间。图标按钮还允许您在小空间中堆叠其旁边的其他图标按钮。

图标按钮具有不同的风格

需要注意的是：如果您正在为计算机知识水平低的人设计产品，我总是建议使用带标签的按钮 - 尤其是更抽象的含义。

带有文本链接的图标

某些文本链接可能带有图标。这些通常不在文本体内。

各种图标，带链接按钮

三、按钮着色和造型

在设计按钮时，需要考虑几个不同的元素。

1.颜色

在设计产品时，您应该始终考虑有缺陷的人。为确保每个人都可以访问您的颜色，您可以使用在线对比度检查器。这是我使用的那个。

用不同颜色的按钮

另外，在选择调色板时请考虑颜色语言。具有红色按钮而不是绿色按钮可以在上下文内传达不同的消息。

“删除”，“查看警告”，“保存”和“更多”按钮

例如，绿色的“删除”按钮会引起混淆，红色的“保存”按钮也会引起混淆（除非你是Pinterest）。

2.边界半径

边界半径为按钮提供了很多个性（在我看来）。锋利的边缘按钮看起来更严重，而具有更圆半径的按钮看起来更有趣。

具有不同边框半径设置的按钮

旁注：如前所述，圆形按钮看起来堆叠不好。

3.阴影

按钮上的阴影使按钮感觉它就像坐在页面上一样，自然会引起注意。阴影也可用于指示不同的状态。Material Design通过使按钮在悬停时“更接近”来实现这一点。

具有不同阴影设置的按钮

4.标签样式

标签样式归结为字体以及阅读的容易程度。选择字体时，请确保它清晰可辨。

具有不同标签样式的按钮

以下是一些简单的胜利，使字体可读：

选择大写的句子案例或标题案例。（据说，Material Design确实使用带有大写标签的按钮。）

确保标签颜色与按钮填充相比显得突出。您可以使用http://accessible-colors.com/查看。始终确保您的颜色符合AAA要求。

选择字体时，请确保其清晰，大到可以看到，并且中等（重量）。

5.垂直填充

按钮的大小调整在界面的可访问性中起着重要作用。大多数缺乏经验的设计师会说“按钮的高度应为36像素”。这不是最好的方法 - 特别是如果你正在为网络设计。您应该始终采用您正在使用的字体的行高，并为其添加单位。例如：“我的按钮标签的行高为20px，垂直填充为8px”。

具有不同垂直填充的按钮

“你为什么问。这有两个原因。1.有视力障碍的人可能会增加浏览器中的字体，因此，他们需要更改字体大小而不会将按钮高度切断。2.这就是开发人员创建按钮的方式 - 他们为div容器添加填充，而不是高度。“

6.水平填充

有两种方法可以接近水平填充。

第一个选项：使按钮宽度与网格对齐。这是保持所有按钮长度一致的好方法。但是，它确实限制了您可以使用的单词数量。

宽度由网格确定的按钮

第二种选择：两侧有固定填充物。我通常还会为按钮的最小宽度添加一个子句，以避免使用非常小的按钮。虽然这允许您可以使用不同数量的文本，但它可能会使您的按钮非常不均匀。

宽度由填充和标签长度决定的按钮

四、按钮状态和反馈

按钮状态让用户知道他们是否可以点击或点击，或者是否已成功点击按钮。您还应该记住，按钮可以具有重叠状态。例如，它可以同时“活动”和“悬停”。

1.活动和禁用状态

活动状态是指按钮“可点击”/“可点击”。虽然这听起来有点明显，但这里要注意的重要一点是，如果用户没有完成必要的步骤，可以禁用按钮。例如，如果用户尚未输入其姓名和电子邮件地址，则他们无法提交详细信息。

活动和禁用按钮

2.悬停并悬停（鼠标悬停和鼠标关闭）

在桌面设备上，按钮应具有不同的状态，以便让用户知道它是可点击的。它还可以鼓励用户在看到动画时单击。通常，“悬停”状态将与“悬停”状态相反，但不一定如此。您可能想要表明您之前曾悬停在按钮上。

显示悬停的按钮

不要成为N00b提示：平板电脑和移动设备上永远不会出现悬停状态，因为你的手指无法“悬停”。因此，如果您正在为应用程序进行设计，请不要担心此状态。

3.专注

焦点状态可能有点混乱，以包裹你的头。（无论如何，这对我来说。）因此解释它的最简单方法是展示它的用途，然后向后工作。

如果您的用户精细运动技能较差，他们可能需要使用跳格导航。用户将点击“标签”在网站上移动，从一个导航链接移动到下一个。这意味着按钮需要有一个“焦点”状态才能显示它是“可点击的，但尚未点击”。

焦点状态的另一个示例是单击输入字段时。如果你要开始输入，只有那个输入字段 - 而不是另一个 - 将开始填充。

默认焦点状态是您在互联网探索过程中无疑看到的蓝色“发光”。幸运的是，我们生活在一个可以制作自己的自定义按钮状态的时代。大多数设计师似乎使用相同的视觉线索来悬停和聚焦状态。

两个不同的'焦点'状态的例子

4.按下

按下状态是用户的光标或手指“按住”按钮时的状态。当用户将手指或光标“释放”在按钮上时，该按钮会注册为“已点击”。

显示“按下”状态的按钮

5.单击

按钮需要“点击”状态以向用户指示它已被点击。

一个显示“Clicked”状态的按钮

五、按钮标签

按钮标签的技巧是一致性。如果你是一个比我更好的人，那么在一个项目的早期就可以帮助你做出很多决定，以避免以后煞费苦心地改变所有的按钮副本。

1.使用动词

大多数按钮包含动词以指示按钮将执行的操作，例如“保存”，“发布”，“编辑”。虽然'Back'和'Next'不是动词，但在界面的上下文中它们似乎以相同的方式工作。我喜欢在编写按钮标签时保留'动词'+'名词'结构 - 这使得动作更具说明性，例如'保存帖子'，'下一步'等，而不是'保存'，'下一步' - 但是选择取决于您和您的用户。

2.案例

您还应该决定使用什么字体大小写。以下是我使用的一些通用指南：

所有上限，例如'NEXT SECTION'。我将它们用于更“专业”的平台。Material Design使用全部大写的按钮。

标题案例，例如“下一部分”。我倾向于避免使用标题案例，因为它不像句子案例那样容易阅读。在语气方面，我认为它介于“专业”和“对话”之间。

句子案例，例如“下一节”。我将句子用于更“友好”或“对话”的平台。注意：是的，这是一个判刑案例，是的，如果它是真实的案例，应该有一个完整的句子 - 但是对于所有好事和有礼貌的爱，请不要添加句号。

小写，例如“下一节”。与标题案例一样，我不倾向于经常使用小写按钮标签。我认为他们是最“因果”的案例。

3.一致性

在为按钮编写副本时，请确保保持一致性。以下是我希望在项目开始时设置的一些指导原则：

选择单词数量：每个按钮一个，两个或更多单词

选择案例：判刑案件，或大写案件，或案件案件或小写案件

标签结构：例如“动词”+“名词”，或“动词”，或“动词”+ a +“名词”等。

六、触摸目标

桌面按钮大小（单击）

由于桌面上的光标小于触摸屏上的手指，因此可以使按钮更小。但是你想要吗？

用户永远不必搜索按钮，因此您可以为您的界面设计正确的层次结构和导航。

触摸屏按钮尺寸（水龙头）

麻省理工学院触摸实验室的研究表明，用于触摸屏的手指部分为8-10mm，因此如果你想避免用户发胖手指错误，最小目标尺寸必须是10mm或更大。如前所述 - 我是关于大按钮的。

那么，你的按钮应该是多大？嗯，这是专家们说的：

材料设计表明触摸目标应为48dp x 48dp，不同触摸点之间为8dp。资源

虽然我找不到有关iOS设计系统目标尺寸的任何文档，但一般的理解是其最小目标尺寸为44 x 44pts。

如果你正在努力维度和使用的尺寸，我强烈推荐Zac Dickerson 关于可访问性的故事。

七、按钮位置

伟大的主要按钮位置辩论

如果您要并排放置2个按钮，主按钮应放在哪一侧？

主要和次要行动的两个不同立场

选项A显示左侧的主按钮。这里的论点是它可能是用户想要首先看到的，所以先显示它。

选项B显示右侧的主按钮。这里的论点是我们希望用户首先看到辅助按钮，以便他们在继续之前知道他们的选项。右侧的项目也表示继续。

八、按钮名人堂

本节只是为了庆祝一些很酷的设计原则和系统。我喜欢Material Design System的按钮，因为他们的原则经过深思熟虑。

Material Design System的按钮

材料设计按钮图像

如果不提及材料设计系统及其在按钮上的工作以及它们如何与系统中的其他组件交互，则无法完成关于按钮的对话。我部分喜欢按钮如何与用户进行交互。

在这里查看他们关于按钮的部分：

https：//material.io/design/components/buttons.html#anatomy

我也是他们在浮动动作按钮上工作的粉丝。请在此处查看：

https：//material.io/design/components/buttons-floating-action-button.html

九、结束思考

没有按钮你就无法真正构建接口; 我们应该经常更多的去关注它们。花些时间了解它们的工作原理以及如何使用它们为用户提供最佳体验。

---------------------------------

喜欢请点赞分享并关注哦~~