网页设计格式塔原则 第1篇
相似性是指在视觉感知中，人们会自然地将相似的物体归为同一组。在界面设计中常通过遵循相似性来简化页面样式、增强统一性。
比如在发现页列表中，各个功能入口统一以图标加名称的横条结构展示，以保证列表项较多时也可展示清晰、页面简洁。
亦或是在订阅号消息列表中，所有的消息统一被包裹在以账号作为头部的卡片中，即使消息的形态有一定差别，但我们仍会认为他们都是订阅号消息。
但一味遵循相似性也可能带来难以识别的副作用。当功能互不相同的元素太过相似时，用户仍会以“更为简单的方式”来进行理解，认为他们的功能都是相同的，从而导致误解。
在春晚专区的项目中就遇到了这个问题：预告阶段下需要同时展示直播预约、节目单、新闻三个模块，为节约开发成本、快速上线，同时不增加更多的样式，将直播预约和节目单处理成了跟新闻卡片相似的样式整合进了轮播卡片。
带着这个疑问，在项目迭代中我们尝试将直播预约、节目单这两个模块与新闻在形态上产生足够的区隔，并从轮播卡片中拆分为独立的模块。
网页设计格式塔原则 第2篇
结合一个页面来说明各种理论的应用会更加简单易懂，因为最近一直在研究PDF，所以就用万兴PDF产品的页面来说明，以下截图均来自万兴的PDFelement英语产品页面。
在网页布局中，相似性原则是指将具有相似功能或特点的元素组合在一起。例如，使用相同的颜色、形状、字体或图标来表示相关的按钮、链接或信息模块，这样可以使用户更容易地识别和理解它们的功能和关系。通过相似性原则，可以增强页面的一致性和逻辑性，提高用户的认知效率。
接近性原则指出，人们会倾向于将距离较近的元素视为一个整体。在网页布局中，可以将相关的内容或元素放置在靠近的位置，以增强它们之间的关联性。例如，将导航栏与页面的主要内容区域靠近放置，或将相关的文章标题和摘要放在一起。这样可以使用户更容易地理解页面的结构和信息的组织方式，减少用户的认知负担。
闭合性原则认为，人们会倾向于将不完整的图形或信息补充完整，形成一个完整的感知。在网页设计中，可以利用这一原则来引导用户的注意力，使他们更容易理解页面的内容。例如，使用简洁的线条或形状来暗示一个完整的图形，或使用省略号来表示未显示完整的信息，激发用户的好奇心和探索欲望。
统一性原则强调网页布局在视觉上的一致性和协调性。通过保持色彩、字体、排版、图标等方面的统一，可以营造出一种专业和可靠的形象，提高用户的信任度。例如，使用统一的配色方案、字体风格和页面布局，确保整个网站的风格一致。这样可以使用户在浏览不同页面时感到舒适和熟悉，增强用户对网站的认同感。
个体独立性原则要求每个元素在网页布局中都应该有明确的边界和独立性，以便用户能够清晰地分辨和理解它们的功能和作用。例如，每个按钮、链接或文本框都应该有清晰的边框或背景，使其与其他元素区分开来。这样可以避免用户产生混淆，提高用户的操作准确性和效率。
共同运动性原则指出，人们会将同时运动的元素视为一个整体。在网页设计中，可以运用动画或交互效果，使相关元素具有共同的运动趋势，从而引导用户的注意力，增强用户与页面的互动性。例如，当用户鼠标悬停在某个菜单上时，菜单选项可以展开或变色，同时伴有平滑的动画效果，以提示用户该菜单可进行操作。或者在页面滚动时，某些元素可以保持固定位置或跟随滚动，以提供更好的导航和用户体验。
总之，格式塔心理学为网页布局提供了重要的理论指导。通过合理运用这些原则，把这些内容相结合，可以提高网页的可用性、可读性和吸引力，提升用户体验。在未来的网页设计中，我们应该继续深入研究和应用格式塔心理学的原理，结合用户需求和最新的设计趋势，创造出更加优秀的网页布局。
网页设计格式塔原则 第3篇
与相似性类似，接近性也是在探究我们是如何将事物归为一组的——我们习惯于将空间位置接近的物体归为同一组。在界面设计中可以借助接近性将元素分组展示，让界面布局更清晰合理、让用户更快速地识别。
比如，如果将发现页列表中这些功能入口打乱分散展示，我们会觉得列表上元素繁杂，需要逐个阅读。而通过相似性将他们按社交内容、视频内容、工具进行聚合分组后，用户直观上只需要识别三个分组，降低了认知负担。
在春晚项目中，直播和节目单位置的处理就用到了接近性的方法。直播与节目单拆分为独立模块之后位置较为分散。但从逻辑关系出发，相比新闻与红包封面模块，节目单与直播关系应该更紧密。
因此迭代中进行了调整：将节目单模块上移，临近直播组件，以位置的接近表达他们同属一组；
接着进一步将他们聚合成组以增加亲密性：统一节目单的与直播的结构并使其聚合在一张卡片上，减少专区内模块的数量，降低复杂度。
上述案例中借助接近性让界面上元素按亲疏关系展示，将同类模块聚合成组减少了界面上模块的数量。在设计中灵活使用接近性可以让布局更有条理。
网页设计格式塔原则 第4篇
同型论
格式塔心理学的同型论认为，由体验物理世界而得到的经验是物理世界在经验世界中的同型模型。也就是说，人们对外部世界的感知与外部世界本身具有相似性。
心物场
心物场理论将经验世界与物理世界进行对比，认为人们的感知是由心理场和物理场相互作用而产生的。心理场包括人的知觉、思维和情感等因素，而物理场则是指外部环境中的物体和事件。
网页设计格式塔原则 第5篇
连续性其实是我们的大脑在找规律：当发现一个视觉规律后，倾向于将元素形态或运动轨迹按规律延续下去。在界面设计中，我们可以通过遵循连续性让相同的元素保持同样的规律展示，通过迎合规律来减少用户认知成本。
在去年春晚专区设计中，节目单在没有详细信息前是一张轮播卡片，有详细信息后会富化为结构化的内容模块，导致变化前后缺乏连续性，找不到规律。
后续由于节目单被拆分为了独立的模块，在变化前后始终保持在同一个容器中，只是信息详略发生了变化，在形态上仍有连续性，因此用户仍能感知它们是同一个模块。
除了形态变化的连续性，也需要考虑视觉动线的连续性。
视觉动线是指我们在阅读或浏览时，会将页面上的元素识别成一条无形的线，眼睛会自然而然地依照视觉动线来移动。平滑连续的视觉动线能提升用户的浏览效率，而这条“线”是通过设计师对元素位置的有意布置形成的。
仍然以春晚专区的改版为例，在审视模块的统一性后发现：各个模块的标题缺乏连续的阅读起点；操作有的在左，有的在右。这样不连贯的动线会让用户在浏览时视线反复地进行跳跃，带来受阻的感受，降低浏览效率。
因此我们将视觉起始点与操作动线进行了统一：将红包封面模块增加了统一的小标题，使各模块在左侧有统一的阅读起点；将领取封面的操作右置，让专区中的操作统一在右侧，更利于操作。
上述案例中，通过遵从形态变化的连续性，让节目单富化前后的变化自然连续；从视觉动线的连续性出发，统一了春晚专区各模块的阅读起始点与操作动线。遵从连续性可以让用户更轻松快速地识别信息，减少认知负担。
格式塔原理为元素该如何摆放、形态该做何差异提供了一定理论依据。它其实是由我们对事物的认知规律总结而来，因此即使我们不了解以上法则，有时也能凭直觉在设计中使用对齐、亲密、对比等方法。但准确把握格式塔原理的精髓，可以让我们在设计时更有理有据，在潜移默化中炼出一双化繁为简的慧眼。