网页设计格式塔原则 第1篇
对称是指两个元素呈现出精确镜像关系。它可以被看作是把一个物体一分为二的平衡。真实的对称图形包括等边三角形、圆形和正方形等几何图像。
人类的大脑会本能地渴望在面孔中找寻「平衡」和「对称」，这在美学上是令人愉悦的。大脑也倾向于在其他物体中找到对称，因为对称创造和谐，让观者在观看图像时感到舒适。
下面是 HvD Fonts 在网页设计中体现对称性的一个很好的案例：
这个页面不仅显示了典型的图形-背景关系，而且强调了对称性原则的运用。页面被分成四等份，字体大小和颜色相似，四个部分中的每个部分的背景都具有相同的主题色和灰度效果。你也可以注意到负空间不一定是白色的，黑色甚至其他的颜色也可以以图像作为背景。
对称性原则还可以衍生出了另一个概念：在网页设计中，不对称会使观感不佳，必须谨慎使用。许多网站使用不对称作为平衡间距的元素——非常规的正空间元素与中性的背景相互平衡，反之亦然。而 Xplode 的营销理念是不对称，Xplode 以独特的美观悦目的方式引发不对称。
这个网页利用视觉错觉和不对称，抓住了观者的眼球。作为正空间的物体被放置在一个不对称的布局之下，在负空间中创造了强烈的视觉吸引力。色彩是两个空间和谐的主要因素，并为观者创造了一种自然的联系。左边的图形也有很强的平衡性，而右边的则是带来更强的视觉吸引力。你觉得这个设计如何呢？
网页设计格式塔原则 第2篇
相似性是指在视觉感知中，人们会自然地将相似的物体归为同一组。在界面设计中常通过遵循相似性来简化页面样式、增强统一性。
比如在发现页列表中，各个功能入口统一以图标加名称的横条结构展示，以保证列表项较多时也可展示清晰、页面简洁。
亦或是在订阅号消息列表中，所有的消息统一被包裹在以账号作为头部的卡片中，即使消息的形态有一定差别，但我们仍会认为他们都是订阅号消息。
但一味遵循相似性也可能带来难以识别的副作用。当功能互不相同的元素太过相似时，用户仍会以“更为简单的方式”来进行理解，认为他们的功能都是相同的，从而导致误解。
在春晚专区的项目中就遇到了这个问题：预告阶段下需要同时展示直播预约、节目单、新闻三个模块，为节约开发成本、快速上线，同时不增加更多的样式，将直播预约和节目单处理成了跟新闻卡片相似的样式整合进了轮播卡片。
带着这个疑问，在项目迭代中我们尝试将直播预约、节目单这两个模块与新闻在形态上产生足够的区隔，并从轮播卡片中拆分为独立的模块。
网页设计格式塔原则 第3篇
相似性与接近性原理密切相关的原因，是相似分组对象之间共享属性的质量。无论是颜色、形状、形态、大小、方向或任何其他属性，当这些属性中的一个或多个在邻近对象_享时，相似性将占上风。
即使正空间的元素看起来没有明显的联系，由于相似性原理，它们也会与负空间元素区分开。
看看这些 UrbanDecay 的商品列表：
虽然上面的商品各不相同，但在位置、色彩、产品布局、表现方式等方面却有一定的相似性。唯一不同的是左上角的眼影广告，在同类产品中独树一帜。这显然是一种营销策略，目的是在不损害页面整体对称和美观的情况下吸引注意力。这里要考虑的另一点是，尺寸上的相似性使其他图像与相似的产品类别区分开来。
除了产品展示之外，正空间可以与相似度结合使用，也可以与负空间结合使用。
让我们来看看 influenster 的着陆页：
上面例子中对齐的边框也运用了相似性原理。虽然每个正空间元素是不同的，但是相似的感觉是通过整个页面中一致的文本字段来传达的。风格、布局和主题都是相似的，因此带来了统一的视觉效果。
网页设计格式塔原则 第4篇
结合一个页面来说明各种理论的应用会更加简单易懂，因为最近一直在研究PDF，所以就用万兴PDF产品的页面来说明，以下截图均来自万兴的PDFelement英语产品页面。
在网页布局中，相似性原则是指将具有相似功能或特点的元素组合在一起。例如，使用相同的颜色、形状、字体或图标来表示相关的按钮、链接或信息模块，这样可以使用户更容易地识别和理解它们的功能和关系。通过相似性原则，可以增强页面的一致性和逻辑性，提高用户的认知效率。
接近性原则指出，人们会倾向于将距离较近的元素视为一个整体。在网页布局中，可以将相关的内容或元素放置在靠近的位置，以增强它们之间的关联性。例如，将导航栏与页面的主要内容区域靠近放置，或将相关的文章标题和摘要放在一起。这样可以使用户更容易地理解页面的结构和信息的组织方式，减少用户的认知负担。
闭合性原则认为，人们会倾向于将不完整的图形或信息补充完整，形成一个完整的感知。在网页设计中，可以利用这一原则来引导用户的注意力，使他们更容易理解页面的内容。例如，使用简洁的线条或形状来暗示一个完整的图形，或使用省略号来表示未显示完整的信息，激发用户的好奇心和探索欲望。
统一性原则强调网页布局在视觉上的一致性和协调性。通过保持色彩、字体、排版、图标等方面的统一，可以营造出一种专业和可靠的形象，提高用户的信任度。例如，使用统一的配色方案、字体风格和页面布局，确保整个网站的风格一致。这样可以使用户在浏览不同页面时感到舒适和熟悉，增强用户对网站的认同感。
个体独立性原则要求每个元素在网页布局中都应该有明确的边界和独立性，以便用户能够清晰地分辨和理解它们的功能和作用。例如，每个按钮、链接或文本框都应该有清晰的边框或背景，使其与其他元素区分开来。这样可以避免用户产生混淆，提高用户的操作准确性和效率。
共同运动性原则指出，人们会将同时运动的元素视为一个整体。在网页设计中，可以运用动画或交互效果，使相关元素具有共同的运动趋势，从而引导用户的注意力，增强用户与页面的互动性。例如，当用户鼠标悬停在某个菜单上时，菜单选项可以展开或变色，同时伴有平滑的动画效果，以提示用户该菜单可进行操作。或者在页面滚动时，某些元素可以保持固定位置或跟随滚动，以提供更好的导航和用户体验。
总之，格式塔心理学为网页布局提供了重要的理论指导。通过合理运用这些原则，把这些内容相结合，可以提高网页的可用性、可读性和吸引力，提升用户体验。在未来的网页设计中，我们应该继续深入研究和应用格式塔心理学的原理，结合用户需求和最新的设计趋势，创造出更加优秀的网页布局。
网页设计格式塔原则 第5篇
你是否曾经遇到过这样一幅画面，看上去是闭合的，但实际上是开放的？这是由于它采用封闭性原理。我们的大脑倾向于「脑补」不完整物体的空白，并利用我们的视觉感知来使图形完整化。
正空间和负空间一起构成一个整体。最好的案例就是负空间中隐藏的形状和形式，这要求对正空间中要传达的信息进行精确评估。在封闭空间创造性地使用着正负空间，可以产生有趣但简单的设计。
下面是 Magu Kambucha 的设计图：
在这个案例中，可以看到封闭性和图形-背景关系的平衡。瓶子和后面的粗体文字构成对比，背景则是和两者都构成对比的柔粉色。
封闭性体现在哪里？看到瓶子后面的文字了吗？
虽然你不能完全看到它，但仍然知道它是「Kambucha」。除了第一个「K」和最后一个「A」，其他字母都是半隐藏的，这些字母都是凭观者的直觉自动完成的，整个形式开始成形，意义也随之成形。
下面是 Cult 的截图：
即使文本没有写得很清楚，我们的头脑可以很容易地读到 CULT 这个词。即使单词不完整，文本的排列和对齐也可以使其易于辨认。
网页设计格式塔原则 第6篇
连续性其实是我们的大脑在找规律：当发现一个视觉规律后，倾向于将元素形态或运动轨迹按规律延续下去。在界面设计中，我们可以通过遵循连续性让相同的元素保持同样的规律展示，通过迎合规律来减少用户认知成本。
在去年春晚专区设计中，节目单在没有详细信息前是一张轮播卡片，有详细信息后会富化为结构化的内容模块，导致变化前后缺乏连续性，找不到规律。
后续由于节目单被拆分为了独立的模块，在变化前后始终保持在同一个容器中，只是信息详略发生了变化，在形态上仍有连续性，因此用户仍能感知它们是同一个模块。
除了形态变化的连续性，也需要考虑视觉动线的连续性。
视觉动线是指我们在阅读或浏览时，会将页面上的元素识别成一条无形的线，眼睛会自然而然地依照视觉动线来移动。平滑连续的视觉动线能提升用户的浏览效率，而这条“线”是通过设计师对元素位置的有意布置形成的。
仍然以春晚专区的改版为例，在审视模块的统一性后发现：各个模块的标题缺乏连续的阅读起点；操作有的在左，有的在右。这样不连贯的动线会让用户在浏览时视线反复地进行跳跃，带来受阻的感受，降低浏览效率。
因此我们将视觉起始点与操作动线进行了统一：将红包封面模块增加了统一的小标题，使各模块在左侧有统一的阅读起点；将领取封面的操作右置，让专区中的操作统一在右侧，更利于操作。
上述案例中，通过遵从形态变化的连续性，让节目单富化前后的变化自然连续；从视觉动线的连续性出发，统一了春晚专区各模块的阅读起始点与操作动线。遵从连续性可以让用户更轻松快速地识别信息，减少认知负担。
格式塔原理为元素该如何摆放、形态该做何差异提供了一定理论依据。它其实是由我们对事物的认知规律总结而来，因此即使我们不了解以上法则，有时也能凭直觉在设计中使用对齐、亲密、对比等方法。但准确把握格式塔原理的精髓，可以让我们在设计时更有理有据，在潜移默化中炼出一双化繁为简的慧眼。
网页设计格式塔原则 第7篇
同型论
格式塔心理学的同型论认为，由体验物理世界而得到的经验是物理世界在经验世界中的同型模型。也就是说，人们对外部世界的感知与外部世界本身具有相似性。
心物场
心物场理论将经验世界与物理世界进行对比，认为人们的感知是由心理场和物理场相互作用而产生的。心理场包括人的知觉、思维和情感等因素，而物理场则是指外部环境中的物体和事件。
网页设计格式塔原则 第8篇
最后，根据一般格式塔原则，连续性遵循模式，即引导实现遵循一致的路径，建立从一个对象到另一个对象的线性模式。
在上面的图片中，尽管圆形色块的颜色变淡了，但是观者更倾向于将中间的间隙其看作一条直线，这使我们相信连续性的原理比色彩的力量更能引导用户的视觉感知。当我们借助负空间在视觉元素中画出路径，我们的眼睛倾向于优先感知正负空间之间的界限。
脑补出来的这条连续的线条是我们在设计中更应该引入的视觉线索。
让我们来看看 Crypton Trading 网站中的视觉线索设计：
看到页面右半部分设计的完美延续了吗？不管背景的明暗色调如何变化，图案在页面上的变化都非常显著。当你向下滚动时，你会看到图案和颜色是如何以连续和无缝的运动变化的。在这里，色调的变化是可以忽略的，我们所看到的是一个连续的线和点的模式。
另一个很好的例子是 OscilloScope 网站：
该网站借用连续性法则，将网站用户引入到工作室的 360 度视角中，他们可以在导航中选择所需的子栏目。
影片《Cargo》的着陆页也使用了连续性法则：滚动式的导航，以线性运动的方式让文本漂浮在网站上。由于 LOGO 是垂直展现的，所以用户必须向下滚动才能看到它的全貌。当页面向下滚动时，静态 LOGO 开始与并行的文本块一起浮动。导航引导用户经历不同层次的体验，而不会干扰隐藏在下面的内容。
由于我们的眼睛通常遵循最平滑的路径，设计师可以使用这样的方式来创建引导路径。
在这篇文章中，我们讨论了格式塔原则与网站 UI 的正负空间之间的关系。通过一些真实的案例，让大家清楚地知道如何运用简单有效的方法来改变设计的观感。关键是使用这些原理来设计的时候，可以达到 1 + 1 > 2 的效果。
人类是根据感知来思考的——主要是基于视觉。根据格式塔原理，我们倾向于看到更大的整体性图景，而不是第一眼看到的某一单个元素。
正负空间帮助我们区分、回忆、感知并识别理解。在格式塔原理的引导下，我们能够更好地在网页设计中利用不同元素来创造吸引人的作品。因为空间对于任何设计师来说都是一件复杂的事情，所以最好的方法就是保持格式塔原则的完整性。只有这样才能真正认识到空间在设计中的重要性、有效性，继而使自己成为网页设计领域的佼佼者。
相关引用：
网页设计格式塔原则 第9篇
接近性是指页面中元素之间的接近程度。网页中的不同元素可以组合在一起，不同的接近程度会带来不同的关联属性。除了视觉特征上的接近性之外，这些元素与其他页面元素之间的距离接近度也会自动地在观众的脑海中产生关联感。
从图像到文本、导航栏到网页表单，这种接近性原则在网页设计中适用范围非常广。将类似的内容组合在一起时，它将在元素之间创建关联，为观者提供更好的视觉体验。
以下是 Mashable 网站导航显示的运用接近度的案例：
在上方的截图中，我们可以清楚地看到如何将相同类别的元素放在一起，以显示它们与主菜单的关系。由于颜色和文本大小的选择，使观者的目光自动被吸引到主标题下的子栏目上。
除了导航栏外，基于网格的内容也符合黄金比例的接近性，亚马逊的产品列表就是最好的例子：
这个案例体现的是接近性还是相似性还有待讨论。如你所见，具备视觉接近性的同类产品使用狭窄的留白进行分组和分隔。这种接近性会指示用户在类似的产品列表中，对其目标产品基于购买偏好进行排序。此外，封闭性原则也在类似项目的清单中发挥了作用。
现在，我们来仔细看看 Basecamp 的网页表单设计，它在网页设计中显示了另一种接近性的理想情况：
可以看到上图中的表单是被划分为两个主要部分的：个人信息和 ID 生成两个部分。第一部分被暗示为最重要的字段，第二部分则是一个次要的需求。这两个部分的标题都因颜色和字体大小的不同而产生区别。在这个网页表单中，接近度是一个重要指标，它将网页中呈现的信息按优先级排列。