最新公告
  • 欢迎您光临欧资源网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 深度解析格式塔7大原则,一起来涨知识吧

    编者介绍:Gestalt,德语“Gestalt”的音译,由德国心理学家Wertheimer、Koffka和Kohler三人创立。它旨在解释某些人类行为是如何产生的,以及我们的人类视觉体验如何与我们的大脑反应相关联。将格式塔应用于设计通常会取得意想不到的好结果。本文作者深入剖析完形的7个原则,让我们一起增长见识。

    前段时间,我受邀给系里新入职的设计师上了一堂设计规则的基础课,因为去年我以聚类的方式整理了一个非常丰富的设计规则列表,如下图:

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    所以今年再次备课的时候,想切入深度,把一套大家都熟悉的设计规则解释得更透彻,让大家体会到学无止境,不止有广知识的吸收范围广,智慧的深度也有待挖掘。

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    简单扫了一遍之前整理的设计规则清单,我立刻把目光投向了《格式塔原则》,这是几乎所有设计师上手必学的基础知识,也是日常生活中使用最广泛的。不过很多同学我只知道它的核心概念,而对它的外延知识了解不多(不信的可以继续看下去~),这很符合我的想法​​​​​​​​深入分析。

    Gestalt 由三位德国心理学家 Wirtheimer、Koffka 和 Kohler 创立。它是德语单词“Gestalt”的音译,意为“形式”、“形状”,在心理学上用来表示任何一种分离的整体。对它的研究起源于视觉感知,并以此为基础构建了现代认知心理学的构建。

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    格式塔心理学指出,人的视觉感知是整体的,整体大于个体的总和。整体不能简单地视为个体的集合,其特征不包含在元素中。

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    元素构成上,上图是一串一模一样的小圆点,整体形成一张笑脸。一连串的点有无数种可能,但任何一个单独的点都不具备笑脸的特征。这是1+1>2带来的整体特性。

    格式塔原理告诉我们,当我们的眼睛和大脑在观察事物并接受图像刺激时,会出现一些特殊的倾向来帮助我们快速识别事物。这些特殊趋势就是我们今天要深入分析的完形七设计原则。让我们一一来看看。

    一、简单原理

    在人眼的认知过程中,大脑倾向于将复杂的对象解析为更简单的对象来理解,从而减轻大脑的认知负荷。这就是简单的原则。

    简单原则是格式塔的核心和基石。当我们看一张图片时,大脑不会将它们拆解成独立的点、线和面,而是会自动组合元素,甚至将缺失的部分补上,从而呈现出来。对于一个相对完整和简单的整体。

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    拆左图的方法有很多种,但是大部分正常的大脑会拆成右图而不是中间图。这是简单原则的体现。在互联网设计中,我们也经常使用简单的原则进行设计,例如:

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    根据一个简单的规则,我们的大脑将其解析为三个独立的、大小相等、近大和远小以及被遮挡的图像,而不是三个不完整的图像,一个大两个小。

    再比如,在设计图标的时候,我们经常会用简单的规则来设计一些前后叠加或组合的视觉效果,让用户可以从整体上感知图标的意义,而忽略了单个视觉元素的意义。

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    以上就是简单规则的基本应用,下面进入我们的扩展知识链接。

    ?Extended Little Cheese:关于简单的规则,我们提到最终目的是减少大脑的负担。所谓的负载有多少种?这些负载之间的关系是什么?我们应该如何减轻大脑的负担?

    答:我们日常提到的负荷可以细分为认知负荷、操作负荷、视觉负荷三种。

    认知负荷是指人脑在思考、记忆或计算时消耗的能量负荷,简单来说就是大脑燃烧的程度;操作负荷是举手、点击和眼球运动等动作消耗的能量负荷。操作复杂性;视觉负荷是指我们浏览一个页面时人眼接收到的信息量,简单来说就是信息复杂度;

    一般来说,认知负荷>操作负荷>视觉负荷。所以我们会把“Don’t make me think”作为设计的真理,并在日常设计中坚持下去。如果认知负荷较低,有时即使是额外的一两步惯性操作负荷也是值得的。

    在操作负荷方面,(如果不会导致认知负荷增加),我们会尽量坚持三步操作法则、菲茨定律等,减少步数和尽可能降低单一操作的难度。视觉负载是所有负载的基石,无论是“少即是多”还是“奥卡姆剃刀”,都告诉我们保持简单是好的设计的必要条件。

    一般情况下,减去视觉负荷后,操作负荷和认知负荷也会降低。

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    苹果和星巴克的标志大家都很熟悉。从它们的发展历程来看,这是扁平化的表现,是视觉负荷降低的典型案例。以更快的速度完成视觉认知,提高信息传递效率。

    格式塔效应是什么意思_质量效应1 推倒塔莉_质量效应2推倒塔莉

    再给一个?:

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    在网页端进行设计时,将手机号、验证码和短信验证码呈现在同一个页面上是一种很常见的设计模式。手机设计出现时,这种设计还在延续,但随着手机设计的发展,逐渐被更主流的分体式设计(三页显示手机号、验证码、短测试)所取代。.

    这种设计不会改变运行负荷。主要是减少认知负荷,实现页面一个核心关注点的设计目标。

    二、接近法则

    我们的大脑倾向于将彼此接近的元素视为一个群体,这就是邻近法则。

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    以左图为例,当元素之间的距离相同时,它们在视觉上会很平衡,不会让人产生接近的联想。

    当元素之间的水平距离变小,垂直距离变大,形成中间图像时,我们的大脑会倾向于将其视为三个水平组。同样,我们也会倾向于将右图视为垂直的三组。这是邻近法则最直观的体现。

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    我们在排版书籍的时候,因为横读和竖读存在版面差异,为了将阅读顺序直观地传达给用户,我们需要加大行距,缩小字距,这样横竖排版才能一目了然,无需通过具体语义。

    在生活中,如果你不注意设计的方法,你可能会开以下笑话。

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    我们来看两个互联网产品的设计案例:

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    我们在布置图文时,对于同一组信息,需要充分利用就近原则,让图文的组关系一目了然,而不是模棱两可。

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    当群组之间的关系明确时,我们还需要充分利用群组内部的就近原则,让群组之间的距离更近,让群组中的信息更加融合,让用户的视野更加聚焦。

    ?Extended Cheese:使用邻近法则时,可以分组多近?他们将分开多远?有没有参考标准?

    答:接近是相对的。在书籍设计中,核心间距原则是:字间距<行间距<段落间距<列间距<页边距。借鉴我们的产品设计,字间距<行间距<组间距<模块间距<页边距的设计标准仍然成立。

    在 Material Design 中,对于网格间距和边距有明确的建议。在设计产品时,设计师可以参考或根据产品内容定义具体的间距规范。以我们的vivo视频为例,设计师将间距规范定义为6的倍数,然后根据元素之间的亲密度确定不同元素之间的间距关系,整体还是符合之前的间距原则。

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    一个圈后,他们能多近成群,又能分开多远?

    答案是:当有明显的大差距作为对比时,小差距之间的元素形成一个群。

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    以上图为例。当有一个大的红色空间时,封面信息和选集信息将成为一个大组。

    在这个组内,因为蓝色的差距很大,选集又变成了一个组。所以信息是否分组,很大程度上取决于整体与外界的距离是否足够大。只要外面的距离够大,里面的距离就会比较近,更像是一群人。

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    在页面中,它会分开多远?一般来说,最大间距margin可以作为参考。当元素间距大于页面边距时,元素之间会有明显的分隔效果,如上图所示。

    质量效应1 推倒塔莉_质量效应2推倒塔莉_格式塔效应是什么意思

    三、相似性原则

    具有相同属性的元素比看起来完全不同的元素更相关。这就是相似性原则。我们的大脑倾向于将相似的元素视为一个整体。

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    以上图为例,在看这三组图像时,我们很自然地在视觉上对它们进行了分组,因为它们具有相同的属性:颜色、大小和形状。

    生活中,有很多产品是按相似度分组的,比如小小乐、围棋,大家经常玩。他们使用颜色和形状的相似性进行配对和分组。

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    图片来自网络

    在互联网产品中,使用相似性原则进行分组的例子很多,例如:

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    在我们浏览器的个人主页中,由于要展示的功能比较多格式塔效应是什么意思,为了方便用户查找,我们会使用两种不同的设计形式来体现常用功能和其他工具格式塔效应是什么意思,方便用户直观的分为两类. 两组,每组中的元素也符合相似性原则。

    ?延伸小奶酪:当“接近原则”和“相似原则”同时出现时,谁将获胜并成为主导群体?

    答:接近原则获胜并占主导地位。

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    以上图为例,左边的三个图标有非常明显的相似之处,但是因为左边的图标信息和右边的文字信息的距离比较小,所以我们扫描的时候,还是会很方便的连接右侧的图标。文本信息被组合在一起。

    四、连续性原则

    我们的视觉倾向于感知连续的形式而不是离散的片段,这就是连续性的原则。

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    以上图为例。对于左图,我们在视觉识别的时候,很可能不会按照中间的三段图案来分解它,而是将其视为一条连续的蛇,但底部却被其他物体挡住了(水)。

    举两个生活中的例子:

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    图片来自网络

    IBM 的标志是连续设计的典型例子。尽管所有的线条都是分开的,但我们的视觉仍然会将其解析为连续的线条,并将它们组合成简单的字母。可口可乐的横幅广告也是如此。虽然它被分成三个完全独立的广告牌,但我们的连续感仍会将它们连接起来,以构建可口可乐典型的曲线标志。

    在互联网产品中,断点字体和图标的设计利用连续性的原则打破常规,让人可以忽略专门设计的断点,将它们连接成线条,而不影响视觉认知。

    格式塔原理的设计原则是什么(格式塔原理和图解)

    图片来自网络

    五、关闭原则

    我们的视觉系统会自动尝试关闭一个开放的图形,将其视为一个完整的对象而不是离散的部分,这就是闭合原理。简而言之,人类的视觉倾向于看到整个物体,即使它们是不完整的。

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    以上图为例,无论圆缺了一块、两块还是三块,都不妨碍我们将其识别为一个封闭的圆。闭包原理在互联网产品设计中也被广泛使用。

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    图片来自网络

    在朋友圈,我们经常可以看到这样的九方拼图。虽然图片有部分缺失,但不影响我们作为简单图片的识别。

    另一个?:

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    在vivo浏览器中,当用户看到热点选择右侧和底部的半张图片时,并不会认为这是一张小尺寸的全屏图片。根据视觉感知的闭合原理,他们会知道右侧或底部还有一些未显示的图片,这些未显示的图片和已经显示的部分图片一起构成了一个完整的图片。

    ?Extended Little Cheese:说到闭包原理,我们的设计中有哪些类型的闭包?我们如何在产品设计中使用它们?

    答:闭包类型大致可分为3类,即形状闭包、负闭包和经验闭包。

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    以上图为例,第一个是比较常见的形状闭合,也就是我们自己拼一个白色的闭合三角形,想象它被一个三角形和三个圆遮挡住,而不是分解成三个分开的Pac 和 Arrow 彼此不同,因为前者构成了一个更简单的整体。

    二是典型的负闭合。好像只有一象+一个点,但是一个点的意思太不清楚了。我们更喜欢在点周围包含负空间,并将其理解为一大一小两个头。大象使认知更容易。

    第三种是典型的体验式闭合,有点超出原生视觉感知。选项卡的设计在开始时有清晰的边界线。使用边界线的定义,用户可以将其识别为一个整体,但随着扁平化设计的发展,它已经被省略了,完全没有边界。线的Tab设计,对于初次接触互联网产品的用户有一定的了解门槛,需要一定的经验积累,所以叫体验闭合。

    ?Extended Little Cheese:我们学习了“连续性原理”和“闭合性原理”。两者之间有什么关系?有什么不同?

    答:在线性图形中,连续性原理包括闭包原理,闭包现象在特殊情况下可视为连续现象。两者的区别在于,连续性更强调方向,更注重信息方向的引导。闭包强调闭包后图形或信息的完整性。

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    六、主题和背景

    在具有一定形态的场域中,有的物体出现形成主体,有的物体退到背景中成为背景。这是主体和背景。

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    值得一提的是,在我们的产品设计中,主题和背景并不是一成不变的。

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    以上图为例,以灰色背景为背景时,整张卡片为主体。当图像作为背景时,叠加在图像上的文字成为主体。长按顶层后,浮层成为页面主体,整张卡片成为背景。

    从这个案例中得到的启示是,在设计页面的时候,我们需要充分考虑元素的优先级,从而突出核心元素,使之成为主题,弱化次要元素,使之成为背景。在操作设计中,这一点尤为重要,甚至我们特意将元素分为主层(焦点信息层)、大气层(辅助信息层)和背景层(背景信息层),以加强主次关系。这页纸。

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    七、共同的命运

    无论元素相隔多远,或看起来多么不同,只要它们一起移动或变化,它们就被认为是相关的,这是一个共同的命运。

    格式塔原理的设计原则是什么(格式塔原理及图解)

    格式塔原理的设计原则是什么(格式塔原理和图解)

    以上图为例。虽然这些车的形状和颜色各不相同,但由于它们以相同的方向和相同的速度行驶,所以它们形成了一个整体。

    结合我们前面提到的接近度>相似度,我们可以再增加一项:共同命运>接近度>相似度。命运给我的启示是,在产品设计中,为了让信息形成一个整体,可以正确运用命运的原则。比如我们在做加载设计的时候,

    如果只是加载图标在移动,动态图标和静态文字会让人感觉不在一个层次,让原本表达相同含义的两个元素分开。为了减少这种分离感,让这两种元素在用户眼中始终以群体的形式存在,我们可以采用命运共同体的原则,让两者同频移动。

    八、结束语

    至此,完形的7大设计原则就讲完了。告诉新设计师后,大家都觉得起司挺高的。看完有什么收获,别忘了转发哦~

    站内大部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
    欧资源网 » 深度解析格式塔7大原则,一起来涨知识吧

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    欧资源网
    一个高级程序员模板开发平台

    发表评论