如何设计出更好的按钮？

本文列举了如何设计出更好的按钮的七个要点，希望能给你带来思考与启发。

按钮是触发它所描述功能的可交互元素。如果一个按钮上写着“保存”，点它十有八九会有类似保存操作。按钮也是所有电子产品上最重要的交互元素之一。

按钮能够触发购买、下载、发送和很多其他重要操作。数字按钮也沿袭自真实世界中比如电视遥控、录像机或者游戏手柄上的实体按钮。

最重要的须知：按钮得看起来像按钮

设计按钮最重要的法则就是要使按钮足够突出，以免按钮和其他元素混淆。

从按钮中逐步移除元素，按钮的功能也开始消融丢失。它变成了装饰或者说文本，失去可操作的特性。

熟悉的=好的

我们习惯于和行为有自然关联的特定形状和形式。按钮看起来和我们认为有关联的行为越相似，设计越成功。这就是为什么选择一个矩形（或者一个圆角矩形）作为按钮是最安全的。

这个元素会被立即识别为一个按钮

其他形状和形式对用户就未必有这样的可识别性。需谨慎使用他们，尽量在你产品的常规风格需要与众不同时才使用。

其他形状和形式（三角形、圆形、自由形态）对用户就未必有这样的可识别性。需谨慎使用他们，尽量在你产品的常规风格需要与众不同时才使用。

需要花费更多时间才能被识别的可点击元素

按钮分解

按钮设计需熟记每个元素并妥善选择。使用品牌手册作为基准，思考哪种按钮能够匹配品牌并和界面很好相容。

你应该使用网格基本数值用来设置内外边距。以上图为例，左侧内边距为两倍上下内边距，这是种增加可读性的安全做法。

间距和对齐

不规则间距按钮是所有界面都会遇到最普遍的问题之一。务必再三确认按钮标签是否水平和竖直居中。如果要十分确定，请建立规范。

除了基于网格的方法，使用大写字母W确定边距也是一个稳妥的办法。如果按钮标签4个边距都至少1 x W，那就没问题。为了提高可读性，水平边距留出2 x W更好。

别忘了按钮之间安全间距。如果界面上有很多按钮，保证各个按钮外边距不重叠比较稳妥。

合理的尺寸

桌面和移动端的按钮都应该有它们的最小尺寸。如果按钮太小，就会导致按钮难以用手指或鼠标点击。这会导致给用户带来困扰，用户甚至会直接卸载你的APP。在移动端，最好把44 x 44 pt作为所有可交互元素的最小尺寸。

移动端上的按钮尺寸在50左右最佳。如果是基于光标的设备，32 x 32也是可行的。牢记即使在桌面端，更大按钮也依然代表它使用起来更容易。

良好的实践

重要的按钮也会搭配有图标。一个“结账”可以通过一个购物篮或购物车图标快速识别，但是只在与文字“结账”同时出现时有效。

一个合适的箭头或“>”放在按钮标签后，能更强地传达信息。更强制地去引导用户点击并“继续”。如果你要强化CTA，这个办法就很有效。

相较扁平的按钮，有阴影的按钮会更有可点击性、更快被识别。加个微妙的阴影可以使按钮在背景中更为突出。

圆角

圆角按钮会看起来比尖角按钮更友好和积极。同时，圆角按钮周围的内容设计难度剧增。如果文本标签在按钮上方与按钮保持左对齐，那么按钮的圆角越大，文本标签和按钮视觉上越不协调。这让按钮感觉看起来同时有两个左边距。

图标对齐

合适的图标对齐是按钮设计中最难的事之一。大多数情况下，字重和图标尺寸是直接相关，它们的关系也是特有的。但是依然有个简单有效的法则适用于大多数情况。

根据按钮圆角半径画个圆，或者根据按钮高度画个方块。在它内部，再画个小的来放置图标。大的形状和小的之间的内边距应该有和标签文字高度相同。然后就可以把图标放到小的形状里。

在有图标的情况下，最好保持图标高度和文字高度一致，可以对比文本线宽和单字宽，然后使它们匹配度越高效果越好

边缘平衡

在使用圆角矩形按钮时，需要注意去调整圆角和其他界面元素的比例来确定使用多大的圆角。都使用相同的圆角半径会使得外边距不平衡。

对话框边距也是一样，就像左边距和底边距。因此，处理起外边缘会更舒服和快速。

对话框按钮和背景之间的左边距和底边距过大（左）、过小（右）。这让对话框边缘太过突出，夺取了按钮本身的关注度。

总结

当你创建一级、二级、三级按钮时，谨记每次去检查一系列因素。甚至小的不统一或者不对齐会降低交互质量。按钮交互和点击都影响重大。

谨记：

1. 把按钮设计的像按钮
2. 保证标签和按钮水平、竖直居中
3. 保证按钮有充足内边距
4. 为图标选择正确的大小和对齐关系
5. 根据按钮的使用环境设置合适的圆角半径
6. 检查按钮圆角半径是否与其他元素契合
7. 选择合适尺寸。按钮越大，用起来越简单。桌面端同理。

作者：Michal Malewicz

原文链接：https://uxdesign.cc/design-better-buttons-a5c90a113280

译者：Matrix，公众号：交译所

本文由 @交译所 翻译发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议

作者暂无likerid, 赞赏暂由本网站代持，当作者有likerid后会全部转账给作者（我们会尽力而为）。


Support author:
Author's Filecoin address:
Or you can use Likecoin to support author: