按钮是交互设计中最普通常见的元素之一，尽管简单，它的设计在过去的几十年中改变也相当的大，不过最核心的思想还是可识别性和清晰性。
在这篇文章中我们介绍了按钮设计的进化史，并总结出了设计有效按钮图标的最佳方法。
按钮样式的演变
三维按钮
早期操作系统的按钮以浮雕和阴影来将他们从周围的文本中突出出来，这个设计方案遵循了最基本的原则——用边界、梯度和阴影让元素从背景和内容中脱颖而出，让人更容易注意到这个元素是可以点击的。
下面这个windows95中的对话框使用了浓重的阴影和加亮来制作出3D效果，帮助用户创造一个视觉层次效果，来区别出交互和非交互的元素。
拟物化按钮
在数字化设计中，拟物化是指让UI元素的纹理样式看起来像真实的物体一样。拟物化设计是为了让用户在使用新界面的时候用上他们对于物体本身的了解。下面这个计算器的例子就是让用户把对计算机实体的认识直接应用到数字环境里。
扁平化设计按钮
最近UI设计界的一大转变就是从拟物化的元素到扁平化元素。脱去3D效果的外壳，扁平化设计不care真实世界物体存在的样子，它抛弃了传统的用视觉暗示用户按钮是可点击的。
当所有元素都是扁平的，用户怎么辨别哪些是按钮呢？
用户仍然需要视觉信号来判断一个页面上可以点击什么，所以，颜色在扁平化设计中尤其重要。
似扁平化和悬浮按钮
似扁平化是扁平化设计的一个进阶，这种风格利用了细微的投影、高亮、和分层来在UI中制造深度效果。Google的Material Design语言是一个例子，带来了一种新的按钮：悬浮按钮。这些按钮在界面顶层之上，很引人注意，一般用作一级操作，也就是用户在屏幕上做的最频繁的操作。
谷歌地图是一个很好的实例，最常见的操作是获得方向，用悬浮按钮来做非常合适。
另一个例子是Evernote，不同于扁平化的导航栏，这个app用悬浮按钮（添加操作）和有一点细微阴影的按钮来进行实现。
虚拟按钮
2014年，虚拟按钮的设计趋势席卷了UI设计界。虚拟按钮是透明和空心的，只有一个基本的形状，比如长方形或者正方形。它们还叫做空心按钮，按钮的边界一般都是一条很细的线，内部是纯文本。
虚拟按钮的概念来自于扁平化设计运动，当苹果发布iOS7的时候尤其流行。很多iOS的UI都用了这种虚拟按钮，简单质朴的长方形配合上线框内的整齐文字。
他们经常被用作行为召唤（Call to Action）按钮，Specular网站是一个例子。
按钮设计最佳实践
在你设计之前先思考一下设计和功能之间的关系，用户会怎样理解这个元素，你应该做到以下几点：
- 让按钮看起来像按钮（形状）
- 让用户更方便和按钮产生交互（大小和边距）
- 以动作命名按钮（标签）
- 用反差色引导用户动作（颜色）
注意维持界面控制的一致性，这样用户能在每个页面识别出按钮的存在。
形状
最安全的做法就是矩形或者圆角矩形，用户很熟悉这种形状。
调查发现圆角能够加强眼睛的信息处理能力，吸引我们的目光集中到元素中央的位置。
你也可以用其他创新的形状，比如圆形、三角形、或者其他自定义形状，风险稍大一些。
大小边距
按钮的大小对于用户识别元素也是十分重要的，你可以把大小和按钮之间的距离当作同一件事来考虑。
大小：当触摸点击被用作是app主要的输入方式时，你可以参考MIT Touch Lab的这个研究，来确定按钮的合适大小。
MIT的研究发现指身大小是10-14mm，指尖是8-10毫米，这样目标按钮的大小最小应该保持在10mm*10mm。
这个建议不是为了纠正触摸位置的错误，而是和其他特性（比如屏幕上的信息密度）一起衡量最小化出错数的最佳方案：
当鼠标和键盘被用作主要输入方式的时候，密度是更应该考虑的因素了。
边距：按钮之间的距离给用户界面足够的空间来分离开不同的控制。
标签
你应该为按钮选择一个合适的标签，遵循“最小惊奇”原则，也就是给按钮和动作相符的命名，用清晰的信息指示在点击之后会发生什么或者这个动作具体做了什么。
下面的例子中是用户上传文件到云存储后出现的对话框，上面有一个写着‘Awesome!（太棒了）’的按钮，一般用户会感到很困惑，不知道这个按钮代表什么。
形状
在调色板上选择颜色的时候，考虑颜色如何帮助用户理解动作：
- 用对比色帮助用户理解app上的内容，做出正确的交互。下面的例子中我们用红色按钮标示出了一个破坏性的动作。
- 让最重要的按钮看起来是最重要的，尤其是用作行为召唤的按钮。比如，Amazon用一个明显的黄色按钮用作最重要的加入购物车操作，吸引用户的注意力。
小结
不管是经典还是现代的设计，按钮都是为了引导用户去执行我们希望他们执行的动作。做一个网页就像是和一个繁忙的用户开始一段对话。按钮扮演这场对话中的重要角色：保持对话能够平稳顺利进行下去的调解员。
小编心得：
细节决定成败，小按钮中也有大科学！跟随着按钮的进化史，我们仿佛走过了一段UI设计的历史，也回顾了一遍大众审美的演变。
via： babich.biz
本文二维码
查看图片
iGBKing 编程是一种内心的修行~~
懒惰和迟疑永远无法成就iG客的彪悍人生~~
