原文地址：
设计师的作品经常被质疑，"对于这个点，你为什么这样做而不是那样？比如说在面试中，作品集中有这么一个界面，面试官问道：“你为什么要设计一个白色的登录按钮，为什么别的按钮不是这个颜色？为什么选这个颜色而不是那个？"之类的问题。通过交互设计的4个认知维度可以阐明为什么这样设计。
下面，用设计button来进行说明
0. Aware 知觉
知觉，是用户使用一项功能之前，意识到自己需要此功能的过程。
大家可以回忆一下，有多少时候，你拿起手机，记得自己要干点什么，可是等到解锁了屏幕之后，却想不起自己意图的行为了？
如何最好的用设计辅助用户的知觉呢？这个说起来很高深的问题，其实很简单。如果你的手机只有一个app，只能做一件事情，你通常忘记自己操作意图的可能性就会减少很多。我们设计能做的，是两方面的工作：一是加强知觉存留的周期，另一个就是通过设计辅助唤醒知觉。let user focus on one simple thing and make it good.
如果回到刚才的登录界面，那么这个过程就是：用户想要登录的时候，就会看到land在了这个页面上，也不会被其他的元素“分了神”，而是能很专注的直接去执行自己想要执行的操作。reduce any distractions.
其实在我们平时的设计中，很难的也是这一步，我们不知道如何做减法，所以无法存留用户珍贵的“知觉”。这一点在B2B的软件中，更加常见。
1 让按钮长得像按钮 Visual Perception (Recognize > Recall)
一旦用户知道了该在此页面中做什么，哪里可以做成为了下一个问题。按钮的唯一作用就是供用户点击，按钮和其他元素所不同的地方也在于它们能够被点击。所以用户能否意识Aware到你设计的这个“东西”是按钮，就在于其本身的可点击性(clickability)。
1.1 形状
目前 APP 和网页中按钮主要的形状是矩形和圆角矩形。其中矩形式按钮很早就应用了，用户对此已经习以为常了。当然我们也可以尝试使用其他的形状。比如，圆形，三角形，甚至其他自定义形状。我们要把握设计的度，有的时候过于追求设计感，为了创新而创新，做的按钮用户都认不出来，这就有点本末倒置了。
其实Neilsen十法里面讲过一个非常经典的设计原则，就是说识别是比记起要好的。因为识别是一个模糊的过程，需要的认知空间相对比较小；而记起则是一个精确的过程，需要准确提取信息记忆。说起来，就是你认出一个人是你的熟人，和你记起一个人的名字的区别。
那么为什么保持整体风格的一致性如此重要呢？因为用户远比我们想象中要细心得多。他们会注意到页面中的一些小细节。当他们发现这个地方的按钮采用一些特定的设计风格时，那么其他地方带有相同风格的元素用户就会理所应当的认为也是按钮。(user will make rule by themselves, if there is no rule to follow, they will create by themselves, so don't break the rule) 比如，你在这里按钮采用的是圆角矩形。那么在其他地方也应该是圆角矩形，不能这里是圆形，那里是矩形。这样会给用户带来极大的困惑。
1.2 阴影与高光
随着扁平化设计的兴起，人们觉得按钮只需要一个矩形上面写几个文字就行了。按钮没有必要做的太过于写实，阴影与高光也没有使用的必要了。然而事实并非如此，阴影与高光依然有着极大的作用。我们通过阴影与高光的搭配使用来使按钮从页面整体背景中凸显出来，帮助用户更加容易的找到按钮。当然也可以使用阴影增加按钮的可操作性，也就是让按钮看起来更容易点击。Affordance design
按钮上我们应该通过添加标签来告诉用户这个按钮的具体用途，标签可以是文字也可以是图标。
比如下方的亚马逊账号注册页面，底部的按钮上写着“创建新账号”。用户就会知道填写了以上的基本信息后，点击这个按钮就是创建了一个新的亚马逊账号了。用户只有了解了点击这个按钮是干什么的，他们才会安心的点下去。标签上文字尽量使用动词和名词。
页面中不同元素的重要性是不同的，有的元素你希望用户一眼就可以看到，有的元素在页面中却是鸡肋，可有可无。这就需要我们在设计要突出重点。
2.1 Call to action button
CTA是我们期望用户可以很快很容易就可以发现的按钮。一个行为召唤按钮是否成功就在于看它能否抓住用户的视线 catch user's attention，并且可以诱导用户完成点击。
比如底下这个 Gmail 的 UI 设计就很好的体现了这一特点。当用户完成邮件内容编辑之后，他们立马就会想到将这份邮件发送出去。这时候用户需要一眼就能找到“发送”按钮在哪里。整个页面设计的很简洁，在背景色很浅这一前提下，我们给“发送”按钮加一个蓝色的配色，让用户很容易的找到。
相同的手法同样适用于网站设计。比如下面的 behance 网站，整个页面的视觉焦点就是注册按钮。
同一页面的按钮也会根据其重要性不同分为主要按钮和次要按钮。按钮的唯一用途就是供用户点击完成交互，主要按钮就意味着让用户更加愿意点击这个按钮。比如当年进入淘宝的一个商品详情页面，店家肯定希望用户点击的是“立即购买”或“加入购物车”，而不是“返回”按钮。那么如何诱导用户点击主要按钮呢？
我们可以给主要按钮加以更高的视觉权重 visual hierarchy。下面的这个清倒废纸篓页面中，我们可以看出“安全清倒废纸篓”(secure empty trash)按钮拥有更高的视觉权重。因为它使用与背景色相差较大的蓝色，这种配色设置使这个按钮很容易就被用户注意到。
3.1 Visual Feedback
按钮不会总是处于一种状态不变的，一般来说，按钮会有四种状态:Normal(正常)，Focused(选中)，Pressed(按下)和Disabled(不可用)。给用户提供相应的视觉反馈来告诉他们按钮当前处于的状态是很重要的。
比如我们通过网银转账，如果“确认转账”按钮没有 Pressed 的这个状态，在转账结果返回之前用户就不会知道自己刚才的操作有没有成功。甚至还会发生重复操作的现象，给用户带来极大的损失。
因为当你执行了一个操作之后，要期待这个操作给你个反馈对吧。说不定误操作了呢，网络断了呢，系统崩溃了呢，DDoS攻击了呢？
这地方和Signaling也很相关，一般这种反馈是非常重要的，是需要通过信号来用户一个暗示，我目前的状态是什么current status，有的时候对安抚用户的情绪起到至关重要。比如说曾经和一位设计无线麦克风上LED灯状态的小伙伴聊过，这里面就全是Signaling的作用。虽然我们经常使用这种产品，对那个不起眼的小灯泡根本没有任何记忆，但是它的作用不同凡响。我们可以放在context下面来谈下，比如当你打开麦克风，怎么判断你的麦克风是开着的，虽然我们有个很小很小的开关，上面也写着开和关，但是LED变成绿的，你就不用戴着老花镜看看到底开关指向什么地方了；而无线麦克风要没电了，黄灯闪烁提示用户，我要没电了快给我充电，这部分可能根据人们对过去事物的认知会延续到这个灯状态的解读；如果我在台上和别人窃窃私语，谈点不相干想干的话题，用如何确定TA的麦克风是不是放在了正确的状态，如果LED变成红色而且在闪烁，用户是不是就可以不用对着麦克风喊“喂喂喂...”来确定自己是不是已经关掉麦克。这种例子不胜枚举，在交互中也是起了非常重要的作用。
3.2 按钮大小与间距 size and distance
在设计中我们应该确定按钮的大小，按钮过小会影响用户操作。按钮过大也会影响页面中其他的内容。无论是 APP 还是网页，点击都是最主要的一个交互事件。根据麻省理工学院的一项研究表明，人类手指指垫的平均尺寸是 10-14mm，而指尖的平均尺寸是 8-10mm。所以当用户要完成点击操作时，最小的尺寸应该为 10mm*10mm。44PX*44PX
除了按钮的自身的尺寸大小，我们也要注意按钮之间的间距。间距过小会发生误操作，从审美角度上来说也会使页面感觉很拥挤。
知道了自己要做什么，意识到了自己要怎么做的下一步，就是采取行动。
说起来这一步好像没什么特别的，看到按钮点下去，看到输入框输入一下，总之就是采取一个操作嘛，没什么难的。
然而并不是这么简单的。在我们对于界面的认知和界面的实际操作之间呢，有两个很重要的认知概念。一个叫Gulf(鸿沟)，一个叫Distance（距离）。
Gulf这个概念还是比较好理解的，指的就是我觉得这个按钮应该这么点和这个按钮其实那么点造成的认知上的差异，感觉就是设计师搞砸了，挖了个坑的感觉。
5 总结
按钮可以帮助我们创建一个流畅的用户体验。在我们的按钮整个设计过程我们都要问自己以下这些问题：
1.用户能意识到你设计的是按钮吗？你有通过尺寸，形状，阴影效果和配色来让你设计的按钮看起来像是一个按钮吗？
2.你按钮上的标签提供的信息表达清楚了吗？用户知道这个按钮是干什么的吗？用户知道点击后会出现什么吗？
3.用户可以很容易的发现你的按钮吗？你知道用户习惯的视觉焦点在哪里吗？不要让用户去寻找按钮，而是在用户需要的时候，按钮自然的出现在用户的眼前。你有做到这一点吗？
4.如果当前页面里有两个按钮，更重要的那个按钮有着更高的视觉权重吗？你是通过哪些方面来实现不同的视觉权重的呢？
5. 用户按下这个按钮后，呈现的页面是他想要的吗？
