“格式塔”原理在网页设计中的应用

　　轮廓/区域 Figure/Ground

　　轮廓/区域关系是一种最基本的视觉感知法则。

　　轮廓即“感知元素”内部与外部的区分(我们可以理解轮廓为无限精细的线段)。

　　区域指某“感知元素”独占的背景、空间。

网页设计中的应用（图一） src="/upload/users/1/2010318/100316224753710.png" width=300 border=0>

　　左边和右边的圆形，哪个看起来更大一些?

　　通常轮廓被称为“绝对感知元素”而区域被称为“实体周围的空间”或“空白”。

　　在感知上，眼睛与大脑协调工作帮助我们专注的把轮廓从区域中分离出来。例如，当我们阅读时，我们必须把文字从纸张上阅读出来。

　　同样，当我们察看显示器时，也必须从视觉上把各种各样的轮廓从它们所在的窗口、桌面上分离出来。

　　有时恰恰相反，屏幕上的轮廓，不那么显而易见，因为太多的“感知元素”吸引着你的眼睛的注意力。

　　均衡 Equilibrium

　　浏览者倾向于寻求视觉组合中的秩序或平衡，就是均衡。

网页设计中的应用（图二） src="/upload/users/1/2010318/100316224753711.png" width=350 border=0>

　　也许你觉得右边的圆形更重一些，而其实屏幕上的圆形根本没有重量

　　眼睛和大脑配合的视觉过程中，人们总是期望整个视场中存在一种均衡状态。例如，由于屏幕往往是与地面垂直，那么在人们的感知中会认为屏幕上的图像也存在着重力系统。

　　保持均衡就是“和谐”，打破均衡可能造成“冲突”，而完全不均衡就是“混乱”。

　　闭合 Closure or Completion

　　闭合，填充轮廓就是封闭的形状，眼睛和大脑配合总是在不断的完成这个封闭的过程。

　　浏览者的视觉系统会认为封闭的形状比较稳定(这也是一种均衡)。

网页设计中的应用（图三） src="/upload/users/1/2010318/100316224753712.png" width=350 border=0>

　　虽然这个圆形不完整，但你依然认为它存在着

　　在感知上，浏览者倾向于从视觉上封闭那些开放或未完成的轮廓。

　　封闭是取悦用户视觉心理的重要原则。

　　比如，为了让用户保持积极投入关注，设计师会故意创造一些简单的形状让浏览者去关闭。

　　用户花越多的时间去关闭形状，设计可能就越令人难忘;但是，如果图形不能被闭合，观众的注意力就被分散，因为关闭它们实在太难了。

　　贴近 Proximity

　　当多个可见元素出现时，眼睛和大脑配合起来，倾向于根据它们的贴近和靠近关系进行分组。

网页设计中的应用（图四） src="/upload/users/1/2010318/100316224753713.png" width=350 border=0>

　　这些圆形在你的视觉中分为几组?

　　元素与另外的元素越贴近，用户越从视觉上认为它们团结的越紧密(可以理解为是一种“闭合”)。设计师通常使用贴近的办法对同类内容进行分组，同时留下间距，给用户的视觉以秩序和合理的休憩。

　　延续 Continuation

　　当许多元素有组织的素排列在一个直线或曲线路径上，这个原则将让用户的视觉系统认为元素正在按照路径在延续下去。

网页设计中的应用（图五） src="/upload/users/1/2010318/100316224753714.png" width=350 border=0>

　　视觉向量的指示作用

　　通常设计师使用这种构图原则将告诉浏览者的视觉系统按照元素组成视觉向量进行延续。

　　在网页上，这种延续的设计经常被用来指引用户在可以点击处停留，或者指引用户滚动页面进行浏览的延续;用户的眼睛会在视觉向量的引导下一页一页的进行浏览。

　　相似 Similarity

　　元素具有近似外观时会被看成是一组;同组中的元素可能具有相似的颜色、外形、大小、文本样式。

网页设计中的应用（图六） src="/upload/users/1/2010318/100316224753715.png" width=350 border=0>

　　相似度首先决定了区分度，此时贴近关系被弱化

　　当大量相似的元素出现的时候，视觉系统倾向于不把它们分开。

　　当元素之间的相似性比较弱时，视觉系统倾向于使用贴近的原则对它们进行组织，形成统一的整体。因此在创建网站的风格时，设计师可以使用近似的文本、颜色、图像和留白，让网页保持一致。