按钮是交互设计的一个普通的日常元素。虽然按钮看起来像一个非常简单的用户界面元素，但其设计在过去几十年来发生了很大的变化。但是UX设计仍然是关于识别和清晰度的。
在本文中，我们将概述按钮设计的演变过程，并找出为了创建有效按钮而应遵循的最重要的最佳方式。
风格的演变
三维按钮 | Three-Dimensional Button
从早期开始，操作系统按钮就依靠浮雕和阴影的外观来区分它们与周围的环境。此设计解决方案基于简单的原则 - 使用边框，渐变和投影使元素从背景和内容脱颖而出，这使得它可以轻松识别为可点击的元素。
这个Windows 95对话框利用沉重的阴影和高光来创建3D效果，用来帮助用户解释视觉层次结构并理解哪些元素是交互式的。
写实按钮 | Skeuomorphic Button
在数字设计中，写实是指UI元素看起来像真实的生活对象，无论是复制一个真实的生活纹理，或使一个按钮看起来像一个真实的生活按钮。 写实设计旨在帮助用户了解如何使用新的界面，使他们能够将之前的经验迁移过来。下面的例子中的计算器隐喻旨在帮助用户将以前关于物理计算器的知识转移到数字环境中。
扁平风按钮 | Flat Design Button
最近在UI设计中发生的一个主要变化是从写实元素走向扁平元素的过渡，没有3D效果。与写实设计不同，扁平设计被视为探索数字媒体的一种方式，而不是试图重现物理世界的外观。因此，它消除了传统上用于向用户传达可点击性 / 可定制性的笨重视觉线索。
当一切都是平坦的，用户如何知道哪些是按钮？
用户仍然需要视觉指示器来知道页面的哪些位置是可以点击/点击：可以感知的线索，帮助他们理解如何使用界面。因此，颜色在平面设计中尤为重要，因为当您使用平面按钮时，这些颜色将成为帮助用户识别它们的主要标识之一。
多数扁平设计和浮动操作按钮
多数扁平的设计是由原始（或超）扁平设计的演变。这种风格大多是平坦的，利用细微的阴影，高光和图层来创建一些UI的深度。 Google的材质设计语言里包含扁平设计例子，它定义了一个新的按钮样式：浮动动作按钮。这些按钮分布在界面的顶部，一般跟常用或主要的行动有关。他们充当CTA按钮（“用于促进行动”），代表用户在该特定屏幕上执行最多的某个操作。
Google的地图是一个悬浮按钮做得很好的的例子。用户在Google地图上执行的主要操作是获取路线，因此对于FAB来说，这是非常合理的。
在UI设计中使用FAB的另一个好例子是Evernote。尽管大部分平面的用户界面，该应用程序提供了导航栏上的一些微妙的阴影和浮动操作按钮（“添加新的”）。
幽灵按钮 | Ghost Button
在2014年，如果说什么能够左右UI设计界的主流设计趋势就是幽灵按钮。幽灵按钮是那些透明和中空的按钮，有一个基本的形状形式，如矩形或平方。也会用“空”，“裸”或“空心”命名按钮。幽灵按钮轮廓是非常细线，而内部部分是纯文本。
幽灵按钮来源与扁平设计的革命，当苹果发布iOS 7时，幽灵按钮变得时髦。在iOS的UI上，许多按钮就是我们所说的幽灵按钮。简单而简单的矩形形状与框架内的整齐字体相结合，完美地呈现在平面UI中。
他们通常显示为CTA按钮，并提供一个干净的外观。 Specular站点是这种类型的按钮良好应用的例子。
按钮的基本策略
在开始设计按钮之前，现在是思考设计如何传递可用性的时候了。用户如何将元素理解为一个按钮？很可能你应该：
1.使按钮看起来像按钮（请参阅形状）
2.使用户可以轻松地与按钮进行交互（请参阅大小和填充）
3.说明按钮他们是做什么的（见标签）
4.使用色彩对比来引导用户采取行动（请参阅颜色）
而且一定要保持整个界面控件的一致性，这样用户就能够识别和识别你的应用程序或站点UI元素，并将其作为每个页面上的按钮。
形状
一个安全的做法是将按钮做成正方形或正方形与圆角，取决于网站或应用程序的风格。很久以前，矩形按钮已经被引入数字世界，用户也很熟悉它们。
一些研究表明，圆角加强信息处理，并将我们的视线引向元素的中心。
你可以更有创意，并使用其他形状，如圆形、三角形、甚至自定义形状，但要记住后者可能会更危险。
大小和间距
按钮的大小在帮助用户识别这些元素方面也扮演着重要的角色。您应该考虑按钮元素的大小以及可点击元素之间的间距：
尺寸。当tap被用作您的应用程序或站点的主要输入方法时，您可以依靠MIT Touch Lab进行学习，以便为您的按钮选择合适的大小。麻省理工学院的研究发现，手指垫的平均值在10-14毫米之间，指尖是8-10毫米，使得10毫米x10毫米是一个好的最小触摸目标尺寸。
这个建议不是针对完美的容易出错的触摸目标，而是为了平衡其他重要特性（如屏幕信息密度），将错误数量降至实际水平：
当鼠标和键盘是主要的输入方法时，按钮测量可以稍微减少以适应密集的UI。
间距。按钮之间的间距有助于分离控件，并为您的用户界面提供足够的呼吸空间。
标签
你应该为你的按钮选择一个合适的标签。选择应该基于最少惊讶的原则：如果必要的按钮有一个惊人的高因素的标签，可能有必要更改标签。
拇指法则—标签按钮与他们做什么。添加一个清楚的消息告知点击/点击后结果，或使用动词暗示结果。
在下面的示例中，您可以看到一个对话框，当用户尝试使用Web应用程序将文件上传到Dropbox时，将显示一个对话框。这条消息提供了一个标签为“Awesome！”的单个按钮，而这个标签可能会让普通用户感到困惑，因为一旦你点击它就不清楚按钮的功能。
颜色
选择调色板时，请记住考虑颜色如何帮助用户导航并理解动作：
1.使用颜色和对比度帮助用户查看和解读您的应用内容，与正确的元素进行交互，并了解操作。在下面的例子中，我们将红色用于执行潜在破坏性操作的按钮。
2.做出最重要的按钮（特别是如果你使用他们CTA）看起来是最重要的一个。例如，亚马逊使用对比的黄色按钮来引导用户注意到正确的操作。
结论
每一个按钮（经典或扁平的按钮，如幽灵按钮或浮动动作按钮）都是为了引导用户采取你想要他们采取的行动。将Web或应用程序视为由繁忙的用户启动的对话。这个按钮在这个对话中起着至关重要的作用 — 一个流畅的交互使对话保持流畅，而小故障（例如找不到正确的按钮）会造成中断，最坏的情况是中断。
作者：原文链接
