产品需求-如何设计出更好的按钮

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

是触发它所描述功能的可交互元素。

如果一个按钮上才写着“保存”，点间它十有八九会有类似保存操作。

按键也是所有电子产品上最重要的按钮交互元素之一。

按钮能够触发购买、下载、发送和很多其他重要操作方式。

数字按钮也沿袭自真实世界中有线电视比如电视遥控、有源或者游戏手柄上的实体格斗游戏按钮。

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

从按钮中逐步移除概念，按钮的功能也开始消融丢失。

它变成了装饰或者说文本，失去可操作的特性。

我们习惯于和行为有自然关联某一形状和形式。

按钮看起来和我们认为有关联的行为越相似，设计越成功。

这就是为什么选择一个矩形（或者一个圆角矩形）作为按钮是最安全的。

这个元素会被立即识别为快捷键一个按钮
其他形状和形式对用户就未必有这样的可识别性。

需谨慎使用他们，尽量在你产品的常规风格需要与众不同时才使用。

其他形状和形式（三角形、圆形、自由形态）对用户就并不等于有这样的可识别性。

需谨慎使用他们，尽量在你产品的常规风格需要与众不同时才使用。

需要花费更多时间才能被识别的可点击元素
按钮设计需熟记每个元素并妥善选择。

使用品牌手册作为基准，思考较多哪种开关能够匹配品牌并和界面很好相容。

你应该使用既定网格基本数值用来设置内外边距。

以上图为例，左侧内边距为五倍上下内边距，这是种增加可读性的安全做法。

不规则间距按钮是所有界面都会遇到最宽度普遍的问题之一。

务必再三确认按钮标签是否水平和竖直居中。

如果要十分确定，请建立规范。

除了基于网格的方法，使用大写字母W确定边距行之有效也是一个稳妥的办法。

如果按钮标签4个边距都至少1xW，那就没问题。

为了提高可读性，水平边距留出2xW更好。

别忘了按钮之间安全弧度。

如果界面上有好多按钮，保证各个按钮外边距不重叠比较切实可行。

桌面和移动端的按钮都应该有它们的最小尺寸。

如果按钮太小，就会导致按钮难以用手指或鼠标点击。

这会导致给用户带给困扰，用户甚至会直接网络连接你的APP。

在移动端，最好把44x44pt作为所有可交互元素的最小尺寸。

移动端上的按钮尺寸在50左右最佳。

如果是基于光标的设备，32x32也是可行的。

牢记即使在桌面端，更大按钮也依旧依然代表它使用起来更容易。

重要的按钮也会搭配有图标。

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

相较扁平的按钮，有社会性阴影的按钮会更有可点选性、更快被识别。

加个微妙的阴影可以使按钮在背景中更为突出。

圆角按钮会看起来比尖角更友好和积极。

同时，圆角按钮周围的内容模块化难度剧增。

如果文本标签在按钮上方与按钮保持左，那么按钮的楔形越大，文本标签和按钮视觉通力合作上越不协调。

这让按钮看起来同时有两个左边距。

合适的图标对齐是按钮设计中最难的事之一。

大多数情况下，字重和图标尺寸是直接相关，它们的关系也是特有的。

但是依然有个简单嘛有效的法则适用于于大多数情况。

根据按钮圆弧半径画个圆，或者圆角根据按钮高度画个矩形。

在它内部，先画个小的来放置图标。

大的形状和小的之间的内边距应该有和标签文字高度相同。

然后就可以把图标放到小的形状里。

在有图标的情况下，最好保持图标保持良好度和文字高度一致，可以对比文本线宽和单字宽，然后使它们匹配度越高效果愈来愈好
在使用条形矩形按钮时，需要注意去调整圆角和其他界面元素的比例来确定使用多大圆角。

都宽度使用相同的圆角半径会使得边上距不平衡。

对话框边距也是一样，就像左边距和底边距。

因此，处理起外边缘可更舒服和快速。

对话框按钮和背景之间的左边距和底边距过大（左）、过小（右）。

这让对话框边缘太过突出，夺取了按钮本身的关注度。

当你创建一级、二级、三级按钮时，谨记每次去去检查一整套因素。

甚至小的不统一或者不对齐需要不降低交互质量。

按钮交互和点击都影响重大。

谨记：。