怎么规划出更好的按钮

本文罗列了怎么规划出更好的按钮的七个关键，希望能给你带来考虑与启示。

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

按钮能够触发购买、下载、发送和许多其他重要操作。数字按钮也沿用自实在国际中比方电视遥控、录像机或许游戏手柄上的实体按钮。

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

规划按钮最重要的规律便是要使按钮满足杰出，避免按钮和其他元素混杂。

从按钮中逐渐移除元素，按钮的功用也开端融化丢掉。它变成了装修或许说文本，失掉可操作的特性。

了解的=好的

咱们习惯于和行为有天然相关的特定形状和方式。按钮看起来和咱们我们都认为有相关的行为越类似，规划越成功。这便是怎么回事挑选一个矩形（或许一个圆角矩形）作为按钮是最安全的。

这个元素会被当即辨认为一个按钮

其他形状和方式对用户就未必有这样的可辨认性。需谨慎运用他们，尽量在你产品的惯例风格需求异乎寻常时才运用。

其他形状和方式（三角形、圆形、自在形状）对用户就未必有这样的可辨认性。需谨慎运用他们，尽量在你产品的惯例风格需求异乎寻常时才运用。

需求花费更多时刻才干被辨认的可点击元素

按钮分化

按钮规划需熟记每个元素并妥善挑选。运用品牌手册作为基准，考虑哪种按钮能够匹配品牌并和界面很好相容。

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

距离和对齐

不规则距离按钮是一切界面都会遇到最遍及的问题之一。必须一再承认按钮标签是否水平缓竖直居中。假如要非常确认，请树立标准。

除了依据网格的方法，运用大写字母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协议