（课程与教学论专业论文）网页视觉基础设计与应用研究.pdf

摘要 互联网作为一种全新的大众传媒，越来越受到人们的关注。互联网不仅具有传统传 播媒介如报纸、广播、电视等及时广泛传播信息的一般功能，而且具有迅捷、及时、价 廉、交互性好、传播面广等传播信息的独特优势。随着网络技术和网络经济的迅速发展， 特别是商业网站的兴起，逐步产生了审美的需求。网页设计不仅是网页制作技术，而且 更是网页的视觉表现艺术，所以网页美观性和实用性已成为人们研究的重要课题。网页 作为网络信息表现和思想传播交流的主要形式，它不仅是为了满足受众的各种需求，更 重要的是要创造一种愉悦的视觉环境，使受众精神上获得美的享受。 本文从目前网页设计现状和存在的问题出发，以视觉心理学理论为基础，通过对网 页视觉心理要素的分析和对网页技术要素的阐述以及对网页形式要素的解析，把握网页 设计不仅要考虑如何把有效的信息放在页面上，而且要考虑受众是如何感知网页上各种 视觉要素的，同时探讨这些要素是怎样组成的“格式塔”。从格式塔心理学的角度对网 页设计综合要素的把握给予充分的论述，实现网页信息与视觉综合要素整合的统一性与 整体性。从受众对象的生理和心理特点出发，研究网页视觉要素之间的关系和秩序，以 适应受众视觉流向的心理和生理的特点，对提高网页设计的艺术水平具有指导意义。 关键词：网页设计：视觉要素；审美功能：格式塔；审美表现 a b s t r a c t a san e w t y p eo fm a s sm e d i a , i n t e r a c ta t t r a g t sm o r ea n dm o r ep e o p l e sa t t e n t i o n i tn o t o n l yh a st h ef u n c t i o no fc o m m u n i c a t i o ni n f o r m a t i o ni nt i m ei i k et r a d i t i o n a lm e d i as u c ha s n e w s p a p e r , b r o a d c a s ts t a t i o n sa n dt e l e v i s i o ns t a t u s ，b u ta l s oi th a si t sp a r t i c u l a ra d v a n t a g e s s u c ha sc o m m u n i c a t i n gq u i c k l y , c h e a p ，e f f e c t i v e l ya n di nag o o di n t e r a c t i v ea n dw i d e s p r e a d w a y w i t hf a s td e v e l o p i n go ft h en e t w o r kt e c h n o l o g ya n dn e t w o r ke c o n o m y , e s p e c i a l l yt h e c o m m e r c i a lw e b s i t er i s i n g i tf o r m san e e df o rt h ea e s t h e t i cr e q u i r e m e n t w e b s i t ed e s i g ni sa 虹n do fw e b s i t et e c h o o l o g y , m o r e o v e r , a na r to fv i s u a lr e p r e s e n t a t i o n s ot h eb e a u t ya n d p r a c t i c a b i l i t yo fw e b s i t eh a sb e e nt h ei m p o r t a n tt a s kp e o p l es t u d i e d w e b s i t ed e s i g ni sa m a j o rf o r mo fn e t w o r ki n f o r m a t i o nr e p r e s e n t a t i o na n dc o m m u n i c a t i o n , i ti sn o to n l yf o rt h e s a k eo fs a t i f l y i n ga l lk i n d so fm a s sr e q u i r e m e n t , b u ta l s oc r e a t i n gap l e a s a n tv i s u a l s u r r o u n d i n g ，w h i c hm a k ep e o p l eo b t a i nt h ej o yo f b e a u t ym e n t a l l y t h i sd i s s e r t a t i o nb e g i n sw i t hw e b s i t ed e s i g na c t u a l i t ya n de x i s t e dq u e s f i o nf o rt h e m o m e n t ，i tb a s e do nv i s u a lp s y c h o l o g y b ya n a l y z i n gt h ew e b s i t ev i s u a lp s y c h o l o g i c a l e l e m e n t s ，e x p o u n d i n gt h ew e b s i t et e c h n o l o g i c a le l e m e n t sa n dp a r s i n gt h ew e b s i t ef o r m a l e l e m e n t s ，h o l dt h ew e b s i t ed e s i g ns h o u l dc o n s i d e rh o wt om a k eu s e f u li n f o r m a t i o no n t ot h e f r o n t - p a g e ，f u r t h e r m o r e ，h o wc o u l dp e o p l ea p p e r c e i v et h ev i s u a le l e m e n t so nt h ew e b s i t e ， a n dp r o b ei n t oh o wt h e s ee l e m e n t sf o r mg e s t a l t n l i sd i s s e r t a t i o nd i s c u s s e st h eh o l do f w e b s i t ed e s i g ni n t e g r a t i v ee l e m e n t sf r o mt h ev i e wo fg e s t a l tp s y c h o l o g y , c a r r i e so u tt h e o n e n e s sa n dw h o l eo fw e b s i t ei n f o r m a t i o na n dt h ee o n f o r m i t yo fi n t e g r a t i v ee l e m e n t s i t i n v e s t i g a t e st h er e l a t i o na n ds y s t e ma m o n gw e b s i t ev i s u a le l e m e n t si nr e s p o n s ep e o p l e s p h y s i o l o g i c a la n dp s y c h o l o g i c a lc h a r a c t e r i s t i c ，i n o r d e rt oa d a p tt h ep h y s i o l o g i c a la n d p s y c h o l o g i c a lc h a r a c t e r i s t i co f p e o p l e sv i s u a lt e n d e n c y t h e r ei si n s t r u c t i o n a ls i g n i f i c a n c ei n i m p r o v i n gw e b s i t ed e s i g n k e yw o r d s ：w e b s i t ed e s i g n ；v i s u a le l e m e n t s ；a e s t h e t i cr e q u i r e m e n t ；g e s t a l t ；a e s t h e t i c r e p r e s e n t a t i o n n 独创性声明 本人声明所呈交的学位论文是本人在导师指导下进行的研究工作及取 得的研究成果。据我所知，除了文中特别加以标注和致谢的地方外，论文 中不包含其他人已经发表或撰写过的研究成果，也不包含为获得东北师范 大学或其他教育机构的学位或证书而使用过的材料。与我一同工作的同志 对本研究所做的任何贡献均已在论文中作了明确的说明并表示谢意。 学位论文作者签名：i 丕茧i 洼日期：翌1 ：兰：! 学位论文版权使用授权书 本学位论文作者完全了解东北师范大学有关保留、使用学位论文的规 定，即：东北师范大学有权保留并向国家有关部门或机构送交学位论文的 复印件和磁盘，允许论文被查阅和借阅。本人授权东北师范大学可以将学 位论文的全部或部分内容编入有关数据库进行检索，可以采用影印、缩印 或其它复制手段保存、汇编学位论文。 ( 保密的学位论文在解密后适用本授权书) 学位论文作者签名：龇 日 期：墨! ! 学位论文作者毕业后去向： 工作单位： 通讯地址： 指导教师签名：二乳 日 期：翌丝z 工彩 电话： 邮编： 引言 自从人类诞生以来，人类社会至少已经经历了四次意义重大的信息传播革命，每一 次信息传播革命都把人类文明推向一个新的发展阶段。第一次信息传播革命是语言传播 的诞生：提高了人类信息传播的质量、速度与效率。第二次信息传播革命是文字传播的 诞生：使得人类的信息传播革命第一次突破时间、空间的限制，得以广泛流传和长期保 存。第三次信息传播革命是印刷传播的诞生：报纸、杂志、书籍等印刷品使大众媒介迅 速普及。第四次信息传播革命是模拟式电子传播的诞生并迅速普及，使人类信息传播的 速度迅疾，范围广泛，内容丰富，复制扩散和保存信息的能力增强。最新的一次信息传 播革命，即正在我们身边发生的第五次信息传播革命，是数字式电子传播的诞生。进入 9 0 年代以来，先进的计算机技术不仅征服了文字数字化的难题，而且征服了比文字更 复杂的声音世界。如今，表现和记录人类物资和精神世界的数字、语言文字、声音、 图画和影像等过去相互之间界限分明的各种信息传播方式，都可以用计算机的二进制语 言来做数字化处理，从而可以浑然一体，相互转换。报纸、广播、电视和书籍、杂志、 电影等传统大众传播媒介在形式之间的差异正在缩小或消失；交互式传播媒体的出现。 使得传播者与受众之间的传统的相互关系正面临巨大的变化。人类进入了真正的信息时 代。 公认的大众传媒主要包括报纸、广播、杂志、书籍、电视和电影等六大媒介。随着 数字化技术的发展电脑硬件的更新换代，互联网技术迅速普及和网站的大量建立。互 联网正成为一种新的媒体广泛进入人们的生活。如今，国际上已把互联网纳入六大媒介 中，并将其称为继报纸、广播、电视之后的“第四大众传媒”。这说明，人们已经认同 了互联网的作用，能够同报纸、广播、电视等新闻媒介一样，广泛地传播新闻信息。同 时国际互联网还具有迅捷、及时、价廉、交互性好、传播面广等传播新闻信息的独特优 势，更重要的是这种信息的接收，不受地域的限制，无论是在世界的任何角落，只要是 互联网覆盖的地区，有一台电脑，就可以上网浏览所需要的任何信息。 随着人们生活水平的提高，人们的观念发生了根本的转变，人们对网络的态度从开 始的奢望、好奇到现在的使用，越来越热衷于在网络上查找相关资料、收看当天新闻、 休闲娱乐等等。随着网络宽带的建设，分发存储的发展，网络瓶颈节节打通，方方面面 的网络资源吸引更多的人上网。比如远程教育、网络图书馆，网络媒体库，在线服务、 网上商店、网上银行等等使人们越来越习惯于网络环境。随着网民数量的迅速增长，各 种网站如雨后春笋般地诞生，网站之间的竞争越来越激烈。现如今，网站不再是把信息 简单的放在页面上供人浏览、下载，而是要考虑如何向网民展示一个良好的网站形象， 吸引更多网民的注意力，提高网站的点击率。 据中国互联网络信息中心c n n i c 发布的调查数据，到2 0 0 3 年6 月3 0r ，中国互 联网网民已达6 8 0 0 万，半年内增长了8 9 0 万。而今天国际互联网域名登记管理机构 ( i n t e r n e t n i c ) 每天注册域名1 5 0 0 0 个以上，一个域名的注册标志着一个网站的诞 生，而每个网站恰恰是由诸多网页构成，所以说网页是构成互联网的基本元素。网络是 通过网页上的视觉元素引人注目来实现信息内容的传递，为了使信息传递获得最大的视 觉功能，使之真正成为可读性强而且新颖的传播媒介，网页设计必须适应人们视觉流向 的心理和生理特点，由此确定各种视觉构成元素之间的关系和秩序。因此，在进行网页 视觉要素基础设计时就必须遵循一定的形式美法则。 据2 0 0 6 年9 月2 3 日晚新闻报导，由中国自主研发的下一代互联网主干网核心技术 通过国家教育部组织的验收，并有望在2 0 0 8 年提供商用。据悉，该项c n g i c e r n e t 2 主干网以2 5 兆到1 0 兆的带宽连接了我国2 0 个城市的2 5 个核心节点，传输速度达到 每秒2 5 g 到1 0 g ，是当i j i 各国使用的第一代互联网速的1 0 0 多倍。这充分说明中国互 联网的发展给网页的视觉设计创造了广阔的空间。纵观人类历史，艺术的创新和技术的 进步总是如影随形，几乎每一种新艺术形式的产生都以某种新技术的问世为基础，甚至 每次技术的升级都会导致艺术形式的创新。油画颜料的发明大大的减少了繁琐的绘画程 序，促使绘画从室内走向室外，激起了画家无限的创作热情。一直以来，正是由于网络 技术上的不断创新和发展，才有了今天这个精彩的互联网世界，网页设计也只有主动求 变和创新，才能适应互联网发展的潮流。 2 一、网页视觉心理要素 我们对于环境事物的感觉经验，都是源于过去的接触积累。即使不经肌体接触，也 能判断它的软硬，粗细，轻重，冷热尽管因生活背景，学习经验各异，但经过不自 觉的归纳，秩序化的本能，多数人内心深处沉淀的感官经验，完全相似。例如，就物理 功能而言，线条或色彩本身没有任何情绪，但由于经验的积累，才使人感受到粗线的坚 实，细线的纤柔，快速的线条有流畅感，顿挫的线条有滞凝的感觉，不同的颜色有了不 同的情绪象征意义。这充分说明受众并不是被动接受外界信息、消极接受刺激、做出预 期反应的客体。相反，他们是信息处理的主体，根据自己的兴趣和需要对众多的信息主 动地进行加工和选择。因此，对受众心理机制的把握是否精确，将决定网站的创意和网 页设计。 ( 一) 受众对象的心理分析 a l a nc o o p e r 说过：“一个所谓优良的设计是建立在对广泛的人类共通性和特殊群 体的个别意向的深刻理解之上，因此它可以对适当的信息，过程和技术进行排序，从而 可以使那些特殊群体达到他们的专业和个人的目的。”一个网页即使作为一个网站也不 可能适合所有的访问者。所以设计时首先要考虑目标用户群的自然情况，比如年龄、性 别、受教育程度、生活地域的风俗习惯以及用户的各种心理需求等等。 网络受众和其它传媒受众一样，是一种受众追求自己的各种心理满足的需求。这些 心理需求包括新奇心理、求知心理、求真心理、满足好奇心和获得知识的一些心理需求： 也包括对美的追求产生的审美心理需求：还有与受众作为社会的人对交往的各种需要， 这种对交往的需求在一定程度上也满足了受众的接近心理需要：另外，受众还希望在逆 反心理、得益心理等方面得到满足。那么网络应如何满足受众的各种需求呢? 1 受众对获取信息和知识的需求 广大受众接触网络媒体的最主要目的是获取信息和知识，这是因为网络媒体的受众 文化素质高于社会平均水平，他们对信息的获取欲望和能力更强，并且网络媒体所具有 的时效性与针对性能够弥补其它媒体的弱点，从技术上能够充分满足受众获取信息和知 识的需求。 网络媒体要满足受众获取信息和知识的需求，就要增加网络信息以及信息背景的数 量和全面性，确保信息的真实性、准确性和可信度，这不仅能增加网络信息的传播效果 和效率，而且还能充分满足受众获取信息和知识的需求。 2 受众对正确价值观念的需求 在现实生活中，人们会经常遇到各种情况和问题，并且需要做出判断，以便确定自 己应该采取的态度和行为。因此，树立正确的价值观念以及寻求正确的判断能力，对每 3 个人都很重要。这种能力可以从现实生活的成功或失败中获取，对于网络受众来说，虚 拟的网络世界也日益成为一条重要途径。 受众对正确价值观念的需求需要网络媒体的引导，网络媒体可以从客观和心理两方 面来引导受众。一种是客观的规范，即网络媒体应该全文或摘要发布现实生活中国家权 力机构或团体所制定的各种强制性和非强制性规范，如法律、政策等，根据这些客观标 准来判断、行事，就可以使受众自己的言行合法合理，获得社会的认同。另一种是舆论 所认同的规范，即受众规范自己的行为以便从心理上获得安全感和满足感。它虽不是国 家权力机构甚至也不是团体所制定的规范，却是大多数人或某些权威人士所认同的意见 或行为，根掘这些意见或行为来思考、行动时，可以使人产生一种从众的安全感，并且 照此办理能与多数人意见一致，更容易与人相处，更为心安理得。因此，网络媒体必须 向受众灌输正确的价值观念，用正确的新闻信息培养受众良好的心理需求。 3 针对不良的受众心理需求所作的思考 目前国内在网络信息方面处于主流地位的仍是新浪、搜狐等商业网站。作为新兴的 媒体，他们正在培养受众的阅读习惯，使受众对他们逐渐产生信息依赖。但同时，他们 所刊登的内容无形中也在潜移默化地向受众推销着他们自己的价值观念。所以说媒体是 一种公共资源，它必须承担而且始终承担正确引导舆论、自觉维护社会稳定的责任。但 目前各商业网站由于面临着生存和发展的挑战，有的一味地追求访问量和受众数量，往 往无意严格把握信息的尺度，使网络信息陷入了一个尴尬的境地， 首先，部分网站为追求轰动，满足受众追求新奇的心理去传播假信息。这也反映了 网站编辑选择信息的标准不是其社会价值和现实意义，而仅仅为了满足受众的心理需 要。虚假信息虽然不是网络媒体的专利，但网络媒体一旦有牵涉，就会造成受众对网络 媒体的不信任感，不能满足受众的求真心理需要。 其次，为满足部分受众低级的娱乐消遣心理，传播大量的格调低俗的信息。随着无 线互联技术的发展，手机短信技术的普及，即时通讯对低俗格调的新闻和网络色情也起 到推波助澜的作用。为了创造健康的网络环境，使网络媒体得到良好的发展，这种迎合 部分受众的低级不良心理需求的现象必须得到抑制。 最后，为满足受众的逆反心理，网络媒体存在大量、过分的负面信息报道。有些商 业网站虽无权采写新闻信息，但是他们对新闻的放大效应是不可忽视的。他们往往忽视 了媒体的引导性质，在设计网页时，把和百姓生活紧密相关的国家方针政策的新闻经常 被放置在不起眼的位置，而一些负面的消息，例如社会治安问题、作风问题和腐败问题 经常放黄于网站的首页。 网络作为新兴的第四媒体已经深入人们的生活。既然是媒体就一定要有公信度。虽 然网络技术为受众提供了充分发表自己意见和展示自我真实心理的条件，受众的逆反心 理也能得到满足，但网络媒体要发挥舆论的监督作用，充分满足受众健康的心理需要， 不能片面地为满足受众的逆反心理而大量、过分报道负面新闻信息。 4 ( - - ) 受众对象对网页的基本要求 网页的受众对象，按年龄分：儿童、青年、中年、老年；按职业分：学生、工人、 农民、知识分子：按用途分：商业、事业、个人、教育、医疗、娱乐、体育、旅游、新 闻等各种专题网站。 通常人们在设计网页时都是按用途进行的。比如商业网站其目的是宣传和销售产 品，面对的是普通大众，它的审美就要考虑大众化，要被大多数人所接受，在形式上不 搞特殊化，在功能上要考虑它的便利性，在内容上，要实事求是地考虑它的可信程度。 对于事业网站，主要目的是宣传政策、法规，发布一些重要信息和通知等，所以受众习 惯于它的严肃性。对于个人网站，其目的是个人魅力的展现，要体现出个性化，要与众 不同。对于教育网站，是针对有一定文化素质的人群，设计时要有一定的文化底蕴和审 美涵养。对于娱乐网站，其目的是使受众心情放松、调整情绪，受众对它的要求是轻松 自然、无拘无束，最好有一些幽默的元素。对于体育网站，针对的是体育爱好者。其目 的是及时报导体育迅息，以及世界各地大型的体育赛事。受众要求这类的网页对于体育 新闻报导及时准确，对于网站的形象要求活泼、富有动感。对于旅游网站来说，爱好旅 游的，同时会上网查找信息的人，大多都是年轻的、时尚的、活泼的消费者，他们对页 面的要求时尚与前卫，有特色等等。不同的人对网页的心理需求不同，美国心理学家马 斯洛把人类的需求分为六大类即生理需求、安全需求、爱的需求、自尊需求、自我实现 需求和爱美的需求。值得注意的是，在这六大类需求中只有一类是生理需求，其他五类 均为心理需求。 随着经济的发展，人们生活水平的提高，人们心理需求会越来越多。在网页视觉要 素中同样体现着受众者的各种需求。同时受众者的需求是不断从低级的生理需求向归 属、自尊的中级需求和自我实现的高级需求发展的。受众的信息需求状态可划分为三个 层次：第一层是受众对信息的基本需求状态，包括有意识需求和无意识需求：第二层是 需求的认识和唤起状态，包括受众自己认识到的信息需求和被外界激发而唤起的信息需 求；第三层是信息需求被认识或唤起的之后，正式表达出的一种需求状态。所以设计者 在收集和组织信息时要从受众的多种需求出发，使信息符合受众需求层次的发展状态。 网页是为受众服务的，没有受众的光临网页就没有存在的必要，所以受众的各种需 求正是受众对象对网页的基本要求。 二、网页技术要素 设计是主观和客观共同作用的结果，是在自由与不自由之间进行的，设计者不能超 越自身已有的经验和所处环境提供的客观条件限制，优秀设计者正是在掌握客观规律基 础上得到了完全的自由，一种想象和创造的自由。网络技术主要表现为客观因素，艺术 创意主要表现为主观因素，网页设计者应该积极主动地掌握现有的各种网络技术规律， 注重技术和艺术紧密结合，这样才能穷尽技术之长，实现艺术想象，满足受众对网页信 息的高质量需求。例如，受众欣赏一段音乐或电影，以前必须先将这段音乐或电影下载 到本地机器，然后使用相应的程序来播放，由于音频或视频文件都比较大，需要较长的 下载时间。流( s t r e a m ) 技术出现以后，网页设计者充分巧妙地应用此技术，让受众在 下载的过程中就可以欣赏这段音乐或电影，实现了实时的网上视频直播服务和在线欣赏 音乐服务，无疑增强了网页传播信息的表现力和感染力。 网络技术与艺术创意的紧密结合，使网页的艺术设计由平面设计扩展到立体设计， 由纯粹的视觉艺术扩展到空间听觉艺术，网页效果不再近似于书籍或报刊杂志等印刷媒 体，而更接近于电影或电视的观赏效果。技术发展促进了技术与艺术的紧密结合，把受 众带入一个真正现实中的虚拟世界。 网页的艺术性与技术性的高度统一是今后网页设计发展的大趋势，也是网页设计取 得成功的基本法则。因此，就网页设计的艺术性与技术性及其有机结合从理论上进行探 讨分析，对进一步提高网页设计的实践水平具有重要的意义。网页设计的技术要素是网 页设计时运用相关的软件技术、媒体技术、电子技术等实现网页最终表现效果的手段方 式。网页设计的艺术性是建立在对视听元素的技术组合基础之上的，没有技术的支撑， 网页也就不会具有它的媒体艺术特性。网页是一种不同于传统媒体的新式传媒，信息的 交互性、持续性、多维性、多种媒体的综合性、版式的不可控性是网页的主要技术特点。 ( 一) 图像处理技术 从网页构成的元素看，网页信息的表达需要通过大量的图片素材体现。图片素材 的来源主要来自三个方面：一是专门为网页主题内容准备的相关图像素材，如扫描印刷 品或照片所得的数字图像，使用数码相机所拍的景色或实物等；二是从互联网上获取的 合法图片素材；三是使用绘图软件自己制作的图形图像。这些素材在使用前必须根据网 站的主题性质和内容，使用图像处理软件对其进行处理，图像可以和谐地搭配，这样能 更好地表现信息的内容主题，为美化网页服务。 通常情况下，使用p h o t o s h o p 软件进行图像处理，p h o t o s h o p 可以解决以下问题： 1 设计制作网站的标志l o g o 6 l ( ) g 0 它代表着一个网站和公司的形象。 2 图像优化处理 为了对p h o t o s h o p 软件中设计的文件进行切割后以最优化的状态进行保存，一般情 况下是利用g i f 文件形式来进行保存。g i f 文件以减少像素来缩小图像容量的方式，不 仅减少了网络中读取的时间，而且可以得到高分辨率的图像，因此g i f 文件可以说是一 种具有出色压缩功能的形式。保存图像时，g i f 文件会提取经常使用到的2 5 6 种颜色来 制作颜色索引，并利用这2 5 6 种颜色来表现整个图像，因此可以大大减少图像的容量。 3 文字图片化 在受众游览网页的过程中，网页中的字体是由受众一端计算机内所装字体来决定 的，所以网页一般使用可读性较强的比较常用的字体，但在特殊情况下，要想保证受众 都能准确无误的浏览网页，对一些特殊的字体要进行图片化。 4 转换图像的格式 5 调整图像的大小和颜色 6 完成网站首页的制作 ( 二) 网络动画技术 f l a s h 动画在网页设计中，有时是以独立的形式出现，有时是以综合形式出现。一 般情况下，网页的上端图片图像和导航等部分中的f l a s h 往往是以导航、动作、按钮、 遮罩等各种功能集于一起的方式出现。 目前单独的f l a s h 动画在网络上比较流行，其优点是制作简单，文件小，传输速度 快，同时可具有交互性在网页中使用f l a s h 软件可以解决以下几方面的问题： 1 有交互式的前导页制作 用一个有代表性的f l a s h 动画作为网站的形象，直接点击可进入网站的首页。 2 按钮制作 制作各式各样的按钮，丰富网页的内容。 3 广告制作 最常见的是b a n n e r ，一般称旗帜广告或标牌广告、标志广告。b a n n e r 通常位于页 面醒目处，b a n n e r 充分利用了网页制作中的超文本链接功能，它含有经过浓缩的广告 语以及公司的联系方法，如她址、电话、f a x 、e m a i l 等，通过静态或动态的精美别致 的图形吸引着受众的目光，会给人留下深刻的印象。 4 导航系统制作 在一个网站中导航即是起到向导作用的重要元素，因此设计导航的过程中应把最终 目的放置在子菜单和主菜单的关系以及对访问者的向导功能上。 ( 三) 页集成及链接技术 在网页制作中，网页的集成技术与链接技术很重要，它直接影响网页的形式和功能。 7 网页的形式是由网页的排版技术决定的，网页的功能是由网页的链接技术决定的。在 d r e a m w e a v e r 中，排版技术主要是由表格、层、框架来实现的，同时表格、层、框架它 们之间可以单独使用，也可以混合使用。使用时具体看是以哪种形式为主，就被称之为 以哪种形式的布局。 目前绝大多数的页面是以表格的形式布局。表格是由一行或多行组成，每行又由一 个或多个单元格组成。在布局时通常是以合并单元格、拆分单元格或嵌套表格的方法进 行，然后把内容插入到单元格中，从两形成各种版式。有时在采用大的图像作背景时， 先在p h o t o s h o p 或f i r e w o r k s 软件中使用“切片”工具，根据网页的结构将大图像切割 成一幅一幅的小图像，对每幅小图像进行优化处理，之后插入到页面中，这时就要使用 表格来定位，将众多的小图像按要求插入到相应的位置。 “层”是d r e a m w e a v e r 中可以将对象定位到任意位置的工具，其中包括文本、图像、 动画等所有可以直接插入至网页中的对象。层拥有其它排版工具所不具备的优点，比如 可以重叠、便于移动、可设为隐藏等。但层也存在一些缺陷，由于它是基于c s s 所设 计出来的排版方式。相对鞍新的技术必然会遇到浏览器是否支持的问题，层要求 m i c r o s o f li n t e m e te x p l o r e r4 0 和n e t s c a p en a v i g a t o r 4 0 以上的版本的支持。所以层的 发展受到了限制。目前大多数人使用表格与层，表格为主，层为辅的布局方式，从而应 用表格的稳定性和层的灵活性，使网页作品更精彩。 框架虽然也是d r e a m w e a v e r 中的排版工具，但是它与表格和层在用途上却不着本质 上的差别。表格和层均是以插入的对象为单位，而框架是以插入的网页为单位，它提供 了一种较为固定的网页结构。网页框架结构的优点是风格统一、便于修改、方便访问。 其缺点是兼容性相对差、下载速度受到影响、排版时不同框架中各页面元素对齐要达到 精确程度有些困难。 众多网页组成了网站，网站内部各页面之间，网站与网站之间都是靠链接技术实现 跳转的。链接作为网页闯的桥梁，起着相当重要的作用。在组成网页各种元素中很多都 可以作为链接的对象，比如文字、图像、图像地图、鼠标经过图像、导航图像、e m a i l 链接、命名锚记、文件下载和跳转菜单、f l a s h 按钮、f l a s h 文本等等。链接指向对象有 站点、网页、图像、音频、视频、锚等等。链接技术是网页制作中的关键，运用链接技 术，可将页面的组织结构分为序列结构、层次结构、网状结构、复合结构等。如果整个 网页中的链接做到系统、有条理，那么受众浏览起来将十分轻松，查找资料就很方便。 网页中的导航系统正是链接技术的集中体现。导航技术提供了足够的、不同角度的链接， 帮助浏览者在网页的各个部分之间自由跳转，能够告知浏览者现在所在的位置、当前页 面和其他页面之间的关系等。利用快捷而完善的导航技术可以构建合理的页面组织结 构，建立包括站点索引、帮助页面、查询功能在内的导航系统，从而使测览者能从巨量 信息库中迅速方便地检索和查找所需的信息。 8 三、网页形式要素 ( 一) 网页的构成 在网页的构图中，包括形态要素和信息要素两个方面。点、线、面是构成视觉空间 最基本的形态要素，是表现视觉形象的基本设计语言。文字、图片、动画、影视、音频 等是构成网页视觉空问的最基本信息要素。任何视觉图形或文字信息，都可以简化或趋 近于点、线、面的视觉感受。网页版面中的各视觉信息要素正是以点、线、面的形式相 互依存、相互作用，进而组合成各种各样的视觉信息，形成千变万化的视觉空间和视觉 感受。因此，只有协调处理好文字、图片与点、线、面各视觉元素之间相互关系，才能 设计出具有最佳视觉效果的网络页面。 1 网页的形态要素 ( 1 ) 点 从形态设计角度来看，“点”是具有空间位置的视觉单位，是一切形态的基础。在 网页设计中，点同样是最基本的视觉构成单位，点不仅存在大小的差异，而且还有各种 形状所表现出的姿态。在网页中，点是相比较而言的，任何单独细小的形象都可以称之 为点：一枚按钮、一块颜色、一个字符，都表现出点的视觉感受。同时点具有求心性， 当只有一个点时，人们的视线会集中在这个点上。当视觉上具有同等质量的两个点同时 出现在画面上时，视线会往返于两点之间。若干个点若是等距排列，会感觉很有规则性、 整齐、秩序的视觉效果。若在秩序的基础上，加以适当的变化要素，构成的整体立刻就 会出现动感，若把相同或不同大小的点拉近，使其连接或重叠，或是使其白j 隔变为不规 则，再增加或改变排列方向，会有利于表现远近感和深度感。点的集合构成可以由点变 成线、面及立体，更可以形成丰富的视觉表现手法和形态。在网页设计中经过编排处理 的点不仅可以具有节奏感，还可以根据连续、间隔及方向性变化来表现出时间感、距离 感。一幅网页往往需要有数量不等，形状各异的点的形象来参与构成。点的形象通过对 称和平衡、重复和群化、节奏和韵律、变化和统一等多方面的构成处理，都能够给人带 来不同的心理感受。 ( 2 ) 线 点的移动形成线，从造型角度讲，线具有位置、长度和一定宽度，是网页设计中版 面构成所不可缺少的视觉元素。相对于点而言，线具有更为明显的情感特征。线根据创 造手段不同而显示出种类的差异，其存在的形式可长可短、可粗可细、可曲或直、可强 可弱等等，它们都能给人一定的视觉一i i , 理感受。比如粗线富有男性强有力的感觉，细线 具有锐利、快速、敏感的特性，水平线给人安定、和平、静止、平稳、静寂等感觉，垂 直线给人挺拔、严肃、庄重、上升或下降之感，斜线给人生动、活泼、有深度感，曲折 9 线给人举硬、机械、紧张之感，自由曲线给人温和、活泼、柔顺及自由流动之感等等， 同时线的不同排列方式和不同线的组合方式 都能产生意想不到的视觉效果。在网页设计 中，若能将图形、文字等视觉信息做恰当的 线化处理，则可以更充分地表达所要体现的 信息内容。通常情况下，线在网页中主要起 分割画面的作用，也可以将各重要信息连接 起来，明晰地表达网页内容组织的脉络结构。 线化处理后的视觉要素在页面中还可以有方 向、位置、长度、宽度、形状等各方面的变化，同时也可以运用恰当的构成法则组织出 更为丰富的视觉效果。 ( 3 ) 面 视觉构成元素中，面具有明显的长、宽两度空间，是点和线的相对扩大化。网页设 计中具有面感觉的元素，可主要概括为图片、色块和图表三类。面在网页设计中主要用 于背景渲染、插图、动画、b a n n e r 广告、网站导航系统、网页中的按钮和图标等等。网 页设计中的面，可以分为直线形面和自由曲线形。不同的形在视觉上所产生的心理效果 有所不同。直线形面：具有直线所表现的心理特征。如正方形，最能强调垂直线与水平 线的效果。在心理上具有简洁、安定、井然有序的感觉。在网页设计中，表格或单元格 的背景色、图片、插图等都能形成直线形面。自由曲线形面：具有几何秩序的曲线形， 这种曲线形能较充分体现出作者的个性，所以是最能引起人们兴趣的。在心理上可产生 幽雅、魅力，柔软和带有人情味的温暖感觉。在网页设计中，背景图片选用和插图等都 能形成自由曲线形面。 面的性格表情十分多样与此关系最为密切的是“面形”的轮廓及其表面质感。比 如面形的轮廓有浓淡之分时，就比单纯使用硬边描绘的情况显得更为柔和。面的造型可 用于表现各种各样的立体感觉，也可使人产生丰富的情感联想，如韵律、软硬、虚幻等 等。另外，单纯几何面形本身也具有一些表情特征，如正方形的稳健大方，三角形的扎 实稳定，椭圆形的亲切和生命感等。在网页设计中充分利用面的表情特征，可以为明确 突出网站主题的性质起重要作用，如背景图片、窗口形式的选用，在不同性质的站点页 面中设计手法有所相同。 2 网页的信息要素 ( 1 ) 文字 在网页中可以没有图，但不可以没有文字，所以文字是网页中必不可少的构图元素， 也是网页中主要信息的描述要素。网页中文字的主要功能是在视觉认知过程中，向大众 传达发布者的各种意图和信息，要达到这一目的必须考虑文字的整体效果，给人以清晰 悦目的视觉印象。因此，字体作为网页的形象要素之一，不仅具有传达信息、表述情感 的功能，而且必须具有视觉上的美感，能够给人以美的感受。网页中字体设计的成功与 否，不仅取决于字体、字号、色彩的选择，同时也决定于其排列组合方式是否得当。为 1 0 了构成生动的页面视觉效果，应该从文字的风格、大小、排列方向、明暗色调等方面进 行综合考虑，既要形成活泼运动的对比效果，又要达到整体上的组合统一。 在很多成功的设计作品中，文字都被用来作为画面空间的分割线。在进行分割时应 特别注意画面分割后各个组成部分之间在面积上的比例关系。这里值得提出的是在使用 文字对画面进行分割时。对于字体、字距、 字号、行距、文字数量以及文字排版的方 式等都应采取谨慎的态度。其中，租大字 体可以造成视觉上的强烈冲击，而细小字 体则造成视觉上的连续性。用细小的文字 构成的版面，精密度往往较高，可以带给 人一种精细之感。因此，在网页设计中的 文字绝不能仅仅作为画面中一种静态的表意成分出现，而应该作为画面中表形的成分， 具有自身极强的表现能力。 在网页文字的编排与设计中，由于计算机给我们提供了大量可供选择的字体，导致 了字体的多样化。这样，我们在设计网页时，使用几种字体就需要精心编辑和考虑。一 般来讲，同一页面上使用的字体种类最多只能有三四种。由于文本字体的显示是需要本 地硬盘字体文件的支持，所以在互联网上使用过多的字体是没有意义的；如果特别需要， 可以把它处理成图形文字。字体的选择是一种感性、直观的行为，无论选择什么字体， 都要求其风格与内容特性相吻合。如政府类网页，其文字具有庄重和规范的特性，字体 造型应规整而有序，简洁而大方：休闲类网页，文字应具有欢快轻盈的风格，字体生动 活泼，有鲜明的节奏感，给人以生机盎然的感受。总之，文字的主要功能是在网页设计 中向受众传达各种信息，要达到这一目的就要做到以下几点：一是提高文字的可读性， 二是文字的位置要符合整体要求，三是在视觉上应给人以美感，四是在设计上要富于创 造性。 ( 2 ) 图片 在网页版面的视觉构成中，图片占有很大比例，在相同面积大小的图片和文字的情 况下，受众首先注意的是图片，但这并非表明文字信息表现力可以忽略，而是应使图片 在视觉信息传达上能辅助文字，帮助理解。因为图片能具体而直接地把信息内容高精度、 高质量地表现出来，使本来平淡的事物变成强而有力的诉求性画面，体现出更强烈的创 造性。图片在版面构成要素中，充当着形成独特画面风格和吸引视觉关注的重要角色， 具有烘托视觉效果和引导阅读两大功能。图片是文字以外最早引入到网络中的多媒体组 成元素。图片的应用，可以使网页图文并茂地向用户传递信息，成倍地增加所提供的信 息量，而且图片的引入也大大美化了网络页面。可以说，要使网页在纯文本基础上变得 更有趣味，最为简捷省力的办法就是合理地使用图片。对于一条信息来说，图片对受众 的吸引也远远超过单纯的文字。图片在网页版面中的位置、面积、数量、形式、方向等 各方面因素处理，直接关系到网页的视觉传达效果。在图片选择和优化的同时，应考虑 图片在整体编辑计划中的作用，达到整齐和谐。要实现这样的效果，在页面图片的合理 1 l 选用，特别是处理与相关文字编排在一起的图片时，一要注意整体风格统一，二要注意 传递信息悦目，三要注意突出重点。如进行页面版式设计时，若只有大图而没有小图或 细部文字，整个版面就会显得空洞而缺乏细节。但只有小图而没有大图，又会使版面缺 乏主题而显平板、零乱。所以，只有大小、主次得当地穿插组合各类图片，才能形成最 佳的构图关系，使得整个页面丰富立体，充满层次而富有美感。 恰当使用图片会让你的客 户对网站的内容一目了然，比如 打开销售汽车网站的主页，没有 图片，感观的第一印象是无法弄 清这到底是否自己要找的主页， 必须阅读文字。如果使用了大量 的汽车图片，在阅读文字之前， 马上就能确认这是一个与汽车有 关的主页，并且各种款式清晰可 见。 ( 3 ) 动画、影视、音频、视频等 恰当使用动画、影视、音频、视频可以活跃和丰富页面，表达文字传送所不能表达 的信息。例如当我们打开旅游网站，欣赏世界各地风光的同时倾听各种不同的背景音乐， 会感觉心情舒畅，犹如身临其境的感受。但如果使用不当，会影响网页的传输速度。 ( - - ) 网页的版式 网页的版式设计同报刊杂志等平面媒体的版式设计有很多共同之处，它在网页的 艺术设计中占据着重要的地位。所谓网页的版式设计，是在有限的屏幕空间上将众多视 觉元素如文字、图表、图片、f l a s h 动画和听觉元素如声音、影视、歌曲等等进行有机 的排列组合，将理性思维个性化的表现出来，是一种具有个人风格和艺术特色的视听传 达方式。合理、优美、精致的版式设计，在传达信息的同时，会使受众产生感官上的美 感和精神上的享受。因此，版式设计在网页艺术设计中占有极为重要的地位，也是我 们应该关注的重点问题。与平面广告，报刊杂志等印刷品平面媒体的设计不同，印刷品 都有固定的规格尺寸，网页则不然，尺寸是由读者来控制的，这使网页设计者不能精确 控制页面上每个元素的尺寸和位置，而且网页的组织结构不像印刷品那样为线性组合， 因此网页的版面设计具有更高的难度和挑战性。网页版式的不可控性主要表现为：第一， 网页页面会根据用户浏览器窗1 ：3 的大小自动格式化输出；第二，网页的用户可以控制网 页页面在浏览器中的显示方式；第三，不同种类、版本的浏览器观察同一个网页页面， 效果会有所不同；第四，用户的浏览器工作环境不同，显示效果也会有所不同。总之， 网页版式的最终效果是由受众的浏览器和工作环境决定的。 版式设计不仅要满足网页的实用功能，而且还要满足网页的审美功能。网页的实用 1 2 功能体现在以下三方面：第一，在网页的版式设计上，体现出网页的主要内容和次要内 容，尤其是突出重点内容；第二，在网页的版式设计上，网页的导航一定要清晰；第三， 网页版式设计决定了网页的布局，布局合理和逻辑性强是网页版式设计的要点。网页的 审美功能体现网页版式设计要符合统一，分割、对比的原则：第一，网页版式设计要具 有整体性、一致性，即统一：第二，要合理地划分整个页面，安排页面各组成元素，即 分割：第三，通过合理运用矛盾和冲突，使设计更加富有生机和活力，即对比。只有通 过完美的艺术形式，才能使网页的版面清新，格调高雅，从而吸引更多的浏览者。 ( 三) 网页的色彩 一幅优秀的平面设计作品，除了形态因素外，往往还包含色彩因素。网页的版面与 广告招贴、电视画面一样，都要以醒目而恰当的色彩搭配，切中主题，给人以美的享受。 色彩在网页设计中占有非常重要的地位，是最先也是最持久地给受众以网站形象的视觉 元素。它是调适受众视觉心理、引起受众注意的重要手段。网页设计是通过计算机来实 现的，计算机色彩系统中提供的三原色为红、绿、蓝。通过这三种色光的混合，创造出 千变万化、而又能引起视觉兴奋的色彩，以达到网页吸引注意、传达信息、赢得用户的 目