用灵魂感悟设计 · 用设计创造价值
WITH SOUL FEELING DESIGN WITH DESIGN TO CREATE VALUE
您当前位置:  设计中国    ⁄    热门文章    ⁄ 资讯内容

控制好网页的视觉效果 理解和掌握格式塔法则是关键

作者:admin      来源:互联网      发布时间: 2015/12/7 14:18:52     浏览:
在视觉现象中,“整体大于部分之和”。格式塔理论包括一系列基本概念。格式塔原理几乎适用于所有与视觉有关的领域,但它与UI设计的关系尤其密切。

  在视觉现象中,“整体大于部分之和”。格式塔理论包括一系列基本概念。格式塔原理几乎适用于所有与视觉有关的领域,但它与UI设计的关系尤其密切。接下来,中国设计网的笔者为设计师们介绍五条最实用的格式塔法则。

  1、相似法则

  这对于极其注重信息传播时效网页设计而言是个非常有用的启示,你可以通过创建一系列外观近似的图形来迅速而直接地传达出它们的功能或目的。

  

  正如在上图(设计工作室Green Chameleon的页面)中看到的,导航图标看起来虽然各不相同。但由于这些导航图标在颜色,大小,排列上的近似性,用户会将它们默认为同一级别的导航功能。

  这一导航模式特别适用于组织竖排的导航图标,因为它可以在不牺牲导航功能的情况下,很直观地把各个导航图标的功能表达清楚。

  设计师如果能善用这一法则的话,就可以更有效地传达信息和节约页面空间,从而为用户提供更好的使用体验。

  2、图形-背景关系法则

  在用户看来,页面中的元素要么是图形,要么是背景。Steven Bradley总结出了三种类型的图形-背景关系, 如下图所示:

  

  稳定型 — (左)可以很明显地看出,圆形是图像,而灰色空间是背景。

  可逆型— (中间)空间与背景可以相互转换,整个页面显得十分有灵动之感。

  模糊型— (模糊型) 图片与背景的界限模糊不清,观看者需要自行解释空间与背景的关系。

  

  Moddeals网站采用是一种较为经典的图形-背景关系。当页面中的广告浮现时,网页的其余部分就变变暗,自动转化为背景。在这种情况下,用户依然可以拖动页面,然而广告还是会作为独立于背景的一部分停留于原处。

  

  而电影宣传网站Tannbach处理图形-背景关系的手法就更为微妙。

  为了突出电影中的人物关系,这个页面的设计师采用了模糊背景的方式来强化页面中的两个人物。通过对色彩和排版的巧妙运用,左上角的“互动区”成为了事实上的“一级图形”,而页面中的那一对男女则成为“次级图形”。这样一来,用户既能迅速辨认出页面中的人物,同时也能够理解如何使用网站的导航。

  3、组织法则

  即便是外观不同的东西,也可以通过一定的安排使它们更为接近。根据格式塔原理,至少有两种方法可以加强事物的相似性:

  闭合状态将不同的事物集中置于一定的界限内,也会给观看者造成一种“一致”的印象。

  密集状态即便是不同类型的事物,当距离很密集的时候也会具有某种似性。

  4、闭合法则

  前面我们提到过格式塔原理中的“具体化”现象,闭合法则其实就是这种现象的具体体现。我们的大脑能自动通过添加界线来补全不完整的图像。设计师可以利用这条法则去创作貌似残缺不全的图形,在这条法则的指导下,设计师还可以尽情创作出典雅的极简主义作品。

  5、连续法则

  这个法则认为,当用户的目光沿着一系列物体移动时,脑中会形成一个逐渐增强的“定势”。这个法则使设计中线条的地位显得格外重要。

  理解和掌握格式塔法则能让你更有效地控制网页的设觉效果,从而创造出风格更和谐的网页设计, 同时也能更有效地将你的信息传达给用户。