认识达内从这里开始

按钮设计无论是网页设计还是app软件开发都是经常会用到的一个设计功能，而本文我们就通过案例分析来简单了解一下，按钮设计常见设计类型都有哪些。

动作按钮

我们将分析按钮的层次结构和它们通信的语言。虽然有些按钮通熟易懂，但按钮操作不取决于它们的外观，而是取决于用户的行为。

行为召唤(CTA/C2A)

在设计中行为召唤按钮通常会提示用户注册/立即购买等。在产品设计中如果强烈建议用户应该做的事情应该使用CTA按钮。

主要操作按钮

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

次要操作按钮

从“返回”的辅助按钮到“下一步”的主按钮，或从“编辑”的辅助按钮到“保存”的主按钮。辅助按钮是我们为用户提供的主要操作的备选方案。

三级按钮

三级按钮通常用于其他操作，可能暂时不是用户想要做的事情。比如“添加朋友”、“扫一扫”、“编辑”或“删除”之类的内容，前提是它们不是主要操作。

线性和幽灵按钮

线性按钮和实心按钮正好相反，一个没有填充的按钮–只是一个轮廓。虽然经常互换使用，但我更喜欢将线性按钮视为浅色(在白底下按钮的轮廓和文本颜色深一点更明显)，将幽灵按钮视为深色(在黑底下按钮的轮廓和文本颜色浅一点更明显)。

文字链接

文本链接是一种非常简单的按钮类型。有几种不同的方式可以表明它是一个链接。它可以是颜色/下划线/链接的文本，甚至就是文本本身(例如“阅读更多”)。

带图标的标签按钮

图标按钮越来越受欢迎，一些按钮仍然需要一个标签来确保按钮的语意明了。

处理图标和标签时棘手的事情是弄清楚字体组合的图标有多大。

方法1：让图标的大小对齐字体的顶线。

方法2：让图标的大小对齐字体的行高。需要注意的是确保图标和字体的组合视觉均衡。

图标按钮

图标按钮没有标签，只是一个图标。因为它们没有标签，所以它们在界面中节省了大量空间。图标按钮还可以将其他图标按钮一起排列在它们的小空间中。

图标按钮具有不同的风格

如果你在为计算机认知度较低的人群设计产品时，我建议使用带标签的按钮–尤其是那些很抽象的语意。

垂直内间距

按钮的大小对界面的可访问性起着很大的作用。大多数没有经验的设计师会说“按钮的高度应该是36像素”。如果你是为产品系统的设计按钮。你应该采用所用字体的行高，并在其中添加一定单位的内间距。例如：“我的按钮标签的行高为20px，垂直内间距为8px”。

点击和禁用状态

点击状态就是鼠标可以点击按下按钮的状态，当然如果用户没有完成必要的步骤，按钮可以被禁用。例如用户没有输入他们的姓名和电子邮件地址，他们就不能提交他们的详细信息。

按钮标签

按钮标签的诀窍是一致性。我们在产品设计前期需要制定按钮标签的规范，以避免以后花更多时间去改变你所有的按钮标签。

触摸屏按钮

桌面按钮大小调整(单击)

因为桌面上的光标比触摸屏上的手指小，所以您可以将按钮缩小很多。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。