UI设计之按钮：风格演变和最佳实践
2017-01-11 16:51 452 0
本文转载自：众成翻译
链接：http://www.zcfy.cc/article/1118
原文：https://uxplanet.org/buttons-in-ui-design-the-evolution-of-style-and-best-practices-56536dc5386e#.l5ag9zk5b
按钮是一个交互设计中普通的常用元素。虽然按钮是一个非常简单的元素，而且在过去数十年对于它的设计也经历了多次变化，但是对于按钮的用户体验设计仍然是认知与清晰的问题。
在本文，我们将综述按钮设计上的风格演变，同时找出在创建一个极具效果的按钮（译者注：用户体验好的按钮）的过程中你应该遵守的最重要的最佳实践。
风格演变
三维按钮
早期以来，操作系统按钮依赖于浮雕和阴影将其从上下文环境中区分出来。这种设计方案都是基于一些简单的原则，比如使用边框、渐变和下拉阴影来使得元素能从背景和内容中突出出来，进而很容易的被识别为一个可点击的元素。
注意按钮是如何被实现为看上去是凸起来的
Win95的对话框充分利用了深度阴影和高亮来实现了3D效果，这种效果有助于用户识别视觉层次和了解哪些元素是可交互的。
那些凸起来的元素看起来像它们能够被压下（用鼠标点击）。
拟物化按钮
在数字设计中，拟物化指的是：当UI元素被设计为看上去很像现实生活的物体时，它要么是复制了一个真实生活中的纹理，要么是它被实现为一个看起来像真实生活的按钮。拟物化设计的目的是帮助用户运用对真实生活中物体的先验知识来理解如何使用一个新的交互设计接口。下面实例中的计算器有助于用户将物理计算机的知识转移到数字化的环境中。
图片来源：theultralinx
扁平化设计按钮
最近在UI设计领域中，一个最大的变化趋势是从拟物化元素向剥离3D效果的更扁平化元素的变化。与拟物化设计不同的是，扁平化设计被看作是一种探索数字媒介的方式，而不是尝试去还原它在物理世界的外观。因此，它去掉了那些传统上被用来告诉用户元素可点击的沉重视觉线索。
普通的按钮和扁平化的按钮 
苹果iOS上的计算机app
当一切都扁平化的时候，用户将如何知道哪个位置是按钮？
用户仍然需要有助于他们理解如何使用界面的可感知视觉符号来知晓页面上可以点击的地方。因此，在扁平化设计中颜色是非常重要的，因为在使用扁平化按钮的时候，这些颜色将是有助于用户识别按钮的最主要的标识符。
近扁平化设计和浮动动作按钮
近扁平化设计是原始扁平化设计（或者成为极端扁平化）的一个演变。这种风格在设计上大多数为扁平化的，但是在设计中也充分利用细微的阴影、高亮和层。谷歌的Material Design语言一个具有正确优先顺序的近扁平化设计的例子，它引出了一个全新类型的按钮：浮动动作按钮（Floating Action Button,FAB）。这些按钮都是分层次置于用户界面的上层，用来进行下一步动作或者基本动作的操作。它们充当了动作按钮（用来指示 下一个动作），意味着在特定屏幕下呈现一个单独的用户动作。
谷歌地图是一个非常好的浮动动作按钮的例子。用户在地图上最主要的操作就是获得方向，所以对于浮动动作按钮来说这是要给完美的适用场景。
安卓系统上的谷歌地图
另一个适用浮动动作按钮进行UI设计的很好的例子是Evernote。尽管Evernote是一个接近于扁平化设计的用户界面，但是该app也在导航栏添加了一个细微的阴影，同时使用了浮动动作按钮（“add new”）。
安卓系统上的Evernote应用
虚拟按钮
在2014年，UI设计的主导性趋势之一是虚拟按钮。虚拟按钮是那些有一个矩形或者正方形等基本形状构成的透明或者空的按钮，它们有时也具有“empty”，“naked”，“hollow”等标题。虚拟按钮一般由一条非常细的边框和纯文本所构成。
正常状态（左）和聚焦状态（右）
虚拟按钮最初起源于扁平化设计的演变，当苹果发布了iOS7之后才变成一种流行的趋势。在iOS的用户界面上，很多这类型的按钮我们都称之为虚拟按钮。简单的纯矩形形状结合整齐的内部字体使得扁平化用户界面看起来非常的完美。
‘Name’, ‘Release Data’ 和 ‘Featured’ 是类虚拟按钮（近似虚拟按钮）。 ‘Get’ 是虚拟按钮。
虚拟按钮通常被当作行为召唤（Call to Action,CTA）按钮出现，同时展示了一个清爽的外观。Specular网站是应用此类型按钮的一个非常好的案例。
Specular使用了一个主要的“Purchase Now”扁平比按钮和一个次要的“Take Tour”虚拟按钮。
按钮的基本最佳实践
在你开始设计的按钮之前应该思考你的设计如何能够_功能自可见_（译者注：看到设计就明白这是否是一个按钮）。用户如何才能把元素理解为按钮呢？你更可能应该：
- 使元素看上去像按钮（看外形）
- 使用户易于与按钮交互（看尺寸和填充）
- 按钮的标签体现它的功能（看标签）
- 使用颜色对比来引导用户行为（看颜色）
注意：要确保在所有的交互控件中保持_一致性_，
外形
一种安全的赌注（译者注：指最常用的做法）是依据网站或者app的风格来制作_方形按钮或者带圆角的方形按钮_。矩形状按钮在很久以前就已经被应用在数码世界的设计中，而且用户对它们非常熟悉。
据研究标明：圆角可以增强信息的处理以及可以吸引我们的眼球到目标元素的中央。
圆角矩形按钮
只有你想不到的，没有你做不到的。你同样可以使用其他如圆，三角形甚至是自定义形状来实现创造性的按钮，但是也必须注意后者可能具有一点冒险性的。
浮动动作按钮实例
尺寸与填充
在帮助用户识别按钮元素时，按钮的尺寸扮演着非常重要的角色，你需要同时考虑按钮元素的尺寸以及可点击元素之间的填充部分。
尺寸当你的app或者网站使用 轻击（tap事件） 作为主要的输入性交互方式的话，为了给你的按钮选择一个合适的尺寸，应该依赖一下MIT Touch Lab研究。MIT研究表明：指垫的平均宽度在10-14mm之间，指尖的平均宽度在8-10mm之间，因此10mm x 10mm是一个好的最小触摸目标尺寸。
图片来源： uxmag
这个建议不是为了完美的解决易错的触摸目标，而是尽可能的在实践中最小化出错的数量，同时平衡其他比较重要的特征（比如屏幕信息密度）。
图片来源: ux.stackexchange.com
当鼠标和键盘是网站主要的输入性交互方式的话，对于按钮尺寸的要求则可以降低以便于适应密集型的用户界面。
填充按钮之间的填充的作用是分割不同的控件，同时可以给用户界面足够的活动空间。
“Material design”对话框中扁平化按钮之间的填充
标签
为按钮选择一个合适的标签是很重要。选择标签的方法应该基于_最小惊讶原则（principle of least astonishment）:如果一个必需的按钮有着一个高惊讶因素的标签，那么这个标签该换了。_
“大拇指规则”————标签按钮应该添加一条清晰的信息来标识被点击或者被轻击之后要做什么，或者标明动作发生之后一个元素需要做什么。
在下面的示例中，用户在webapp中上传一个文件时候会出现一个对话框，该对话框信息提供了一个单独的带有“Awesome”标签的按钮，但是这个标签对于普通用户来说可能导致困惑，因为它并没有表明操作按钮之后做什么。
图片来源： uxmatters
颜色
当选择一种颜色color palette时，记得要思考颜色是如何帮助用户导航和理解动作的：
- 使用颜色和对比度有助于用户查看和了解app的内容，与正确的元素进行交互，理解动作。下面的例子中使用红色按钮来标识潜在的破坏性的动作。
注意“Uninstall”动作按钮是如何在颜色和对比度上增强的。 图片来源： Material Design
- 使最重要的按钮（尤其是非常想让用户点击的按钮）一眼被看上去就能明白它是最重要的。例如，亚马逊使用了对比性的黄色按钮来驱动用户采取正确的动作。
亚马逊为CTA按钮“Add to Cart”使用了一种对比性的颜色
结论
所有按钮（包括经典的按钮，或者如虚拟按钮、浮动动作按钮等的现代按钮）的作用都是指导用户去做你想让他们去做的事情。把网页或者app认为是由一个繁忙的用户发起的对话，则按钮在这段对话中起着至关重要的作用。当轻微失误(比如无法找到正确的按钮)引起中断甚至故障时，平稳的交互可以保证对话的流畅。
谢谢！
