网页艺术设计

　　 网页艺术设计是是 网页设计者以所处时代所能获取的技术和艺术经验为基础，依照设计目的和要求自觉地对 网页的构成元素进行艺术规划的 创造性思维活动。
　　 一、网页艺术设计的内容
　　 设计活动中包含着主观和客观两方面的因素，在确立了网页主题之后，首先要明确和熟悉设计的对象和构成的要素。网页 艺术设计涉及的具体内容很多，可以概括为视听元素和 版式设计两个方面。
　　1.视听元素
　　这里所说的视听元素，主要包括：文本、背景、按钮、图标、图像、表格、颜色、导航工具、背景音乐、动态影像等。无论是文字、图形、动画，还是音频、视频，网页设计者所要考虑的是如何以感人的形式把它们放进页面这个“大画布”里。 多媒体技术的运用大大丰富了网页艺术设计的表现力。
　　以上各视听元素大多数浏览器本身都可以显示或收听，无需任何外部程序或模块支持。比如，大部分浏览器都可以显示 GIF、 JPEG图形和GIF89a动画。还有些 多媒体文件（如 MP3音乐）需要先下载到本地硬盘上，然后启动相应的外部程序来播放。另外，在浏览器使用插件（Plug-in）可以播放更多格式的多媒体文件。微软推出 IE浏览器后，提供了基于 OLE的 ActiveX技术，用来在网页中播放多媒体。目前ActiveX已经成为热门技术。另一种播放多媒体的技术是JavaApplet。它是用Java语言编写的应用于网页之中的小 应用程序，相比于插件和ActiveX，JavaApplet具有更大的灵活性和良好的跨平台能力，因此具有很好的发展前景。总之，技术的不断发展使多媒体元素在网页艺术设计中的综合运用越来越广泛，使浏览者可以享受到更加完美的视听效果。这些新技术的出现，也对网页的艺术设计提出了更高的要求。
　　2.版式设计
　　网页的版式设计同报刊杂志等 平面媒体的版式设计有很多共同之处，它在网页的艺术设计中占据着重要的地位。所谓网页的版式设计，是在有限的屏幕空间上将视听多媒体元素进行有机的 排列组合，将 理性思维个性化的表现出来，是一种具有个人风格和 艺术特色的视听传达方式。它在传达信息的同时，也产生感官上的美感和精神上的享受。
　　但网页的排版与书籍杂志的排版又有很多差异。 印刷品都有固定的规格尺寸，网页则不然，它的尺寸是由读者来控制的。这使网页设计者不能精确控制页面上每个元素的尺寸和位置。而且，网页的 组织结构不像印刷品那样为 线性组合，这给网页的版式设计带来了一定的难度。
　　 二、网页艺术设计的原则
　　网页作为传播信息的一种载体，同其他出版物如报纸、杂志等在设计上有许多共同之处，也要遵循一些设计的 基本原则。但是，由于表现形式、运行方式和社会功能的不同，网页设计又有其自身的特殊规律。网页的艺术设计，是技术与艺术的结合， 内容与形式的统一。它要求设计者必须掌握以下三个主要原则：
　　1.主题鲜明
　　 视觉设计表达的是一定的意图和要求，有明确的主题，并按照视觉心理规律和形式将主题主动地传达给观赏者。诉求的目的，是使主题在适当的环境里被人们即时地理解和接受，以满足人们的实用和需求，这就要求视觉设计不但要单纯、简练、清晰和精确，而且在强调艺术性的同时，更应该注重通过独特的风格和强烈的视觉冲击力，来鲜明地突出设计主题。
　　根据 认知心理学的理论，大多数人在 短期记忆中只能同时把握４到７条分立的信息，而对多于７条的分立信息或者不分立的信息容易产生记忆上的模糊或遗忘，概括起来就是：较小而分立的信息要比较长而不分立的信息更为有效和容易浏览。这个规律蕴含在人们寻找信息和使用信息的实践活动中，它要求视觉设计者的设计活动必须自觉地掌握和遵从。
　　作为视觉设计范畴一种的网页艺术设计，其最终目的是达到最佳的主题诉求效果。这种效果的取得，一方面通过对网页主题思想运用逻辑规律进行条理性处理，使之符合浏览者获取信息的心理需求和逻辑方式，让浏览者快速地理解和吸收；另一方面通过对网页构成元素运用艺术的 形式美法则进行条理性处理，更好地营造符合设计目的的 视觉环境，突出主题，增强浏览者对网页的注意力，增进对网页内容的理解。只有两个方面有机地统一，才能实现最佳的主题诉求效果。
　　优秀的网页设计必然服务于网站的主题，就是说，什么样的网站，应该有什么样的设计。例如，设计类的个人站点与商业站点性质不同，目的也不同，所以评论的标准也不同。网页艺术设计与网站主题的关系应该是这样：首先，设计是为主题服务的；其次，设计是艺术和技术结合的产物，就是说，即要“美”，又要实现“功能”；最后，“美”和“功能”都是为了更好地表达主题。当然，有些情况下，“功能”即是“主题”，还有些情况下，“美”即是主题。例如，雅虎作为一个搜索引擎，首先要实现“搜索”的“功能”。它的主题即是它的“功能”。而一个 个人网站，可以只体现作者的设计思想，或者仅仅以设计出“美”的网页为目的。它的主题只有一个，就是——美。
　　只注重主题思想的条理性而忽视网页构成元素空间关系的 形式美组合，或者只重视网页形式上的条理而淡化主题思想的逻辑，都将削弱网页主题的最佳诉求效果，难以吸引浏览者的注意力，出现平庸的网页设计或使网页设计以失败而告终。
　　要使网页从形式上获得良好的 诱导力，鲜明地突出诉求主题，具体可以通过对网页的空间层次、主从关系、视觉秩序及彼此间的逻辑性的把握运用来达到。
　　2.形式与内容统一
　　任何设计都有一定的内容和形式。内容是构成设计的一切内在要素的总和，是设计存在的基础，被称为“设计的灵魂”；形式是构成内容诸要素的内部结构或内容的外部表现方式。设计的内容就是指它的主题、形象、题材等要素的总和，形式就是它的结构、风格或设计语言等表现方式。内容决定形式，形式 反作用于内容。一个优秀的设计必定是形式对内容的完美表现。正如黑格尔所说：“工艺的美就不在于要求实用品的外部造型、色彩、纹样去摹拟事物，再现现实，而在于使其外部形式传达和表现出一定的情绪、气氛、格调、风尚、趣味，使物质经由象征变成相似于精神生活的有关环境。”（黑格尔 《美学》第三卷）
　　一方面，网页设计所追求的形式美，必须适合主题的需要，这是网页设计的前提。只讲花哨的表现形式以及过于强调“独特的设计风格”而脱离内容，或者只求内容而缺乏艺术的表现，网页设计都会变的 空洞而无力。设计者只有将二者有机地统一起来，深入领会主题的精髓，再融合自己的思想感情，找到一个完美的表现形式，才能体现出网页设计独具的分量和特有的价值。另一方面，要确保网页上的每一个元素都有存在的必要性，不要为了炫耀而使用 冗余的技术。那样得到的效果可能会适得其反。只有通过认真设计和充分的考虑来实现全面的功能并体现美感才能实现形式与内容的统一。
　　据有关资料所做的保守估计，目前在WWW上网页 数据传输平均以每秒1.5k的速度到达客户端。假设某个网页为了丰富其艺术性而追赶时髦地大量使用图像或其它多媒体元素等，虽然达到了其静态形式美的效果，却造成多达几十K甚至更大的网页数据，使浏览者必须等待很长时间才能看到“庐山真面目”，这样的网页就不是一个优秀的网页，因为它不符合网页传播信息的突出特性之一——快捷性，使网页内容不能很快地到达 访问者，影响了访问效果和质量，损害了访问者的情趣和积极性，这种技术要素影响了传达信息的效果，因而不是形式与内容的完美统一。
　　网页具有多屏、分页、嵌套等特性，设计者可以对其进行形式上的适当变化以达到多变性处理效果，丰富整个网页的形式美。这就要求设计者在注意单个页面形式与内容统一的同时，更不能忽视同一主题下多个分页面组成的整体网页的形式与整体内容的统一。
　　因此，在网页设计中必须注意形式与内容的高度统一。
　　3.强调整体
　　网页的整体性包括内容和形式上的整体性，这里主要讨论设计形式上的整体性。
　　网页是传播信息的载体，它要表达的是一定的内容、主题和意念，在适当的 时间和空间环境里为人们所理解和接受，它以满足人们的实用和需求为目标。设计时强调其整体性，可以使浏览者更快捷、更准确、更全面地认识它、掌握它，并给人一种内部有机联系、外部和谐完整的美感。整体性也是体现一个站点独特风格的重要手段之一。
　　网页的结构形式是由各种视听要素组成的。在设计网页时，强调页面各组成部分的共性因素或者使诸部分共同含有某种形式特征，是求得整体的常用方法。这主要从版式、色彩、风格等方面入手。例如：在版式上，将页面中各视觉要素作通盘考虑，以 周密的组织和精确的定位来获得页面的秩序感，即使运用“散”的结构，也是经过深思熟虑之后的决定；一个站点通常只使用两到三种 标准色，并注意 色彩搭配的和谐；对于分屏的长页面，不可设计完 第一屏再考虑下一屏。同样，整个网页内部的页面，都应统一规划，统一风格，让浏览者体会到设计者完整的设计思想。
　　从某种意义上讲，强调网页结构形式的视觉整体性必然会牺牲灵活的多变性，“物极必反”就是这个道理。因此，在强调网页整体性设计的同时必须注意：过于强调整体性可能会使网页呆板、沉闷，以致影响访问者的情趣和继续浏览的欲望。“整体”是“多变”基础上的整体。
　　 三、网页艺术设计的特点
　　1. 交互性与持续性
　　网页不同于传统 媒体之处，就在于信息的动态更新和即时交互性。即时的交互性是Web成为热点的主要原因，也是网页设计时必须考虑的问题。 传统媒体（如广播、 电视节目、报刊杂志等）都以线性方式提供信息，即按照 信息提供者的感觉、体验和事先确定的格式来传播。而在Web环境下，人们不再是一个传统媒体方式的被动接受者，而是以一个主动参与者的身份加入到信息的加工处理和发布之中。这种持续的交互，使网页艺术设计不像印刷品设计那样，发表之后就意味着设计的结束。网页设计人员必须根据网站各个阶段的经营目标，配合网站不同时期的 经营策略，以及用户的反馈信息，经常地对网页进行调整和修改。例如，为了保持浏览者对网站的新鲜感，很多大型网站总是定期或不定期的进行改版，这就需要设计者在保持网站视觉形象一贯性的基础上，不断创作出新的网页设计作品。
　　2.多维性
　　多维性源于 超级链接，主要体现在网页设计中对导航的设计上。由于超级链接的出现，网页的组织结构更加丰富，浏览者可以在各种主题之间自由跳转，从而打破了以前人们接收信息的线性方式。例如，可将页面的组织结构分为序列结构、 层次结构、网状结构、复合结构等。但页面之间的关系过于复杂，不仅使浏览者检索和查找信息增加了难度，也给设计者带来了更大的困难。为了让浏览者在网页上迅速找到所需的信息，设计者必须考虑快捷而完善的导航设计。
　　印刷品中导航问题不是那么突出，如果一个句子在页尾突然终止，读者会很自然地翻到下一页查找剩余部分，为了帮助读者找到他们要找的信息，出版者提供了目录、索引或 脚注。如果文章从期刊中的一页跳到后面的非顺序页时，读者会看到类似于“续68页”这样的指引语句。然而，作为一名网页设计者，你以前所学的导航技术没有一种完全适合于 网页导航。在替浏览者考虑得很周到的网页中，导航提供了足够的、不同角度的链接，帮助读者在网页的各个部分之间跳转，并告知浏览者现在所在的位置、当前页面和其他页面之间的关系等。而且，每页都有一个返回主页的按钮或链接，如果页面是按层次结构组织的，通常还有一个返回上级页面的链接。对于网页设计者来说，面对的不是按顺序排列的印刷页面，而是自由分散的网页，因此必须考虑更多的问题。如：怎样构建合理的页面组织结构，让浏览者对你提供的巨量信息感到条理？怎样建立包括站点索引、帮助页面、查询功能在内的导航系统？这一切从哪儿开始，到哪儿结束？
　　3.多种媒体的综合性
　　目前网页中使用的多媒体视听元素主要有文字、图像、声音、视频等，随着 网络带宽的增加、芯片处理速度的提高以及跨平台的多媒体文件格式的推广，必将促使设计者综合运用多种媒体元素来设计网页，以满足和丰富浏览者对网络 信息传输质量提出的更高要求。目前国内网页已经出现了模拟 三维的操作界面，在 数据压缩技术的改进和流（Stream）技术的推动下，Internet网上出现实时的音频和视频服务，典型的有 在线音乐、 在线广播、网上电影、 网上直播等。因此，多种媒体的综合运用是网页艺术设计的特点之一，是未来的发展方向。
　　4.版式的不可控性
　　网页版式设计与传统印刷版式设计有着极大的差异：
　　(1) 印刷品设计者可以指定使用的纸张和油墨，而网页设计者却不能要求浏览者使用什么样的电脑或 浏览器；
　　(2)网络正处于不断发展之中，不象印刷那样基本具备了成熟的印刷标准；
　　(3) 网页设计过程中有关Web的每一件事都可能随时发生变化。
　　这一切说明， 网络应用尚处在发展之中，关于网络应用也很难在各个方面都制订出统一的标准，这必然导致网页版式设计的不可控制性。其具体表现为：
　　(1) 网页页面会根据当前浏览器窗口大小自动格式化输出；
　　(2) 网页的浏览者可以控制网页页面在浏览器中的显示方式；
　　(3) 不同种类、版本的浏览器观察同一个网页页面，效果会有所不同；
　　(4) 用户的浏览器工作环境不同，显示效果也会有所不同。
　　把所有这些问题归结为一点，即网页设计者无法控制页面在用户端的最终显示效果，但这也正是网页设计的吸引人之处。
　　5.技术与艺术结合的紧密性
　　设计是主观和客观共同作用的结果，是在自由和不自由之间进行的，设计者不能超越自身已有经验和所处环境提供的客观条件限制，优秀设计者正是在掌握客观规律基础上得到了完全的自由，一种想象和创造的自由。 网络技术主要表现为客观因素， 艺术创意主要表现为主观因素，网页设计者应该积极主动地掌握现有的各种网络技术规律，注重技术和艺术紧密结合，这样才能穷尽技术之长，实现艺术想象，满足浏览者对网页信息的高质量需求。
　　例如，浏览者欣赏一段音乐或电影，以前必须先将这段音乐或 电影下载回本地机器，然后使用相应的程序来播放，由于 音频或 视频文件都比较大，需要较长的下载时间。流（ Stream）技术出现以后，网页设计者充分、巧妙地应用此技术，让浏览者在下载过程中就可以欣赏这段音乐或电影，实现了实时的网上 视频直播服务和在线欣赏音乐服务，无疑增强了页面传播信息的表现力和感染力。
　　网络技术与艺术创意的紧密结合，使网页的艺术设计由平面设计扩展到立体设计，由纯粹的 视觉艺术扩展到空间听觉艺术，网页效果不再近似于书籍或报刊杂志等 印刷媒体，而更接近于电影或电视的观赏效果。技术发展促进了技术与艺术的紧密结合，把浏览者带入一个真正现实中的 虚拟世界。
　　技术与艺术的紧密结合在网页艺术设计中体现得尤为突出。
　　来源：《网页艺术设计》， 顾群业等编著， 山东美术出版社2002年6月出版，ISBN 7-5330-1627-0

《网页艺术设计》：多媒体设计与制作系列教材。

1 网页艺术设计学习的前奏
1.1 多媒体设计课程体系简介
1.2 网页艺术设计课程简介
1.2.1 了解企业相应岗位及任职要求
1.2.2 学习情境细化
1.2.3 学习目标
1.3 学习掌握基本概念
1.3.1 相关小常识
1.3.2 学习方法小技巧
1.4 网页设计的艺术魅力
1.5 网页设计教学的技术支持
习题
2 网页界面设计
2.1 网络客户特点及需求分析
2.2 网页界面设计基础
2.2.1 网页界面设计小常识
2.2.2 网页界面制作小技巧
2.2.3 网页界面设计元素
2.3 典型案例与练习
2.3.1 古典风格界面设计实例
2.3.2 简约风格界面设计实例
2.3.3 时尚风格界面设计实例
习题
3 网页编程基础
3.1 HTML基础知识
3.2 CSS样式基础知识及应用
3.3 JavaScript的基本调用方法
3.4 通过案例进一步了解和掌握HTML、JavaScript的综合应用方法
习题
4 网页制作
4.1 网页制作的技巧
4.2 网页制作案例
4.2.1 简单网站制作
4.2.2 将网页效果图转换成网页文件
4.2.3 网站的框架结构设计与制作
4.2.4 交互网站的表单制作
4.2.5 网站中的行为特效
4.2.6 网页中“层”和“行为”的应用技巧
4.2.7 F1ash、流媒体的应用技巧
4.2.8 网页中CSS和JavaScript的巧用
习题
5 网站设计项目实战
5.1 项目教学概述
5.2 项目教学实施
5.2.1 项目背景
5.2.2 项目立项会
5.2.3 网站首页布局及设计主风格创意提案初稿的设计
5.2.4 网站首页布局及设计主风格创意提案初稿研讨会
5.2.5 网站首页布局及设计主风格创意提案内部修改定稿
5.2.6 网站设计任务说明研讨会
5.2.7 网站首页初稿设计
5.2.8 网站首页初稿研讨会
5.2.9 网站首页内部修改定稿
5.2.10 网站栏目页及内容页初稿设计
5.2.11 网站栏目页及内容页初稿研讨会
5.2.12 网站栏目页及内容页内部修改定稿
5.2.13生成网页、网站内容素材处理、内容编辑
5.2.14 撰写项目总结报告
5.2.15 项目总结研讨会
习题
6 素质培养：做一名网页艺术设计“准职业人”
6.1 职业素质
6.2 职业素质培养途径
6.3 取证要求
习题
参考文献

2007年，北京电子科技职业学院被教育部和财政部批准为国家示范性高等职业院校立项建设单位。“多媒体设计与制作”成为学院五个国家级重点建设专业之一。
本专业建设的总体目标是：构建具备多媒体设计与制作“准职业人”素质的人才培养模式，改革课程体系，为北京市多媒体及相关行业培养艺术与技术人才；以多媒体设计与制作专业建设为龙头，带动广告设计、动画设计等艺术设计传媒类专业群的改革，并辐射北京市及周边城市其他艺术设计类相关专业；将学院办成社会、行业真正所需的人才培养与储备基地；提升与延展服务社会、继续教育等功能；开发各类艺术设计项目，开展科技、艺术活动，提供创意设计、制作实现等相关技术服务，将国家对示范校建设的投入，回馈给社会和行业。
我院两年来致力于培养艺术设计高技能人才，教育教学改革坚持不懈，校企深度合作，勇于探索人才培养模式及课程体系建设，建立国家级传媒艺术设计教学团队，专兼职“双师”结构师资队伍趋于成熟。教师团队通过教学改革，统一思想，转变观念，在一线教学阵地，认真执行人才培养方案制定的原则和标准，教研与科研能力不断提高，本套系列教材就是示范校重点专业建设中的成果。
专业建设与教学改革没有终点，本套系列教材是我们探索过程中的阶段性总结，因此尽管我们努力为之，其中不成熟之处仍在所难免，希望全国相关专业职教同行多提宝贵意见，以利于我们不断完善。