网页设计之视觉传达分析

1、 网页设计之视觉传达分析严卿方(贵州财经学院 贵州贵阳 550004摘要:近几年随着网络的发展, 网页作为网络的载体, 把各种信息以快捷、方便的形式传达给受众, 在这种情况下, 逐步产生了对于网页审美的需求。人们对美感的追求是不断深入的, 网页设计同样如此。我们应从网页设计中视觉元素的功能及其审美表现的角度, 来考虑如何更有效的传达信息, 给用户留下好的印象, 提高网站的访问量, 促进网站的良好运作。关键词:网页设计; 视觉元素; 视觉传达中图分类号:J524 3文献标识码:A 文章编号:1671-444X (2009 04-0056-03 收稿日期:2009-10-11作者简介:严卿方(19

2、81-, 女, 四川重庆人, 贵州财经学院助教, 贵州大学艺术学院硕士研究生, 主要从事广告研究与教学。一、网页中对视觉元素的功能需求网络作为一种媒体形式, 综合了图形、文字、声音、动画等多种信息, 给人们提供了一个便捷的信息交流平台。网页中视觉信息的表达成为网络信息传达的重要部分。近年来, 网页的视觉表现己经从简单图、文编排的形式, 发展到多种视觉元素的综合运用。新媒介下的网页设计使视觉传达的效果焕然一新。就目前的网页设计现状来讲, 网页设计的发展还处于一个不理想的状态, 比如受宽带流量低、网页设计人员水平有限、计算机编程技术不高等因素的影响, 网页设计还处于一个以文字为主的信息交流形式,

3、而真正能吸引网民兴趣的点, 如音频、视频、图片、动画等形式没有得到充分的运用, 网页设计欠缺艺术美感, 其功能性也没有得到好的体现。截止到2005年12月31日, 我国的网民总人数为11100万人, 与上年同期调查结果相比, 我国网民总人数一年增加了1700万人, 增长率为18. 1%, 同1997年10月第一次调查结果62万网民人数相比, 现在的网民人数已是当初的179. 0倍。 ! (图1 。我国的网民总数很大, 增长速度较快, 网页发展空间仍非常大, 所以互联网在我国的发展前景非常广阔, 网页的视觉传达设计更是成为 一个不可忽视的领域。图1 中国上网人数增长表二、网页设计中的视觉传达问题

4、目前的网页设计中, 视觉信息传达的可识别性与便捷性, 己经有了一些研究成果和实践经验, 但是能够成功地吸收和应用这些成果的网页设计作品还是不多见。! CNN I C 发布第十七次中国互联网络发展状况统计报告, 中国互联网络信息中心(www. cnn ic . co m 2006-1 网页视觉表达较单一, 网页链接繁琐等, 这些因素严重阻碍网络信息的有效传播, 使信息无法有效的传达给用户, 不利于与用户之间相互沟通。 视觉效果和网页布局是有着明显差别的。网页布局受网站的信息设计结构及内容量的影响, 视觉效果则可以依靠网站性质、客户兴趣、网页设计师的个性表现得丰富多样。 1对于不同类型的网站, 设

5、计师应该明确采取什么样的手法来表现, 以达到相应的传达目的。网页设计已经不再是一种纯粹的媒介, 它已经成为一种艺术形式。目前我国网页设计有待开发, 相对来说, 国外网页设计在理论与实践上发展比较健全, 视觉的表现较和谐统一。所以, 分析网页设计中的视觉信息传达对提高网页点击率及全民审美意识有着极其重要的意义。网页设计是依据网站宗旨, 将结构、图文信息、色彩等视觉要素有机地统一在网页中, 并对网页风格等进行整体设计, 利用合理的版面元素准确、系统、有效地传达信息。网页的版式设计, 是在有限的屏幕空间上将视听多媒体元素进行有机的排列组合, 将理性思维个性化表现出来, 是一种具有个人风格和艺术特色的

6、视听传达方式。它在传达信息的同时, 也产生感官上的美感和精神上的享受。为了使网页获得最大的视觉传达功能, 使其真正成为可读性强而且新颖的互联网载体, 网页设计必须适应人们视觉流程的心理和生理特点, 确定各种视觉构成元素之间的关系和秩序, 组织好自然流畅的视觉导向。视觉元素的功能与形式美, 将直接影响到信息传达的准确与有效性。视觉元素包括图形、文字和色彩, 由于网页的虚拟空间特性, 在网页设计里视觉元素演变得更加丰富, 如动态信息、音频和视频等, 同时又可以通过 点击链接 使得页面相互跳转, 进行超链接和互动, 这些元素在信息的传递过程中不仅显示出各自的功能优势, 同时丰富了网页的视觉传达形式。

7、元素。第一, 形式与内容的统一。要求形式表现必须符合功能, 其视觉流程能自然有序地到达信息, 在网页设计中整体风格上要求同存异, 使信息传达明了, 视觉效果清晰, 层次丰富, 做到内部有机联系、外部和谐完整的美感。第二, 突出主题元素。利用视觉流程的焦点, 突出主题, 主题元素会使得浏览者的视线有始有终。以清晰、美观、整体统一的视觉效果呈现给浏览者, 使其在浏览过程中心情愉快地接收信息。人们在阅读中, 视觉有一种自然的流动习惯, 但是这种视觉的习惯又是可以被视觉元素所影响的。视觉流程的形成是由人类的视觉特性所决定的, 受生理结构限制, 人眼只能产生一个焦点, 不能同时把视线停留在两处或更多的地

8、方, 我们可以做的只有依照一定的顺序浏览观察。刘览网页虽然是一个动态的视觉流程, 平面设计中的很多规律同样适用于网页设计, 如均衡、韵律等。在图2中的上图, 正方形两条对角线相交于一个交点, 这个交点就是视觉上的焦点, 正方形中心点的吸引力要比角的顶点的吸引力大一些。 2一般来说, 我们的视觉习惯于从左向右, 从上向下看, 所以一个空白的网页给我们带来的自然视觉流程是从左上方到右下方的一个弧形曲线。在这个弧形曲线上, 视觉优势从上到下递减(图2 。在网页设计中, 要注意网格系统的应用, 来自于欧洲的网格系统能使各种信息要素合理分布并能快速排版, 在位置、间隙、大小上保持一定的节奏感和美感, 同

9、时也保持了视觉要素的统一。通过网格系统的分析, 有助于我们合理地安排网页中视觉元素的位置及分布。例如欧美网站(图3-1、图3- 2网页版式的功能, 主要是为了满足人们的实用需求, 让人与网页的互动更加顺利。这就要求做到三点:! 主次分明, 突出重点。在网页设计前期, 应该明确该网站的目的是什么, 每个网站都会有自己的终极目标, 突出自己的特色, 明确该网站应该说些什么, 怎么说。导航清晰美观, 浏览便利。导航在网页中很重要, 导航的清晰、美观决定着浏览的顺畅。在设计时应尽可能地使网站各个页面间的切换简便。#善于运用图形。网页设计中图形的运用比较常见, 这些图形引导用户查看所需信息, 有抽象与具

10、象之分, 如:网站标志、抽象图形搭配、引导按钮、文字符号等, 每一个小的形状都可以起到引导信息传递的作用, 这些图形可以归纳为网页上的点、线、面, 影响着网页的视觉审美。在网页设计中,图 2要仔细分析这些图形元素的大小、位置、色彩层次, 统一风格, 求同存异。好的版图3-2(主页图3-1(首页 四周留白, 中心位置成为视觉的焦点, 使所要表达的信息更为鲜明, 强烈。而图3-2(主页 根据人们阅读材料时的习惯, 按照从左到右, 从上到下的顺序进行。浏览者的眼睛首先看到的是页面的左上角, 然后逐渐往下看。该主页根据这一习惯, 设计时将公司的重要信息 标志 放到左上角的位置, 然后按重要性依次放置其

11、他的内容。图3-1(首页 和图3-2(主页 使网站整体形象统一, 风格一致, 通过重复的视觉刺激给浏览者留下深刻而统一的网站印象。图3-1(首页 四、网页中的版式功能与审美三、网页设计中的视觉规律遵守网页设计的视觉规律, 可以提高网页的视觉传达力。网页设计的视觉原则包括:形式与内容的统一, 突出主题57 式设计能根据网页创意, 进行创造性的精心编排和设计, 最终以优异的视觉构成形态, 形成格调优美、韵味十足的良好视觉效果, 瞬间扑捉浏览者的目光, 给人留下深刻的印象。息, 整个页面风格显得较正式, 由于不受大量广告的影响, 结构清晰, 视觉元素没有太多的装饰。这些网站页面视觉简单、明了, 形式

12、上具有严肃感, 增加了内容的可信度。但形式感不够丰富, 容易视觉疲劳, 飘动窗口扰乱视线, 要谨慎使用。限制而提出的设计解决方案, 但是在使用这些技术的同时, 我们首先需要注意尽量使网页简洁。首先检查一下网页在HTM L 文件的构造上是否过于复杂。因为简洁的HTM L 文件所构成的网页可以使浏览器更快地完成各种数据的读取工作, 尽量使用简洁的表格设计。保证图像质量的同时减小图像文件。二、综合高效地运用多媒体技术。多媒体, 多种媒介传播载体, 如平面印刷、网络、电视、电影、手机、商务通等, 是全面的、综合性的信息资源。其基本特征是具有美观大方的页面版式、生动逼真的音画效果, 色彩和谐的动态视频、

13、灵活便捷的交互手五、不同类型网站网页视觉元素的功能与审美网站的类型是根据网站的服务来定性的, 可以分为公共服务、教育与学习、资源分享、商业运行以及个人网站等等, 不同类型网页设计元素的功能与审美都是不同的, 比如在结构的安排、颜色的运用、图像与文字的设置上有着差别。根据网站主题设定视觉元素的不同表现, 将各自的功能与形式在网页里面统一起来。(1 商业网站。从最基本的功能来分析是为了商品交易而制作的。如图4, 上海商情网站页面, 在结构的安排上比较单调, 注重产品的介绍和购买顺序。信息内容上安排的比较紧, 色彩的运用比较单一和死板, 没有层次变化, 尽管整个页面安排有秩序, 但视觉表现上显得很单

14、调, 文字内容过于繁多。图5(3 个人网站。个人网站无论从结构、色彩、文字的编排上, 还是其它视觉元素的表现上都具有极强的个性风格, 主要表现个人信息。如图6的个人网站页面, 结构没有固定的模式, 色彩的使用鲜亮明快, 图形变化多样, 页面中视觉元素 的组合很有视觉感染力。段。用户不仅可以通过文字信息, 还可以通过看到的影像和听到的声音来了解感兴趣的对象, 参与或改变信息的演示。三、增加互动性。互动性能够充分调动人的参与性, 在网络的环境下人从被动发展到主动, 从而充分实现每个人的个性化需求。在网页中信息通过特别的信息导航, 使用户能够从中得到更深层次的了解和接受, 从而更快地做出决定。比如在

15、互动三维广告中, 消费者与虚拟产品或虚拟环境交互时能够产生逼真现场感, 这种现场感能增强消费者的认知, 改变消费者的心理及行为, 这在单一的HTM L 环境下是不可能实现的。图6参考文献:1韩崔美善. 马晓阳、刘娟译. 设计师谈网页视觉特效M.北京:电子工业出版社, 2006. P022美鲁道夫阿恩海姆. 腾守尧、朱疆源译. 艺术与视知觉M.成都:四川人民出版社, 2005. P6图4(2 公共服务网站。比较常见的如政府机构的一些网站。例如图5, 这样的网站信息量比较多, 多为新闻及宣传信六、提高网页设计中视觉信息传达有效性的方法一、处理好网页效果与速度的矛盾关系。现在有许多针对网页传送速度的

16、An Analysis of V isual Trans m issi on i nW ebpage DesignYANG Q ing fang(GuizhouC ollege o f F inance and E cono m ics , Guiyang, Guizhou, 550004, Ch i n aAbst ract :In recent years , w ith the rapid developm ent of the I nterne, t w ebpage , as a carrier of the ne t w ork , qu ickl y and convenient

17、ly convey various i n fo r m ation to the audience . So people gradually creat an aesthetic de m and o f the w ebpage . Peop le %s pursu it o f aesthetic feeli n g is constantly pro m o ted , and the sa m e is tr ue ofw ebpage design . Fro m the v i e w po i n t o f the function o f v isual ele m ents and aest h etic expression , the designers shou l d consider ho w to tr