在网站建设中如何设计更好的按钮

网站建设中按钮是一种交互式元素，可导致对其进行描述的操作。如果在按钮上显示“保存”，则单击它很可能会“保存”某些内容。它也是任何数字产品中最重要的交互元素之一。

它可能导致购买，下载，发送以及其他重要操作。数字按钮也是真实世界按钮的后代，例如电视遥控器，电唱机或游戏控制器上的按钮。

要知道的最重要的事情是按钮应该看起来像一个按钮，而设计按钮的最重要规则是使其足够突出，以免与其他任何东西混淆。

熟悉=好

我们习惯了通常与动作相关的某些形状和形式。我们的按钮看起来越像与按钮相关联的按钮越好。这就是为什么矩形（或圆角矩形）始终是按钮最安全的选择的原因。

网站建设

用户无法识别其他形状和形式（三角形，圆形，有机）。请谨慎操作，仅在产品的总体样式要求偏离规范时才使用它们。

按钮解剖

在设计按钮时，请考虑每个元素并进行明智的选择。以相关公司的品牌或样式指南为基准，考虑哪种按钮将与品牌相匹配并很好地适合界面。

您应该使用网格基数设置填充和安全空间。在上面的示例中，左内部间距是垂直间距的两倍，这是提高可读性的安全比率选择。

间距和对齐

按钮间距不均匀是接口最常见的问题之一。仔细检查您的按钮标签是否在水平和垂直方向上居中。如果需要确定，请创建指南。

网站建设

除了基于网格的  方法外，还可以使用大写的“ W”来选择按钮间距的安全方法。如果按钮标签的每一侧至少有一个“ W”，则可以确保安全。从侧面看，最好使用双倍的“ W”规则以提高可读性。

不要忘记按钮的安全空间或按钮之间的空间。如果您有一组，那么每个人的安全空间应该是个人的-不要重叠！

合适的大小

网页和移动按钮都应具有正确的最小尺寸。如果您的按钮太小，将很难点击或单击它们。这会导致沮丧，并可能导致用户卸载您的应用程序。最好的方法是从44 x 44像素开始，用于移动设备上的所有交互式元素。

网站建设

最佳位置是移动按钮约50像素。对于基于光标的  设备，32x 32像素也应该起作用。请记住，即使在台式机上，按钮越大，使用起来就越容易

良好做法

重要按钮也可以与图标配合使用。结帐可以通过购物篮或购物车图标快速识别，但前提是还必须显示“结帐”字样。

在按钮标签之后放置向右箭头或V形符号，可以使所得消息更强。用户被迫单击并“继续”。如果您想增强CTA，则效果很好。

带阴影的按钮也比平按钮更“可单击”，并且注意到得更快。在按钮中添加一个微妙的阴影，使它从背景中脱颖而出。

圆角

圆形按钮被认为比锋利的边缘更为友好和正面。同时，它们使设计周围的内容变得更加困难。如果您 在按钮上方将文本左对齐，则圆角越圆，该文本在视觉上的适合程度就越低-这会让您感觉好像左边缘同时位于两个位置。

对齐图标

按钮上良好的图标对齐是最难的事情之一。在许多情况下，字体粗细和图标粗细之间的关系特定于它们。但是，有一条简单而有用的规则在大多数情况下都适用。

根据我们的拐角半径，我们创建一个圆或正方形，其大小等于按钮的高度。在其中，我们创建另一个形状来容纳图标。它应该在较大形状的内部具有填充，该填充与我们的文本高度相同。然后，将图标放置在较小的形状内。

如果是人字形，最好将其设置为文本高度。您还可以对照字体宽度检查线宽-匹配得越紧密，最终结果就越好。

边缘平衡

如果您使用的是圆角按钮，请记住要与其他屏幕元素具有相同的圆角比率，否则，边距将不平衡。

摘要

当您开始构建主按钮，辅助按钮和三级按钮时，请记住记住每次都要针对几个因素进行检查。即使是很小的不一致或对齐不良也会导致转换率降低。对于按钮，转换和点击都至关重要。

总之，请记住：

• 使您的按钮看起来像一个按钮
• 使标签垂直和水平居中
• 按钮内部有足够的空间（填充）
• 如果您使用的是图标，请选择正确的尺寸和对齐方式
• 根据使用按钮的位置设置边框半径
• 然后检查该半径是否与您的其他屏幕元素匹配
• 使其尺寸合适！按钮越大，越容易使用。包括台式机！