设计心理学，你懂多少？那些定律准则

作者

：

老虎帮－多萝西

来自老虎帮的@多萝西（http://m.zcool.com.cn/u/13618822）童鞋：那些定律准则，在交互设计领域有很多经过了时间的验证的法则定律被认作了标准，那么你都知道都有哪些吗？在日常的设计中，你运用了哪些设计理论呢？

一. 7±2法则

根据George A Miller 的研究，人脑处理信息的能力有限，所以它通过把信息分成块和单元来处理复杂问题。人们短时记忆广度大约为7个单位。即每次只能处理5～9件事情。

来，我们来举:chestnut:～

1. 作为设计师的日常，我们会逛站酷、UI中国等网站，他们的导航栏模块不会超过9个，使用的APP底部导航都不会超过5个～

2. 如果导航或选项卡内容很多，可以用一个层级结构来展示各段及其子段，并注意其深广度的平衡，像天猫商城和亚马逊网站的商品分类选项卡，导航是分为多个层级的。

3. 把大块整段的信息分割成各个小段，并显著标记每个信息段和子段，以便清晰的确认各自的内容，像比如苹果官网iphonex对于语言版本的介绍板块，分成了四个板块的信息来介绍，还有支付宝和微信银行卡界面卡号信息的展示方式，采取了分段的方式，也源于我们现实生活中使用的银行卡，分段展示在卡上。

二. 席克定律

在简单判断的场景中，一个人面临的选择越多，他所需要做出的决定的时间就越长。在人机交互界面中选项越多，意味着用户做出决定的时间越长，这时就需要对选项进行分类，以减轻用户做出决定的负担。

来，我们继续举:chestnut:～

1. 虾米播放器界面和虾米驾驶模式播放器界面，对比常规播放器，删减了很多在行驶中使用概率很小的功能。增加了【语音搜索】功能，司机在行驶中有很短的时间来操作播放器，减少选项，才会让司机在更短的时间内做判断。

2. keep跑步中界面和跑步暂停界面，要结合使用场景，再看这个页面的设计多么巧妙，点击【暂停】时，会出现【继续】和【结束】，尤其是【结束】按钮，需要长按才会真正结束这次跑步，在减少反应速度的同时又降低了错误操作概率。

然而，席克定律并不是什么场景都适用。

席克定律不适用于需要高度搜索、阅读或复杂的疑难排除决定。这个法则会随着工作的复杂性增加，降低其适用性。

蚂蚁财富风险监测界面。在首次在蚂蚁财富理财时，金融机构都会强制要求用户做一次风险测评，这时候席克定律就不适用了，因为每道题都需要仔细的阅读和思考才能作答，席克定律不适用于这类需要高度阅读与解答问题的工作。

但是设计师还是有办法让风险测评看上去更友好，设计师将每道试题拆分为一个界面，这样就会让用户在一个页面上的目标更加专注、选择更少。头部的进度条让用户时刻了解自己所处的位置。

三. 雷斯托夫效应

某个元素越是违反常理，就越引人瞩目，受到更多的关注。如果想突出某个重要内容，就要使他特殊化。通过色彩、尺寸、留白等设计手段。又称隔离效应，以及新奇效应,应用在移动设备上。

1. 3-4月份的拉勾app首页的底部导航，中间的【全民升职记】，使用了与整体icon完全不相同的风格。所以用户记住这样独特、有特色的iocn的可能性才会大增。

2. 淘宝app大促版与平日版对比图

为什么大促的时候，每个电商app都会选择重新设计首页，让首页与以往不同呢？以淘宝app为例，首页增加了大促入口，入口icon都换成了节日icon

四. 费茨定律

一.

按钮等可点击区域在合理的范围之内越大越容易点击，

反之，可点击区域越小，越不容易操作，将按钮放置在离开始点较近的地方，相关按钮之间距离近点更易于点击。

根据研究表明，人们在使用手机的时候，75%的交互操作都是由拇指驱动的，而拇指悬停的位置恰恰就是屏幕下方。pc端设备，就是鼠标右键操作了。

对于一些相关性较强的按钮，可以考虑将他们放在一起，比如：【上一页】和【下一页】，【注册】和【登录】。

二.

屏幕的边和角很适合放置像菜单栏和按钮这样的元素，

因为边角是巨大的目标，它们无限高或无限宽，你不可能用鼠标超过它们。即不管你移动了多远，鼠标最终会停在屏幕的边缘，并定位到按钮或菜单的上面。

继续举chestnut：

比如知乎、Twitter 及Facebook等社交APP的发帖按钮，放置在屏幕的右下角处，这样的设计正是运用了上面的要点，使得用户的操作难度和成本降低，提升了用户体验。

大家再思考下～为什么win系统要将【开始】按钮放在角落？

原因就是屏幕的四角和四边无限大，mac的docker更是将定律发挥的淋漓尽致，当鼠标hover到对应的app icon上的时候，icon还会放大，增加了点击面积。

三.

费茨定律的反向运用

我们来设计个手机的关机界面。那么首先思考这里的设计约束为：

1.此操作不能过于便捷

2.防止误触

3.如有必要需要有防待操作

接下来我们来出设计方案：

1.先尝试加大拇指到目标的距离，那么可以得到甲方案。

2.根据相关按钮放在一起更便于点击，所以我们尝试将【关闭手机】和【取消分开】，并且将【关闭手机】做小，从而得出乙方案。

3.其实，距离是可以创造出来的，触屏的伟大之处就是，它不仅仅有点击操作，还有滑动操作。通过滑动操作也可以创造出距离，如丙方案所示，完成关机操作的总距离=【大拇指移动移动到顶部滑块的距离】【按住滑块滑动到右边的距离】。

这就是为什么很多人觉得iPhone的体验比绝大多数的安卓手机好。

费茨定律的启示：

1.按钮做大点更易于点击

2.将按钮放置在离开始点较近的地方

3.相关按钮之间距离近点更易于点击

4.屏幕的四角和四边是无限可选中位置

5.通过费茨定律的反向使用，可以降低按钮被点击的可能。

五. 格式塔原则

格式塔，意思是“整体、完形”。是设计中非常著名的心理学派，它的核心理论是，人的视觉具有整体化，简化处理图形倾向，人的视觉思维会倾向于自动将其补全，使其变成一个已知的、常见的、完整的整体图形，即“完形”。

本篇来了解它的5个特性，即相似性、邻近性、封闭性、连续性、简单性。

一. 相似性 ( 权重最大）

人的潜意识里会根据形状、大小、颜色、亮度等，将视线内一些相似的元素自动整合成集合或整体。

二. 相近性

单个元素之间的相对距离会影响我们感知它是否以及如何组织在一起。互相靠近的元素看起来属于一组，而那些距离较远的则自动划为组外。这儿这里需要注意的一点是人们对形状、大小、共同运动、方向、颜色的感受权重是不一样的，颜色属性会覆盖其他属性的影响。

相近原则被广泛应用于页面内容的组织，以及分组设计中。对引导用户的视觉流及方便用户对界面的解读有非常重要的作用。对同类内容进行分组，同时留下间距，会给用户的视觉以秩序和合理的休憩。

微信的【发现】，大家会把【扫一扫】和【摇一摇】、【购物】和【游戏】当成一个整体，【看一看】和【搜一搜】这样可以使界面显得更加清晰，同时还能突出重点，这个列表的两头实际上是最突出的，像【朋友圈】和【小程序】。

三. 封闭性

人的眼睛在观看时，大脑并不是在一开始就区分各个单一的组成部分，而是将各个部分组合起来，使之成为一个更易于理解的统一体。

我们一般叫截断式设计。为了让用户感知到还有内容，我们一般会使用截断式设计。

像微信钱包页面，底部因为屏幕大小的关系被截掉了部分内容，但是用户可以通过残留的部分，脑补出下方仍然有个完整的整体。

世界自然基金会的logo，熊猫的头部和背部并没有明显的封闭界限，但是我们依然会把它当成一个完整的熊猫。

四. 连续性

人的视觉具备一种运动的惯性，会追随一个方向的延伸，以便把元素连接在一起成为一个整体。

我们倾向于完整的连接一个图形，而不是观察残缺的线条或形状。

大家觉得图里的是两个圆形呢？还是两个残缺圆和一个两圆相交的重合？，按照格式塔原则，我猜大家看到的应该是上方左边的两个圆形。

五. 简单性

具有对称、规则、平滑的简单图形特征的各部分趋于组成整体。

六. 新乡重夫：放错原则

在过程失误发生之前加以防止，是一种在作业过程中采用自动作用、报警、标识等手段，使作业人员不特别注意也不会失误的方法。在登录时输入框没有内容或邮箱格式不正确时，登录按钮处于禁用的置灰状态，只有两者都满足了才可以正常点击。

像登录某个app时，在没有填写完手机号码和密码前，底部的登陆按钮是置灰不可点击的。只有两项都填写完整底部的登录按钮才会变成可点击状态。

微信发朋友圈动态时，点击返回按钮出现的提示弹窗。

弹出框方式会增加不可逆操作的难度，当用户发一条动态一半的时候，因为误操作或者其他退出状态的时候，使用弹窗是个不错的选择。因为用户这个操作会让之前辛苦编辑的内容删除找不回，想要再发只能从头开始，对用户损失比较大。

其实还有那些很熟悉但又叫不出名字的设计法则，比如80/20法则，形式服从功能，系列位置效应，泰斯勒定律，这些定律贯穿在我们的

UI设计

中，在工作中我们应当把这些定律巧妙运动到设计中，才能设计出用户体验好的作品～

两本书内容不重复，从0基础到进阶

复制这条信息￥3HKt0KjO6nG￥后打开手淘

加QQ群:129291424

领取书中案例PSD源文件

长按关注学UI网微信公众号

随到随学，可上后面所有期的直播课

学UI网老虎帮高级UI课程报名咨询

网站介绍：laohubang.cn

QQ群：236786784

▼

点这儿，详细了解老虎帮。