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