第一章网页设计基本理论.ppt

《第一章网页设计基本理论.ppt》由会员分享，可在线阅读，更多相关《第一章网页设计基本理论.ppt（36页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第一章 网页设计的基本理论网页网页设计设计的基本理论的基本理论网页设计艺术主要内容1.1 网页设计概述网页设计概述11.2 网页设计的构成要素及特性网页设计的构成要素及特性21.3 网页设计的定位网页设计的定位31.4 网页美工与设计流程网页美工与设计流程4 进入21世纪，我们进入了一个崭新的信息时代，从传呼机退出历史舞台到3G手机的使用，从电视接收闭路信号到数字电视点播，人类社会正向数字时代的转变。Internet作为信息社会的典型代表，正在全世界进行着越来越深刻的革命。它代表着一种崭新的信息交流方式，它使信息的传播突破了传统的政治、经济、地域及文化的阻隔，使信息传达的范围、速度与效率都产生

2、了质的飞跃。Internet是由成千上万的网站组成，而每个网站都是由诸多网页构成，故网页是构成Internet的基本元素。网页设计是网络视觉信息的编排及归类，这是网页设计的特点，也是身处于信息化、数字化时代的当今设计者所必须具备的基本素质。1.1 网页设计概述 网页从最早的以文字为主的页面，发展到今天图、文、声、像、多媒体并茂的页面，从以静态网页为主，发展到今天可以像博客这样由浏览者定制的交互式动态网页，从实现信息传达功能为主，发展到要求功能与审美兼得页面。“美”与“技术”这两个要素的结合，正是如今网页设计领域研究的中心内容。网页设计在视觉传达设计这一领域中，“美”和“技术”必然要结合在一起，

3、而如何结合与实现，正是本书所要探讨的内容。1.1 网页设计概述 网页设计作为设计学科的一个分支，具有很高的实用价值。它以科学技术和艺术的结合为基础，以外观表现形式为主要手段，谋求网页界面的功能美与形式美，并体现网页的时代感，以优良的设计努力满足浏览者的心理需求。从设计类型上来看，网页设计应属于视觉传达设计的领域，故而网页设计的主要构成元素和设计指导原则都遵循视觉传达设计的一般规律。在本书以后章节中将对网页设计的主要构成元素和设计指导原则一一予以阐述，并研究网页设计的常用软件与实现方法。1.1 网页设计概述 对于网页设计来讲，其信息内容的有效传达是通过将各种构成要素的设计编排来实现的。网页的构成

4、要素包括文字、图形图像、色彩、版式等构成要素。1.2 网页设计的构成要素及特性 1.2.1 1.2.1 网页设计的构成要素网页设计的构成要素版式版式版式版式色彩色彩文字文字文字文字图形图像图形图像图形图像图形图像1.文字的编排与设计 文字在视觉传达中作为页面的构成要素之一，除了表意以外，还具有传达感情的功能，因而必须具有视觉上的美感，能给人以美好印象，获得良好的心理反应。作为信息传达的主要手段的文字目前是网页设计的主体，是网页中必不可少的元素，也是网页中的主要信息构成要素。1.文字的编排与设计 要达到网页文字传达的有效性，必须重视文字编辑的整体效果，使网页文字能给人以清晰的视觉印象，避免页面繁

5、杂零乱，减去不必要的装饰变化，使人易认、易懂、易读。网页文字的设计不能为了艺术造型而编辑，忘记了文字本身是传达内容和表达信息的主题。2.图形图像的创意与设计 在视觉顺序上，图形往往能首先吸引人们的注意力，这是由于图形给人的视觉印象要比文字强烈得多，图片的引入也大大美化了网页。可以说，要使网页在纯文本基础上变得更有趣味，最为简捷省力的办法就是使用图片。几乎所有的网页都用到了图形，善用图形，可以生动、形象、直观地表达网页的主题，增强网页的宣传力、号召力和感染力，吸引浏览者的注意，引起浏览者的兴趣。网页可以图文并茂地向用户提供信息，成倍地加大了它所提供的信息量。对于一条信息来说，图片对浏览者吸引也远

6、远超过单纯的文字。北京大学新版主页图文并茂、稳重高雅、色彩搭配稳重得体，与旧版相比增色不少。2.图形图像的创意与设计 图形图像必须完全符合网页的主题，并以创新的构思和强烈的个性，来使主题与表现两者较好地统一，以有利于信息的传达。图片的位置、面积、数量、形式、方向等直接关系到网页的视觉传达。在图文混排时，要注意统一、悦目、重点突出，特别是在处理和相关文字编排在一起的图片时，应考虑图片在整体编辑计划中的作用，达到和谐整齐。3.版式的设计与编排 网页版式的设计是技术性与艺术性的高度统一，是视觉传达的重要手段，是网页设计的重要组成部分。它是指将文字、图形等视觉元素进行组合配置，使页面整体的视觉效果美观

7、而易读，便于阅读理解，实现信息传达的最佳效果。许多设计成功的网页能够吸引浏览者，往往并非仅仅依赖于几张引人注目的图片或嗦头式的标题，而是靠成功的版式设计。好的版式首先能以清晰的视觉导向使浏览者对网页内容一目了然，其次又以巧妙的图文配置使浏览者获得悦目的视觉效果。4.色彩的搭配 我们在浏览网页时，留下的第一印象就是页面的色彩设计，它的好坏直接影响阅读者的观赏兴趣。在网页设计领域，彩色的网页总是要胜于单色的网页。网页也是一种艺术品，因为它既要求文字的优美流畅，又要求页面的新颖、整洁，使用色彩可以产生强烈的视觉效果，使页面更加生动。5.多媒体元素的选择 网页中的多媒体元素在能够很大程度上增强对浏览者

8、的吸引力。浏览者希望在网上看到更具创造性、更具吸引力和更具情趣的网页，多媒体元素正是实现这一目标的重要手段。网页中所涉及到的多媒体元素主要是音频、视频和动画等。动画动画动画动画 动画动画动画动画音频音频音频音频 视频视频视频视频 （1）音频 随着音频技术及语音控制技术的进一步发展和普及，以音频进行人机交流满逐步成为实现网页交互性的重要手段。在网上浏览时时常可以发现一些网页设置了背景音乐，伴随轻柔优美的乐曲，使浏览者在网上冲浪成了更加惬意的休闲活动。加入音乐，动画文件大小变大，下载时间就会加长。因此，在运用音效时要谨慎处理，尽量在不影响效果的情况下减小文件的大小。在网页中常用的音频格式有：WAV

9、、MIDI、MP3、Real Media等。目前支持WAV格式的环境很多，但WAV格式基本上都是保存没有压缩过的音频，因此文件比较大，不便于下载。MP3是在尽量保持良好音质的同时，减小了文件的大小，是在网页中比较常用的音频格式。Real Media是网络流媒体的文件格式，在非常低的网速下能够提供较好的音质，但是需要有RealPlayer软件支持才能播放，因此不太适合在网页中应用。大多数比较小的MIDI文件都可以提供比较长的播放时间，若单独放在网页中，下载时间也是比较理想的。（2）视频 网速的提高使得以视频为传达媒介的信息成为可能，视频形象生动、易于理解，对浏览者的文化水平要求不高，具有较强的吸

10、引力。而且在信息的层次深入方面，视频表现也具有一定优势。网络视频常见的有视频短片，远程教学，视频聊天，视频点播等。像百事可乐这样一些企业甚至直接将视频搬到了网上。但是，我们还是要考虑网速问题，如果视频播放不流畅也会影响浏览效果。常见的视频文件格式主要有AVI、MPEG、Real Video和MOV等。AVI是目前最广泛使用的一种视频格式。（3）动画 网页中，动画往往是第一视觉中心。因此在传达重要信息时，动画是有效的手段。动画具有调节页面的重要作用，在以静态页面为主的网站中适当加入动画，可以达到“动静相宜”的良好视觉效果。从那些有着成功动画设计的网页中可以发现，以动画为主的表现手法往往能提高人们

11、观赏页面的兴致，增加浏览的乐趣，并引导人们的思想意识。在Flash技术流行的今天，动画日益成为网页设计的热点，全站Flash的网站层出不穷，成为展示商品与烘托效果的首选工具。（3）动画 在网页中加入多媒体元素时，要注意多媒体文件的大小，虽然Flash文件是矢量化格式，文件不是很大，但如果展示很多图片同样会造成延时，站在浏览者的立场上来看，多等一秒都是令人厌烦的。因此在保证准确传达的前提下，应尽量优化文件、压缩大小，使浏览者在最短的时间内获得最多的信息。1.2.2 网页设计的特性1.信息传达性 虽然网页设计是将技术性与艺术性融为一体的创造性活动，但网页设计应时刻围绕“信息传达”这一主题来进行。从

12、根本上来看，它是一种以功能性为主的设计。网页设计是一项创造性的工作，要求网页设计师通过有效吸引视线的艺术形式清晰、准确、有力地传达信息。网页审美从属于网页内容，其本身不可能独立存在。因而网页设计的审美功能不仅由界面形式所决定，很大程度上也受到操作顺畅程度、信息接受心理及信息接受形式等因素的影响，具有很明显的综合性。网页设计需要充分体现功能第一性的原则，以功能要求为设计的主要出发点，综合考虑、整体设计，以求达到最佳效果。2.主题明确性 对网页中主题形象的构思要以注意明确、易于接受的原则来设计。在网页中出现的视觉形象要适应大多数浏览者的口味，越明确、越通俗、越具体越好。应尽量以各层次的浏览者都能接

13、受、理解、通俗易懂的形象来吸引浏览者的注意，诱发他们的联想从而达成信息的认知。尽量避免用费解的、冷漠的形象进行说教式的信息传递。3.形式简洁性 形式简洁是网页应具有的外在特征。这是加强网页界面的视觉冲击力，迅速传递信息的要求。这就要求网页的形式应力求“删繁就简”、“以少胜多”，一切分散浏览者注意力的图形、线条、可有可无的“装饰”都应摒弃，使参与形式构成的诸元素均与欲传递的内容直接相关。各种元素的编排也应简明、清晰。与此同时，形式简洁也是形式美的要求。简洁的图形、醒目的文字、大的色块更符合形式美的要求和当今人们的欣赏趣味，令人百看不厌，并能回味无穷，联想丰富。4.界面一致性 一致性是实用性的关键

14、，网页设计应保持一贯性，网站内的各个页面应保持一贯性，不能给用户带来混乱感，比如导航的位置，页面的版式等。在使用方面，可能的话应遵循普遍规律，设计得能让用户很容易适应；网页界面的构成不能太复杂；主要内容应设计在引人注目的地方。同时，导航栏的使用要方便，要考虑好使用的色彩系统或字体，去除不必要的内容，把信息分类设计得成体系，让用户很容易就能找到想要的内容。5.使用便利性 在网页设计方面，重要的一点就是要站在浏览者的立场上去进行设计。既能给浏览者带来方便，又兼备视觉的冲击力，这样的网页才是每个网页设计人员应思考并追求的东西。网页设计不能让浏览者在使用导航要素时进入的是胡同，而应是四通八达的路口，要

15、以制作者为中心的思考模式转化为以用户为中心的思考模式，看起来便利又意义分明的视觉要素有机结合起来加以运用。为了网页美观把页面文字调得很小或与背景颜色太接近，都会给浏览者读取网页的时候带来不便。如果用户在不注意的情况下发生失误，也能对此进行改正并很容易就能挽回失误，这样的功能和设计是很有必要的。另外，提高使用上的融通性也应该是设计网页界面时多考虑的地方。1.3 网页设计的定位 任何网页都要根据主题的内容决定其风格与形式，只有形式与内容的完美统一，才能达到理想的传达效果。目前，网页的应用范围日益扩大，几乎包括了所有的行业，但归纳起来大体有几类：商业性、娱乐性、文化性、教育性、综合性、行业性、区域性

16、，各种属性的网站又可细分为不同层次的专题性。根据网站的类型和网站所服务的对象进行设计定位，才能有的放矢，在设计方面尽力做到合理。了解并满足服务对象的视觉兴趣，考虑读者是如何与网站交互的，它可以使设计者与每一个潜在读者进行交流。1.3.1 网页设计定位 不同的网站对应不同的的浏览群体，特定的浏览群体意味着有特定的主题内容。为此，网页设计定位应着眼于浏览者需求。时刻想着浏览者的需求，并千方百计地满足他们的需求。1风格定位 风格即特点，是指网站的整体内容与形式给浏览者的综合感受。风格是指能让浏览者明确青睐的网站特点。浏览者主要以视觉方式从屏幕上接受网站的文本、颜色和从动画中接收信息。形式与功能在大多

17、数时间里与内容具有互补性。如果网站的形式和内容都显得不一般，浏览的兴趣就会渐渐提升。1风格定位（1）保证界面一致性，确保网站形成统一整体的界面风格。网页上所有的图像、文字，包括背景颜色、区分线、字体、标题、注脚等网页构成要素要形成统一的整体。这种整体的风格要与其他网站的界面风格相区别，形成自己的特色。（2）确保网页界面的清晰、简洁、美观，易访问。（3）根据视觉流程，合理安排视觉要素，让读者在浏览网页的过程中体验到视觉的秩序感、节奏感、新奇感。2.功能定位 功能定位是指为特定读者群的各层次的需求服务，并尽量在简化操作。因此，设计者应该对浏览者与对网页设计技术有同样的理解。在网页上使用最新、最好的

18、技术工具，提高网站形象是一个方法但并不容易，应尽量把新技术在旧版本的浏览器下的设计限制降到最低点。考虑在新技术不支持它的情况下，网页是否还继续有效。尽量设计与设备无关的界面，包括不同的屏幕尺寸、不同的操作设备如仅有键盘，或鼠标与键盘的组合。浏览者使用的浏览器是多种多样的，如Internet Explorer、NetScape Navigator、Firefox、Maxthon、SpeedBrowser等。由于各种浏览器所支持的HTML标准各不相同（即使相同也可能因为版本不同而有所差异），所以在设计网页时必须要考虑到，以不同浏览器所显示出来的页面效果是否与原先的设计一致。作为专业的网页界面设计人

19、员，通常使用的显示器都不会小于17吋，有的使用的是宽屏16：9的显示器，并工作在1440960像素的分辨率以上，以求获得较大的工作空间和更好的显示效果。但作为浏览者，很多用户还在使用1024768像素甚至是800600像素的分辨率。2.功能定位 常用的方法是使用多种不同的浏览器来测试网页，并切换不同的分辨率，尤其是宽屏显示器（16：9）和普通显示器（4：3）的情况，避免建议浏览者采用哪种浏览器及分辨率的情形，因为这些信息浏览者需要打开网页后才能看到，况且浏览者的注意力根本就不在那里。因此，应尽可能适应多种分辨率，目前通常使用的分辨率是在1024768下进行设计，并根据浏览者的浏览器自动定位到对

20、应该浏览器的界面，这才是理想的选择。2.功能定位 当用户访问需要插件支持的网页时，前提是用户需要安装支持网页效果的插件，如果用户没有安装相应的插件，则不能正常播放。在保证效果的前提下，可以将Flash导出为低版本的格式，并提供相应插件的下载。保证没有插件时的网页显示的方法是，将图片做成背景，在背景上使用透明的Flash动画效果，从而保证在Flash不能播放的情况下，网页仍然是完整的图形。对于设置了Flash按钮的形式，可以提供与Flash按钮对应的超级链接文字或图片，从而防止Flash无法打开时网页无法浏览的情形。3.以人为本 你越是了解你的读者，你的网站就越受欢迎。如果设计者忽略读者的需求，

21、就不能保障一个网站的质量。网页设计中经常犯的一个错误是为设计者而设计。网站的定位一定要充分考虑读者在使用网页的多层面需求，要重视读者群的偏好与选择。可以通过对客户的调查和访问，了解读者对你的网站有哪些方面和哪种层度上的需求。3.以人为本（1）清晰一致的导航（2）站点地图查询（3）全站搜索功能（4）层次结构三五法则（5）提供位置的信息（6）文字字号的更改（7）优化信息的加载和显现1.3.2 网页的类型1.静态网页 静态网页是相对于动态网页而言的，适合展示型的主题。我们平常所用的html所编写出来的就是属于静态的网页。静态网页的内容是相对固定的，其他读者不能影响他们浏览数据的形式或范围。简言之，静

22、态网页仅有一种介绍方式，所有读者都必须处理此种方式，其中它与动态网页最本质的区别是：网页的内容一旦发布到服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，而且最重要的是每个网页都是一个独立的文件。访问静态网页就像读一本杂志一样，读者可以选择来回翻动网页和以不同的顺序读文章，但内容是相对严格的，除了读该内容外，对它不能做任何操作。1.3.2 网页的类型1.2.动态网页 动态网页适合交互型的网页主题，常见的有博客和论坛。许多人认为网页会动就是动态网页，这是个错误的观点，在静态的网页中也可以含有动态的图片，这仅仅是视觉上的动态

23、罢了。真正的动态网页是指实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。也就是说，它是返回到了客户端上的网页。例如网页文件是以ASP、PHP、JSP、ASPX为结尾就是动态的网页了。动态网页是指网页根据需求或读者的请求而生成的网页。动态网页的优点是网页可以根据读者的浏览条件或要求被创建。动态创建的网页的缺点在于创建起来更加复杂，并且通常服务器非常繁忙。当读者访问时，每一个主页都必须产生以提供给那些读者。1.4.1 网页美工的需求 网页设计是一门新兴的设计类和计算机网络的交叉学科，近几年随着网络的发展而逐渐受到人们的重视，它本身以网络为载体，把各种信息以最快

24、捷、方便的方式传达给受众，在这种标准的要求下，逐步产生了审美的需求。人们对美的追求是不断深入的，网页设计同样如此。网页不光是把各种东西放上去，能看就行，这是远远不够的。要考虑如何使受众能更好地和更有效率地接收网页上的信息。这就需要从审美的方面入手，制作出清晰、整体性好的页面。使人浏览起来心情愉快，接收信息也会更加容易。网页设计的审美需求是对平面视觉传达设计美学的一种继承和延伸。两者的表现形式和目的都有一定的相似性，把传统平面设计中美的形式规律同现代的网页设计的具体问题相结合起来，运用一些平面设计中美的基本形式到网页中去，增加网页设计的美感和，满足大众的视觉审美需求。1.4 网页美工与设计流程1.4.2 网页设计流程手绘效果图1Photoshop2设计效果图Dreamweaver3 版面编辑版面编辑 Flash4网页动画网页动画