【交互】法则的力量(三):格式塔原则② 主体-背景关系 /相似原则

上一篇综述了格式塔原则的前生今世以及简单介绍了七条原则的含义,本篇开始来逐条分析这些法则该如何运用,并举例说明。

相关内容传送门:
法则的力量(一):启发式评估 or 尼尔森法则
法则的力量(二):格式塔原则1 综述


【 前情回顾 】:

格式塔原则

格式塔原则来源于格式塔心理学。

格式塔最初试图解释人类视觉工作原理。研究者观察了许多重要的视觉现象并对它们进行了分析整理。其中最基础的发现是人类视觉是整体的,即:我们的视觉系统自动对视觉输入构建结构,并在神经系统层面上感知形状、图形和物体,而不是只看到互不相连的边、线和区域。

格式塔认为人类视觉具有完形趋向,趋向于简洁、良好、完善。完形是格式塔一条总法则,其他法则是这一总法则的不同表现形式。

格式塔的核心理论:整体决定部分的性质,部分依从于整体
格式塔基本原则:人们会用一种更为简单的方式,来感知和解释含糊不清或复杂的图像

1、Law of Figure-Ground Relationship 主体背景关系
2、Law of Similarity 相似法则
3、Law of Prägnanz 简单法则
4、Law of Good Continuation 连续法则
5、Law of Closure 闭合法则
6、Law of Common Fate 共同命运法则
7、Law of Proximity 接近法则

格式塔虽然有多条法则,但这些法则几乎都是彼此的变体,并且在多方面密切相关。



本文内容提要:格式塔原则深度探讨 、 主体背景关系 /相似法则

一、主体-背景关系

把这条原则放在第一条,因为它可能是最重要的。

主体-背景关系主导“第一印象”。
当我们看到一个物象时,确定主体与背景的关系,是大脑首先要做的事情,就像拍照时先对焦。当一个物象出现在视线中,大脑需要一个基础来进行理解,需要确认哪些是主体(需要立即关注或小心),哪些是背景(当下并不重要,但提供了一个“理解”环境)。这个过程对人类至关重要,试想你走路的时候,是要稳当的向前走,还是想各种磕磕碰碰撞树撞车?
主体-背景关系能够帮助我们感知周围的事物,通过理解每个对象之间的关系来组织所看到的东西。有个很有趣的解释是:它使我们能够确定该看到的内容,以及可以安全忽略的内容

在大多数情况下,我们能毫不费力的立即做到这一点,毕竟多数时间我们都处在熟悉的环境中,见到的也是熟悉的事物。但是,当我们看到陌生的事物,尤其是一个页面,基于主体-背景关系的视线引导将决定我们的体验是否成功,这种成功是设计师的使命。

最近风很大的应用,例如模态设计。下面这个页面,虽然有很多文字、图片等信息,但是我们依然能够快速捕捉到关键内容。浅灰色的半透明层很好的衬托出了关键信息。

www.best10ecommercesitebuilders.com 首页



表单设计中,也很常见主体-背景的应用。下面两个表单在构成上是一样的,但很明显左边的表单不仅更美观,识别性也更高;右边的线框设计对于信息传递产生了干扰。



以及最近风超大的卡片式设计,信息传递效率更高、界面更美观。从下面左右两张图对比中可以明显感知,左边更简洁、清晰,并且通过阴影“拉深背景”,抬高内容层级,突出重要信息,能够非常有目的性的抓住用户注意力;右边的线框可能会被误认为是内容,结构与内容竞争,就会分散注意力。

左边为卡片式设计


在页面布局中,建立清晰的主体与背景关系固然重要,但是清晰规整的轮廓也不是绝对正确,有时候适当打破这种规整,能够增加直觉冲击力以及趣味性。

图片来源于Dribbble Valtteri Lehtinen

以上这些举例,也并不是单纯的只涉及主体-背景关系法则,理所当然会涉及到其他几条法则。并且也不是绝对正确,采用什么样的设计,需要根据具体情况来进行调整,比如卡片式设计虽然美观,但难免要牺牲物理屏幕空间,如果一个页面的设计需求是展示更多的信息,是否是使用卡片式设计就需要慎重考虑了。


二、相似法则

相似法则很容易理解,即相似的事物比不相似的事物更相关。也就是长得像的,更容易被认为是一伙的。

这条法则虽然一句话就可以解释清楚,但是作为一个设计师你要知道,元素相似的模式有很多很多种,并且不同的相似模式所产生的效果也不尽相同。只有熟知元素的相似模式,才能够在具体场景中灵活运用。

相似是一种很强大的交流机制,因为它的对应面是对比,而“对比”是事物产生“意义”的关键机制之一。相似对比阐述的都是一种关系状态,我们的世界正是由各种复杂“关系”构成。
听起来好像很哲学的亚子,总之,很重要就对了。

上上上一段中说元素的相似模式有很多种,具体一点指的就是元素的属性:形状、大小、纹理、颜色、排列、方向等等。利用这些模式可以将元素“相似化”,并因此产生相互联系。

接下来让我们看一下,“相似”是如何引导视觉的。

如果问你下图中元素该如何分组,几乎所有人的第一反应是根据形状来分组,正方形与正方形之间、圆形与圆形之间的相关度更高。 但是这张图中还隐藏了距离属性、大小属性,然而当距离属性和大小属性遇到形状属性的时候,很容易的就被忽略了。也就是说,在众多不同的属性当中,形状属性占据了视觉认知的主通道,产生了最强交流。

图A



那么,让我们来改变一下,看看我们的视觉会被如何引导:

图B

摸着良心说,图B中的元素,你是如何进行分组的?
没错,你开始根据大小来分组了,此时大小属性冲向赛道第一名。



让我们来继续看,图C你将如何分组?

图C

没错了,是颜色。
不接受反驳。这里是快问快答时间,要的就是你的第一反应。
另:如果你不是地球人,第一反应就根据形状来分组,那么你就是个例,然后呢,个例没有统计意义。告辞吧。

快问快答时间结束。
所以,你应该很清楚的感受到了“相似”的魅力。并且强烈的感受到了“颜色”属性的强大。
没错,正常情况下,颜色被认为是建议关系的最强方法。当我们的大脑努力理解周围环境的时候,颜色是首先被感知的因素。

图案和混乱会对大小和形状产生一定的障眼法,但是这种影响程度是很小的,当颜色出山的时候,其强有力渗透性会瞬间穿越其他因素,占据你的大脑。基于这个事实,自然界中颜色是最经常被用来传递危险信号的工具。
比如红绿灯,就是用颜色啊,而不是用形状,试想圆灯、方灯、三角灯,他们传递信号的强度肯定没有颜色来的更有效。

这还说明,为什么我们在设计中会花大量的时间和精力来进行色彩搭配。对于色彩传播的清晰认识,对人类和其他生物来说都是重要的生存之道。

额...一不小心好像又扯远了.....
让我们回到主题,探讨如何利用相似原理来提高设计的有效性。


链接

说到相似法则的运用,链接(超链接)必须拥有第一姓名。
网页中最少不了的就是链接,而且最常用的搜索引擎搜出来的就是一堆又一堆的超链接 ↓

为什么不用度娘?因为怕死....

链接是网页最基本的交互行为,不管处于何种场景,链接都必须与其他元素区分开,并且在某种程度上“高亮显示。另一方面,由于链接具有相同的功能性,通常他们又会彼此相似。

链接最常用的是蓝色,尤其是在大篇幅文本中,会形成很鲜明的对比。根据相似原理,我们能够很快识别出哪些是超链接文本。

当然,并不是所有的链接都是同一个样式,像上图Google页面,网址部分就使用绿色链接、关键词加粗显示、标题字号更大....最重要的是,尽管链接的颜色和样式有很多变化,我们依然能够快速的感知类别信息。

千万不要死板,要学会利用各种因素来完成特定的目的。而且要学会举一反三。


页面内容

当我们设计一个页面的时候,最重要的工作之一就是呈现内容关系, 即各种组件之间是如何关联的。
利用相似原理,来加强页面层级结构,是一种更为隐蔽的方式,能够在用户察觉不到的情况下达成设计目的,并非必须使用物理结构来进行绝对的结构划分。
很多时候,暗示都比明示更友好。

对于这条原则的运用,所有界面,有一个算一个,都逃不过 ↓

通过对元素进行相似化设计(icon样式 /字体颜色 /模块大小...),能够清晰的呈现类别信息。
一部分元素的相似,会增强与周围元素的对比,而这种对比会进一步增强相似元素的相关性。
由于这种相似性和对比性,无需刻意的将元素与周围环境“隔离”,就能够很好的呈现信息类别。

经过这么些个的操作之后,页面层级结构自然而然的就会现。



还有现在很多网页中,尤其是设计网站,如下图,会使用相同的形状、大小、阴影等属性来显示其相关性,并且当鼠标放置到这些长方形上面的时候,会表现出一致的交互行为,来增强其相关性↓

鼠标点击时会显示一个透明层,并出现配色信息

看了这么多解释和举例,相信你已经对相似原则有了很好的理解,并且能够从这些简单的道理中,演化出属于自己的设计方法。

以上,就是本期全部内容💗
最后,再来说点压轴的重量级忠告 ↓


简单的复杂性

像所有的基本思想或基本原则一样,其实原理都很简单,但是这些简单的原理却蕴含着不可思议的深度。
越是表面简单的事物,越具有迷惑性,我们常常被他们简单的外表所欺骗,而忽略了其内部复杂性。如果我们仅仅从其外表出发,进行简单的推断,就会进入到陈旧机制的死循环,而无法进行有效的创新。

正所谓,学我者生,像我者死。

如果你关注过我的其他文章就会发现,我会花费大量的篇幅来讲解基础知识、基本原理,也一直在强调基础的重要性,但是千万不要误认为基本原理就是设计必须保持的原则,不是的,基本原理不是法律条文,不需要死守。需要灵活运用。

为了防止这种误解,我也一直在强调设计的“灵活性”、以及具体问题具体分析。

基础的目的是为了让你走的更高,而不是画地为牢。如果你不深层次的理解这些简单的原则,对基础知识没有敏锐的了解,就无法支撑自己走的更高、更远。

当你深度理解了这些原则,这些原则就会变成你的潜意识,暗中帮助你更好的完成设计。

设计师更应该是生活观察家,不仅是在工作中,日常生活中更是饱含了无数的设计法则,等待你慧眼识珠。

你所有的努力,都将化作你前进的动力。

好好学习,天天向上!

下期预告:剩余格式塔原则深度探讨


Reference:

  • Andy Rutledge Gestalt
  • Universal Principles of Design, by William Lidwell, Kristina Holden, and Jill Butle
  • Wikipedia:Gestalt

合法原创内容,禁止以任何形式私自盗用!

图片也不行!图片也是我画的!

盗文盗图者秃头!


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

推荐阅读更多精彩内容