（设计艺术学专业论文）Web优化设计.pdf

摘要 w e b 建女：于7 0 年代发展起来的计算机网络群之l ：，今天的w e b 已经远远超过了一 个网络的涵义，它是个信息社会的缩影。w e b f 存改变世界，它促成了网络经济雏形 的形成。j 二w e b 具有传播信息容量极大、形态多样、迅速方便、全球覆盖、f ；t 和 交互的特点，已经发展成为新的传播媒体。 伴随着w e b 的进一步的发展，它将拥有u 益庞大的用户群；同时，w e b 也将逐步 与我们的生活融为一体，与我们周围的一切息息相关。这样的情况下，提高w e b 设计 水平，提w e b 的易用性是当务之急，否则势必会给数量庞大的w e b 用户带来巨大的麻 烦，甚至于影响到w e b 自身的普及。w e b 优化设汁正是关注这些问题，致力于提高互 联网的可用性、易用性，让尽可能多的用户尽可能容易的使用互联网，推进互联网的普 及，提高互联刚的整体制作水平。 伴随着浏览器和服务器技术的发展，制作一个动态的、富于创造性的w e b 站点将 更加容易。w e b 设计限制的存在是由于技术或浏览器的缺陷所致，w e b 设计者的t 作就 是要解决这些缺陷。从性质上来说，w e b 设计是一种多媒体交互设计，也就是一种人机 交互界面设计。从形态上来说，w e b 设计与平面设计有一定相似之处。 在w e b 设计中经常犯的一个错误是为设计者瓶设计站点，所考虑的是设计者的需 求而小是实际用户的需求。如果设计者忽略用户的需求，那么就不能保障w e b 站点的 质量。w e b 设计的过程中，一定要明确：设计师不是用户，用户不是设计者，要为所有 用户设计，但也应该考虑差异。 w e b 界面设计是人机界面设计的一个延伸是人与计算机交互方式的演变，是随计 算机技术发展而发展的。如何根据用户本身的特点，运用现有的技术手段，消除人们对 操作电脑的恐惧、对上网的陌生，是w e b 界前设计的着眼点。 虚拟现实技术是一项近十几年悄然兴起的涉及众多学科门类的高新实用技术。虚拟 现实技术的实时空问三维表现能力、人机交互式的操作环境以及给人带来的身临其境的 感受，将一改w e b 用户以往枯燥、生硬和被动的感受。 w e b 上的多媒体元素包括音频流、视频流等等，这些多媒体元素具有极大的魅力， 补充了文字、图像所不能完美表述的内容。现在w e b 上日益普及的“网上直播”、“视 频会议”等等，也属于多媒体范畴。 在一个w e b 网站正式发布以前，我们有必要对整个站点进行系统地测试。对于一 个w e b 站点而言，w e b 广界面设计测试是首当其冲的问题之一。一个具备良好使用性 的用户界面既应该满足用户方便而高效使用的需要，又应当拥有突出的情感吸引力和用 厂1 满意度，从而体现设计师对目标用户的关怀。 w e b 的发展是h 新月异的，这些新技术、新方法的运用和积累，将会逐步的改变我 们对与w e b 的认訇i ，以车从根本卜改变w e b 。对y - w e b 的未来，我们的观点是积极乐 观的。我们应该把握技术潮流，与时俱进，共同推进w e b 的发展，迎接崭新的互联网 时代。 关键词：w e b 设计，通用设计，优化 l i a b s t r a c t t h ew o r l dw i d ew e bi sb u i l tu p o nt h ec o m p u t e rn e t w o r k ， w h i c hh a sb e e nd e v e l o p e d s i n c ei9 7 0 s q b d a y , t h ew o r l dw i d ew e bi sn ol o n g e rac o m p u t e rn e t w o r k ，b u ta ne p i t o m eo f o u ri n f o r m a t i o ns o c i e t y t h ew o r l di sc h a n g e db yt h ew o r l dw i d ew e b ，a n dt h er u d i m e n to f w e be c o n o m yh a sb e e nc r e a t e d b e c a u s et h ew o r l dw i d ew e bi s p r o f o u n d ，f a s t ，f r e ea n d i n t e r a c t i v e ，i tt u m si n t oan e wm e d i a t h ew o r l dw i d ew e bw i l lh a v em o r eu s e r sa n db e c o m eap a r to fo u rd a i l yl i f e u n d e r t h i sc o n d i t i o n ，w es h o u l di m p r o v eo u rw e bd e s i g n ，e s p e c i a l l yt h eu s a b i l i t yo f t h ew e b t h e o p t i m i z a t i o no f w e bd e s i g np a y sa t t e n t i o nt ot h i si s s u e t a n df o c u s e so nt h ew e b u s a b i l i t y t o d a y ，i ti se a s i e rt ob u i l dad y n a m i c ，c r e a t i v ew e b s i t eb e g a u s eo ft h ed e v e l o p m e n to f c o m p u t e rt e c h n o l o g i e sa n dw e bt e c h n o l o g i e s r e s t r a i n t so f w e bd e s i g ns t i l le x i s tb e c a u s e w e b t e c h n o l o g i e s a n dw e bb r o w s e r sh a v em a n yl i m i t a t i o n s w e bd e s i g n e r sr e s p o n s i b i l i t y i s r e s o l v i n gt h i sp r o b l e m a n d ，w e bd e s i g ni s ak i n do fm u l t i m e d i ai n t e r a c t i v ed e s i g n ，o ra n i n t e r f a c ed e s i g n w e bd e s i g n e r sa r e e a s i l y t om a k e m i s t a k e s ：t h e yd e s i g n w e bs i t ef o r d e s i g n e r s ( t h e m s e l v e s ) ，n o tf o rw e bu s e r s ；t h e yt h i n ka b o u td e s i g n e r s d e m a n d ，n o t w e bu s e r s i f a w e b d e s i g n e ri g n o r e sw e b u s e r s d e m a n d ，b eo rs h ew i l ln o tg u a r a n t e ed e s i g nq u a l i t yo f t h e w e bs i t e w e bd e s i g n e rs h o u l dk n o wt h a t ：d e s i g n e ri sn o tu s e r ，u s e ri sn o td e s i g n e r ；d e s i g nf o r u s e r sa n dc o n s i d e rd i f f e r e n c e sb e t w e e nu s e r s w e bi n t e r f a c ed e s i g ni sak i n do f e x t e n s i o no f i n t e r f a c ed e s i g n i nw e bi n t e r f a c ed e s i g n ， w e b d e s i g n e rm a y u s en e w t e c h n o l o g yt oi m p r o v ew e bu s e r s e x p e r i e n c e ，a n d t os w e e pw e b u s e r s d r e a da n ds t r a n g e n e s s v i r t u a lr e a l i t yt e c h n o l o g yi saf l e wt e c h n o l o g y ，a n di ti n v o l v e sm a n yf i e l d so f s c i e n c e i nv i r t u a lr e a l i t y ，t h ew e bu s e rb e c o m e s f u l l yi m m e r s e di na na r t i f i c i a i ，t h r e e d i m e n s i o n a l w o r l dt h a ti sc o m p l e t e l yg e n e r a t e db yac o m p u t e r t h eu s eo fv i r t u a lr e a l i t yt e c h n o l o g yi n w e bw i l li m p r o v ew e bu s e r s e x p e r i e n c eg r e a t l y m u l t i m e d i ae l e m e n t si nt h ew e bi n c l u d ea u d i oa n dv i d e o t h e s em u l t i m e d i ae l e m e n t sa r e a t t r a c t i v e t h e yc o m p l e m e n t w e bp a g e s p e r f e c t l y n o w a d a y s w e bb r o a d c a s t a n d w e b m e e t i n g i sm o r e a n dm o r ep o p u l a r t h e yb e l o n gt om u l t i m e d i a , t o o w e bs i t es h o u l db ef u l l yt e s t e db e f o r ei ti s f o r m a l l yp u b l i s h e d t h et e s t a b o u tw e b i n t e r f a c ei sv e r yi m p o r t a n tt oaw e bs i t e a b o v ea l l ag o o dw e bs i t es h o u l db ee a s yt ou s e a t t r a c t i v e ，g r a t i f y i n g 1 i i w e b 优化i 盐i t h ew e bi sg r o w i n gw i t he v e r y p a s s i n gd a y n e wt e c h n o l o g i e sa n dm e t h o d si nw e bc o m e f o r t h c e a s e l e s s l y ，a n dt h e s ew i l lc h a n g et h ew e bu l t i m a t e l y o u ra t t i t u d et o w a r d sw e bi s p o s i t i v ea n do p t i m i s t i c w es h o u l dg r a s pt h et i d eo f t e c h n o l o g y ，b o o s t t h ew e b d e v e l o p m e n t a l lt o g e t h e r ，a n dg r e e tt h en e w a g e o f w o r l dw i d ew e b k e y w o r d s ：w e bd e s i g n ；u n i v e r s a ld e s i g n ；o p t i m i z a t i o n 湖南大学 学位论文原创性声明 本人郑重声明：所毕交的沦文是本人在导师的指导下独立进行研究所取 得的研究成果。除了文中特n d r i 以标注引用的内容外，本论文不包含任何其 他个人或集体已经发表或撰写的成果作品。对本文的研究做出重要贡献的个 人和集体，均已在文中以明确方式标明。本人完全意识到本声明的法律后果 由本人承担。 作者签名：鹰哆 日期：训毕年f 月r 9 口 学位论文版权使用授权书 本学位论文作者完全了解学校有关保留、使用学位沦文的规定，同意学 校保留并向国家有关部门或机构送交论文的复印件和电子版，允许论文被查 阅和借阅。本人授权湖南大学可以将本学位论文的全部或部分内容编入有关 数据库进行检索，可以采用影1 7 1 、缩印或扫描等复制手段保存和汇编本学位 论文。 本学位论文属于 l 、保密口，在年解密后适用本授权书。 2 、不保密团。 ( 请在以上相应方框内打“”) 作者签名 导师签名 日期：洲d 峰年f 月，9 日 日期扣中矽“钼 第1 章绪论 1 1 研究的学术背景及其理论与实际意义 w e b 的基础建立干7 0 年代发展起米的计算机网络群之上，其前身是美国国防部高 级砌f 究计划署( a r p a ) 1 9 6 9 年建立的军用实验州a r p a n e t ( a d v a n c e dr e s e a r c hp r o j e c t s a g e n c yn e t w o r k ) ，当时只有四台牛机。现在，w e b 连接了_ 伞球数万个计算机网络，数千 万台1 ：机，其中包含了难以计数的信息资源，向伞世界提供信息服务。w e b 的出现，是 世羿由工业化走向信息化的必然和象征。当然，这井彳i 是对w e b 的定义而仅仅是对 它的一种解释。 从网络通信的角度来看，w e b 是一个以t c w i p 网络协议连接各个国家、各个地区、 各个机构的计算机网络的数据通信网。从信息资源的角度来看，w e b 是一个集各个部门， 各个领域的各种信息资源为一体，供网上用户麸享的信息资源网。 今天的w e b 已经远远超过了一个网络的涵义，它是一个信息社会的缩影。虽然至 今还没自个准确的定义来概括w e b ，但是这个定义应从通信协议，物理连接，资源共 享，丰仃互联系相互通信等角度来综合加以考虑。w e b 也已成为人们研究的重点课题之 一一，范围为从争注予底层的通信协议、物理连接的研究( i n t e r n e t 设计) 到与w e b 用厂1 日常应用密切相关的w e b 设计研究等等都有涉及。 w e b 止在改变世界，它促成了网络经济雏形的形成由于w e b 具有传播信息容量 极大、形态多样、迅速方便、全球覆盖、自由和交互的特点，它已经发展成为我们这个 世界上当之无愧的最大的传播媒体。 据c n n i c ( 中国互联网络信息中心) 发布的中国互联网络发展状况统计报告( 1 2 ) 统计，截止2 0 0 3 年6 月3 0 日，我国大陆网民数、上网计算机数继续保持了增长趋势， 分别达到了6 8 0 0 万、2 5 7 2 万，跃居世界第二位。与此同时，c n 下注册的域名数、到 站数都有较大的增长，分别达到了2 5 万、4 7 ，4 万：国际出e l 带宽总数达到1 85 9 9 m ： 我国大陆的l p 地址数达到了3 20 8 4 4 8 0 个 2 】。数据表明。中国大陆的互联网继续保持高 速发展，形势喜人。 第1 二次c n n i c 调查结果显示，网民中1 8 至2 4 岁的年轻人所占比例最高，达到 3 9 f ，其次是2 5 至3 0 岁( 比例为f 7 2 ) 和1 8 岁以下( 比例为1 7 1 ) 。3 0 岁以上的网 民随着年龄的增加所l 彳比例相应减少：3 1 至3 5 岁的网民占到1 0 3 ，3 6 - 4 0 岁的占到 7 4 4 1 5 0 岁的为6 ，只有2 9 的网民在5 0 岁以上( 如表1 1 1 所示) 。3 5 岁以下 的例民占8 3 7 3 5 岁以上的嘲民占t 6 3 ，我国嘲民在结构上呈现出低龄化的特征。 表i i i 中国网民年龄分布比例( 资料来源：c n n l c ) 至于我国网民受教育程度分布情况，奉次c n n i c 调查显示，我国网民中受教行枉 度为高中( 巾专) 的比例最高，占到3 0 9 ，其次是大专( 比例为2 7 1 ) 和本科( 比 例为2 5 5 ) 。本科及以上受教育程度的网民为2 8 1 ，本科以下受教育程度的网民达到 了7 1 9 ( 如 表i 1 2 所示) 。本科以下受教育程度的网民占据大多数。 轰i 1 2 中国网民受教育程度分布比例( 资料来源：c n n i c ) 目前我国的网民仍然以男性、未婚者、3 5 岁以下的年轻人为主体；大学本科以下受 教育程度的人以及低收入青仍然占据大多数；学生、专业技术人员比其它职业的人要多； 教育业、制造业、公共管理和社会组织、批发和零售业以及i t 业成为网民相对比较集 中的j 亍业。这些数据表明，我国嘲民在特征结构i 还不够合理与平衡，互联 稠诅：我困的 完全普及还需要一个长期的过程。 第十二次c n n i c 调查结果显示，在我围6 8 0 0 万上叫用户l + l ，使用专线方式上刚的 用户数为2 3 4 2 万人，使用拨号方式卜- 网的用户数为4 5 0 i 万人，使用i s d n 方式卜网的 用户数为4 9 0 万人，使用宽带方式上网的用广数为9 8 0 万人( 如表i 1 3 所示) 。而在我 酮2 5 7 2 台卜网计算机中，通过专线方式接入互联捌的计算机为5 1 5 万台，通过拨号 力j 接入互联网的计算机为1 7 3 9 万台，通过其他疗式接入互联网的计算机为3 1 8 万台。 上述网民的情况及上网计算机的情况都表明拨号上网是到目前为止用户上网的主要方 式。 表i i3 不同上网方式用户教( 万人) ( 资料来源：c n n i c ) 可以说，我国互联网的发展情况是很令人乐观的，可谓高速发展，潜力巨大。在这 种形势之下，笔者认为，我们很有必要从另一个角度来分析一下我国互联网的发展情况。 互联网赖以存在的基础是它为数庞大的用户，也即“网民”。那末，用户对于互联网究 竟是怎样一个态度? 用户在实际的上网过稗，究竟是怎样的情形呢? 本次的调查数据， 客观的告诉我们，我国广大互联网用户对于互联网的整体满意程度并不能让入满意。比 如，在对于互联网的速度、安全性、操作简便方面的调查，给与比较满意以上答案的用 户8 - 分比分别仅占总体的3 8 4 、1 9 6 、5 2 7 。这样的结果，显然不能让人满意。 浏览一些具有代表性的国内站点，如门户网站可以让我们更加具体地了解这个问 题。图1 1 ，1 是我国著名门户叫站新浪网首页的一张截图( 2 0 0 4 年5 月1 4 口) 。至 于其在美学上的评价如何，我们暂不讨论，这里先介绍一下笔者在浏览时的体验。点击 新浪网后，屏幕上首先依次跳h 两个色彩鲜艳的广告窗口，而且两个广告全部都是数据 量较大的f l a s h 动画。随着新浪网首页其余内容逐步载入。嗣页基本显示完整，整体看 上去最引人注意的是数量众多的贴片动画广告，在这些广告之中还有两个浮动的f l a s h 动画窗口。新浪首页导航分类的条目可淆细致，在网页顶部就达5 5 项之多( 酋页、体 育、科技、财经等等) 。同时，首页上还有大量的标题链接，数量也达到r 惊人的数百 项。可能是南于链接的数量过于庞大，链接的文宁全部以8 磅火小显示，在屏幕上看起 来感觉较为细小，中老年人若要阅读恐怕白不少的问题。如此这样个臃肿的首页，自 身的文什大小达到了惊人的3 0 0 多k b ( 尚未包含所有f l a s hj 竹的文什大小) ，这对于 绝大多数使用m o d e m 拨号 二网的中国w e b 用户而苦就意味着4 0 秒以上的f 载时间! 这样的菏负，对于用户m 言，仿佛一部庞大杂乱、喧嚣的机器，其使用性能可想商知。 图lii 新派网首页( w w w s i n a c o m c n ) 上述的问题具有一定的代表性，基本上反映了我国大部分门户站点的设计水准。伴 随着w e b 进一步的发展，它将拥有数量更为庞大的用户群：同时，w e b 也将更加与我 们的生活融为一体，与我们周围的一切息息相关，这样的情况f ，如果我们再不提高 w e b 的设计，提高它的易用性，势必会给我国数量庞大的w e b 用户带来巨大的麻烦 甚至于影响到w e b 自身的普及。本文所讨论的“w e b 优化设计”正是关注这些问题 致力于提高w e b 的可用性、易用性，让尽可能多的用户尽可能容易的使用w e b ，米推 进w e b 整体的普及。 美国是当今信息技术的中心，也是w e b 的发源地，鉴于这些方面的原因，美国对 于w e b 优化设计方面研究起步较早而且据大多数i c p ( i n t e m e tc o n t e n tp r o v i d e r ，互 联网内容提供商) 对于此方面问题也有足够的重j ! ! i 。因此，欧美的w e b 的整体设计水 平较高，w e b 用户的使用情况也比较好。 然而刈于“w e b 优化设计”等问题的研究，在我国国内尚属于起步阶段。国内列于 w e b 的研究，更多的是集中于硬件、软件平台方而。近年来，对于w e b 设计方而的研 究也单纯局限于w e b 的美化，很多情况f 是用平而设计的思想与方法来美化酬站。修 饰网页。 方面我们的网站数量与h 俱增网页也是越来越华丽，我们h 常，仁沂的许 许多多方面都与网络口益密切；但是另一方面，我们网站时设计依旧停钟在“美化修饰” 的) 丢t t i j ：，设计师对于用户的需求，对于我国互联网的实际情况，都缺乏足够的认识。 这些 | i | i 迫切要求我们对于我国的w e b 设汁其体的思想、乃+ 法有个比较全面而深入的 研究。 w e b 优化设计所研究所针对的对象，首先就是w e b 用户，兄其是w e b 的固定用户， 也就是通常意义t 的“网民”( c n n i c 对网民的定义为：平均每周使册互联网至少l 小 时的中国公民) 。w e b 优化设计尤其关注一些特定人群的需求，比如残障人士、高龄人 十。需要强调的是，这罩的“关注”，不是歧视性的，而是要让更多的人，更容易的拥 有w e b 这个基本的工具。从这个意义上讲，w e b 优化设计就是一种w e b 的通用设计。 其次，w e b 优化设计也必须从w e b 用户角度，有针对性地研究服务器后台技术，浏览 器技术以及和w e b 优化设计密切相关的设训理念与方法。其目的是，合理的运用这 些新的方法与技术，让它们更好的服务于w e b 用户。 1 2w e b 优化设计相关研究 美同学者j a k o bn i e l s e n 博士是s u n 公司的资深的工程师，较早从事w e b 优化设计 相关研究。n i e l s e n 最早提出了w e b 可用性概念( w e bu s a b i l i t y ) ，在w e b 可用性的领 域被公认为世界的权威”。可用性是指产品为特定用户用于特定用途时所具有的有效性 ( e f f e c t i v e n e s s ) 、效率( e f f i c i e n c y ) 和用户主观满意发( s a t i s f a c t i o n ) 。 n i e l s e n 特别提出了w e b 设计的些必要原则，如： 在为网站写程序时遵循w e b 的标准( 严格遵守w 3 c 标准，以及其它已经广泛使 用的标准，例如j a v a s c r i p t 等) ； 遵循规范( 8 0 到9 0 的使用者都在做的就是一种规范) ： 强调快速的响应时间( 从网页和服务器两方面) ； 简明、客观、易于浏览； 协助使用者决定去留； 区分产品列表； 支持搜寻的功能，但是不要做的太繁琐( 可以以g o o g l e 为标准) ； 在改进设计之前先做好任务分析( t a s ka n a l y s i s ) ： 在设计时强调任务支持( 例如，网上购物中的挑选商品) ； 在设计过程中进行多次使用者测试： 让残障人上也可访问网站： 小应该妨碍使用者( 如用过度喧哗夺只的页而，过度使用f l a s h ，用具有广告性质 及不合主体的罔片来修饰内容) ； 不应该包含未经请求的弹出式窗口( 在线帮助信息除外) ： 不应该去掉“上一页”( b a c k ) 按钮； 不应该把功能元素设计得看起来像j 1 告； 小应该滥用动态的文字( m o v i n gt e x t ) ； 小应该允许超链接( h y p e r l i n k ) 发生错误。 n i e l s e n 认为，一个优秀的网站需要“实用的设计、精确的使用者响应系统和精简 的设计”。他提山三个基本的原则来启发w e b 设计者：精致简约，有利于使用者使用， 不要阻碍使用者。 美国微软公司( m i c r o s o f tc o r p o r a t i o n ) 刈丁可州性问题+ 赢有着深入和广泛的研究。 微软公司研究人员认为，可用性包含很多方碰，但通常这一术语特指发现、学习和有效 性这三种属性。发现表示针对某种特定的需要去寻找并找到产品的某一功能。可用性测 试可用于确定用户找到某一功能所用的时间，以及在整个过程中用户犯了多少错误( 关 于定位的错误选择) 。学习表示用户弄清楚如何运用所发现的功能来完成现有任务的过 程。可用性测试可以确定这个过程的长短，以及在学习该功能期间用户犯了多少错误。 有效性表示用户“掌握”了某项功能，不再需要进一步学习即可使用【4 j 。可用性测试可 以确定有经验的用户使用该功能时执行必要步骤所需的时闻。 可用性的这三个基本方面在很大程度上受到当前任务性质和用户执行任务的频率 的影响。有些功能的使用频率很低或者使用起来十分复杂，导致用户基本上每次使用时 都要莆新学习：对，这些功能，微软公司通常会开发使用向导，在整个使用过程中对用 户予以指导。 可用性测试可以帮助开发人员判断用户使用产品执行特殊任务的难易程度。但是， 它并不能直接帮助开发人员判断产品自身是否有价值、是否实用。在可用性测试中，用 户a ，能会主动提出一些关于实用性的意见，但任何意见都应通过其它更可靠的研究方法 予以验证。 可用性测试有助于促进用户对产品的接受程度。有很多因素决定了用户对产品的接 受程度，这些因素包括可用性、实用性和受欢迎度。对于零售产品，用户的接受程度往 往寅接影响对产品的重复购买或对产品的忠诚度，这说明用户可能将产品推荐给其他 人。对于内部应用程序用户的接受程度决定用户是否愿意使用该软件执行任务，而这 些软件就是针对这些任务设计的，这有助于提高生产效率。提高可用性是提高用户对产 品的接受程度的一个因素。 微软公司的g o u l d 、b o i e s 和l e w i s 等人为以用户为中心的设计定义了4 个重要 的原则： 6 及早以用户为中心，设计人员应当在设计过稗的早期就致力于了解用户的需要： 综合设计，设计的所有方丽应当齐头井进的发展，而不是顺次发展，使产晶的内部 设计与用户界而的需要始终保持一致： 及早并持续性地进行测试，当前对软件测试的唯可行的方法是根据经验总结出的 方法，即着实际用户认为设计是可行的，它就是可行的( 通过在开发的全过程引入可用 性测试，可以使j j 户有机会在产品推出之前就设计提供反馈意见) ：反复式设计，大问 题往往会掩，采小问题的存在。设汁人员和开发人员应当在整个测试过程中反复对设计进 行修改。 1 3w e b 优化设计主要研究内容 本文讨论的w e b 优化设计是一个较为广泛的概念。本文所讨论的内容，并不是具 体的网站、网页的设计制作与开发，而更多的是一种组织规划网站和网页的理念与方法。 在这里，我们有意要区分以下w e b 设计的概念。奉文所讨论的w e b 设讣，应当说就是 组织、规划网站和网页的理念与方法，w e b 优化设计的目的是让互联网可以更好地服务 于用户，让更多的人可以使用互联网，推动互联网在我国的莆及。 w e b 设计的概念很容易和互联网设计( i n t e m e td e s i g n ) 、网页设计( w e bp a g ed e s i g n ) 的概念相混淆。我们可以通过下面的图表来具体分析一下w e b 设计的概念。 图1 3iw e b 设计涉及的范围 可以说w e b 设计填补了w e b 技术和测览器之间的鸿沟。很明显，w e b 设计受到技 术的不足与浏览器的缺陷的制约。w e b 设计者的工作就是如何在现有条件下解决这些问 题。w e b 设讣涉及到了设计理念，设计元素，设计条件等诸多方面的问题，事实上， w e b 设计也正是要解决这些问题。 本文所指的互联网设计，则主要涉及服务器，后台技术以及网络通信技术等具体的技 术问题，相对于我们所讨论的w e b 设计而言处于基础层面。 传统意义上的网页设计相刘于本文所讨论的w e b 设计则更多的处于应用层面。传 统l 卅页设计的主要任务是丽向浏览器来优化叫页的布局，从美学的角度来设计州页。从 这个角度来讲，i 卅页设计有些类似于平而设计，当然，砖者的差别也是巨大的。 网页殴计与传统平面设计的书要区别有j 个方面。 首先是两者的介质的不同。通常传统甲面设计作品大多是以印刷品的形式出现，而 网页则是在训算机的显示器f = 出现的，二：者的介质不同。显示器的分辨率比较低，只有 7 2 d p i ， | 】7 2 像素每英、j ( a p p l e 电脑为9 6 d p i ) ，较绌小的线条或者文字在显示器上不 易显示清楚。显可i 器色彩显1 模式为r g b 模式，一，儿= 上显示近千万种颜色。印刷品| j ! i j 要 求分辨率须达到3 0 0 d p i 左右，色彩模式是c m y k 。受到当前印刷技术的制约，c m y k 模式的色彩范围远远小于r g b 模式。由此可见，显示器的色彩比印刷品色彩丰富而分 辨率比印刷品低。 其次是页而火小的问题。平面发计往往受到纸张幅面、纸度问题的影响。而w e b 用，、的显示环境则会在很大程度上影响州页设计。对于w e b 用户，显示器的大小是固 定的，但是显示器显示的范喇在理论上却是无限的。当然，过于大的网页对于用户而言 也是很不方便的，用户必须在垂直或是水平方向拖动灭面。当前大多数电脑用户的显示 环境为8 0 0 x 6 0 0 像素( p i x e l ) ，凼此大多数门户网站的页宽最大尺寸也为8 0 0 像素。这 样，在多数的情况下，用户不用横向滚动屏就可以看到完整的页面。但随着计算机技术 的发展以及电脑的普及，显示环境逐步向着1 0 2 4 x 7 6 8 像素甚至更高的方向发展这为 一些多样化的设计提供了很好的表现机会，蚓时也给传统门户网站的设计观念提出了挑 战。但另一方i l i i ，下载速度的快慢童接影响到网页的访问率，要想提高网页的生命力， 就必须在各方而下功夫，提高访问速度和下载速度。虽然现在宽带网正在逐步普及，但 网页设计仍然要考虑到大多数用户的情况以及用户等待的忍耐度。 网页设计与平面设计的最大区别是网页本身的交互性。一方面，所有网页都具有超 链接，选择它们可以链接到其它网页或网站。更重要的是用户可以通过网页参加讨论、 聊天、电t r 商务等。因此，设计时应该尽可能减少不必要的交互障碍。w e b 站点最大的 资源优势在于它的多媒体功能。互联网可以利用文字、声音、图像、动画，甚至虚拟现 实技术等与用户交互，用户可以在网络上一边查找信息，一边享受互联网带来的愉悦。 这种交互性是传统的印刷媒体无法企及的，当然，这对于我们的w e b 设计而言，也是 种新的挑战。 第2 章w e b 技术分析 2 1w e b 浏览器及服务器技术分析 浏览器 w e b 浏览器( w e bb r o w s e r ) 是w e b 系统用来浏览信息的客，l 程序，针对不同的计算 机平台、操作系统及用户界面需求，可以使用不同的浏览器。我们在谈论w e b 的时候， 不应把w e b 和w e b 客户端浏览程序混为。谈。对丁用户而言，由丁一j 者在1 ：作时紧密 相连，人们常常将他们使用的w e b 客户端浏览程序看作w e b 本身。实际上，w e b 客户 浏览程序应该被视为w e b 用户用来观看丰富多彩的w e bl i t 界的一个“窗口”。这正如无 线电广播与收音机的关系：选择一部性能优良的收音机，将使你接收广播节目的能力大 大增强。l 剐样，选择一个合适的w e b 客户端浏览程序，将使用户的操作更简便，得到 的信息更丰富p l 。 w e b 浏览器的最基本r 的在于让用户在自己的电脑上检索、查询、采掘、获取w e b 上的各种资源。由于w e b 正处在日新月异的飞速发展阶段，w e b 每天都被使用它的人 们赋予新的涵义，使得浏览器的功能也在不断的扩充和更新。归纳起来浏览器应具备 以下几种基本功能：检索查询功能：文件服务功能；建立自己的主页( h o m ep a g e ) ；提 供其它i n t e r n e t 服务【6 】。从某种意义上来说，浏览器扮演着现今操作系统的角色。也许 有一天，人们在p c 上运行的可能只有浏览器，那时它将成为一种通用的全局系统。 对于一般用户而言，w e b 冲浪的绝大部分时间都是在使用浏览器，比如浏览、查询、 购物、电予商务等等。目前市面上已有几十种浏览器，功能有强有弱，它们大多为免费 或共享软件，可以在i n t e m e t 上方便地获取。代表性的浏览器有：n e t s c a p en a v i g a t o r 、 m i c r o s o f ti n t e r n e te x p l o r e r 、m o s a i c 、h o tj a v a 、o p e r a 等。国内用户大多数使用m i c r o s o f t i n t e m e te x p l o r e r ，但是也有少量用户使用n e t s c a p e n a v i g a t o r 、m o s a i c 等等，这些问题在 设计和最终测试时也必须考虑。 站点技术 作为w e b 上最主要的信息管理和组织手段，w e b 由一系列相应的技术及应用构成， 其组成技术包括h t t p ( h y p e r t e x tt r a n s f e rp r o t o c 0 1 ) 、h t m l ( h y p e rt e x tm a r k u p l a n g u a g e ) 、u r l ( u n i f o r m r e s o u r c el o c a t o r ) ) 以及c g i ( c o m m o n g a t e w a y i n t e r f a c e ) 等。 h t t p 协议即超文本传输协议，是用于从w e b 服务器传输超文本到本地浏览器的传 送协议。它可以使浏览器更加高效，使 b 9 络传输减少。它不仅保证计算机正确快速地传 输超文本文档，还确定传输文档中的哪部分，以及哪部分内容首先显示( 如文本允丁 9 图形) 等。w e b 的设计日标侧重于信息资源的共享、交流和发柿，h t l 甲协议也是本着这 一同的而设计。h t t p 在w e b 的快速发腰- l 发挥了很大作用，有不少突出的特点”。 h t m l h 超文本标记语言，是在w e b 上建立的超文本语言。h t m l 文件看起来象 是加入了许多被称为标签( t a g ) 的特殊字符串的普通文奉文件。从结构卜| 讲，h t m l 文件 山元素( e l e m e n t ) 组成，用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容 器”，t 1 1 j 它有起始标签( s t a r t t a g ) 和结尾标签( e n d t a g ) ，在起始标签和结尾标签中问的部分 足，l 索体。每一个兀素都有名称和可选择的属性，元素的名称和属性都在起始标签内标 叫。f | 前，绝大多数w e b 文档使用h t m l 编写。由于h t m l 定义准确，凶此在一段时 期内，采用h7 f m l 编写的w e b 文档还将继续发展。但服务器平台更新换代的速度很快， 因此，在设计一个w e b 体系时，必须考虑w e b 在不同的服务器平台问的可移植性问题口j 。 h t m l 的是一种结构化编码的语法，有意忽略了许多格式命令( 例如，h t m l 中不 可以使段落首行缩进) 。当w e b 变得h 益普及时，w e b 设计者需要对w e b 文本格式和设 计有更多自。w 3 c ( w o r l dw i d ew e bc o n s o r t i u m ，万维网联盟) 为此制定了c s s ( c a s c a d i n gs t y l es h e e t ，层叠样式表) 。层叠样式表提供了大量的格式化控件，更为重 要的是，它允许设计者改变层叠样式表，从而控制整个站点的外观。c s s 另一个重要功 能是其图层功能。 d h t m l ( d y n a m i ch t m l ，动态h t m l ) 是与层叠样式表和j a v a s c r i p t 紧密联系的一 种h t m l 。d h t m l 语法与h t m l 语法一样，其目的是使设计者创建更加灵活的w e b 页面。x m l ( e x t e n s i b l em a r k u pl a n g u a g e ，可扩展标记语言) 的用途是允许w e b 设计 者创建描述站点内容的标记符。为使浏览器将这些标记符解释为h t m l 。每个标记符格 式都存储在连接到h t m l 页而的外部文档中。这样，设计者就可以通过改变x m l 主控 文件来改变整个站点i i 所有价格和产品名称的格式。x m l 是所有动态w e b 站点的基本 要素。 f l a s h 是一种技术，也是m a c r o m e d i a 发布的一种软件的名称。f l a s h 可以显示图像 和其他媒体，如q u i c k t i m e 视频，它是专门制作动态矢量图形的。近些年来，f l a s h 已 经变得更为强大，可以编写脚本。许多人都在利用f l a s h 开发应用程序。与此相对应的 s h o c k w a v e 技术则允许用户嵌入用m a c r o m e d i a 和d i r e c t o r 创建的应用程序。 服务器技术 w e b 页面可以分为静态页面( s t a t i cw e bp a g e ) 和动态页面( d y n a m i c w e b p a g e ) 。动 态页面比静态页面更能提供及时详尽的信息。动态页面又称为交互页面( i n t e r a c t i v e w e b d a g e ) ，其内容可以根据用户的要求或输入改变1 9 】。动态页面的实现离不开服务器技术。 w e b 服务器本身提供一些基本功能，以处理客户端的请求和进行自身的管理。但不 同的用户有不同的功能要求，其中许多功能是w e b 服务器自身不能提供的，如在线查 询等，它必须提供一种扩展手段，以实现允许用户编写扩展应用程序和扩展服务器的功 能m 。实现这种扩展服务的主要技术f i - a s p ，c g i ( 这里是指传统的c g i 技术， # 扑泛指的c g i 技术) 和p h p 等儿种。 通用l 叫关接ii ( c o m m o ng a t e w a yi n t e r f a c e ) ，是处理服务器和浏览器之间的交巨的技 术。p e r l ( p r a c t i c a le x t r a c t i o na n dr e p o r tl a n g u a g e ) ，是1 种编程语言。p e r l 使用起 来方便，而且可以用在所有的服务器上。尽管p e r l 栩对来说易掌握，但调试和安装p e r l 脚本棚当复杂，因为不同的服务器需要使用不同的变量。 a s p ，c o l df u s i o n ，p h p 和l a s s o 是几种不同的应用程序服务器技术。a s p ( a c t i v e s e r v e rp a g e s ，动态服务器网页) 是微软公司的应用程序服务器技术。a s p 是一个服务器 端的脚本环境。在站点的w e b 服务器上解释脚本，町产生并执行动态交互式、高效率 的站点服务器麻用程序。a s p 可以胜任基于微软公司w e b 服务器的各种动态数据发布【l 2 吲。 c o l df u s i o n 的一r ：作方式与a s p 很相似。除了a s p 和c o l df u s i o n 之外，p h p 也是 一个很好的选择。它的源代码是开放的，因此