探索格式塔设计原理 _原型设计

本文概述

相似
延续性
关闭
接近
图/地
对称与有序
共同的命运
UX设计中的格式塔原理

负空间长期以来一直是良好设计的基础。通常首先想到的是在设计元素周围留有空白。但是, 然后有一些设计使用该空白来推断实际上不存在的元素(例如, FedEx徽标中隐藏在E和X之间的箭头立即浮现出一个例子)。

文章图片
FedEx徽标中的” E” 和” x” 在它们之间的负空格内创建一个箭头。
人脑非常擅长填补图像中的空白并创建一个大于其各个部分之和的整体。这就是为什么我们在树叶或人行道裂缝等物体中看到面孔的原因。
该原理是视觉感知格式塔原理背后最重要的基础思想之一。关于该理论的最有影响力的早期建议是麦克斯·沃特海默(Max Wertheimer)在他的1923年格式塔感知觉组织定律中发表的, 尽管沃尔夫冈·科勒(WolfgangK?hler)在1920年对” 物理晶体” 的讨论中也包含了许多关于该主题的影响力思想。
不管谁首先提出这些想法(最早可以追溯到1890年的论文), 格式塔原理都是任何设计师都可以学习的重要思想集合, 它们的实现不仅可以极大地改善设计的美观性, 而且还可以极大地改善其设计美感。其功能和用户友好性。
用最简单的术语来说, 格式塔理论基于这样的思想, 即人脑将下意识地将各部分安排到一个创建整体而不是一个整体的有组织系统中, 从而尝试简化和组织由许多元素组成的复杂图像或设计。系列不同的元素。我们的大脑旨在查看结构和模式, 以便我们更好地了解我们所处的环境。
格式塔理论通常具有六个独立的原理：相似性, 连续性, 闭合性, 接近性, 图形/背景以及对称性和有序性(也称为pr?gnanz)。还有一些其他的, 更新的原则有时与格式塔有关, 例如共同命运。
相似将喜欢的东西组合在一起是人类的天性。在格式塔中, 对相似元素进行视觉分组, 无论它们彼此之间是否接近。它们可以按颜色, 形状或大小分组。相似性可用于将设计中可能彼此不正确的元素联系在一起。

文章图片
此处的正方形均等距且大小相同, 但是即使它们没有韵律或放置理由, 我们也会自动按颜色对它们进行分组。
当然, 如果你想使它们脱颖而出, 则可以使事情变得不同。这就是为什么号召性用语按钮的设计颜色通常不同于页面其余部分的颜色, 因此它们会脱颖而出, 并吸引访问者注意所需的操作。
在UX设计中, 使用相似性可以使访问者清楚地知道哪些项目相似。例如, 在使用重复设计元素的功能列表(例如带有3-4行文本的图标)中, 相似性原理将使扫描它们变得容易。相反, 更改要突出显示的功能的设计元素会使它们脱颖而出, 并使其在访问者的感知中更加重要。
即使只是简单地确保整个设计中的链接都以相同的格式进行格式化的事情, 也要基于相似性原则, 即访问者对网站的组织和结构的理解方式。
延续性连续性定律假定, 无论实际绘制线条如何, 人眼在观看线条时都将遵循最平滑的路径。

文章图片
眼睛倾向于沿着从该图的一端到另一端的直线, 以及从上到下的曲线, 即使这些线在中间改变颜色时也是如此。
当目标是引导访客的眼睛朝某个方向行驶时, 这种延续可能是一种有价值的工具。他们将遵循页面上最简单的路径, 因此请确保他们应该看到的最重要的部分落入该路径内。
由于眼睛自然会沿一条线移动, 因此将一系列项目连续放置在一条线中自然会将眼睛从一个项目吸引到另一个项目。水平滑块就是一个这样的例子, 亚马逊等网站上的相关产品清单也是如此。
关闭封闭是最酷的格式塔原则之一, 在本文开始时我已经谈到过。这是你的大脑将填补设计或图像缺失的部分以创建整体的想法。
闭合原理最简单的形式是让你的眼睛一直沿虚线之类的方向走到尽头。但是徽标中通常会看到更复杂的应用程序, 例如世界野生动物基金会的徽标。大熊猫的轮廓大块丢失了, 但是你的大脑没有问题, 可以在缺失的部分中填满整个动物。

文章图片
世界野生动物基金会(World Wildlife Fund)的熊猫徽标很好地说明了封闭的格式塔原理。即使形状不清晰, 大脑也会完成白色形状。
徽标设计中经常使用闭包, 其他示例包括USA Network, NBC, Sun Microsystems甚至Adobe的示例。
UX和UI设计中关闭工作的另一个非常重要的例子是, 当你显示部分图像从用户屏幕上淡出时, 向他们显示, 如果用户向左或向右滑动, 则还有更多可发现的地方。如果没有局部图像, 即, 如果仅显示完整图像, 则大脑不会立即解释可能会有更多可见的图像, 因此你的用户滚动的可能性较小(因为闭合很明显)。

文章图片
唯一可以区分左侧组和右侧组的是线的接近程度。但是, 你的大脑会将右侧的图像解释为三个不同的组。

文章图片
一个USPS PDF表单示例, 其中邻近格式位原理损害了UX。由于字段标签距离其下方的字段更近, 所以人们会错误地认为这就是信息” c” 的来源。和” d” 。但是, 应该在文本标签上方的字段中提供信息。
在UX设计中, 最常用的是接近性, 以使用户将某些东西组合在一起而不使用诸如硬边框之类的东西。通过将类似的事物放在一起, 并在每个组之间留有空间, 观看者将立即了解你希望他们感知的组织和结构。
图/地图形/地面原理类似于闭合原理, 因为它利用了大脑处理负空间的方式。你可能已经在社交媒体上的模因中或徽标的一部分(例如已经提到的FedEx徽标)中看到了有关此原理的示例。
你的大脑将区分认为在图像前景中的对象(图形或焦点)和背景(图形所停留的区域)。有趣的是, 前景和背景实际上包含两个不同的图像, 如下所示：

文章图片
当查看匹兹堡动物园和PPG水族馆的徽标时, 有些人会立即看到树木和鸟类, 而另一些人会看到大猩猩和狮子互相凝视。

文章图片
数字/地面格式塔原理的另一个很好的例子。
通过此图像可以看到一个更简单的示例, 其中两个面在它们之间创建了烛台或花瓶：

文章图片
在丹麦心理学家埃德加·鲁宾(Edgar Rubin)提出的这种著名幻觉中, 通常向观看者展示两种形状的解释-两张脸或一个花瓶。这是图形/地面原理的另一个很好的例子。
一般而言, 你的大脑会将图像的较大区域解释为地面, 将较小的区域解释为图形。但是, 如上图所示, 你可以看到较浅和较深的颜色会影响被视为人物的事物和被视为地面的事物。
当产品设计师想要突出显示焦点时, 尤其是在活动焦点或使用中时, 例如当弹出模态窗口且站点的其余部分逐渐淡入背景时, 或者当背景色变暗时, 图形/地面原理可能非常方便单击搜索栏, 并增加它与站点其余部分之间的对比度。
对称与有序对称和有序定律也被称为pr?gnanz, 德语为” 好身材” 。该原理的意思是你的大脑将以尽可能简单的方式感知模棱两可的形状。例如, 奥林匹克标志的单色版本被视为一系列重叠的圆, 而不是曲线的集合。

文章图片
这是格式塔设计原则” pr?gnanz” 的另一个很好的例子：

文章图片
即使每个轮廓的轮廓都不完整, 你的大脑也会将左侧的图像解释为矩形, 圆形和三角形, 因为它们的形状比整体图像更简单。
共同的命运虽然普通命运最初不包含在格式塔理论中, 但后来又添加了它。在UX设计中, 它的用处不容忽视。该原则指出, 人们会将指向或朝同一方向移动的事物归为一类。
在自然界中, 我们在成群的鸟或鱼群中看到这种现象。它们由一堆个体元素组成, 但是由于它们看起来像一个整体一样运动, 因此我们的大脑将它们组合在一起, 并认为它们是单个刺激。

文章图片
一群鸟在朝同一方向飞行时被视为一个整体, 因此有着共同的命运。 (由马丁·亚当斯(Martin Adams)发表于《 Unsplash》
这在UX中非常有用, 因为动画效果在现代设计中变得越来越普遍。请注意, 元素实际上不必为了受益于此原理而移动, 但它们确实必须给人以运动的印象。
UX设计中的格式塔原理与任何心理原理一样, 学习将格式塔的视觉感知原理纳入你的设计工作可以极大地改善用户体验。理解人脑的工作原理, 然后利用人的自然倾向, 可以创建更加无缝的交互, 使用户即使在第一次访问网站时也感觉舒适。
格式塔原则相对容易集成到几乎所有设计中, 并且可以快速提升似乎是杂乱无章的设计, 或者像是在争取用户注意的设计一样, 提供一种无缝, 自然的交互方式, 指导用户采取你想要的动作。
【探索格式塔设计原理】? ? ?
在srcmini设计博客上进一步阅读：