按钮是交互设计中一个常见的日常元素。虽然button看起来像一个非常简单的UI元素，但它的设计在过去几十年里发生了很大的变化。但按钮用户体验设计总是关于识别和清晰（recognition and clarity.）。
在本文中，我们将概述按钮设计的发展，并指出为了创建有效的按钮，您应该遵循的最重要的最佳实践。
风格的演变
三维按钮（Three-Dimensional Button）
很早的时候，操作系统按钮就依赖于浮雕和阴影效果，让按钮的外观与周围的环境区分开来。这个设计方案基于一个简单的原则——使用边框、渐变和阴影让元素在背景和内容的衬托下脱颖而出，这使得它很容易被识别为一个可点击的元素。
在 Windows95 的对话框就使用了重阴影和高光来打造3D效果，用来帮助用户理解视觉层次和感知哪些元素是交互式的。
拟物按钮（Skeuomorphic Button）
在数字设计中，拟物化是指将 UI 元素制作得像现实生活中的物品，无论是复制现实生活中的纹理，还是将按钮制作得像现实生活中的按钮。拟物化设计通过映射用户心智里已有的设计，帮助用户理解如何使用一个新的界面。计算器就是一个很好的案例，帮助用户将先前的物理计算器知识直接转移到数字环境中。
扁平按钮（Flat Design Button）
2017年苹果推出 iOS 7 系统，使得扁平设计在 UI设计广泛应用。推动了设计从拟物化元素转向扁平的转化，去掉3D效果。与拟物化设计不同的是，扁平设计被视为一种探索数字媒体的方式，而不是试图还原现实世界的外观。因此，它删除了传统上用于向用户传达点击性/可点击性的粗糙视觉提示。
当所有东西都是平的时，用户如何知道哪些部分是按钮?
用户仍然需要视觉符号来告诉他们可以在页面的哪里点击：可感知的线索设计细节帮助他们理解如何使用界面。因此，颜色在平面设计中特别重要，因为当你使用扁平按钮时，颜色将是帮助用户识别它们的主要标识符之一。
扁平设计和悬浮按钮（Almost Flat Design and Floating Action Button）
扁平设计是原始(或超)平坦设计的进化。这种风格大部分是平面的，但使用了微妙的阴影、高光和层级在 UI 中创建一些深度。谷歌的材质设计语言（Material Design ）是第一个正确使用这种设计，并做出优秀的具有优先级扁平设计的例子，它带来了一种新型的按钮：悬浮按钮。这些按钮被分层放置在界面的顶部，并将用户的注意力完全吸引到这些可以交互的按钮上。它们扮演着行动召唤按钮的角色(“CTA”)，代表着用户在特定屏幕上执行最多的单个行动。
在UI设计中使用FAB（ Floating Action Button）的另一个好例子是Evernote。尽管UI十分的扁平，但是在导航栏和浮动操作按钮(“添加新”)上提供了一些微妙的阴影。
幽灵按钮（Ghost Button）
2014年，幽灵按钮成为UI设计领域的主流设计趋势之一。幽灵按钮是那些具有基本形状(如矩形或正方形)的透明或者空心的按钮。它们也有诸如“空”、“赤裸”或“空心”按钮之类的标题。幽灵按钮通常由一条非常细的线边界，而内部部分由纯文本组成。
幽灵按钮的起源于平面设计革命，当苹果发布 iOS 7 时，幽灵按钮变得流行起来。iOS UI上的很多按钮我们称之为幽灵按钮。简单而朴素的矩形形状与框架内整洁的字体相结合，在扁平的UI中看起来非常完美。
它们通常以CTA (Call to Action)按钮的形式出现，并提供整洁的外观。Specular site就是一个很好的例子。
按钮的最佳实践
在你开始设计按钮之前，你应该先思考设计如何辅助传递给用户功能。用户如何将元素理解为按钮？也许你应该：
1.使按钮看起来像按钮(参见形状)
2.便于用户与按钮交互(参见大小和填充)
3.根据按钮的功能来标注按钮(参见标签)
4.使用颜色对比引导用户操作(见颜色)
确保按钮在整个界面控制中保持一致性，这样用户就能够在每个页面上识别和感知你的应用程序或站点哪些UI元素是按钮。
形状
一个安全的做法是，根据网站或应用程序的风格，把按钮做成正方形或圆角正方形。矩形形状的按钮很久以前就被引入了数字世界，用户对它们很熟悉。
一些研究表明，圆角增强了信息处理能力，并将我们的眼睛吸引到元素的中心。
你可以更有创意地使用其他形状，如圆形、三角形或甚至自定义形状，但请记住，后者可能更有风险。
尺寸和间距
按钮的大小在帮助用户识别这些元素方面也起着关键作用。你应该考虑按钮元素的大小以及可点击元素之间的填充:
大小
当点击作为应用程序或网站的主要交互形式，你可以依靠MIT Touch Lab的研究成果，，爱辅助选择合适的按钮大小。麻省理工学院的研究发现，手指接触面积的平均尺寸在10-14mm之间，指尖是8-10mm，所以10mm × 10mm是一个很好的触摸目标尺寸。
这一建议值针对的不是那些容易误操作的元素，而是在平衡其他重要特征(如屏幕信息密度)的同时将错误数量减少到实际水平:
当鼠标和键盘是主要的交互方式，可以稍微减少按钮的测量，以适应密集的UI
间距
按钮之间的空间有助于分隔控件，并为用户界面提供足够的喘息空间。
文案
你应该为按钮选择一个合适的标签。选择应该基于最小惊奇的原则（principle of least astonishment）：如果一个必要的按钮有一个高惊奇系数的标签，它可能需要改变标签。
经验法则——用按钮的功能来标记按钮。添加一个清晰的信息，说明在点击/点击之后会发生什么，或者使用动作动词指示元素做了什么。
在下面的例子中，当用户试图使用web应用程序将文件上传到Dropbox时，会出现一个对话框。这个信息提供了一个单一的按钮，标签是“Awesome!”这个标签可能会让普通用户感到困惑，因为不清楚点击这个按钮后会做什么。
颜色
在选择调色板时，记住要考虑颜色如何帮助用户使用导航和理解操作:
使用颜色和对比度帮助用户感知和理解应用的内容，与正确的元素进行交互，并理解操作。在下面的例子中，我们将红色用于执行潜在破坏性操作的按钮。
让最重要的按钮(特别是当你使用它们来引导用户下一步操作时)看起来是最重要的一个。例如，亚马逊使用对比鲜明的黄色按钮来吸引用户注意正确的操作。
结论
每个按钮（无论是经典的还是现代的，如幽灵按钮或悬浮按钮)都是为了引导用户采取你希望他们采取的行动。可以将web或应用程序看作是跟一个忙碌的用户发起的对话。这个按钮在这个对话中扮演着至关重要的角色——一个顺畅的互动使对话继续进行，而小故障(比如找不到一个右键)会造成中断，最糟糕的是，导致崩溃。
