【交互】法则的力量(四):格式塔原则③ 接近 /简单 /连续 / 共同命运 /闭合法则

尊敬的用户,您正在阅读我的文章,如果觉得还不错,就商点银子吧!实在不行,点赞也是极好的,如果您愿意将此文分享给您的好友,我将不胜感激!手动笔芯!

是的,你绝对看懂了上面这一段话,你觉得这一段文字有意义,是因为我正在采用三个重要的格式塔原则——这段文字的结构取决于格式塔的邻近法则、简单法则、连续法则,如果没有这三个因素,我也没法隔着屏幕还能清楚地传达我的想法。

所以,如果没有这三个因素,将会发生什么呢?
什么?你说不知道? 这好办啊,我演示给你看 ↓

怎么样,现在体验如何?相信你根本就不想看下去,也不想知道我在说什么了,虽然这些字跟文章开头的那段字是一样的,甚至标点符号都一样!

当缺少了接近性连续性,所谓的文章、句子,只会沦为单个的字或者说毫无意义的乱码。

如果缺少了简单性呢?
其实90后中老年人最熟悉了 ↓

如果简单法则在这里理解起来不够直白,可以理解成统一性、整体性

是的,祭出古老的火星文! 不用说也知道,火星文比一般段落更复杂,因为文字不统一、掺杂了各种奇怪符号、字母等乱七八糟的东西,信息传递效率自然是不高的。
但是!虽然效率方面占了下风,却产生了一定的趣味性。所以!还是一直强调的观点,一定要灵活运用,法则不是绝对正确的,要具体情况具体分析!

经过这两个简单的例子,现在你应该很切实的感受到了接近法则、简单法则、连续法则是多么的常见。我们生活中大多数情况都会采用并且依赖这三个法则。

几乎每个人都会在直觉上使用这三个法则理解周围事物,但是作为设计师,你应该比一般人有更深层次的了解。


接近法则

这大概是最简单的法则了,即 彼此接近的事物比 彼此隔开的事物更相关。
该法则不用依靠任何额外结构就能控制相关性,因此它是影响我们认知和理解的首要原则之一。
我们所有人都能直观的理解——表明相关性的最简单方式是控制接近度。但是!却无法直观的感受接近法则的强大。所以,为什么设计师们要比其他人更进一步的了解?当然是为了利用法则,也就是利用这种“强大”,操纵其他人的感官,达成设计目的!

下面这张图,很好的展示了如何利用接近度操控相关性:



让我们混入一些其他格式塔法则——相似法则↓

好像没什么影响,还是接近法则更胜一筹,要不然我们为何不将同种颜色的圆关联起来?
还记得上一篇中颜色的信号之强大么?但是当遇到接近法则,还是输了!

其实,形成我们感知的各种机制几乎总是在相互竞争。学习研究这些法则,熟知其相对优势,当运用到具体场景时,才能够高效完成设计目的。

然而,天外有天,接近法则也不是宇宙最强,还有“亲近感”更强的法则 ↓


简单法则

由于大脑的节能性(没错就是懒),人类倾向于将模糊或复杂的图像解释为简单完整的图像。

通过统一的视觉属性连接的元素,被认为比未连接的元素更相关。即:越是统一的物象、或者连结性越高的物象,会使我们感知到“”而不是“单个”,块的整体性自然更高,理解更简单,因此最终形成的感知相关性也就越强。如下图 ↓

(果然懒才是王道啊 Biu~)



这条法则最常见的应用场景,是选项卡式导航栏,统一的“颜色块”能够让用户快速感知分类信息 ↓



会话气泡也经常用这一招 ↓

哪边效果更好?不用我说了吧?

还有最近流行的卡片式设计,也可以用简单法则来解释。就不多举例了,大家多多观察。

生活中的例子就更多了,比如我们用文件夹整理文件、用相册整理照片、买菜的时候用袋子把菜装在一起等等等等。


连续法则

文章最开始的时候,举了一个我们如何阅读一段文字的例子,你之所以能够get到我传达的意思,除了接近性、简单性,还有一条更重要的因素,就是连续性

连续法则,又被称为延续法则,即:在直线或曲线上的元素,比不在直线或曲线上的元素更相关。

上图会话气泡左图使用了一些连接图形,使视觉上更相关也涉及到了连续法则。

事实上,书面语言均离不开连续法则,当文字排列在一条线上(或一系列线上、直线或曲线),更有助于我们理解它们彼此之间的关系。文字的线性排列是一种强大的机制,虽然我们会利用标点符号隔开某一句话,但是丝毫不影响我们对一整段文字的理解。(标点符号的使用又会涉及到接近法则了,所以,很多法则都是相互关联的)

良好的连续性能够有效的表明元素相关性,对于我们理解各种视觉结构的含义尤其重要。

同其他法则一样,使用场景非常广泛,例如数据可视化:

图片来自 www.piktochart.com

所有的图表,以及其文字标示,均具有良好的连续性。

版式设计中的网格、界面设计中的栅格系统,也逃不过连续法则。利用网格进行布局排列是一种简单有效的方式,说到底也是一种“线性排列”:

线性排列可以是横向的,也可以是垂直的,均能够产生良好的相关性

上图中,即使内容在视觉上并不是均匀显示的,但分类信息也能够通过良好的连续性清晰的展示出来。


共同命运

人类倾向于认为向同一方向运动的元素静止向不同方向运动的元素更相关。

如果你站在天桥上看车流,就能非常深刻的体会到共同命运法则。

运动在线下设计中会受到一定的限制,但是对于线上设计,尤其是界面设计,可以说是锦上添花。近年来硬件设备性能不断提升,以及网络信号增强、资费下降,用户越来越喜欢“费流量”的设计,动效设计之风越吹越大,这条法则的力量也开始凸显。

在动效设计这个词被普遍关注之前,有关共同命运法则的运用也并不少见,比如:

Tooltips

当我们的鼠标指针移动到相应图标上,随即出现的工具提醒,两者之间强关联性很容易被感知。


图片来自MD官网

界面中元素运动一致的时候,我们自然的就会觉得他们的相关性更高。

当然这个界面中还有其他格式塔原则存在,但是目前感受最深的一定是共同命运法则。

值得一提的是,字面意义上的“运动”,并非共同命运法则的终极目标。
如果要解释这一层含义,必须明确一点,那就是:所有的“文字内容”“物理内容”都具有概念上的等效性。概念上的运动视觉上的运动是一种相同行为,并且概念运动受视觉运动的规则支配。当某一组概念朝着同一个目标或结论“移动”,通常也会被认为彼此相关。

听起来好像很哲学的样子,其实很简单。
举个例子:当一个团队有了一个共同目标,并且每个成员都在朝这个目标努力的时候,这个团队就会表现出强大的凝聚力。团队成员的“努力”,就是概念上的一种运动方式,这里的“凝聚力”即相关性的概念表现。

这里的“概念运动”的观点,对于信息结构设计具有非常重要的指导意义。
比如下图中,个人信息模块的所有组成部分,表达的都是个人信息,头像、名字、性别等都具有某种“相同属性”,这种“相同属性”即都是在表达个人信息,微信号、手机号等就不被包含在个人信息模块, 但同时个人信息账号信息也具有“相同属性”,因此又都属于我的信息



可解释的再简单些,其实共同命运法则,所表达的是某种“一致性”,不管是思想上的一致性还是物理运动上的一致性,都能够表现出相关性。拥有同一种思想倾向的人群、朝一个方向运动的车辆,抽象意义上都具有“一致性”,即共同命运。
我们经常会用80后、90后、00后来划分群体,试想,现实中他们不也会表现的更相关吗?

作为设计师,必须要有举一反三的能力,要懂得把各种原理反复推演。概念构造也好、物理构造也好,或者几何构造等等等,所有的原理、道理都会有一个“基础”,当你熟悉并精通这些“基础”之后,就要不断练习如何利用其特性,反过来控制这些“基础”,达成你的设计目的。

努力练习这种“推演力”,把你所学到的任何原理都进行“等效化”,并运用到设计中,那么你必定会在设计上有所成就!正所谓熟能生巧,说的也是这么个道理。

即使你不是设计师,熟练运用法则的力量,不管是什么职业都能够帮你更上一层楼。


闭合法则

这是格式塔最后一条法则,这条法则实际上是在得出结论

我们的大脑非常擅长“断章取义”,即使某事物只有部分信息,也能够通过想象使其“完整化”。
实际上,这种断章取义得到的答案,往往都是错误的。也就是说,我们自己脑补出来的东西,很大程度上,都不可信。
我们经常说“判断失误”,大概就是闭合法则的一个Bug? 有时候一个小小的判断失误造成的后果是不堪设想的——比如战场,一小点的判断失误,就有可能会让成千上万的将士客死他乡。
当然,事物皆有利弊,我们常用的还是其巧妙和灵活性。说的惊险刺激一点,是为了....忽悠你继续看下去。

闭合法则,即:当看到复杂排列的多个元素时,大脑倾向于首先接受一个简单可识别的模式,复杂模式不会是大脑的第一选择;"闭合“也发生在对象不完整或部分不封闭的时候,就是前面的说过的”脑补“功能。

举栗子时间到:
当一个画面呈现的内容是残缺的部分信息时,大脑会根据经验和理解进行补全

如果我问你上图写了哪些数字?你一定能够说出来是1234567



之前有个很火的小测试,可以说就是利用的闭合法则 ↓

如何让闭合原理起作用,需要把握一个“度”。如果缺失的部分是很容易补全的,闭合就会发生;当缺失的太多,或缺失的形式很难理解、需要努力思考,闭合发生的可能就很小。就像上面的1234567很容易就会发生闭合,但是下面的小测试,就会有不同答案发生。因此,在设计中,为了让闭合有效发生,就要选择合理的设计方案,否则,会给用户造成困扰。
不要让用户对所传达的信息产生多种理解,除非刻意为之。

在现实中,无论如何我们都无法掌握全部情况,因此我们做出的每一个决定其实都是在封闭法则的支配下完成的。细思极恐,我们对于封闭法则的依赖,居然如此深重。当封闭法则被滥用——故意误导消费者的广告词、中奖诈骗信息....会产生很多可怕的后果。

如果你还没有意识到封闭法则的力量,请看一个视频,开头可能会有点无聊,但是请务必坚持看完:World Science Festival 2009: Bobby McFerrin Demonstrates the Power of the Pentatonic Scale

怎么样?感受如何?神奇的很对不对?简单的几个音符,就能控制全场观众。



闭合法则,还能让图像“动起来”:

图片来源于网络,侵删

最后,再来玩一组脑补小游戏:

  • 1、3、5、___、9;
  • 有个人来自山东,所以他会开__________;
  • 大河向东流啊,天的上星星参斗北啊;

怎么样?闭合法则的力量,远超你的想象吧?

与其他格式塔法则一样,掌握基本概念,能够让你对事物的发生机制有一个浅薄的了解,但是身为设计师,要有具备专业素养,这就要求你必须更加深入的去研究、学习,全面的理解这些法则的作用——如何让法则有效的产生作用,或者不产生作用。

闭合法则很独特,它的工作原理能够向我们展示一些不存在的东西,涉及大脑的经验和想象,闭合法则能够创造出一种“幻想”,并使我们相信这是真的。很大程度上,我们的观点、假设、理解...都是使用闭合法则构建的。

有一个很有趣的词,不知道你可听说过,叫做——想象共同体
如果我问你公司是什么东西?你要怎么来跟我解释呢?是法人代表?是董事长?是这个办公楼?是全体工作人员?.....都不是,又都是。我们的大脑已经认定了“公司”这个词的存在,只要说出来,就会自动补全所有信息,但是说到底,公司并不是某个实体,只是我们想象出来的一个组织,是一个想象共同体。这里就不再多说了,有兴趣的可以去看看《人类简史》,可能会颠覆你对世界的认知。

封闭法则,END



这些法则其实都来自我们凭知觉理解事物的习惯,因此即使你不知道这些法则,这些法则也会自动被带入到设计工作中。为了实现元素之间的区分和关联,无论你采取了什么样的设计手法,格式塔原则都会作为一种基础机制存在。

看了这么多法则的介绍,你肯定早就意识到了一个问题:不同的原理通常可以达到同样的效果,但是每个原理又有其独特性,以及不同优势。作为设计师,应该努力练习如何有效的使用这些法则,如果你能够使用最少的法则实现设计目的,能用一条就不用三条,就能使设计保持“优雅”和“隐身”。奥卡姆剃刀原理所说的“如无必要,勿增实体”不就是这个意思么?

好的设计是优雅的,并且能够在无形中影响受众。有效的应用基础知识,远比苦心钻研一年变三变的风格技巧更重要。尤其是对于交互设计师来说,有效性极为重要。就像一旦学会了砌砖,遇到什么风格的墙都不怕,我可以盖平房,也可以建高楼。

掌握了这些法则,你就拥有了一种强大的力量,当你有了强大的力量,伴随而来的是巨大的责任,我希望这个世界变得更美好,希望我们的祖国变得更美好,希望我们作为设计师,能够对这美好贡献出自己力量,承担起自己应有的责任。你可以利用这些法则欺骗你的用户,带来利益,但你更可以利用这些法则,让你的工作为世界带来美好,让你的工作本身变得专业有内涵,又不失乐趣。

我写出来的这些内容,也只是我自己的理解,是我看了无数前辈的总结、学习经验后的输出,我并不能十分全面的讲解这些法则,我也不想,授之以鱼不如授之以渔,希望你不要局限于任何人所说的任何方法也好、原则也罢....... 借鉴学习自然是必不可少的,但终究是要变成你自己的东西,让所有的知识都变成你自己的工具,帮你更好的完成工作、甚至帮你更好的生活。

我说到的你要知道,我没说到的你也要知道。切记!切记!切记!灵活运用!

最后的最后:一生二,二生三,三生万物。

以上,Over💗


Reference:


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

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

盗文盗图者秃头!

推荐阅读更多精彩内容