视觉传达在网页中的应用大学本科毕业论文.doc

重庆市高教自考本科毕业论文

视觉传达在网页设计中的运用研究

（徐瑶）
准考证号： 010414305540 .

指导教师姓名 邵明伟 职称 讲师
考 生 单 位 重庆工程职业技术学院
邮 编 402260 电话 [phone]
专 业 名 称 数字媒体艺术
论文提交日期 2015- 4- 20 论文答辩日期
主 考 单 位 重庆邮电大学

2015年 4月 20日
21

目录

第１章绪论 1
１．１研究背景及意义 1
１．２研究现状及发展趋势 3
１．３解决的主要问题及创新点 3
１．４论文的组织结构 4
第２章关于视觉传达与网页设计 4
２．１视觉传达 4
２．２网页的定义和特点 5
２．３网页设计中视觉传达的设计原则及方法 7
第３章分析三色幼儿园网站版式视觉效果 8
３．１分析网站视觉效果 8
３．２首页版式分析 9
第４章三色幼儿园网站色彩 12
４．１教育网站色彩分析 12
４．２教育网站设计实现 15
第５章网站文字 17
５．１网站文字分析 17
５．２整体网站效果 19
第６章总结 19
参考文献 20
致谢 21

视觉传达在网页设计中的运用研究

徐瑶

学校：重庆邮电大学 专业：数字媒体艺术

摘要：在科技、信息高速发展的２１世纪，网络作为高科技与信息交互式媒介的产物，成为人类生活中不可或缺的重要连接纽带。数字技术的发展成为网络的一个桥梁，产生了网络化传播系统，从而使网络成为继报纸、广播、电视后的第四媒介。随着时代的发展，网站建设越来越接近于艺术而不仅仅是一项技术。网页的艺术设计日益被网站建设者所注重。视觉传达设计是指利用视觉符号来传递各种信息的设计。设计师是信息的发送者，传达对象是信息的接受，简称为视觉设计。视觉传达包括．‘‘视觉符号”和“传达”这两个基本概念。网页设计是一种建立在新型媒体之上的新型设计。它具有很强的视觉效果、互动性、互操作性、受众面广等其它媒体所不具有的特点。一个成功的网页设计，首先在观念上要确立动态的思维方式，其次，要有效地将艺术性引入网页设计之中，加人们浏览网页的兴趣。本文主要解决如何把视觉传达的念运用到网页设计中去，通过对网页设计中版式的首页、前台、后台主要页面进行分析；从企业网站的色彩需求，色彩特性、调和法则、设计原则和方法进行分析；从文字的简洁性，识别性和在互联网的传播性来分析；最后从导航的前台和后台两个方面分别加以分析，并运用设计学、心理学、传播学、美学等方法在艺术因素进行分析的基础上，结合湖大科技网站案例从艺术、技术角度出发，给出网页设计方案。根据网页的设计，分析网站实例的实现过程，并总结实现技术特点、一般步骤和注意问题。结合网页设计中的动态网页技术，满足用户在视觉习惯、视觉心理、易操作性等方面的多样化需求，试图探索一条艺术与技术高度相结合的道路。
关键字：视觉传达；网页设计；运用；分析。

第１章绪论
１．１研究背景及意义
计算机和网络技术的出现，毫无疑问的改变了世界，改变了人类的生活方式。而互联网的出现则促成了网络经济的形成，尤其是在电子商务由概念化走向实用化的过程中，它更是起到了决定性的作用。对于熟悉网络的人来说，网页的出现似乎是很久以前的事情了，但是认真追溯，实际上到现在为止，也只不过几十年的时间。而在整个的发展过程中，网络技术是以惊人的速度发展变化的。网页设计是一个全新的设计领域，是一门新兴的设计和网络的交叉学科，它既有继承传统设计概念的部分又有自己独特的性格。它涉及的范畴不仅包括传统的视觉传达设计，更包括信息设计、交互设计，以及感观设计等等。网页中的信息传递是以一种全新的方式—超媒体的形式传播的，相比较传统的传播媒体有着自身独特的优势：超媒体不仅可以像传统媒体一样传播文字和静态图像，更能够传播动态图形甚至视频、声频等信息；其次，读者在浏览信息的过程中，相比较传统媒体单一的浏览顺序，超媒体则为用户提供了很大的自主性；另外，读者在接受信息的过程中，在超媒体的坏境下可以运用操作工具参与或创造信息的接受活动，这种互动的优势也是传统媒体不可比拟的。
网页这种新的信息载体的出现为设计者提供了新的设计课题，同时也提供了一个新的设计空问。随着网络商业行为被广泛的接受，越来越多的网民参与进来，人们使用网络的目的也越来越多元化了，网页设计也向着更成熟的方向发展。在设计理念上，网页已经由最初纯粹的“叫卖式’’的商业简介，逐渐发展为更注重个性化的网页设计风格，以体现商业的文化内涵；在网页制作技术上，也更注重可操作性、功能性以及可读性的提高。越来越多的网页设计作品出现在人们的视野。我们生活在一个信息社会，怎样才能使我们每天接触到的信息能够更加快速地传递出去，并被有效地接受和理解，是人们非常关心的问题。而网页作为新的信息载体，更承载着这样的任务。近几年随着网络的发展，网页本身以网络为载体把各种信息以最快捷、方便的方式传达给受众。但是，人们对美的追求是不断深入的，网页设计同样如此。在审美的角度考虑如何更多更有效的传达网页信息，给用户留下更好的印象，提高网站的访问数量，促进网站的良好运作，是目前网页一个重要的发展趋势。虽然目前针对网页设计中信息传递的可识性与便捷性，己经有了一些研究成果与实践经验，但是能够成功的吸收和应用这些成果的网页设计作品还是不多见的。当然设计师可以通过各种手段来提高网页中信息的传达性，比如去掉多余的图像来提高速度等。但是，如何将信息归类，放在合适的栏目下；信息应该以怎样的形式来表现；而信息的标题应该如何设计；每张页面的信息量的大小如何确定；页面的文字、色彩、版式、导航的设计等等，都是影响信息递效果的重要因素。
从一些统计数据可以发现，用户对网络的需求具有多层次的特点，对网络服务的要求也在不断提高。上网用户以获取各方面的信息，以及学习新技术为主要目的，因此，一些信息流量大、更新及时、浏览速度快、服务人性化的网站是最受用户欢迎的。另外，目前商业网站的发展速度非常快，网站更新意识也在不断加强，并存在着巨大的潜在需求。所以，随着网站建设技术难度的降低，如何为用户提供并传达更具有价值的信息，以吸引更多的用户，成为各网站之间的主要竞争内容，而网页则在其中扮演着重要的角
色。
１．２研究现状及发展趋势
网页设计是一门新兴的设计类和网络的交叉学科，近几年随着网络的发展而逐渐受到人们的重视，它本身以网络为载体，把各种信息以最快捷、方便的方式传达给受众，在这种标准要求下，逐步产生了审美的需求。人们对美的追求是不断深入的，网页设计同样如此。网页不光是把各种东西放上去，能看就行，这是远远不够的！还要考虑如何使受众能更好地和更有效率地接收网页上的信息。这就需要从审美的方面入手，制作出清晰、整体性好的页面使人浏览起来心情愉快，接收信息也会更加容易。网页设计经历从最早的简单以文本和数据等字符组成显示界面的功能第一的审美原则，发展到追求创意和风格表现的现代网页设计目标。其中，Ｎ，格（ｓｔｙｌｅ）的形成一词在词典上的解释是“气度、作风、某一期流行的一种艺术形式＂。具体到网页设计的基础上，网页设计师的风格就是在运用自己的所掌握的手段，包括所拥有的审美的素质、应用软件的能力、以及感受生活的敏锐的觉察力，来建立起自己独特的设计形式、独特的作风。在我国，网页设计整体水平的提高，和这个新兴职业的形成有着必然的关系，由专业艺术设计人员转型进入网络领域的视觉设计，提升了网页视觉的创意和精美表现。但网页设计要求设计人员应该具备有全面的科学与人文素养，全面系统的专业知识结构，全新的认知与判断方式，更需要具备设计艺术的创造才能。从现有的大量网站建设和网页设计能看出，我国的网页设计处于发展提高阶段，与国际专业网页设计的标准仍然存在很大差距。对于网页设计的方法研究和理论探索，总结出一套适合我国特色，继承中华文化底蕴和视觉审美标准，并与国际接轨的网页设计学科方法论，不仅对提高网页设计水平，同时对于提高与网络相关的设计产业同样具有相当重要的现实意义。
１．３解决的主要问题及创新点
企业网站的视觉传达效果是建立在网页设计基础上的。一个成功的企业网站从严格意义上来讲，网站不仅代表了一个企业的精神面貌和形象，更担负着宣传品牌和开拓市场的重任，那么怎样才能打造出一个成功的企业网站昵？除去网站本身的结构、内容等各个方面都需要精益求精，给人一种吸引力之外，还有一些改进的方法和评判的标准。本文主要解决如何把视觉传达的理念运用到网页设计中去，通过对网页设在中版式的布局，导航的安排，文字的设计，色彩的搭配等加以阐述，并运用设计学、心理学、传播学、美学等方法在艺术因素进行分析的基础上，结合湖大科技网站案例从艺术、技术角度出发，结合人机界面评估知识，给出网页设计方案。根据网页的设计，分析网站实例的实现过程，并总结实现的技术特点、一般步骤和注意问题。本文的创新之处在于从传统视觉传达设计艺术的审美原则和创作思维手段出发，从网站的版式、色彩、文字、导航等方面加以阐述，结合网页设计中的动态网页技术，满足用户在视觉习惯、视觉心理、易操作性等方面的多样化需求，试图探索一条艺术与技术高度相结合的道路。这些实践层面的思考可应用性较强，具有一定的创新之处。
１．４论文的组织结构
第1章绪论介绍了文章的研究背景及意义，研究现状及发展趋势，本文解决的主要问题及创新点，论文的组织结构。
第２章介绍视觉传达的含义及传达过程，网页的定义及特点，网页设计中视觉传达的设计原则及方法。
第３章重点分析三色幼儿园网站版式视觉效果，主要从首页、前台主要页面、后台主要页面来分析。
第４章重点分析三色幼儿园网站色彩视觉效果，从色彩特性、调和法则、设计原则和方法进行分析以及对企业网站色彩实现方案及效果进行阐述。
第５章分析了三色幼儿园网站文字效果，从文字的简洁性、识别性和在互联网的传播来分析，以及最后的设计实现。
第６章总结部分对本文的主要内容与观点进行总结，提出研究的不足之处与局限性，提出下一步的研究方向。
第２章关于视觉传达与网页设计
２．１视觉传达
１视觉传达的含义
在人的五种感觉（视觉、听觉、嗅觉、味觉、触觉）中，视觉在正常状态下认知环境事物的过程中担当着重要的角色。人从外界获得的信息量中有７０％一８０％是从视觉系统获得的，因此通过视觉媒介柬接受外部信息成为人类认知活动的主体。视觉传达（ｖｉｓｕａｌＣｏｍｍｕｎｉｃａｔｉｏｎ）是指通过视觉符号来发送和接受外部信息，其本质是视觉信息的传达。根据定义，“视觉符号”和“传达”是两个核心概念。视觉符号是指用以代替或代表某种特定事物的信息媒介，而以视觉系统认知的符号即为视觉符号。视觉符号是实现信息存储和记忆的工具．又是表谜思想情感的物质于段。例如，色彩就可以作为视觉符号来表达某种特定信息。红色代表喜庆，绿色代表希望，紫色代表浪漫等。具同样功能的还有文字、图形图像等。
视觉符号作为信息的载体，具有形式表现、信息叙述与信息传达的功能，是形式与内容的统一体。美国符号学家和艺术学家苏珊・朗格（ＳｕｓａｎｋＬａｎｇｅｒ）指出，设计中符号的作用就在于“将经验形式化并过这种形式将经验客观地呈现出来，以供人们观照、逻辑直觉、认知和理解”。这就要求设计中所采用的视觉符号不仅要能够完整、明确地指代信息内容，还应具有一定的自身意义，即通过经验的、艺术的造型方式束规划、美化符号形象。传达（Ｃｏｍｍｕｎｉｃａｔｉｏｎ）在拉丁语中本来是“沟通”，“给予人们”的意思，这正好符合传达的基本精神。传达应包括发送方和受方，传达的过程是发送方发出传达的内容成为接受方接受的内容，接受方在收受时产生某种理解和反应。同时，接受方在收受时又成为发送方，反馈出新的情报或意见。这个过程是一个相互丰富精神内容的过程。
２．１．２视觉传达的过程
现今传达的定义是信息发送者利用符号向信息接受者传递特定信息的过程。运用到设计中，就是设计师利用视觉符号向浏览者传递信息，浏览者则通过对视觉对信息作出反应，并以此决定自己的思考和进一步行动的过程。这个过程由“设计师”、“浏览者＂、“特定信息”以及“传达效果＂四个因素共同构成。视觉是有选择性的认知系统，对周围各种程度的刺激反应各不相同。在复杂的信息系统中，视觉注意力只会集中在具有强烈刺激性的视觉符号上，然而这种刺激性的视觉符号会引发人的种种生理及心理反应。因此，视觉传达研究的是物质世界通过视觉感在人心理上、生理上产生作用的理论和方法。视觉传达的基础应建立在“发送者（ｔｒａｎｓｍｉｔｔｅｒ）——媒体（ｍｅｄｉａ）——接受者（ｒｅｃｅｉｖｅｒ）”的观念上。视觉传达的过程，对于信息发送者来说，是根据不同的传达目标，将设计思想和设计概念转变为视觉符号的过程，即概念视觉化的过程。对信息接收者来说，是相反的过程，即视觉概念化的过程。贯穿和联结个过程的是信息，即发送者与接收者之间的载体和媒介。
２．２网页的定义和特点
２．２．１网页的定义
网页是存放在Ｗｂｅ服务器上供客户机用户浏览的页面—－ＨＴＭＬ文档。网页的学名称作ＨＴＭＬ文件，ＨＴＭＬ的全称是“ＨｙｐｅｒＴｅｘｔＭａｒｋｕｐ Ｌａｎｇｕａｇｅ，中文翻译为“超文本标记语言”，是一种以在Ｉｎｔｅｍｅｔ上传输，并被浏览器认识和翻译成页面显示出来的文件。要让浏览器显示出我们想要网页表现出的样式，必须要用ＨＴＭＬ语言加以设定版式的编排。浏览器是一个用于定位和阅览ＨＴＭＬ文档的程序。网页包括以下基本内容：文字、超链接、图片、声音、影像等等。
２．２．２网页的特点
１．具有交互性
相对于文字、印刷、影视等媒体，网络媒介的最大的独特性就是在于其交互性。人们可以运用综合的信息传递方式，借助视、听、触等方式来获取更广泛的资源。网页的超链接功能使用户享有高度的主控权，他们可以选择自己真正所需要的信息，表达自己真正想表达的意念与作品，重要的是用户可以通过网页参加讨论组、聊天或者进行电子商务活动等等。例如：用户可以对网上的某些信息做出自己的决定，并将其加入到网络媒体中，反过来又成为网络信息的一部分。因此，在网络世界里，信息的传达、发表不再是少数报社、出版商所拥有的特权。每个人都可以成为信息的消费者，同时也是信息的出版者。用户不再仅仅是信息的接受者，他们拥有更大的选择自由和参与机会。网页中的交互性将有助于满足大众对更个性化的信息日益增长的需求，满足用户的参与性，以及实现某种愿望、需求、目标和能力。
２．时效性强
时效性是信息社会对信息传达的最基本的要求。网页以其快捷的传输速度充分体现着现代信息社会的时效性。虽然仍然有许多人都在抱怨网络的传输速度太慢，但是相比较传统的传播媒介，互联网在信息传输的迅速及时上依然具有明显的优势，而时效性强是其一大优势。当报纸、杂志还在制版印刷时，当广播、电视还在后期制作时，通过互联网发布的信息早已传达到用户的身边。互联网的迅速快捷为网页信息的传递提供了前所未有的传播捷径。
３．更新及时
网页发布后，最终结果仍然是以电脑数字化的形式出现的，所以信息的堆减和形式的调整都非常方便。设计人员可以在全部网页传递到主机上之后，对其中的编排、色彩等做相应的调整，以达到最好的视觉效果和传达效应。此外由于网页信息传达所具备的交互性特点，使得网页信息的发布成为不断更新的循环周期。而网页设计作品的发布也并不意味着设计的结束，网页设计人员必须根据用户的反馈信息和网站各个阶段的经营目标，配合网站不同时期的经营策略，经常的对网页进行定期或不定期的调整和修改。
４．不受时间、地域的限制
网络信息的依托是Ｉｎｔｅｍｅｔ，所有信息一旦进入互联网，都处于同一时间和空间内，不再受地域和时间的限制。网页这一与生俱来的优势令其他传播媒介望尘莫及。
５．信息反馈及时、准确在互联网上信息反馈通过计数器、留言本、电子信箱及对用户的跟踪系统来完成。相对于传统的市场调查而言，这种基于数字技术的信息反馈更加及时、准确、有效和全面。
２．３网页设计中视觉传达的设计原则及方法
２．３．１网页主题明确、鲜明突出
网页设计中首先要解决的问题是主题的定位。所谓主题也就是网站的题材。定位网站主题首先要明确建立网站的目的，这是从网站建设者的角度来考虑的。另一方面应详细了解网站受众群体的基本情况，明确他们的需要，以确定网站为使用者所提供的信息或经验。网站内的全部信息必须根据主题进行选择、鉴别和整理。信息传达的目的性越明确，针对性越强，传达的成功率也会越高。网站主题明确后，设计的全过程都要围绕这一主题展开。主题要做到鲜明突出、力求简洁、要点明确，尽量以简单明确的语言和画面告诉大家本站点的主题，吸引对本站点有需求的人的视线，对于普通用户也能留下一定的印象。在Ｉｎｅｔｍｅｔ上同行业的网站千千万万，浏览者常常是走马观花，一带而过。只有极富特色、内容翔实的网页才能使其驻足阅读。
２．３．２网页整体风格一致、形象统一
网站的主题和结构确定之后、要为之寻求适合的表现形式，做到形式与内容统一。应大体规划出：字体大小与字体种类，图片与文字的相互排列、对应位置，各大小标题与文章段落的对齐方式，导览按钮与文字超链接的表现形式。基本的设计蓝图使所有页面拥有前后一致的设计风格，设计其他页面时根据每页的具体情况稍做修改即可。形式的统一可以通过页面的构图、文字、色彩、图像的运用来实现。
２．３．３设计目的明确、形式鲜明
网页形式是为内容服务的，但本身又有自己的独立性和艺术规律。这里所指的形式是指网页设计的版式、构图、布局、色彩以及它们所呈现出的风格特点。无论设计什么形式的网站，都应该有明确的设计目的，清晰的网页设计形式。因为网页设计的目的就是为了更好的体现和传达网站的信息，使之更加形象、直观、更易于为用户所接受理解。所以，不同内容的网页要用不同的形式来表现。比如：政府机构的网页形式应简洁、庄重以体现机构的特点。而商业网站则可以根据不同的商品特征采取不同的表现形式，而相对政府机构的严肃庄重的特点，则可以多一些活泼与自由，色彩也可以更加丰富。文化艺术类网站的表现形式则更注重个性化的表现。
２．３．４信息即时、更新及时
没人对过时信息有兴趣，所以资料一定要注意即时性。更新是互联网永恒不变的主题，印在书面上的信息是不变的，而用户想看到的是最新的内容，如果用户每次都只能看到与上次相同的内容，则会认为这个站点是永远不更新的，从而不会再次访问该网站。网页更新包括内容和形式两个方面。在保持页面统一性和连续性的前提下．经常更新内容，变换新的表现形式，有利于引起新的视觉刺激，吸引更多的视觉注视，增加访问量。也就是说，网页尽量要在每天发生一些新的变化，总是有新的内容出现。但是究竟哪些内容是更新的重点，并不是随意确定的，要通过分析调查来访者的数量和所关心的内容的倾向来决定。当然，更新的内容也需要在醒目的位置将更新内容的简要通知告诉给用户。
第３章分析三色幼儿园网站版式视觉效果
３．１分析网站视觉效果
１．结构清晰
三色幼儿园网站整个设计可以说是比较简单的，没有过多的装饰，也没有复杂的结构，给人的感觉就是清新明了，网站内容一目了然，不会让人产生迷惑，初来三色幼儿园网站的用户可以完全按照自己的理解来进行操作而不会产生错误。在这一点上是十分重要的。来三色幼儿园网站的用户，都是查找孩子在校的相关信息的，如果网站的设计不能做到让用户感觉清楚明白的话，就会造成用户的大量流失。因为没有人会希望在理解一个网站上浪费太多的时间。网络上的资源非常多，如果在使用网站之前还要先学习如何使用该网站的结构，相信有不少用户会去其它网站查找自己所需的资源，选择放弃浏览该网站。
２．人性化设计
用户在线咨询说到该公司的人性化设计是很有特色的，这也许因为这是一家商业公司，他的人性化设计才体现了他商业的特点。在打开公司网站我们就可以看到在网站的最左边有一长列的登录图标，这些头像是公司的各个重点产品，及不同孩子的个人的学号，它不像其他网站的注册号。它不需要查找注册号，只要用户输入自己孩子的学号，点击它上面的头像就可以与对应的产品及部门联系了。不但如此，它还町随页而的滚动，和页面的变换而变动，无论用户在页面的什么地方和什么页面遇到问题都可以与相关责任人联系。
３．吸引人
推荐产品公司网站具有其独特的吸引人的地方，首先就是其简洁明快的首页，整个页面使用蓝色作为毛色调，让人在浏览的同时，会有一种放松感，整个页面没有过多花峭的东西，每一个版块都很明确在指导浏览者将看到的内容。在内容的布置方面，三色幼儿园网站做的样尽心尽力，首页上首先会吸引人的注意力的就是三色幼儿园网站的“推荐产品”版块。在整个首页上，都是采用小的图片来点缀的方式，这就使得其在这众多小图片中显得十分抢眼。这个版块使用了动态展示——几个产品在这一版块一段时间内币段回放，以不同的产品的亮点吸引用户。整个首页主体的分栏布局也十分简单明了，每一个分栏区都使用了不同的背景色以与其它分栏区别开来，但同时，背景颜色的选取又十分地恰到好处，没有让人产生突兀之感，让人看得十分舒服。在对内容及版式的布局方面，三色幼儿园网站做到以用户方便为主，按～般网站的模式，将分类放在了ｌｏｇｏ的下方，让用户能够直接了解三色幼儿园网站的全部内容，也可以让用户卜分方便地选择自己感兴趣的版块进行浏览和操作。来三色幼儿园网站的用户一般都是为了浏览三色幼儿园网页中的自家宝贝相关资料，因此，三色幼儿园网站在首页上就将三色幼儿园网页中所有的自家宝贝资料分类别列好，首页左侧的导航栏就首先让浏览产生了一个好的印象。对于想获取自家宝贝资料的用户，三色幼儿园网页具有其自己独特的吸引力：
（１）首页的简洁明了，不拖泥带水；
（２）首页各版块的更新都是实时的，不会存在有过时信息的停留，用户由三色幼儿园网站首页上所得到的信息都是最新的；
（３）操作的人性化。对于一般用户经常用到的操作，三色幼儿园网站都十分细心地将其列于首页的左侧，免去了三色幼儿园网站用户一层层寻找自己想要进行的操作的多余时间。
（４）ＩＴ产品量较多。对于公司网站来说，ＩＴ产品量的大小直接影响到用户的多少。如果用户多次在网站中无法找到自己想要的资料，他就会放弃该网站，而如果在网站中总是可以找到自己想要的资料，那么，如果网站遇到不能找到用户想要的信息，用户会放弃浏览该站。因此ＩＴ产品量的多少对用户来说，是十分重要的。虽然该公司的产品信息较多，但有些信息不全的情况。这是该网站需要加强的地方。由以上的分析来看，就三色幼儿园网站一个教育网站，能做到这么多的功能基本满足三色幼儿园网站满足家长们的一般需求。接下来我们从设计的角度来分析及实现网站。
３．２首页版式分析
版式指的是浏览器看到的完整的一个版面（可以包含框架和层）。因为每不人的显示器分辨率不同，所以同一个版面的大小可能出现不同尺寸。而布局，就是以最适合浏览的方式将图片和文字排放在版面的不同位置。由于网站性质、内容、使用对象等有所不同，网页布局的形式也是千差万别的。基本的构图形式是：版面由上至下依次安排，网站名称和标识、版面标题、版面内容、脚注等。
一般版面左侧通常设置为导航部分，这样做的目的一方面是提供与其他版面的链接；另一方面也是为了减小右部版面内容区的宽度，以使每行文字的长度适合阅读。当然在实际的设计过程中，需要根据实际的情况来设定导航条的位置，其中包括考虑用户的生理和心理机能的限制。版式布局的模式一个企业网站一般要完成ｌ、树立现代企业形象，增值企业无形资产；２、宣传企业，创造销售机会；３、加强客户沟通宣传企业产品；４、通过电子营销可以减少环节，减少人员，节约费用，降低成本，有利于提高营销效率；５、有利于了解顾客的意见，建立良好的顾客关系；６、有利于改善服务等功能。
３．２．１首页版式的视觉传达理念分析
要实现网站的以上功能根据视觉传达的理念要符合用户的视觉路径一般：从上到下，从左到右。好的视觉设计路径应该是顺应这样的用户习惯。当然，下图的视觉路径图并非绝对的，浏览习惯因人而异。用户习惯视觉路径因为人们从接触信息以来，信息的呈现就是以方块式存在：报纸、书，单个字成点，一行字成线，一段字成面，而这个面当然是以方形呈现的效率最高。网站的视觉设计大部分其实都是在拼方块。网站中的方块能很好地引导用户的视觉路径，用户可以通过区块来分辨这个区域的信息是否是自己需要的，从而可以迅速缩小范围细致寻找或者浏览下一个区块。视线经过的所有关注点可以连接成一条完整的路径，即视觉路径。视觉路径的形成是由人类的视觉特性所决定的．往往会体现出比较明显的方感，使整个运动趋势有一个主旋律。受生理结构限制，人眼只能产生一个焦点，不能同时把视线停留在两处或更多的地方，我们可以做的只是依照一定的顺序浏览观察。心理学的研究表明，在一个平面上，上半部让人轻松和自在，下半部让人稳定和压抑，而左半部让人轻松和舒展，右半部让人局限和拘谨。因此，人们的视觉习惯于从左向右看，从上向下看，视觉注意力上部比下部强，左侧比右侧强。这样左上部和中上部被视为“最佳视域”，也就是最优选的地方。
1首页版式设计实现
基于以上的分析，一个企业网站首页必须有两站ＬＯＧＯ、网址公司名、产品、客服行业信息等一系列元素。根据这些元素的属性的相关性和重要性的不同我们首先使用ＰＨＯＴＯＳＨＯＰ软件把首页划分成以下几个方块。各个方块完成了同信息的一个分类，信息的分类使其能更直观的将用户需要的信息传递给他们。整个网站的视觉流程就是，企业信息板块，导航板块，ＢＡＮＥＥＲ，用户板块产晶及新闻扳块。网站用户大部分都是这样的视觉流程，用户一进企业网站看到的就是企业的ＬＯＧＯ，企业的名字，接下来的导航板块，用户就可以立即找到自己感兴趣的板块或栏目，不会让用户因找不到自己感兴趣的内容而离开阿站。接下来ＢＡＮＥＥＲ，这个一般都是企业的形象广告或是新品广告。用户板块及最后的产品及新闻板块主要针对的网站的老用户了。因为老用户都在熟悉了网站之后都会直奔主题，看网站里的内容了。根据以上的首页功能划分意图，通过ＤＲＥＡＭＷＥＡＶＥＲ网页设计软件制作出详细的设计，如图３－１６所示。ＤｒｅａｒａＷｅａｖｅｒ是一个很酷的网页设计软件，它包括可视化编辑、ＨＴＭＬ代码编辑的软件包，并支持ＡｃｔｉｖｅＸ、ＪａｖａＳｃｒｉｐｔ、Ｊａｖａ、Ｆｌａｓｈ、ＳｈｏｃｋＷａｖｅ等特性，
而且它还能通过拖拽从头到尾制作动态的ＨＴＭＬ动画，支持动态ＨＴＭＬ（ＤｙｎａｍｉｃＨＴＭＬ）的设计，使得页面没有ｐｌｕｇ－ｉｎ也能够在Ｎｅｔｓｃａｐｅ和ＩＥ ４．０浏览器中正确地显示页面的动画。同时它还提供了自动更新页面信息的功能。ＤｒｅａｍＷｅａｖｅｒ还采用了Ｒｏｕｎｄｔｒｉｐ ＨＴＭＬ技术。这项技术使得网页在ＤｒｅａｍＷｅａｖｅｒ和ＨＴＭＬ代码编辑器之间进彳亍自由转换，ＨＴＭＬ句法及结构不变。这样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到可视化编辑带来的益处。ＤｒｅａｍＷｅａｖｅｒ最具挑战性和生命力的是它的开放式设计，这项设计使任何人都可以轻易扩展它的功能。网页效果蹦中的视觉焦点标志是一个企业、一个团体的概念化图案，代表了企业或者行业团体的形象，其特点主要是，造型简沾明了，视觉冲击力强。在网页设计中也会出现在显要的位置，与企业名称以共处。是网页设计中视觉版面上的一个重要组成部分。三色幼儿园网站的标志放在整个版面的最上面，用户一进入网站，首先看到的就是企业的标志，其视觉效果非常突出，形成第一视觉焦点。产品展示栏动态显示，引起用户的注意，形成第二视觉焦点。整个版式是一个从上到下的视觉路径。
2主要前台页面版式
前台的主要页面有产品页、新闻页、用户页面等。这些页面构成了一个企业网站的主要功能。主要的功能页面是片ｊ户点击率最高的页面，它的版式的样式是用户对网站的一个整体视觉印象
１主要前台页面版式分析
视觉传选设计讲究设计的表现性、功能性、蒙征性。而这些主要功能的页面构成了用户对网站的一个整体视觉感受。我们把这些页面的表现性统一起来，给片ｊ户一个统一的视觉感受。
２主要前台版式设计实现产品页通过ＤＲＥＡＭWＥＡⅦＲ网页设计软件制作出详细的设计。用户页通过ＤＲＥＡＭＷＥＡＶＥＲ网页设计软件制作出详细的设计。
3主要后台页面版式网站后台就是可以对整个网站进行日常维护，日常更新等操作的平台。登陆页、产品管理页、新闻管理页是一个企业网站后台管理的主要页面，是网站管理员对其进行更新维护的。
１主要后台页面版式分析
网站的后台不同于网站的前台，需要体现企业的整体形象，但就其功能的复杂性，一个好的版式设计是实现网站快捷方便管理的关键。我们把后台页面的导航页和管理页整合到一个ＤＥＦＡＵＬＴ．ＡＳＰ的页面。当进入后台就进入这个Ⅲ面，通过导航页的导航调用不同的管理页。图３—２６后台页面板块划分管理导航栏和管理页左右分布。视觉路径从左到右，符合人众的视觉刊惯方便了网站管理者对网站的管理。板块划分对视觉路径的引导
２主要后台页面版式实现
后台登陆页足网站管理员登陆管理页面的窗口，版面定位应简洁，无需做过多的美化设汁——过多的美化设计反而影响网站响应的速度。简洁，明晰的设计反应速度更快，方便管理员登陆。
后台登陆页效果图产品管理贝需对各类产品以综合性管理，内容繁多复杂，简洁，明晰的表格把产品的各种内容加以区分，实现网站管理员对产品的快捷管理。
第４章三色幼儿园网站色彩
４．１教育网站色彩分析
色彩在网页设计中也占有非常重要的地位。它是调适阅览者视觉心理、引起人们注意的主要手段。由于网页设计是通过计算机来实现的，就要考虑计算机色彩系统的功能。计算机色彩系统中提供的三原色为红、绿、蓝。通过这三种色光的混合，创造出了千变万化的富有情趣、而又能引起视觉兴奋的色彩来，以达到网页吸引注意、传达信息、赢得客户的目的。
４．１．１色彩的特性
色彩的直接心理效应来自色彩的物理光刺激对人的生理发生的直接影响。颜色能影响脑电波，脑电波对红色反应是警觉，对蓝色的反应是放松。冷色与暖色是依据心理错觉对色彩的物理性分类，对于颜色的物质性印象，大致由冷暖两个色系产生。冷色与暖色除去给我们温度上的不同感觉以外，还会带来其它的一些感受，例如，重量感、湿度感等。色彩本身是没有灵魂的，它只是一种物理现象，但人们却能感受到色彩的情感，这是因为人们长期生活在一个色彩的世界中，积累着许多视觉经验，一旦知觉经验与外来色彩刺激发生一定的呼应时，就会在人的心理上引出某种情绪。红色是强有力的色彩，是热烈、冲动的色彩。代表热情、活泼、热闹、温暖、幸福、吉祥；橙色是一种富足的、快乐而幸福的色彩。代表光明、华丽、兴奋、甜蜜、快乐；黄色象征着照亮黑暗的智慧之光；又象征着财富和权利，代表明朗、愉快、高贵、希望；绿色是一种宁静、平和的色彩，代表新鲜、平静、和平、柔和、安逸、青春；蓝色是博大的色彩，是永恒的象征。代表深、永恒、沉静、理智、诚实、寒冷；白色代表纯洁、纯真、朴素、神圣、明快；灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞；黑色代表崇高、坚实、严肃、刚健、粗莽。
４．１．２网页色彩的调和基本法则
我们来看看怎样调和色彩。调和色彩的基本法则是：页面各部分色彩一定要构成适当的色彩关系。组成统一的色调，表达某种情绪。这才会有自己的风格。怎样才能做到这一点呢？确立主调统率页面的色彩关系。当页面上有几个色块时，必须以其中一块颜色为主，而且其面积，明度，位置大于其它色块。不但要善于运用原色，而且还要善于运用金、银、黑、白和灰这些中性色进行缓解，中和，以烘托出主题。增加共同点，会使设计更趋向协调。拉开距离，目的是为了主次分开，不要堆成一堆，别人看了都觉得讨厌。可有方法：或者从平面拉开，或者从纯度和明度削弱。１．两色一深一浅。２．同时变化原有明度３．纯度对比，使一色鲜艳而一色朦胧４．同时变化原有纯度
４．１．３网页色彩设计存在的问题
打开一个网站，给用户留下第一印象的既不是网站丰富的内容，也不是网站合理的版式布局，而是网站的色彩。色彩对人的视觉效果非常明显，一个网站设计成功与否，在某种程度上取决于设计者对色彩的运用和搭配。因为网页设计属于一种平面效果设计，在排除立体图形、动画效果之外，在平面图上，色彩的冲击力是最强的，它很容易给用户留下深刻的印象。因此，在设计网页时，我们必须要高度重视色彩的搭配。
目前一些网页往往使用多种颜色，使网页效果看起来色彩丰富。尽管有些网页内容不多，设计者仍然将风格不同、颜色各异的图片、文字等放在页面上，其初衷是将网页做的更具有视觉冲击力、更具有设计特点，但是结果却是适得其反。色彩的过度使用使页面缺乏统一协调感和内在美感，而更直接的结果是这种过渡的色彩包装干扰了用户浏览网页的效率，以及网页的下载速度。另外，一些网页色彩的使用没有考虑到人的视觉因素的制约，如采用深色并带有丰富色彩的图片作为页面背景，严重干扰了用户识别信息主体的能力。还有一些网站采用的色彩并没有根据相应的网站信息性质来设计，这样网站页面没有独特的风格和鲜明的个性，当然也不会给用户留下深刻的印象。
４．１．４网页色彩的设计原则和方法
１．网页色彩设计的原则
因为色彩与人的心理感觉和情绪有一定的关系，所以我们可以根据这一点在设计网页时形成自己独特的色彩效果，给浏览者留下深刻的印象。色彩搭配既是一项技术性工作，同时它也是一项艺术性很强的工作，因此，设计者在设计网页时除了考虑网站本身的特点外，还要遵循一定的艺术规律，从而设计出色彩鲜明、性格独特的网站。
（１）特色鲜明
一个网站的用色必须要有自己独特的风格，这样才能显得个性鲜明，给浏览者留下深刻的印象。
（２）搭配合理
就是说色彩的采用要符合相应的网站内容。比如女性网站就要采用柔和的色彩等。网页设计在遵从艺术规律的同时，还考虑人的生理特点，色彩搭配一定要合理，给人一种和谐、愉快的感觉，避免采用纯度很高的单一色彩，这样容易造成视觉疲劳。
（３）讲究艺术性
网站的色彩的采用，也要体现设计的艺术特点，体现网站的文化内涵。网站设计也是一种艺术活动，因此它必须遵循艺术规律，在考虑到网站本身特点的同时，按照内容决定形式的原则，大胆进行艺术创新，设计出既符合网站要求，又有一定艺术特色的网站。
２．网页色彩设计的基本方法
选择好适合网站性质的色彩，才能成功推出优秀的网页设计作品。
（１）网页中单色的使用
尽管网站设计要避免采用单一色彩，以免产生单调的感觉，但通过调整色彩的饱和度和透明度也可以产生变化，使网站避免单调。另外黑色也是一种特殊的颜色，如果使用恰当厂设计合理，往往产生很强烈的艺术效果，
（２）网页中邻近色的使用
所谓邻近色，就是在色带上相邻近的颜色，例如绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。
（３）网页中对比色的使用
对比色可以突出重点，产生了强烈的视觉效果，通过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用。
（４）网页中背景色的使用
背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景色要与文字的色彩对比强烈一些。
（５）网页中色彩的数量
网站用色并不是越多越好，一般控制在三种色彩以内，通过调整色彩的各种属性来产生变化。
４．２教育网站设计实现
４．２．１教育网站对用色的要求
教育网站用色的问题，其实不能一概而论。以前时候企业用的最多的是蓝色，因为蓝色象征了深邃、理性，给人以商业合作的值得信赖感，同时蓝色本身不容易给视觉带来疲劳、便于长时间浏览，所以蓝色用的很普遍。但是现在随着越来越多的类似企业网站的涌现，企业更关注自身文化、理念、价值与产品类型、风格的个性，所以教育网站用色也越来越丰富：象征活力与热情的红色、开放性与随和的橙色、高贵深邃的黑色…各样的颜