网站建设中按钮是一种交互式元素,可导致对其进行描述的操作。如果在按钮上显示“保存”,则单击它很可能会“保存”某些内容。它也是任何数字产品中最重要的交互元素之一。
它可能导致购买,下载,发送以及其他重要操作。数字按钮也是真实世界按钮的后代,例如电视遥控器,电唱机或游戏控制器上的按钮。
要知道的最重要的事情是按钮应该看起来像一个按钮,而设计按钮的最重要规则是使其足够突出,以免与其他任何东西混淆。
通过从按钮中删除元素,其功能开始消失。它变成装饰或文字,失去其可操作的品质。
熟悉=好我们习惯了通常与动作相关的某些形状和形式。我们的按钮看起来越像与按钮相关联的按钮越好。这就是为什么矩形(或圆角矩形)始终是按钮最安全的选择的原因。
此元素将立即被标识为按钮。
用户无法识别其他形状和形式(三角形,圆形,有机)。请谨慎操作,仅在产品的总体样式要求偏离规范时才使用它们。
可能需要更长的时间才能被识别为可操作的元素。
按钮解剖在设计按钮时,请考虑每个元素并进行明智的选择。以相关公司的品牌或样式指南为基准,考虑哪种按钮将与品牌相匹配并很好地适合界面。
您应该使用网格基数设置填充和安全空间。在上面的示例中,左内部间距是垂直间距的两倍,这是提高可读性的安全比率选择。
间距和对齐按钮间距不均匀是接口最常见的问题之一。仔细检查您的按钮标签是否在水平和垂直方向上居中。如果需要确定,请创建指南。
除了基于网格的方法外,还可以使用大写的“ w”来选择按钮间距的安全方法。如果按钮标签的每一侧至少有一个“ w”,则可以确保安全。从侧面看,最好使用双倍的“ w”规则以提高可读性。
不要忘记按钮的安全空间或按钮之间的空间。如果您有一组,那么每个人的安全空间应该是个人的-不要重叠!
合适的大小网页和移动按钮都应具有正确的最小尺寸。如果您的按钮太小,将很难点击或单击它们。这会导致沮丧,并可能导致用户卸载您的应用程序。最好的方法是从44 x 44像素开始,用于移动设备上的所有交互式元素。
最佳位置是移动按钮约50像素。对于基于光标的设备,32x 32像素也应该起作用。请记住,即使在台式机上,按钮越大,使用起来就越容易
良好做法重要按钮也可以与图标配合使用。结帐可以通过购物篮或购物车图标快速识别,但前提是还必须显示“结帐”字样。
在按钮标签之后放置向右箭头或v形符号,可以使所得消息更强。用户被迫单击并“继续”。如果您想增强cta,则效果很好。
带阴影的按钮也比平按钮更“可单击”,并且注意到得更快。在按钮中添加一个微妙的阴影,使它从背景中脱颖而出。
圆角圆形按钮被认为比锋利的边缘更为友好和正面。同时,它们使设计周围的内容变得更加困难。如果您?在按钮上方将文本左对齐,则圆角越圆,该文本在视觉上的适合程度就越低-这会让您感觉好像左边缘同时位于两个位置。
对齐图标按钮上良好的图标对齐是最难的事情之一。在许多情况下,字体粗细和图标粗细之间的关系特定于它们。但是,有一条简单而有用的规则在大多数情况下都适用。
根据我们的拐角半径,我们创建一个圆或正方形,其大小等于按钮的高度。在其中,我们创建另一个形状来容纳图标。它应该在较大形状的内部具有填充,该填充与我们的文本高度相同。然后,将图标放置在较小的形状内。
如果是人字形,最好将其设置为文本高度。您还可以对照字体宽度检查线宽-匹配得越紧密,最终结果就越好。
边缘平衡如果您使用的是圆角按钮,请记住要与其他屏幕元素具有相同的圆角比率,否则,边距将不平衡。
对角线间距与左侧和底部的对角线间距相同。这样可以更好,更快地处理外边缘。
对角线间距大于(左侧)间距,小于(右侧)间距。这会使边缘突出太多,使注意力从按钮本身上移开。
摘要当您开始构建主按钮,辅助按钮和三级按钮时,请记住记住每次都要针对几个因素进行检查。即使是很小的不一致或对齐不良也会导致转换率降低。对于按钮,转换和点击都至关重要。
总之,请记住:
使您的按钮看起来像一个按钮使标签垂直和水平居中按钮内部有足够的空间(填充)如果您使用的是图标,请选择正确的尺寸和对齐方式根据使用按钮的位置设置边框半径然后检查该半径是否与您的其他屏幕元素匹配使其尺寸合适!按钮越大,越容易使用。包括台式机!