网页按钮(网页按钮居中)

按钮是UI设计中常见的元素之一，如果你掌握了按钮的设计技巧，那你的设计将会更上一层楼。切记：使你的按钮看起来像是一个按钮使标签垂直和水平居中按钮

 

按钮是UI设计中常见的元素之一，如果你掌握了按钮的设计技巧，那你的设计将会更上一层楼。

按钮是一种交互式的元素，可引导用户对其进行描述性的操作可以打赌，如果按钮上显示“保存”，单击它很可能会“保存”某些内容它是任何产品设计中最重要的交互元素之一它可能导致购买、下载、发送和许多其他重要的操作。

数字按钮也是现实世界中按钮的延展，比如：电视遥控器、电唱机或是游戏控制器中的按钮最重要的是要清楚一个按钮应该看起来像是一个按钮设计按钮时，最重要的规则是要使其足够突出，因此不会与其他信息按钮混淆。

由上图可见，通过从按钮中删除元素，按钮的可操作性逐渐消失，它变成了简单的装饰/文字好的设计是符合用户的认知习惯的我们习惯了通常与动作相关的某些形状和形式我们的按钮看起来越类似于按钮相关特征越好，这就是为什么矩形（或圆角矩形）始终是按钮最安全的选择原因。

该元素将被立即标识为按钮用户无法识别其他形状或形式的设计，比如三角形、圆形、无规律图形等。慎用此类的设计，只有在特殊场景或整体视觉风格要求极大的突破性、创新性时才使用这样的设计。

这些设计仍需要更多的时间被识别为可操作性的元素按钮元素的拆解在设计按钮时，请记住这些元素中的每一项，并明智的选择它们以设计规范和产品调性为基础，考虑哪种按钮的设计风格更适合我们的产品并合理的运用到更多界面设计中去。

可以借助网格来设置填充和安全区域的值在上面的例子中，右边内部边距是垂直间距的两倍，这是提高可读性的安全选择间距和对齐按钮间距不对称是所有界面中最常见的问题之一，仔细观察按钮标签是否在水平和垂直方向上居中展示。

除了网格的方法外，还可使用大写字母W确保一种安全的按钮间距的方法，如果按钮标签的上下边距至少有1W的空间，你的设计是OK的，在左右边距上最好使用2x W来提升可读性。

切记，不要忘记按钮的安全空间，如果你有一组按钮，那么每一个按钮的安全空间应该是不重叠的。

合适的大小网页和移动端的设计都有最小的可点击尺寸，如果你的按钮设计太小，将很难单击或点击它们，这将会给用户带来负面的情绪，甚至卸载你的产品最好的方法是在移动端设计上所有的交互式元素的尺寸最小不低于44*44。

在移动端设计中按钮最小尺寸为：48*48，在基于光标的设备中，最小按钮的尺寸为：32*32切记按钮越大，操作的便利性越高好的实践按钮也可以与icon搭配一起使用，结算的按钮可以使用购物车icon增强识别性，但是一定要有“结算”一词。

在按钮中的文本后面加上一个向右的箭头，识别性更强。按钮的引导性更强。

阴影可以使按钮的操作性更强，比平面按钮更加突出。在按钮中添加一个微妙的阴影，使它从背景中脱引而出。关于按钮阴影的设计稍后讨论。

圆角圆角比矩形按钮更为友好和正面。但是，与此同时，围绕着圆角的设计变得更加困难。如果你在按钮上方保留对齐的文本，则圆角越圆，则该文本在视觉上将越少越合适。它是你感觉好像左边空白处在同一直线上。

对齐图标在按钮上进行较好的图标对齐是最困难的事情。在许多情况下，字体粗细和图标的粗细之间的关系直接影响它们。但是，有一条简单而有用的规则在大多数情况下都适用。

根据我们的圆角半径，我们创建一个圆或是正方形，其大小等于按钮的高度在其中，我们创建另一个形状来容纳icon它与我们的文字高度相同然后，将图标放置在较小的形状内如果是人字形，最好使高度与字高相同，并且你还可以根据字体高度检查线宽。

匹配越紧密，最终的按钮效果越好边缘平衡如果你使用的是圆角按钮，请记住将正确的圆角比率与屏幕上的其他元素对齐。切记对所有内容使用相同的值会在边界上造成不平衡感。

此处的对角线间距与垂直和底部的对角线间距相同。这样可以得到更好的外缘处理。

对角线间距比边间距大（左）和小（右）这导致边缘太突出，把焦点从按钮本身转移开摘要当你开始设计主按钮、辅助按钮、三级按钮时，请记住每次都要针对几个因素进行检查，即使是很小的不一致或不对齐等都会导致转化率降低。

有了按钮转化和点击就很重要了切记：使你的按钮看起来像是一个按钮使标签垂直和水平居中按钮内部有足够的间距如果你使用图标，请正确使用尺寸和保持对齐根据使用按钮的位置设置边框的圆角检查圆角半径是否与其他界面设计相匹配。

保持按钮的合适尺寸，但按钮尺寸越大，越易点击和识别原文地址：https://uxdesign.cc/design-better-buttons-a5c90a113280作者：Michal Malewic

译者：haselina

相关精彩：让我们谈谈新拟态和可访问性图标设计的7大原则