交互七大定律之格式塔原理

先欣赏一张雅虎ued绘制的关于“格式塔"的Q版小漫画,初步了解下格式塔原理:

图片发自简书App

一、什么是格式塔原理 (Gestalt)

格式塔心理学诞生于1912年,是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的:我们的视觉系统自动对视觉输入构建结构,并在神经系统层面上感知形状、图形和物体,而不是只看到互不相连的边、线和区域。“形状”和“图形”在德语中是Gestalt,因此这些理论也称做视觉感知的格式塔原理。

二、最重要的格式塔原理

接近性原理;相似性原理;连续性原理;封闭性原理;对称性原理;主体/背景原理;共同命运原理。

1、接近性原理(注:强调的是位置)

接近性原理说的是物体之间的相对距离会影响我们感知它是否以及如何组织在一起。互相靠近(相对于其它物体)的物体看起来属于一组,而那些距离较远的则自动划为组外。

注:应用接近性原理可以达到减少用户界面上视觉凌乱感和代码数量。

图片发自简书App

接近性原理

如上图所示,左图中的圆相互之间在水平方向比垂直距离近,那么我们看到了四排圆点,右侧则看成四列。

接近性原理案例

图片发自简书App

案例:不同财经类网站的索引模块

上两图截自不同财经类网站的索引模块,第一幅图中虽然以红色重点标注分类字段,但人们视觉习惯性还是会以列为分组,与实际所展现出的以行为组的排列相斥,用户阅读时引起不必要的视错觉。同样的内容,那么图2的排列方式做到了视觉与内容分组统一,作为用户来讲,查找的内容时是否更直观明了?

2、相似性原理(注:强调的是内容)

如果其它因素相同,那么相似的物体看起来归属于一组。

图片发自简书App

相似性原理

图中每个圆点纵横距离相同,但我们习惯性把外形相同的同心圆看成一组

相似性原理案例

图片发自简书App

每个模块外形保持一致,但第一个在颜色上区别于其它,即能保持版面整齐又能使用户直观感受到灰色内容与绿色丙容展示的是不同功能。


图片发自简书App
外型一样,间距一样,第一个区域的内容明显区别其它,那么自然在视觉上我们把它单独分成一组,其它几个则分成一组。在做活动页排版时是否可以依此规则摆放?还用抓破头皮想每个模块要突出要分类这些问题吗?

图片发自简书App

同样的用户注册页面,是纯色引导一通到底还是给当前执行区域特殊标注?显然是后者,人们的视觉会自动把相同填充色的归类,而那个特殊的区块会从中剥离出来。


图片发自简书App

由于对齐方式的不同,视觉上会把左侧字解析成一列,右则文本框解析成一列,显然用户使用时容易出现视错觉。

图片发自简书App

观察上图Tumblr是如何应用相似性原则的。如图所示,不同图标代表了发布博客的不同方式。相似性体现在哪儿呢?

1)、每个图标下都有文字说明。2)、图标的大小,文字说明的字体以及大小都是相同的。3)、每个图标都被均匀的分布在了空间内。

从发布博客的过程中我们了解到什么?

1)、作为用户,我们知道这些图标都可以发布博客。2)、我们也清楚的知道每个图标代表的不同意义,能满足我们不同的需要。

3、连续性原理

视觉倾向于感知连续的形式而不是离散的碎片

图片发自简书App

我们看到的左图是蓝橙两条相交线而非四条线段与一个圆点,你看到的右图是一些零散的蓝色线条还是IBM三个字母?当然是三个字母,你的视觉有意去组织离散碎片形成整体。

图片发自简书App

看完这四幅图你什么感觉?这个设计师图没摆对位置,以至于用户看不全内容?非也!这样的构图不但不影响视觉效果反倒增加页面的扩展性,视觉有意组织离散元素假想整体的能力不容小觑。

4、封闭性原理

视觉系统自动尝试将敞开的图形关闭起来,从而将其感知为完整的物体而不是分散的碎片。

图片发自简书App
注:简单理解,当图形是一个残缺图形,但主体有一种使其闭合的倾向,即主体能自行填补缺口而把其知觉为一个整体。

我们的视觉系统强烈倾向于看到物体,以至于它能将一个空白区解析成一个物体,所以我们看到上图所呈现的是一个圆而非多条线段。

图片发自简书App

工作中我们常用同样的形状叠加来展示物品达到充实画面,场景拟实效果。

图片发自简书App

最著名的应用便是苹果公司的logo,咬掉的缺口唤起人们的好奇、疑问,给人巨大想象空间。

5、对称性原理

我们倾向于分解复杂的场景来降低复杂度。

图片发自简书App
我们习惯把上图解析成两个简单对称形状的组合,把右侧二维几何图解析成三维立体面。

6、主体/背景原理

我们的大脑将视觉区域分为主体和背景。主体包括一个场景中占据我们主要注意力的所有元素,其余则是背景。

图片发自简书App

当物体重叠时我们习惯把小的那个看成是背景之上的主体。

图片发自简书App

在页面设计中常用在主要显示内容“之后”放置印象诱导的背景,达到传递信息暗示主题作用。遇到一个需求内容非常多还要氛围的,那么内容常规安排,在背景上做文章也是不错的处理手法。

图片发自简书App
也经常用来在其他内容之上弹出信息,作为用户注意力焦点的内容 ,新的信息短暂地作为新的主体,相对于在新信息替换,弹出能够帮助用户了解他们在相互所处的环境。

7、共同命运

与接近性、相似永生原理相关,都影响我们感知的物体是否成组。指出一起运动的物体被感知为属于一组或者是彼此相关的。

图片发自简书App

同样间距大小颜色的图形,那么视觉上会把一起动的图形分为一组。

图片发自简书App

运动的图例无法用静态图表示,只提示一点在工作中做同类分组传达信息时,给它一致的活动规律展现形式。比如同样功能按钮HOVER效果一样,不至于让用户分不清同类选项。文件夹拖动时同时选中的文件夹出现的反白背景及运动轨迹是共同命运原理最直观的解释。

8、综合

在现实世界的视觉场景中,各种格式塔原理并不是孤立的,而是共同起作用,在工作中用每一条原理来考量各个设计元素之间的关系是否符合设计初衷。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容