交互设计是近几年才发展出来的角色，目前只有大公司和部分有一定规模的公司有这个岗位。大部分公司的交互活基本会让产品或者视觉去完成，但由于产品和视觉的对交互认识不足，交互产出的质量不尽人意，另外一方面，所谓术业有专攻，产品的主业是挖掘需求，视觉设计师注重视觉效果，比较感性，而交互相对理性，这个岗位对逻辑思维和同理心要求比较高，是产品和视觉难以兼顾的，于是交互设计这个岗位随之而生。

如果产品或视觉具备一定的交互知识，对自己的职业生涯具有重大意义，会比不具备交互知识的同行有更强的竞争力。

这篇文章主要从交互设计的大逻辑入手，给大家分析四个在交互设计过程中常用到交互原理，学会这四个交互原理后，当你看设计的时候，就能大概看出个所以然来，知道别人为什么会这么设计，好在哪里，不好在哪里。

一、2/8法则

定义：产品中100%的功能，大约只有20%的功能会被用户使用。

2/8法则更多被理解为一个社会定律，这个定律能解释很多的社会现象，比如20%的人掌握在80%的社会财富，一个团队里面大概有20%的核心人员等，同样这个法则也能运用在设计、摄影等方方面面。

如下图所示，这是一幅关于潜意识的图，其实人的所有意识就像这座冰山，我们能感知到的意识其实只是冰山一角，在我们意识中，潜意识占我们所有意识的80%，我们很难直接感知我们的潜意思，但潜意识每时每刻都在影响着我们行为举止、思考等，影响着我们决策。

那么把这个图运用到我们的设计里面，我们可以理解为：20%的高频主要功能，要突出展示，80%的低频功能，要学会隐藏。

回想目前的软件设计，这个法则无处不在。比如：

1）Google

20%：Google是搜索引擎，对于Google而言，搜索功能是最重要的。打开Google首页，界面内比重最大最显眼的功能是搜索功能，用户到达首页，往搜索框里输入内容，马上就能实现搜索，极大提高用户效率。

2）高德地图

20%：高德地图主要目标之一是帮用户找到目的地，所以在地图应用里面，搜索功能是20%的功能之一。搜索功能在头屏（打开软件后第一眼呈现的页面）十分突出，放在了头屏的明显的位置，让用户进到产品就能完成自己的目标。

80%：高德地图80%功能，比如头屏底部‘我的’

tab里面（如下图），里面包含很多很多功能，比如会员中心、每日签到、金币商城等，这些功能都是辅助功能，并不是操作频繁的功能。有这些功能满足产品丰富性，满足高级用户的需求，添加用户粘性，但是去掉这些功能，对用户完成主要目的，比如找到目的地，找到去目的地的方法等并不影响，所以这些功能被适当地隐藏起来，被放到了底部最后一个tab里面，而不是一打开软件呈现的功能。

3）QQ

20%：对于移动端QQ而言，及时通讯是最重要的功能之一，所以移动端QQ头屏是信息页，展现最近与你有过互动的人或最新消息推送。这样能便于寻找最近与你互动过的人或社群等。一般情况下，通讯录的1000个好友里，可能只有10个（少数的几个人）是你经常会联系的，所以要是你要找与你经常联系的人聊天，你在联系人列表的找到他的效率远低于在消息页找到他的效率，所以联系人的tab放到了第二而不是第一。

说到这，你会发现，pc端的QQ是联系人列表为第一展现内容。我想一方面，考虑到pc端和移动端的交互方式不一样，对于pc端来说，对用户进行分组、查找是个简单的操作，而且PC版本能一次展示多个好友，在联系人列表中找到想要的人并没有那么困难，但是对移动端而言，分组操作会比较繁琐，而且受移动端屏幕大小限制，用户查看联系人与查找联系人的动作不能并行完成，在联系人列表找人效率较低。

另一方面是用户习惯，考虑到PC版的QQ是多年沉淀下来的东西了，大家都习惯已经被培养，习惯在联系人列表中找人，如果改动过大，很多用户都会难以接受，会引来大面积吐槽。

回到正题，

80%：对于QQ而言，80%的功能，比如‘动态’里面的‘吃喝玩乐’、‘同城服务’、‘运动’等这些模块，这些模块用户操作频率比较低，所以放到了相对消息列表比较隐蔽的位置。同样，这些功能都是为了丰富产品，满足不同用户的不同需求，加强用户对产品的粘性。

除了上面说的几个案例，2/8法则能用在几乎每个软件产品上，那在日常软件设计中要如何使用呢？

使用方法：

高频操作/核心功要突出，放在系统导航架构黄金位置； 低频操作要善于隐藏，放在架构的‘狗屎 ’位置。

（系统简单架构如下图所示）

黄金位置可以理解为产品中第一个模块的第一个子模块，比如pc\web端的首页或移动端的头屏，一般放高频操作和核心功能。

‘狗屎 ’位置可以理解为产品中最后一个模块的最后一个子模块，或者最隐蔽的模块，一般放些不影响产品主流程的功能。

其他功能，按功能的重要级别分散在系统每个位置，越重要的越靠近黄金位置，越不重要越靠近‘狗屎’位置。

二、格式塔原理

定义：我们在有视觉输入时，会在神经系统层面上感知形状、图形和物体，即会习惯性地把视觉输入分组归类或者自动补全。

格式塔原理有很多特性如：接近性、相似性、连续性、封闭性、对称性、主题/背景和共同命运。

接近性：相互靠近的物体看起来属于一组。反之，如果距离太远，很难感知他们是相关的。如下图所示，图已能感觉每个圆是独立的个体，但是图二里面每行的间距变小，感觉出来一行是一组的，类似的情况如图三，一列是一组的。

相似性：如果其它因素相同，相似的物体看起来归属于一组。如下图，图一都是黑色的圆，没有明显的分组，但是到图二，两列黑圈变成了红圈，能看出红圈是一组，黑圈是一组的。

连续性：我们的视觉倾向于感知连续的形式而不是离散的碎片。如下图，IBM的logo虽然图形中有隔断，到时我们识别这个图的时候，能快速识别出这是IBM的LOGO。

封闭性：我们的视觉系统自动尝试将敞开的图形关闭起来，从而将其感知为完整的物体而不是分散的碎片。如下图，我们能识别出圆、三角形和矩形，而不是很多一小段的线条。

对称性：我们倾向于分解复杂场景来降低复杂度。如下图，两个圆角矩形的组合，我们会看成等式上的图形。

主题／背景：大脑会将视觉区域分为主体和背景。如下图，我们会看出白色的是主题，橙色的是背景

那么

1）从接近性、相似性可以得出，人们会习惯性把视觉输入分组；

2）从连续性、封闭性可以得出，人们会习惯性把视觉输入补全。

在软件设计上，也经常会用到格式塔原理。比如：

1）淘宝首页，banner底部有10个原型的快捷入口，他们是阿里系的电商产品，因为淘宝是个有强流量的产品，把阿里系电商相关的产品放在这里能给这些产品带来巨大的流量，把这些产品统一样式，能感知他们是同一类产品。

2）美颜相机头屏，有一行有相似样式的圆圈和底部的一个自拍功能的圆圈，在这个界面看出，上面一行圆圈是同类功能。

3）知乎的‘更多’tab，通过灰底，能看出这个页面被分成3块，顶部一块是个人信息；中间一块是跟‘我’的行为有关的；底部一块是软件设置相关的。

使用方法：

要把相似的东西放在一起，归类。相似的东西放一起，能更快找到同类；

将相关的东西拉的更近，把不相关的东西拉的更远。

好的设计能把信息更好地传达给你，让你知道哪些信息是重要的，哪些信息是一伙的，哪些信息是次要的。

三、费茨定律

定义：

1）设备当前位置和目标位置的距离为（D），距离越长，所用时间越长；

2）目标的大小为（W），目标越大，所用时间越短。

如下图示，如果给你提供A、B两个按钮，你会觉得哪个按钮按起来会比较容易？

毫无疑问，肯定是B按钮按起来会比较容易，因为B按钮，按下的面积大，不需要浪费精力瞄准。从这个问题可以看出，操作按钮越小，点击时花费的成本越大。

在很多产品中，我们能看到运用了费茨定律，比如：

1）在淘宝的产品介绍页中，购买是一个最重要的动作，这是有商业价值的一个操作，那么从淘宝的界面设计能看出，‘加入购物车’和‘立即购买’这两个具有购买含义的按钮，在底部操作按钮中，面积是最大，颜色是最突出的。那么这两个按钮按起来会比较容易，也由于比较突出，能刺激用户去点击，形成转化。

2）在美颜相机中，‘自拍’是一个核心功能，所以自拍功能与上面的一行功能相对独立，且按钮面积要比上面的一行按钮要大。由此看出自拍是个重要且高频的功能，这么做是便于用户区分，提高转化。

3）在网易云音乐的音乐播放界面，‘播放’、‘上一首’、‘下一首’是高频功能，而这三个功能中，播放是最高频的功能，因此‘播放’按钮要比‘上一首’、‘下一首’来得大，扩大点击范围，能便于用户点击。

使用方法：

操作频繁或商业目的比较重要的按钮或控件，在空间允许的情况下，可以做的比其他控件更大。

四、席克定律（剃刀法则）

定义：给用户的选择越多，用户做的选择时间越长，所以尽量减少选择。

关于给用户选择，我们可以看淘宝和网易严选，一个大杂全的平台型电商和一个卖少而美商品的垂直型电商。

当我要买一个旅行箱的时候，我在淘宝搜‘旅行箱’，淘宝给我展示了上千个旅行箱，而网易严选只给我展示了两个行李箱。

照理来说，在淘宝逛，我能找到性价比更高的旅行箱，但是在我不断筛选产品的过程中，我会发现，越选越不知道自己要买什么了。可能我看了上百个旅行箱之后，觉得累了，于是一个行李箱都没买到。

但是在网易严选，由于平台的特性，我信任这个平台，在我对比了两个行李箱的优劣之后，我就知道自己想要什么，于是我就下单了。

另外一个例子，我们回顾手机营销方式的变化，在十年前，手机厂商会一次性推出好几款相似的手机但不同型号让客户去挑选，比如三星，每次买手机的时候，客户都需要细细对比挑选，希望能买一台最适合自己的手机。但是现在的手机厂商每次只专注做一款手机，希望能做出一个爆品，推出什么用户买什么，不需要用户花时间对比同款手机的优缺点，比如苹果。

现在的手机厂商纷纷效仿苹果的营销手段，关于哪种营销方法比较管用就不言而喻了。

上述说到的4个设计原理也只是交互设计的冰山一角，但这四个原理在大部分产品都能用上，以后再看到别扭设计的时候，大概也能说出个所以然来了吧。

如果上面有说的不对的地方，希望能指正。

本人简介：四口，网宿交互设计师。马甲线萌妹，喜欢设计、跑马、健身。

文章原链接：http://ued.chinanetcenter.com/?p=1497