形状知觉中的分组

    昨天看《心理学》恰好看到知觉这一章中的视觉形状知觉中的“分组”一节。这一节介绍的知识对我们程序界面设计颇有启发作用。它还为我以前总结的一些界面设计的经验提供了理论依据。

    形状知觉的第一步是分离背景,把我们关心的图形从背景中分离出来。之后就是把提取出来的那些图形分类组合,加工成有意义的图像。大脑在为背景中分离出来的那些图形分组的时候,会采用以下一些规则:

    接近性:大脑把距离近的物体知觉为一组。因此我们看到上面这幅图的时候,自然的感觉是三组双竖线,而不是六根竖线。应用于界面设计,比如我们的界面上有六个按钮,三个负责文件操作:打开、保存、关闭;另外三个负责文件编辑:插入、删除、修改。为了方便用户找到所需的按钮,我们需要让用户感觉到这六个按钮分属两组,他只要在相应的组里查找所需按钮即可。最简单的方法:打开、保存、关闭三按钮之间间隔6个像素,而间隔12个像素之外摆放插入按钮,插入、删除、修改之间间隔也是6个像素。这样,用户自然会把他们知觉为两组。

    相似性:大脑把相似的图形知觉为一组。因此,人脑会把上图分为三列,而不是三排。应用于界面设计,比如我们需要让用户把一篇文章中所有的名词归为一组,我们就可以赋予所有这些名词某一种颜色或字体,用户自然一眼就会把它们都找出来。
    以上这两点,在《界面元素的关联》一文里都已提及。

  

    连续性:大脑对图形分组,偏好平滑连续。所以左上图看上去是一根直线和一根曲线,而不是五个半圆。
    连通性:当图形相同,并被连接起来的时候,大脑会把他们分为一组。如右上图。

    封闭性:看上面那幅图,你会明显感觉到有一个正立的白色三角形,虽然它并不存在。这是因为人脑会试图补全缺失的图形。针对上图,我们会设想图中的圆形和倒三角都是完整的,它们的缺口是被一个正立的三角遮蔽而形成的。应用于界面设计,为了避免错觉,我们可以把一组相关的不同类型的控件用一个封闭的图形,如边框等圈起来。

《生活随笔》目录

Advertisements

7 thoughts on “形状知觉中的分组

  1. Pingback引用通告: 生活随笔 « 凡人琐忆

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s