“确定/取消”or“取消/确定”？提到按钮，相信很多人都会想到那场“旷日持久的战争”。设计师为了“确定”和“取消”两个按钮到底应该将哪个放在左边的问题争论不休、各持己见，至今也没有统一的答案。一个小小的问题之所以被这样重视，是因为按钮是用户在使用互联网产品时重要的行为工具，更是直接影响着用户对某产品的忠诚程度。不同的按钮会带给用户不同的操作体验，那么，按钮的种类到底有哪些呢，他们又是如何在产品中起作用，帮助用户完成目标的呢？下面，我们就跟随按钮的演变历史来了解一下不同的按钮吧！

• 3D按钮 •

当计算机由命令型界面向基于图形的交互界面过渡时，为了使用户更容易地知道如何操作、在哪里点击，按钮通过浮雕和阴影的效果，将自身与周围的区域明显地区别开来，使用户形成视觉层次，顺利地完成了“点击”动作，这便是3D按钮。

• 拟物化按钮 •

拟物化按钮，顾名思义就是用拟物化的方法，将界面中的按钮尽量以现实中按钮的形态呈现出来，其目的就是利用用户以往对事物的认知经验，从而降低学习新鲜事物的难度。

• 扁平化按钮/微立体按钮 •

不难发现，3D的效果和拟物化的方法都是为了让用户更容易地接受按钮，随着页面承载的信息越来越多，拟物化的形式不免使页面显得拥挤，2013年iOS7推出扁平化的设计风格，而用户与按钮经过长时间的接触，就算不做成立体的样子，只用颜色加以区分，用户也能辨别出来，这也是扁平化迅速成为设计潮流的原因之一。而微立体则是在扁平化的基础上演变出的一种形式，为扁平化的按钮加上细微的渐变或是阴影，使按钮看起来更有质感，同时，利用这种效果丰富按钮之间的层级关系，引导用户的行为。

• Call to action按钮 •

提到引导用户的行为，就要进入文章的重点内容了，随着各类互联网产品的增加，竞争也越发的激烈，设计师只考虑按钮的外观风格是远远不够的，如何通过按钮的设计带来更多的转化率，才应该是设计师思考的核心问题，于是便出现了Call to action按钮——行为号召按钮。此类按钮通过颜色、文字等因素来引导或影响用户的行为，主要包括主按钮、次按钮、幽灵按钮、悬浮按钮和灰置按钮。接下来，我们就来认识一下它们吧！

l 主按钮/次按钮

我们回到文章最开始提到的那个问题，“确定/取消”党和“取消/确定”党最终并没有争出个胜负，而问题解决的途径之一是Windows、OSX、Android、iOS等各系统要统一标准，以保证用户使用产品的流畅性。那如果用户游走于两个标准不同的系统间又该怎么办呢？于是便出现了主按钮和次按钮。很多情况下按钮都是成对出现的，设计师通过按钮颜色的变化来形成视觉层次，从而引导用户产生行为。如下图1浏览器的“确定/取消”按钮，“确定”按钮的背景色填充了显眼的蓝色，很容易就吸引到了用户的注意力，这是不是比纠结到底将哪个按钮放在左边要有效率的多呢。

再比如iOS系统中，红色自然要比蓝色更能形成视觉刺激，我们就会很自然地将视线放在“忽略”这个按钮上（如图2）。还有一种很好的办法，就是赋予按钮不同的形式，当然，这种方法的最终目的还是使按钮在视觉上形成层次感，从而区分出主次关系。例如图3中某APP中的两个登录按钮，你是否有一种想要直接点击“微信登录”按钮的冲动呢？是的，“账号登录”按钮好像是被隐藏了，其实它是一种文字按钮，但是相较于正常按钮的形式，它的视觉重量又被弱化了，设计师成功地实现了他的目的。

l 幽灵按钮

幽灵按钮又称虚拟按钮，它是在扁平化风格的基础上发展而来的，它有按钮的基本形状，但是没有实在的填充色，一般为中空或者透明，其边框是非常细的线条，看起来简洁、清爽，有时候会与扁平化的实心按钮一起出现，作为其中的次按钮来发挥作用。

当幽灵按钮在单独使用时设计师就要提高警惕了，虽然它极简的外观可以让页面看起来更简单、干净，但是由于缺少颜色填充，所以会很难吸引用户的注意力。而且当你的页面背景色较为复杂时，就更要慎重了，就如下图所示的那样，用户可能根本读不出这个按钮的意思。另外，幽灵按钮的位置也是需要考虑的重要因素，它不像传统的按钮那样，适合页面大多数位置，由于识别性相对较弱，所以就要充分考虑用户的视觉浏览路径，防止用户“迷路”。

l 悬浮按钮

悬浮按钮通常是圆形的，加上细微的阴影效果，悬浮于整个界面之上。它也是现在比较常见的一种交互按钮，承载着最常用、最重要的功能，引导用户更高效地完成交互动作。如下图所示，某APP中的用户交流界面，设计师希望用户更多地去提问，以增加用户间的互动，所以将“提问”以悬浮按钮的形式放在页面中，时刻提醒着用户去“提问”。再比如，我们最熟悉的“返回顶部”按钮，当页面承载信息过多，浏览路径较长时，这个小小的悬浮按钮就满足了我们浏览的需求。

需要注意的是，悬浮按钮虽然方便，但是也不能过多使用，当一个页面出现两个或两个以上的悬浮按钮时，就会分散用户的注意力，就会削弱悬浮按钮的功能意义。另外，很多悬浮按钮为了追求简洁，只采用图标的形式加以标注，当用户遇到不认识或者模棱两可的图标时，灾难就来了，所以，不要挑战用户的记忆能力，除非页面的上下文环境可以帮助用户理解图标的意义，否则，还是需要用文字的形式加以说明的。

l 灰置按钮

灰置按钮也是Call toaction按钮中的一个重要内容，它传递给用户的行为信息就是“不要点击”，在很大程度上简化了用户的操作步骤。我们来看一个登录页面的例子，该页面在输入第11个数字之前“发送验证码”的状态一直是不可点击的，因为10位以下的手机号是不存在的，如果当我们不小心输入了错误的11位数字后，可以点击“发送验证码”，假设产品很友好，它可能会发来提示“您输入的号码不正确”；如果产品没有提示呢？那我们就会陷入等待的焦躁情绪中，甚至怀疑是不是手机出了问题...值得注意的是，灰置按钮不能点击自然也不会有反馈，当用户不知道为什么不能操作时，我们单纯地将按钮灰置就有点反人类了，这时就应该给用户相应的反馈提示，甚至放弃将按钮灰置的想法。

• 结语 •

不仅仅是Call toaction按钮，所有的按钮在设计时都是为了引导用户的行为，我们在考虑按钮时，不但要选择合适的按钮样式，还要充分考虑其颜色、位置以及提示语内容等因素，只有这样，用户与产品的交流才能流畅，开发产品的目的才会变得有意义！