知觉组织原则，是设计中的入门原则，能用到游刃有余，能至少用起来舒服。
知觉组织原则在格式塔心理学（Gestalt Psychology)中得以深入研究。代表心理学家有考夫卡、科勒、韦特海默。他们主张，心理现象只有被视为有组织有结构的整体时，才能被理解；整体不等于局部之和。
关键词：整体 结构 形式
1. 主体/背景：
人们具有区分主体和背景的倾向性。如下图，我们将下图知觉为什么，取决于我们认为哪部分是主体，哪部分是背景。这样的选择性，收到主观倾向性和经验的影响。
两可图是美的，有不可忽视的吸引力，让人忍不住多看两眼，再多看两眼。
图1：人脸-花瓶两可图
图2：天使-恶魔两可图
图3：玫瑰-恋人两可图
【应用】
①很常规的确认弹窗
利用蒙层区分主体和背景。
图4：确认弹窗-jq22
②更好用的TAB切换标签
用颜色区分处于“主体”和“背景”的标签，能让用户一眼明白自己处在哪个功能/分类下，无需根据线条走向去推理出当下的状态。
图5：用底色区分主体和背景-jq22
当然，还有其他方式去标记当前使用中的标签:
图6：标记当前状态-拼多多商家后台
2. 接近性
因为更接近，所以我们将它们知觉成一个整体。比如，下面的句号组成了多少个整体？你一定会回答是3个整体，而非12个整体。
。。。。 。 。 。 。 。 。 。 。
在功能的设计中，功能点应该跟随相关展示、说明，需做到相融与突出。
【应用】
①(反例)“更多”按钮让人疑惑
今年618当当大促，随便逛逛大促活动页:翻到下图所示位置时，我想看看更多文学类书籍，该怎么办？1. 点击更多按钮试试，万一是文学类书籍呢？2. 翻到最前端或者最后，看看更多按钮的安排规律？3. 深入思考，一般看到最后才会想看看更多，所以更多按钮应该是被安排在每个模块的最后？——这些都浪费着我的时间，让用户思考的设计，不是好设计。
图7：“更多”按钮归上归下？-当当618大促
APP端提供了一个解决办法
相似的特征，让人们自动将他们知觉到一起。
图8：用色块将它们联系在一起
还有一个更简单的方式，我保证用户会明白“更多”按钮属于谁：让“更多”按钮离上面更近，离下面更远。
②（反例）有点游离的check box
实际上，check box于周字的间距是10 px，与日字的间距是15px，它们之间是有区分的。但是这5px不足以让用户一眼知道check box的归属。如果我们这里展示的不是一周7个选项，而是月份有12个选项，用户在选择过程中还是会对自己的选择产生疑惑，目光不得不回到最开始，去确认自己的操作。
图9：有点游离的check box-outlook
3. 相似性
因为更相似，所以我们会自动将它们知觉成 1 个整体。就像创造101，公演的每支队伍会穿上风格一致的服装，我们能在最后pick时一眼认出她们所属不同的队伍。
设计中，如果没有利用其他方式引导用户，就会造成让用户迷惑的车祸现场。
图10：宣仪组公演-创造101
【应用】
①（反例）被淹没的层级
outlook附件-共享首选项设置内容有三个层级：
第一层：共享首选项
第二层：对于从我的计算机中选择的文件&对于我从OneDrive中选择的文件
第三层：第三层下的三个radio button
——整个设计中第二层的【对于我从OneDrive中选择的文件】淹没在第四层选项中。一方面层级之间的间距没有差异；另一方面画面中文字较多，我们很容易将问题知觉为一个整体——因此第二层的第二个选项就被淹没了。
将radio button向右缩进，让它们的相似特征更明显，是个可行的解决方案。
图11：被淹没的层级-outlook
4. 连续性
即便线条被截断，我们也会将它们知觉为连续的。如下图的蛇，我们会觉得它是一条可能被一页白纸挡住的完整的蛇。
图12：可能被白纸挡住的蛇
【应用】
①不必担心用户找不到路线
你能找到图中在建的14号线的线路图吗？即使路线是用不连续的线段来表示的，我们仍然能够将它们知觉为连续的一条路线。当然这里面也有相似性的功劳。
图13：虚线的在建线路-百度地图
5. 封闭性
当图形是一个残缺图形，但主体有一种使其闭合的倾向，即主体能自行填补缺口而把其知觉为一个整体。
图14
【应用】
①logo图案设计
图15：世界自然基金会会标
图16：晨光文具品牌logo
【小结】
5条常用的知觉组织原则：
①主体/背景；②接近性；③相似性；④连续性；⑤封闭性
大家更喜欢正例还是反例呢？欢迎留言~
网友评论