网页设计中的视觉节省研究

欧亚梅

（湖北科技职业学院 湖北 武汉：430074）

“视觉节省”一词是由英国艺术史家，古典文化研究家贡布里希爵士（Sir Ernst Hans Josef Gombrich，1909－2001）在《秩序感》（《The Sense of Order》）一书中提出。视觉节省是相对于人们在观察事物时产生视觉疲劳而提出的一种设计方法，在设计元素中，相同或类似的元素可以以一个或一类作为视觉的焦点加以关注，其他部分可以抽象或模糊处理，从而达到视觉节省的目的。

笔者研究发现，国内学者的研究提到了网页设计中视觉传达的一些要素，但就具体的视觉节省要素挖掘不深，如何在网页设计中利用视觉节省原理的案例未见。而国外的视觉节省的研究过去是以平面设计为基础所展开的，作为视觉传达设计的一个研究新领域，目前在国外的视觉节省与网页设计的相关研究鲜见。随着信息化时代的到来，网页视觉元素的不断增加，传达给大众的信息量也随之加大，合理的元素设计减少了大众的视觉疲劳，研究并合理的运用网页视觉传达设计中的视觉节省会给设计作品带来具有想象力的意境和独特的竞争力。

1 网页设计中视觉节省要素分析

网页的构成要素包括文字、图形、色彩、标志、创意等。网页是通过具体的视觉元素的引人注意，来实现具体信息内容的传达，所以网页要想获得理想的视觉传达功能，让它真正成为可读性强而且新颖的媒体，网页的设计必须针对人们视觉流向确定各种视觉构成元素之间的关系和秩序。所以，在表达时应该研究各种视觉造型元素之间的面积、位置、距离和视觉流程的问题。流畅并且清晰的视觉流程，对于网页中视觉传达设计来讲是至观重要的，并且其信息内容的合理、有效传达是通过将各种构成要素的设计编排来实现的，视觉节省的概念也分别应用在各构成要素中（见图1），起到优化网页页面的作用。

图1 网页设计中视觉节省应用点

2 网页设计中视觉节省的实际应用

2.1 文字设计中的视觉节省

目前网页设计的主体是以文字信息传达为主要手段。作为网页主要信息描述中必不可少的元素，网页文字占据了主要面积，文字表达的好与坏，将直接影响到整个网页的质量。笔者尝试通过Photoshop对几个网站首页的设计，分析视觉节省在网页设计中的实际运用。见图2，DISAPPEAR网站首页设计对比图。

这是DISAPPEAR网站首页设计，该设计以单纯、简洁的形式展现网站的设计的统一性。网站没有使用告诉介绍之类的繁复文字，而是使用了简洁明了的文字配以图形化来处理整个页面。这个版面中最醒目的就是被遮掉下半部分的文字，用Photoshop把被遮掉的半边文字重新展现出原貌，就是B1图片的图形效果。比较一下A1和B1两个版本展现的视觉效果有什么不同？不难发现完全可以用前面谈到的视觉节省原理中“多余度”来分析。如A1图片是一个文字被遮住一半的网页设计，但是不难发现，大家都会认出被遮掉一半的文字。这是因为在阅读时受众的眼睛飞快的移动着，以吸取整个网页说明的意义。在“跟”着设计者的同时，还在进行着许多猜测和预期。受众是生活在一个熟悉的环境中，看到被遮掉一半的文字，不难猜测出是“1998”，就像通常认为光是从上面照下来的，平静的水域是平面的一样，见到的事物总是与预期的相符，这样的预期大大减少需要特别注意的信息量，从而节省视觉活动。而从审美的角度来看B1图片，文字被还原成整体展示在网页中很刺眼呆板，而A1图片的处理就显得巧妙而含蓄，整个的视觉效果也整体舒缓些。

图2 DISAPPEAR网站首页设计对比图（A1为原图片，B1为对比图）

因此在网页设计中要达到这种各种信息的有效传达，网页中的文字设计，其风格要与内容特性相吻合，要服从信息内容的性质及特点的要求，不能相互冲突，并脱离实际。可充分利用视觉节省的“多余度”的原理调动受众的注意度，减少对不必要信息的筛查与检索从而达到视觉节省的目的。

2.2 图形设计中的视觉节省

图片在网络传播中占有很大的比重，视觉冲击力比文字强85%，在视觉传达上能辅助文字，帮助理解，更可以使网页布局立体、真实。

见图3，A2图片是SWATCH手表的一个网站设计，它主要以年轻男女为消费对象，所以选用了颜色非常鲜艳的图片来展现青春的活力四射。该网页是由四张图片为主要视觉元素来构成，笔者依照原网页设计中图片摆放的位置，用Photoshop把每张图片都还原成同一明度的色彩全部展现出来（即B2图片所示），比较一下前后的视觉差别。先看A2图片，设计者把图片中三张做了降低明度的模糊处理，只留下中间一张保持原色彩明度。受众在浏览过程中视线始终停留最多的只是在中间色彩明度高的图片上。再看B2图片，在图中四张图片都没做降低明度的模糊处理，在浏览过程中视线在四张图片上来回不定选择停留。

图3 SWATCH手表网站页面图片（A2为原图，B2为对比图）

从中不难看出，A2图片让人的视觉活动有节省的倾向，也体现了视觉节省发生的原因之一——清晰度的消失原理。清晰度的消失原理提出相同或类似的元素可以以一个或一种作为视觉的焦点加以关注，其他部分可以抽象或模糊处理，从而达到视觉节省活动的目的。这种观念的提出同样使设计师在处理视觉元素的过程中也受到启发，A2图中以中间一张色彩高明度的图片作为整个网页中的视觉焦点，而其他三张都作模糊处理，受众的视线始终最后停留在视觉焦点上，从而大大节省了浏览者的视觉注意力。

视觉焦点的合理应用能使图片由平淡的事物变成强而有力的诉求性画面，形成独特的性格成为吸引视觉的重要素材。并能加倍地放大它所提供的信息量。对于重要信息来说，受众对图片的关注远远超过单纯的文字。图片的位置、方向面积、数量等直接关系到网页的有效视觉传达。如何运用图片在网页设计中产生明快、简洁的造型语言，给人带来清晰、醒目的视觉效果，还需要不断的探索，视觉节省的有效应用就是很好的探索方向。

2.3 色彩设计中的视觉节省

在网页视觉传达设计中，尽管文字、图形是信息的只要载体，但视觉冲击力最强的要数色彩。色彩是第一性的。网站的个性化特征也是有色彩感知的，色彩是影响视觉感受最直观的因素。受众在浏览网页时，首先注重页面的色彩设计，它直接影响阅读者的观赏兴趣和态度。

见图4，A3图片是ARTSEENSOHO的网站，此网站的目的是介绍位于美国纽约的艺术之城，有来自于世界各地的年轻艺术家，经纪人以及大大小小的画廊。此网站设计比较简洁，色彩鲜明，极富艺术气息。A3图片的网页主要以为整个设计主色调，可是设计者突然以一幅黑白建筑大楼的照片贯穿于整个页面中心，打断了本来橘黄色的主基调，使视觉效果十分醒目，浏览者的视线被黑白建筑大楼的照片牢牢栓住。笔者试着用Photoshop图象菜单／调整／变化命令将A3图的黑白建筑大楼的照片做上橘黄色（如B3图片所示），此时明显的变色后B3图片没有A3图片醒目。因此根据显著点的中断原理，整齐或规则程度上的任何变化都将引起注意，不管是结构密度上的间断，成分排列方向上的间断，还是其它无数种引人注目的间断，都会使受众节省视觉活动。该案例采用了颜色上的间断，使浏览者节省了视觉活动。

图4 ARTSEENSOHO的网站页面图片（A3为原图，B3为对比图）

图5是e百万格子网。e百万首页上共有一万个格子，每一个格子售价是100元，100×10000就是一百万了。e－baiwan.com只有1个首页＋28个分类子页。每个页面只存放1万个超级格子前，1000个超级格子买家先挑选首页位置，同时赠送分类子页位置，位置可自选（先到先得）。1000个超级格子买家以后，只能挑选分类子页，首页不再增加任何形式的位置。此网站的首页如图5所示，以单纯的空白方格子作为整个的页面设计，以最简单的方式表达了网站设计的创意，也是视觉节省运用在网页设计中的典范。

图5 e百万格子网

因此色彩设计在网页设计应注意整个页面主色调的确定，有利于网站主题展现。在主流网页设计中，一般以浅颜色为底配上深颜色的字，传达的自然流畅，利于突出页面的重点和整个页面的配色，次要内容，如背景图片、线条适宜采用柔和的颜色，避免喧宾夺主。只有为了突出和强调元素才采用明亮的色彩，这些亮点颜色就会产生强烈的视觉冲击从而达到视觉节省的目的。

3 结束语

以上实例是从网页的视觉传达设计的构成要素的三个主要方面：文字、图片、色彩的角度，尝试着用视觉节省产生的原理分别分析几个网页案例的设计，提出视觉节省在网页设计中运用的可行性和指导性。当然视觉节省的发生远不只本文中分析的这些方面。视觉节省在网页中的运用是Internet网页视觉传达设计的发展趋势，它不仅仅给视觉传达设计注入新的活力，也给Internet网页视觉传达设计带来新的研究方向，其设计理论也不仅仅局限于网页设计中，在其他设计领域也有其广阔发挥的空间，需要在设计实践中进一步的论证与创新。

［1］周 俊.网页设计视觉传达效率问题研究［J］.韶关学院学报·社会科学，2007，（5）：162－164.

［2］杨振华，宋楚平，周建辉.视觉设计原理在网页设计中的运用［J］.南通纺织职业技术学院学报（综合版），2004，（4）：1－3.

［3］薛曼君.网页设计中的视觉传达研究［J］.科技信息，2010，（9）：360－361.

［4］E.H贡布里希.秩序感［M］.湖南：湖南科学技术出版社，2000.

［5］Barnard M.Art Design and Visual Culture［M］.London：Macmillan，1998.