（设计艺术学专业论文）商用网页视觉设计的现状及对策.pdf

摘要 本课题的研究意义在于通过对网页视觉设计的研究有效的提高网站 的商业价值，从而最大限度的服务于用户。 本课题在研究方法上主要采用文献法、调查法和比较法。在开展一 定规模的实例调查的同时，采用个体研究和实例剖析的方法，进行大类 别以及个案的质的研究，使讲例真实、生动、丰富，提高研究结果的信 度和效度。 在调查设计方面，本课题重点选择目前主流商用网页设计的几大类 别作为调查研究基础，选择典型商用网页为对象，同时兼顾上用网页设 计中一些个案开展调查研究。 关键词：视觉设计商用网页用户 a b s t r a c t t h i st h e s i st a l k sa b o u tt h er e s e a r c ho nh o wt oe n h a n c eaw e b s l t e s c o m m e r c i a lv a l u et h r o u g hv i s u a ld e s i g nf o rt h ew e b s o 弱t om a x i m i z ei t s s e r v i c et ot h eu s e l 8 t h et h e s i su s e sl i t e r a t u r e ，i n v e s t i g a t i o na n dc o m p a r i s o nm e t h o d s h i l e c a r r y i n go u tc e r t a i np r a c t i c a li n v e s t i g a t i o n ，i n d i v i d u a ls t u d y a n de x a m p l e a n a l y s i sa r ea d o p t e di nt h er e s e a r c h ，w h i c hm a k e st h ee x a m p l e sr e a l ，v i v i d a n dr i c h ，a n di m p r o v e st h er e l i a b i l i t ya n dv a l i d i t yo ft h er e s u l t so ft h es t u d y i ns u r v e yd e s i g n ，t h et h e s i sc h o o s e st of o c u so ns e v e r a lm a j o rc a t e g o r i e s ， w h i c ha r ea d o p t e di nm a i n s t r e a mc o m m e r c i a lw e bd e s i g n ，a st h er e s e a r c h f o u n d a t i o n ，s e t st y p i c a lc o m m e r c i a lw e b sa st a r g e t s ，a n dd o e sr e s e a r c ho n s o m em a r g i n a l ，a l t e r n a t i v ea n df u z z yc o n c e p te x a m p l e s k e yw o r d s ：v i s u a ld e s i g nc o m m e r c i a lw e bu s e r 独创性声明 本人声明所呈交的学位论文是本人在导师指导下取得的研究成果。 本人声明：论文中除了特别加以标注和致谢的地方外，不包含其他人和 其它机构已经发表或者撰写过的研究成果。对前人及其他人员对本文的 启发和贡献已在论文中作出了明确的声明，并表示了谢意。 学位论文作者签名：摩蕴签字日期：豳哕年月日 学位论文使用授权书 本学位论文作者完全了解吉林艺术学院有关保留、使用学位论文的 规定，即吉林艺术学院有权保留并向有关部门或机构送交论文或者电子 版，允许论文被查阅和借阅；本人授权吉林艺术学院可以将本人学位论 文的全部或者部分内容编入有关数据库进行检索，可以采用影印、缩印 或者其它复制手段保存、汇编学位论文。 ( 保密论文在解密后应遵守此规定) 。 作者签名： 签字日期：妙叼年月严日 引言 网页作为一种新的信息载体，在视觉设计方面即兼容了传统的视觉传达设计的 特征，又具备其所不具备的诸多优势。发展虽然时间不长，却成为当今世界信息交 流和传播的一个非常重要的途径。 网页是依附于网站而存在的，网页是网站的可视主体。从类型上，我们可以将 现有的网站划分为个人网站和商用网站两大基本类型；在功能上，我们又可将其划 分为偏向个人兴趣，不以盈利为第一目的个人网站、以展示企业形象和资料为主要 目的企业网站和以盈利为第一目的商业网站。就商用网站为例，我们还可进一步将 其划分为企业网站，门户网站，电子商务网站等诸多类型，各种类型的网站在其网 页的视觉设计方面因其要求和目的不同也是区别甚多。本文中将重点从商用网页视 觉设计的角度出发，通过对其现状的阐述与分析来展望商用网页视觉设计的未来发 展方向。 第一章商用网页视觉设计的现状 第一节当今商用网页视觉设计存在的问题 好的网页设计排除内容方面，摆在第一位的就是对其视觉元素的编排与设计。 美是任何网页所必需具备的基本因素，网页信息不仅是为了满足使用者的需求，更 重要的是创造一种愉悦的视觉环境，使大家在满足功能需求的同时，有一种全身心 的享受与共鸣，这也是网页视觉设计的基本准则。 “商用网页设计”顾名思义就是区别于个人网页的，以商业成分为主导，目的 性明确的一种网页设计形式。商用网站通常把功能性放在第一位。无论是推销某种 产品，还是塑造一个品牌形象又或者提供某个领域的资讯或服务，商用网站的功能 性都将成为其长期存在的目的和意义。 但我们纵观当前商用网页设计现状，各种问题就暴露出来，轻则影响其功能和 影响度，重则直接导致其生命周期缩短，无法完成其因有的使命。以下将直接从视 觉设计的角度就目前商用网页的各种常见问题一一作出分析。 一、用色方面的问题 浏览者在浏览网页时，留下的第一印象就是页面的色彩设计，它的好坏直接影响 阅读者的观赏兴趣。因此，色彩设计在网页设计中居于十分重要的地位。而由于缺 乏专业人才涉入、行业内部混乱等诸多原因，目前国内商用网站的页面设计在用色 方面有普遍存在很大的问题。以国内大多数中小型门户类网站主页为例，普遍存在 整体配色与风格的不一致、颜色的表达缺乏协调性、颜色数量过多、缺乏统一的风 格等诸多问题。 图1 一i 2 如图1 - 11 所示，显而易见，这张网页在用色方面最大的问题就在于用色的协调性方 面，严重失衡的配色比例，和大面积的互补色成为该网页为浏览者带来视觉反感的 主要因素。 而图1 - 2 所示的问题则主要表现在颜色数量过多、缺乏主体、颜色布局混乱这 三个方面。这绝对不是个例，我们甚至可以在不少企业网站的页面上发现类似的问 题。 圈1 - 2 商用网站的第一功用就是直接面对顾客，强调的是营造一种氛围，首要目的就 是尽可能的吸引浏览者的眼球，尽可能多的占用他的兴趣时间来达到网站所有者赋 予网站的各种目的。这就好比处于虚拟城市中的某位消费者想要购买一间商品或需 要查找某种特定的信息，网站拥有者就是某间商厦的业主。而当这位消费者进入这 间虚拟商场之前，他对其的期待一定是店面装潢讲究的布置。但当他进入某些在色 彩布局和搭配出现严重问题的页面的时候，就如同进入了一家次序混乱的商场。混 乱的色彩就如同一群素质低下、毫无顾忌向其围攻的生意人，向他兜售他们的产品， 四周嘈杂一片，商场乱作一团，更为严重的是，过多的动画和图片甚至可能导致为 1 图卜1 来自w w w f l a s h 8 n e t 3 了找到他所需要的物品和等待售货员找他需要的尺码等了一个世纪! 而最终他看到 的是一个红叉。至此，他轻松的心情全被懊恼占据，最大的愿望就是赶快从这家商 场逃走，并发誓再也不要进入这样的商场了! 但是，强烈的需求促使他又进入另一个店面装潢另他感觉舒服一些的商场，随 着他的进入，一阵轻柔的音乐便围绕在你的周围，她不仅驱走了他所有的坏心情， 更重要的是商场中充满了阳光、微笑，布局井井有条，售货员面带微笑，当他走过 她们身边时，她们向他频频点头，你需要的时候，她们仔细向他介绍。重要的是， 没有了周围的嘈杂，令他有时间自己思考，你被这种特定的氛围所感染，从而轻松 地做出了他的决定。第一家“店铺”自然也顺理成章的因为配色方面的种种问题永 远的失去了那位顾客。 二、文字的编排设计方面的问题 文字作为信息传达的主要手段是网页设计的主体，文字是网页中必不可少的元 素，也是网页中的主要的信息要素。文字在信息繁多，在市场多变的商业社会中显 得日益重要2 商用网页中的文字部分通常将占据不小的比例，文字表现的好与坏将影 响到整个网页的视觉质量。网页文字的主要功能是传达各种信息，网页设计者的任 务就是在保证其功能性的同时最大限度的提升其视觉美感。为达到该目的，首先则 必须考虑文字编辑的整体效果，完成其功能与可视性的有效统一。而现实的状况却 是不少网页设计者把刻意的版式放到了第一位，忘记了文字本身是传达内容和表达 信息的主题。导致页面繁杂零乱，无法为浏览者提供清晰明确的视觉印象；过多不 必要的装饰变化，常常使人难认、难懂、难读。 由于计算机给我们提供了大量可供选择的字体，导致字体的变化趋于多样化。 这既为网页编辑提供了方便，同时也对编排与设计的选择能力提出了考验。虽然可 供选择的字体很多，但在同一网页上，使用几种字体尚需精心编辑和考虑。一般来 讲，同一页面上使用的字体种类最多只能有三四种。由于文本字体的显示是需要本 地硬盘字体文件的支持的，所以在互联网上使用过多的字体是没有意义的。文字在 2 无锡轻工大学设计学院设计与创新河南美术出版社2 0 0 0 年1 0 月第一版第2 2 8 页 4 视觉传达中作为页面的形象要素之一，除了表意以外，还具有传达感情的功能，因 而必须具有视觉上的美感，能给人以美好印象，获得良好的心理反应。而当前的不 少商用网页在字体运用上恰恰存在滥用、乱用等问题，使得丰富的字体选择反而成 为了网页在视觉表现上的一大障碍。 网页文字编排与运用，重要的一点在于要服从信息内容的性质及特点的要求， 其风格要与内容特性相吻合，而不是相脱离，更不能相互冲突。但有些企业用网页 的文字设计没有庄重和规范的特质，字体造型繁琐无序，无法给人以简洁大方的视 觉印象；还有休闲旅游类内容网页，文字编辑没有欢快轻盈的风格，字体生硬呆板， 完全没有此类网页应该具备的生动活泼、跳跃明快、节奏鲜明的特色，自然也无法 为浏然者带来生机盎然的视觉感受。我们还经常可以发现一些企业网站页面中的正 文字体没有进行任何优化处理 图1 3 如图卜3 所示，“顶尖医药科技结晶”这几个字显然没有进行优化处理，没有考虑 整体效果，虽然粗旷的字体的确更加容易识别，但整体网页的布局被这些粗大的字 体扰乱，网页的整体视觉效果和视觉协调性就这样被完全破坏掉。 其实字体本身都是有表情的，它会把某种特性带入你的设计中来。不管是按钮、 标题、图片、文字，只要运用了字体，都要考虑适宜性。现在很多英文站点都运用 5 了0 4 0 8 号字体，它可以在6 号字的情况下，显示非常清楚。但是这类像素式的字 体本身有一种高科技感和窒息感。它实在太小了。运用起来虽有一定好处，但是不 代表它适合一切网站。因此在尝试新字体同时也必须注意一些问题a 首先应该看看字体本身的特性和页面是否协调，如果是儿童类，女性类，或随 意型的站点，可以使用手写体、卡通的、草体的。如果是游戏类，或桌面类站点， 则可以使用视觉冲击力很强的字体。另外在字体的搭配上，同页面不要使用超过三 种字体。字体编排时也必须要疏密得当，不可有窒息感。而以上这些细节却恰恰常 常被一些网页设计者所忽略。 中文字体的运用方面。我们则可以常常看到这样的问题，一些网页设计者看到 一个好的英文站点，就照搬过来换为中文，却非常难看。这是由于中文体积大，且 使用宋体过多会妨碍感情表现。 对于中文字体本身的运用上，也如英文字体一样，首先要考虑的就是中文字体 的个性情感问题。方正字体、文鼎字体、还有经典字体，都是很不错的字体，当前 的某些设计者却常常因为缺乏细心的体会和实践应用而忽略了很多优秀的中文字 体。另外有些中文字体很适合做标题或l o g o 中的标准字，比如：综艺体。我们却可 以发现很多设计者却偏好彩云体和琥珀体，虽然好看，但实在太大了，常常破坏页 面整体版面的视觉布局。 三、图片的编排设计方面的问题 图片是文字以外最早引入到网络中的多媒体对象。网络可以图文并茂地向用户 提供信息，成倍地加大了它所提供的信息量。而且图片的引入也大大美化了网络页 面。要使网页在纯文本基础上变得更有趣味，最为简捷省力的办法就是使用图片。 对于一条信息来说，图片对受众吸引也远远超过单纯的文字。因此图片的合理运用 在网页设计中有举足轻重的作用。可现实的情况是，我们通常接触的商用网页在图 片的编排和设计方面仍然普遍存在一些问题。 首先就是对于图片的处理手法过于简单、缺乏设计思想：图像方方正正，基本 上看不出如何经过处理；不讲究图片与文字的互补搭配；图片处理过暗，图片上文 6 字模糊不清；图片孤立，与周围内容缺乏统一；用色怪异，图片颜色随意，有的只 是随便找些图片再经过高度和宽度的变形，图片处理缺乏处理深度和细度；背景与 前景文字缺乏明度对比，复杂的背景图像掩盖了前景文字的内容，给人的感觉是网 站乱成一片出现这些问题的关键是设计者思路的问题，他们并没有意识到网页 中的图片的实际作用，他们往往认为图片只是为了点缀，其实，网页中图片的真正 意义在于深化网站的思想，反映网站的统一形象，加深浏览者对网站形象的记忆， 并使他们更快速掌握网站的内容。因此，网站图片一定要少而精，不必要的、与企 业或网站形象不符的图片一定要去掉 在图片的存储方式和存储格式方面也经常可以看到一些问题。不正确的储存方 式和图片格式导致图像色彩失真、字节过大：浏览国内企业网站，经常会看到这些 情景：图片局部色彩出现焦糊的感觉，本来应该是单色的地方出现杂色，给人一种 很不专业的感觉。 再有就是图片过多、过滥：以企业网站为例，对于中小企业网站而言，往往是 首页要突出设计，内容很少，有的只是象征性的图像。而问题却恰恰常常出现在首 页上。很多企业网站的首页使用的大量的图片，有的甚至整页都是图片切割而成， 如果是传统媒体设计或是局域网，我们无可挑剔，但如果是在宽带接入没有普及以 前建议最好简洁一些，图片少些，设计思想多些，否则色彩淡些，目的无非只有一 个：加快网页下载速度，别让浏览者望穿秋水i 四、整体风格和版式方面的问题 前几年网页设计专业的火爆直接导致当前网页设计人才过剩，进而造成网页设 计从业者水准参差不齐。于是大多数网页设计者就在一个低层次的水平上重复。同 时由于大家的相互借鉴抄袭，使得不少商用网页的页面布局形成了某种约定俗成的 局面。网页作为新的媒体，本应该是一块充满活力和朝气的领域，却因为这些现象 的存在，把一些传统设计中，不好的东西原封不动的保留了下来。这些负面效应自 然在某种程度上限制了设计师的发挥，从而造成了大量商用网页设计在整体风格和 版式方面出现了种种弊端和不足。 7 当前很多商用网页都具备一个特点，那就是“塞”! 各种信息诸如文字、图片、 动画等网页元素常常被设计者不加考虑的塞到页面上，有多少挤多少，缺乏规范化， 条理化，更谈不上艺术处理了。页面五花八门，不分主次，没有很好的归类，自然 难以让浏览者找到自己需要的信息，更谈不上效率了。这种网页没有考虑采用一种 美的形式来使页面上的信息以更整体性的方式来体现。所以这种网页的设计含量是 相当低的。不仅仅从功能上分析。从审美上看，这种页面太满、太窄，没有给读者 一点空问，所以毫无美感可言。( 如图卜4 ) 图1 4 另一个问题就是页面显得很过于花哨，这类网站也有不少，显然这多是一些不 懂设计的人制作的。他们把页面做得看似“琳琅满目”，却非常不实用。例如采用很 深的带有花哨图案的图片作为背景，严重干扰了浏览者的主观视觉感受，进而影响 其正常的浏览，使其在信息的阅取方面也变得相对困难。还有些页面大量采用颜色 各异，风格不同的图片、文字、动画。使页面五彩缤纷。没有整体感觉，尽管有些 商用网页的页面信息承载量并不大，但是浏览起来仍然特别困难。这种过度的“包 装”甚至不如不加任何装饰的页面，起码纯粹的文字还不至于损害其基本的功能和 需求。所以这种网页属于粗制滥造的次品，是对自己的受众不负责任的表现。或许 8 设计者的初衷本是想把自己的页面做的尽可能的漂亮，结果却是适得其反。这也正 是网页设计的大忌之一。其实，现在设计的美感，体现在整形分量节奏和韵律上3 我 们可以把网页设计的简约，大气一点! 再有就是目前商用网页视觉设计中普遍存在的一个问题：千篇一律，缺乏自身 的特色。从标题的放置，按钮的编排到动画的采用均是如此。用色随心所欲，只要 能区分开文本和背景就达到目的。造成这种原因就是网页设计师本身的原因，他们 没有充分的利用自己在设计方面得专业知识，分析自己网站的优势，发挥自己的网 站的特点，而是采用的走捷径的方式，就是用大众化的方法去做，做起来当然很容 易，但是失去了自己特点的网页就像流水线上下来的产品，好像随便看哪一个都一 样，其存在的价值自然也大打折扣了。这也正是缺乏职业道德的设计师对浏览着和 自己不负责任的表现。这些负面的现象也必然会迅速淹没网站的生命力。 还有一类站点的网页就是一种纯粹的技术集合，在这种网页上，充斥着许多纯 粹为了炫耀技术的东西，如刻意添加的一些缺乏美感甚至是与主体无关的动画；又 或者大量利用动态的技术，却始终没有把握住页面的主题和中心，造成与实际内容 的严重脱节。因此虽然完成这些网页的人很多都是技术上的高手。其结果也只是让 人羡慕技术之外毫无收获。这样的网页也是不适合于需要的，设计者对技术的盲目 崇拜让它们甚至忽略了商用网页的存在意义，这是商用网页设计的严重失败。某些 极端的例子甚至可以说毫无任何设计成份可言。更为严重的是大量的采用这种技术 或者动画，造成一些浏览者由于受带宽的限制而严重影响到浏览速度，最终放弃浏 览。其结果必然是整个网站无论从功能还是形式上都彻底失败。 第二节商用网页视觉设计的发展趋势 商用网站在网页设计方面所存在的种种问题必将直接影响到网站的专业性，功能 性，甚至对企业形象和网站利益关联者造成直接的负面影响。 绎彬彬设计心理学中国轻工业出版社2 0 0 1 年3 月第1 版第1 3 7 页 9 从当前商用网站的大量运用和每年呈几何数字的增长值，我们可以看到商用网站 的社会需求量正在与同俱增。互联网相关知识的逐渐普及也使得商家对于网站设计 的要求与i t 逐渐。从最初的单纯功能型到后来的多媒体声光影图文并茂，再到今天 的专业化，商用网页设计行业也开始在其年轻的生命中逐渐呈现出自身越来越清晰 的发展趋势。 一、个性化趋势 电脑硬件性能的不断提升为商界带来了前所未有的速度一商业操作的速度和 变化速度。例如人们从此可以通过直邮和视频电话与客户取得联系。这一切都为商 用网页设计带来了前所未有的挑战。当前，这就要求设计者不仅要跟上美学的发展， 还必须跟上科技的进步，而作为商用网页设计师，更重要的一点就是了解客户的需 求，在完成其需求的同时尽可能的把其作品的特色从千万类似的作品中放大出来。 随着周围标识语的不断增多，设计者要重新去适应不熟悉的新领域，在科技带来的 种种压力下，网页设计中视觉设计的行业似乎有渐渐衰落的可能。但事实恰恰相反， 商业界提出的新挑战不仅加强了视觉设计的重要性，还提高了视觉设计的潜在能力。 当商用网页走向程式化，专业化之后，其视觉设计在创意方面对个性化的需求也随 之显现出来。 每个行业均有其独特的设计风格，为了推广一个品牌，需要的是能够打动人心 的个性化设计。无论是平面的设计，还是多媒体技术的运用，如今的市场都强调独 一无二的效果。在国外的商用网站设计中，这已经成为了一项普遍的需求。个性片 头动画的设计与创意、充满个性而大胆的首页设计与制作、个性化图片效果的制作， 网页视觉设计师通过对设计文字，版式等视觉设计元素的重新组构，在演变中寻找 个性，倡导设计风格。 二、时空化趋势 如今，商用网页设计所处的地位己与从前已大不相同。而在观看方式方面，无 论是通过眼睛还是用鼠标去点击，深入设计空间的方式也不同了，科技进步和全球 信息化，从某种程度上缩短了时空差，人的想象随着时空概念的变化而延伸，网页 1 0 设计也逐步从二维向三维空间延展，设计中的时空化与科技化为我们展现出丰富的 空间符号。 宇宙之外的奥秘，天际星体的存在。东、西方空间想象因式，设计图象的叠加、 透视、错位、渐变等仿佛将我们带到立体思维的大空间。在视觉空间上创造失控景 观，以网页设计的版式为例，传统设计者在同样字体的版面内往往通过改变大标题 和副标题的行列来突出文章要点，用字体的大小及其外形来区分大小标题，而不是 把大标题中的所有文字都列在一起，并将它们与大小标题分开。而现在，我们可以 看到以各种各样方式排列的标题：有的位于页面的边缘，有的斜掠过整整一页或横 贯两页，有的竖立在文章的旁边，还有的紧靠甚至是陷入正文里面，这些排列无疑 会使版面给人一种立体感。在平面设计者跨外，重点内容的突出方式也发生了改变。 以网页的标题为例：设计者不再把整个标题制造得比正文字体大，相反，标题 中文字的大小可有多种不同。设计者打破的这种设计规则，使他们可以以任何一种 自认为恰当的新样式来设计一行行的文字，通过这样的设计，文字图形便形象生动 的跳跃在页面上，这种视觉动态感觉是商用网页设计的又一趋势。 三、人性化设计趋势 究竟什么是人性化设计呢? 专家指出：人性化就是指设计师在完成其设计作品 的过程中力求从人体工程学、生态学和美学等角度达到完美，从而真正实现科技以 人为本的目的。在行将进入2 1 世纪的今天，人性化设计思想将是2 1 世纪商用设计 的主题。年轻人购买商品是为了张扬个性和焕发蓬勃的青春活力；年壮者是为了填 补青春已逝的失落和展示成熟与自我成就感；年老者则怀着一股怀旧感和饱经沧桑 的平静感。所有设计其实都是以人为本，围绕人的需要展开的。网页设计也不例外， 能否刺激用户的消费观念曾经成为现代商用平面设计的设计准则。 人性化很大程度上和可用性设计紧密联系在一起，或者说人性化设计就是可用 性设计的一个思路和原则。以门户站为例，随着门户网站在数量上的不断增多，浏 览者对其需求也开始从最初单纯追求大而全慢慢融入对其人性化设计方面的考虑。 网站规划是否清晰? 菜单设置是否明确? 页面信息是否完整? 导航设置是否合理? 等等，可以说人性化的设计已经网站的拥有者面对大众的窗口，同时也是其实力的 体现。大部分好的商家懂得用相对高昂的代价尽可能的提高其“门户”的可用性。 这也正是一线企业与z - - 流企业最大的区别所在。人性化设计往往是一些小的创意 和安排，却往往会给用户带来极大的方便。可以预见，人性化设计是未来商用网页 设计的必然趋势和最终归宿。 第二章寻求全新的商用网页视觉设计法则 从小众领域到实际商业应用，从满足基本的功能需要到追求美的较为高层次的需 要，这是一个循序渐进的过程。这使人不由得想起工业革命前夕，很多现代的产品 那时候都没有，没有现成的模样可以参照，产品的设计都是满足基本的功能需要出 发，所以做出来的产品非常粗糙，冷冰冰的，毫无生气。由于商业竞争和工业化大 生产的结果，使得人们不断的改进产品的功能，更为重要的是改进产品的外观，是 产品更符合美的需要和使用方便。从而使今天货架上出现了琳琅满目的漂亮的产品。 网页设计同样如此，在满足了基本的功能的要求之后，为了突出自己的特色，突 出自己的优势，设计师有义务，也必须去积极寻求全新的视觉传达法则。 第一节合理地运用色彩更好地传达信息 网页在一定意义上说也是一种艺术品，既要求文字的优美流畅，又要求页面的 新颖、整洁。而色彩，是最先也是最持久地给浏览者以网站形象的因素，它可以为 浏览者带来强烈的视觉冲击，不仅能使页面变得更加生动还能对浏览着起到相当的 视觉引导作用。因此色彩和谐的重要性对于商用网页设计的重要性自然是不可替代 的。 商用网页通常主题明确，因此设计者在设计一个商用网站之前，首先应该考虑 的就应该是整个页面的色彩选择。确定一个主色调，可以有利于体现网站主题。以 浅颜色为底，柔和、素淡，配上深颜色的字，如黑色，读来自然、流畅，也有利于 突出页面的重点，更容易为大多数人认可和掌握。其他一些次要内容，如背景图片、 线条适宜采用不抢眼的颜色，以免喧宾夺主。只有少量精心选择的元素，为了突出 强调的需要，才采用明亮的色彩，这些彩色亮点就会产生强烈的视觉冲击，但如果 用得太多了，就会形成一种均匀的噪声，而达不到强调的效果。 其次，在背景的色调搭配上也不宜采用强烈的对比，特别是同时使用色彩对立 的颜色。大面积颜色适宜采用低比度，因为过于丰富的背景色彩会影响前景图片和 文字的取色，严重时会使文字溶于背景中，不易辨识。所以，背景一般应以单纯为 宜。如果需要一定的变化以增加背景的厚度，也应是在尽量统一的前提下的一种变 化。例如在制用标题时，为追求醒目的视觉效果，可用比较深的颜色，配上对比鲜 明的字体。实际上背景的作用主要在于统一整个网页的风格和情调，对视觉的主体 起到一定的衬托和协调作用，一方面吸引浏览者的注意力，另一方面有助于网站主 题的表达。( 见图2 - 1 ) 圈2 - i 下面是几例配色恰当的实例。 下面的网站多使用大面积浅灰度和白色，以衬托l o g o 和配图的色彩鲜艳，配以 高明度小小色块( 如导航处) 。因为结构构图简单，细节方面一定要讲究，不适宜 有过于复杂的l o g o 和点缀出现。( 见图2 - 2 ) 图2 2 一般此类风格背景如果是彩色，都会是低纯度低亮度彩色，以反衬主题图片和 l o g o 。在大面积背景压住的情况下，图片明度越高越好。画面应该有一个主色调。 注意左下角的l o g o ，有意与背景色调相同，以免抢了视觉中心。很多人容易忽视这 个问题。( 见图2 - 3 ) 1 4 图2 - 3 灰黑色块的使用使画面结构清晰，而且不会花。小块的绿与红被灰色白色压住， 是色彩鲜明，有对比，但是不刺眼。( 见图2 4 ) 图2 _ 4 经验丰富的设计师，往往能借助色彩的合理运用引起浏览者心理上的联想，从 而达到信息传达和引导的目的。网页设计者应合理地运用色彩，了解色彩的特性、 象征及色彩之间的对比效果等色彩的基本知识，给浏览者舒适、深刻的印象，更好 地传达各种商业信息。 第二节合理经营点、线、面的关系 网页设计同传统平面媒体有类似之处，但网页的排版与书籍杂志的排版又有很 多差异。印刷品都有固定的规格尺寸，网页则不然，它的尺寸是由读者来控制的。 这使网页设计者不能精确控制页面上每个元素的尺寸和位置。这给网页的版式设计 带来了一定的难度。这就要求设计者在构思版面安排的时候必须到位、准确，不能 影响对信息内容传达的有效性，更不能产生误导。 网页布局的创意设计包括图像的分布及色彩与空白的经营。不仅追求网页形式 的变化，更重视各视觉元素不同的形式构成给人造成的不同心理感受，并体现不同 的主题。网页同其他出版物如报纸、杂志等在设计上有许多共同之处，也要遵循一 些平面设计的要素。因此，熟悉一些平面设计的要素，再对网络的特殊性做一些考 虑，便不难设计出美观大方的页面来。利用点、线、面网页布局的设计，从某个意 义上讲是经营点、线、面。当内容或形态庞杂时，必须把其简化成点、线、面；当 形态朦胧时，必须有意识地“造”出点、线、面来。( 图2 5 、图2 6 ) 图2 - 5 图2 - 6 1 7 图2 7 所呈现的则是一个典型的小型企业网站，设计者使用曲线与直线的结合，蓝 灰色主色，画面沉静而不脏，这里的色彩难度很高，需要细心调试，色块分割，简 单明了，内容主体一目了然 图2 7 下面是一个功能型网站( 见图2 - 8 ) ，页面设置非常简单，但由于阴影效果的合 理运用，成功的分割出画面的主体空间，实现了视觉和内容在层次上的完美结合与 统一。这种具备强烈立体视觉效果的设计风格也与微软的下一代操作系统w i n d o w s v i s t a 的美术风格不谋而合。 图2 - 8 “点”在几何学里，点只有位置而无大小，是线的开端和终结或两线相交处。 点是一种抽象的概念。而造型意义上的点必须有其可视的形象存在，点是具有空间 位置的视觉单位。在网页平面设计中，点可以是一个字，一个图标，也可以是任意 一点，如小圆点、小三角、小方块、小饰花。点在画面的空间中具有一种张力作用， 并且点自身的形状也可以起到活跃版面的作用。点在网页布局的设计构成中发挥着 重要的作用，其形态、大小、位置的不同，都会使人产生不同的视觉联想和感受。 它不仅起着活跃、平衡、稳定、丰富画面的作用，而且在视觉上产生心理张力，导 引视觉流向。“线”在几何学的定义里只有位置、长度，而无宽度和厚度。它是点 进行移动的轨迹，并且是一切面的边缘和面与面的交界。在造型中，线比点具有更 强的感情性格，一般来说它取决于线的方向、曲直、粗细等方面的差异及排列组合 的变化。在设计时，线具有连接、分割、平衡的作用。线的粗细不同，曲直形态不 同，方向不同，都会产生不同的视觉感受和联想。直线简明醒目，曲线优雅抒情， 虚线温柔含蓄，曲折线则可以同时具有直线和曲线的特性。而“面”则是线的重复 平行排列，线的运动轨迹形成面。面有长度、宽度而无厚度( 高、深度) 。它的形状 丰富多变，有方形、圆形、三角形、多边形、多角形和不规则型( 由自由弧线、直线 随意运动闭合所构成的形状) 。面还可以是无数点的密集，也可以是数行字的重复。 规则轮廓线的面较严肃，无规则轮廓线的面较活泼、浪漫、富有趣味。圆弧形或曲 线形柔和而圆满，有一种女性的柔美并富于人情味；方形或直线形，有一种安定和 秩序的感觉；正三角形似金字塔、纪念碑式永恒，趋向稳定；倒三角形则蕴含着一 种变化和动荡。 图2 - 9 上图的实例中作者则非常注意细节图案的使用，细直线条与箭头、方块、圆点 都运用合理，每个元素的存在都要有理由。使画面看起来结构清晰又不失去生动有 趣。( 见图2 9 ) 设计者在视觉要素安排过程中必须把文字、图像、色彩进行合理的组合与布局， 才能有效地传达信息。而在设计中以点、线、面的形式，在平面上占有空间，精心 安排构建出各种各样的版型，才能在传达信息过程中最大程度的达到美化页面的目 的。 第三节创造空间感 网页的版面设计可以在二维空间关系中营造出一种具有三维效果的空间关系。 这里所谓的三维空间，指的是各种形状在视觉上能让人产生一种具有远、中、近不 同空间层次的感觉。这也是时下软件界面美术风格呈现出来的一大流行趋势。色彩 的对比是体现空间进深的有效手段。4 所以我们可以用色彩对比来解决空间问题。 页面原是一片空白，当一行标题、一些文字或一个图形以不同的视觉形状出现在画 面上时，就形成了图与底、形与形的上下前后的空间感觉。而这种空间感觉随着形 状蕴含的内容的不同而有所区别。空间留白是为了集中视觉，以突出文字和图形， 正确而巧妙地运用空白，常常能得到“此时无声胜有声”的意境，善于运用空白是 增强视觉传达的有效手段。没有空白，单词和字母会显得拥挤，从而降低了页面的 可读性，在行间和段落之间使用空白可以给读者的眼睛提供休息的机会。同时，空 白也是分隔段落、图形和页面上其他元素的最有效的手段。空白还可以保持页面的 平衡，建立几个元素在空间上的关系，以便于读者理解它们之间的相关性，引导读 者的阅读等。 第四节营造节奏和韵律 节奏在视觉艺术中是通过线条、色彩、形体、方向等因素有规律地运动变化而 引起人的心理感受。节奏是规律性的重复5 所谓节奏要有一定的秩序性、规律性。因 张福吕著室内设计表现技法中国轻工业出版社1 9 9 7 年9 月第1 版第4 1 页 5 柒万里著图案设计广西美术出版社2 0 0 6 年第一版第1 1 页 排。韵律是均匀的不简单的重复，它按照一定的比例，有规则地递增或递减，产生 一种有秩序的变化，一种韵律编排。节奏和韵律在页面布局设计上合理运用，达到 图与图的停顿、间歇、渐次分布，主体与单元的疏密断续、起伏的规律变化。 既然是商用网页设计，首先就应当从使用的便利性和良好的视觉效果两方面考 虑。同一网站各页面保持一定的设计风格及信息的连贯性。因为商用网页设计最重 要的一点就是一切都必须是从浏览者的角度出发。 结语 2 l 世纪是信息与技术整合的世纪，是创意的世纪。越来越丰富的软件资源、硬 件的飞速更新、日新月异的计算机技术将使网页制作变得越来越容易，设计的重要 性和专业性将更加突出。网页设计作为i t 行业中的一环也面临飞快的技术更新，但 无论技术怎样变化更新，设计万变不离其中，设计师在做到技术和功能统一的同时 最大限度的发挥自己的创意和风格，让未来的网络世界更加丰富多彩。 参考文献 i t 梁景红著设计师谈网页设计思维 2 ( 韩) 崔美善著，马晓阳，刘娟译 社2 0 0 6 年1 0 月第1 版 电子工业出版社2 0 0 6 年0 7 月第i 版 设计师谈网页视觉特效电子工业出版 3 解勇编著网页设计视觉形态辽宁美术出版社2 0 0 4 年1 1 月第1 版 4 陈思聪著( f l a s hm