如何设计出更好的按钮

　　本文列举了如何设计出更好的按钮的七个要点，希望能给你带来思考与启发。
　　按钮是触发它所描述功能的可交互元素。如果一个按钮上写着＂保存＂，点它十有八九会有类似保存操作。按钮也是所有电子产品上最重要的交互元素之一。
　　按钮能够触发购买、下载、发送和很多其他重要操作。数字按钮也沿袭自真实世界中比如电视遥控、录像机或者游戏手柄上的实体按钮。
　　最重要的须知：按钮得看起来像按钮
　　设计按钮最重要的法则就是要使按钮足够突出，以免按钮和其他元素混淆。
　　从按钮中逐步移除元素，按钮的功能也开始消融丢失。它变成了装饰或者说文本，失去可操作的特性。
　　熟悉的=好的
　　我们习惯于和行为有自然关联的特定形状和形式。按钮看起来和我们认为有关联的行为越相似，设计越成功。这就是为什么选择一个矩形（或者一个圆角矩形）作为按钮是最安全的。
　　这个元素会被立即识别为一个按钮
　　其他形状和形式对用户就未必有这样的可识别性。需谨慎使用他们，尽量在你产品的常规风格需要与众不同时才使用。
　　其他形状和形式（三角形、圆形、自由形态）对用户就未必有这样的可识别性。需谨慎使用他们，尽量在你产品的常规风格需要与众不同时才使用。
　　需要花费更多时间才能被识别的可点击元素
　　按钮分解
　　按钮设计需熟记每个元素并妥善选择。使用品牌手册作为基准，思考哪种按钮能够匹配品牌并和界面很好相容。
　　你应该使用网格基本数值用来设置内外边距。以上图为例，左侧内边距为两倍上下内边距，这是种增加可读性的安全做法。
　　间距和对齐
　　不规则间距按钮是所有界面都会遇到最普遍的问题之一。务必再三确认按钮标签是否水平和竖直居中。如果要十分确定，请建立规范。
　　除了基于网格的方法，使用大写字母W确定边距也是一个稳妥的办法。如果按钮标签4个边距都至少1 x W，那就没问题。为了提高可读性，水平边距留出2 x W更好。
　　别忘了按钮之间安全间距。如果界面上有很多按钮，保证各个按钮外边距不重叠比较稳妥。
　　合理的尺寸
　　桌面和移动端的按钮都应该有它们的最小尺寸。如果按钮太小，就会导致按钮难以用手指或鼠标点击。这会导致给用户带来困扰，用户甚至会直接卸载你的APP。在移动端，最好把44 x 44 pt作为所有可交互元素的最小尺寸。
　　移动端上的按钮尺寸在50左右最佳。如果是基于光标的设备，32 x 32也是可行的。牢记即使在桌面端，更大按钮也依然代表它使用起来更容易。
　　良好的实践
　　重要的按钮也会搭配有图标。一个＂结账＂可以通过一个购物篮或购物车图标快速识别，但是只在与文字＂结账＂同时出现时有效。
　　一个合适的箭头或＂>＂放在按钮标签后，能更强地传达信息。更强制地去引导用户点击并＂继续＂。如果你要强化CTA，这个办法就很有效。
　　相较扁平的按钮，有阴影的按钮会更有可点击性、更快被识别。加个微妙的阴影可以使按钮在背景中更为突出。
　　圆角
　　圆角按钮会看起来比尖角按钮更友好和积极。同时，圆角按钮周围的内容设计难度剧增。如果文本标签在按钮上方与按钮保持左对齐，那么按钮的圆角越大，文本标签和按钮视觉上越不协调。这让按钮感觉看起来同时有两个左边距。
　　图标对齐
　　合适的图标对齐是按钮设计中最难的事之一。大多数情况下，字重和图标尺寸是直接相关，它们的关系也是特有的。但是依然有个简单有效的法则适用于大多数情况。
　　根据按钮圆角半径画个圆，或者根据按钮高度画个方块。在它内部，再画个小的来放置图标。大的形状和小的之间的内边距应该有和标签文字高度相同。然后就可以把图标放到小的形状里。
　　在有图标的情况下，最好保持图标高度和文字高度一致，可以对比文本线宽和单字宽，然后使它们匹配度越高效果越好
　　边缘平衡
　　在使用圆角矩形按钮时，需要注意去调整圆角和其他界面元素的比例来确定使用多大的圆角。都使用相同的圆角半径会使得外边距不平衡。
　　对话框边距也是一样，就像左边距和底边距。因此，处理起外边缘会更舒服和快速。
　　对话框按钮和背景之间的左边距和底边距过大（左）、过小（右）。这让对话框边缘太过突出，夺取了按钮本身的关注度。
　　总结
　　当你创建一级、二级、三级按钮时，谨记每次去检查一系列因素。甚至小的不统一或者不对齐会降低交互质量。按钮交互和点击都影响重大。
　　谨记：
　　把按钮设计的像按钮
　　保证标签和按钮水平、竖直居中
　　保证按钮有充足内边距
　　为图标选择正确的大小和对齐关系
　　根据按钮的使用环境设置合适的圆角半径
　　检查按钮圆角半径是否与其他元素契合
　　选择合适尺寸。按钮越大，用起来越简单。桌面端同理。
　　作者：Michal Malewicz