1、网页创意设计,第一章,网页创意设计概述,网页创意设计是网页设计者以所处时代所能获取的技术和艺术经验为基础，根据设计目的和要求自觉地对网 页的构成元素进行艺术规划的创造性思维活动。 1.1 网页设计的基本知识与概念 网页具有很强的视觉性、互动性、互操作性以及 受众面广等特点。网页既有传统媒体的优点，又能使传播变得更为直接、便捷和有效。网页出现的初期阶段，是以功能性为第一位的指导原则，以技术因素为主要考虑对象，以完成或实现必要的功能为目标。以字符组成的界面可以起到基本的信息传达作用，同时技术要求也相对较低，易于实现，并且有较好的稳定性，这种形式的界面在很长一段时间内是人机交流的主要形式（图1-1-
2、1）。,图1-1-1 传统型网站,网页设计不是简单地把各种内容放在一起，要根据网页的目的来进行策划与设计。一个成功的网页设计，首先要考虑如何使受众能够有效地接受网页上的信息，并给受众留下印象。因此，我们要有效地将图片、文字、色彩、三维或四维动态引入网页设计之中，增加人们浏览网页的兴趣，以此来吸引更多的受众。在崇尚鲜明个性风格的今天，网页设计应根据行业及受众对象的差异，合理增加个性化因素（图1-1-2）。这就要求网页设计者在进行网页设计时，结合自身的艺术修养、审美价值以及对时尚潮流的把握，通过网页界面创意设计来传达其对社会、行业、受众的理性理解。1.1.1 网页媒体的发展历程自1972年第一届国
3、际计算机通信会议上通过了图1-1-3 第一个网页图1-1-2 创意型网站由美国人温顿瑟夫（Vi nton C erf）和伯特卡汉（R obert Kahn）开发的传输控制协议和网际协议（TC P/IP）Internet发展到今天，已覆盖七大洲，联通世界几乎所有国家。网络和数字技术的发展给社会、教育、生活等诸多方面带来了巨大冲击，直接导致许多新的应用领域出现。在艺术方面，网络艺术异军突起，网络文学、网络音乐、网络视觉艺等发展迅速。其中，网页创意设计由于网络应用的几何级数的发展，已成为一个相对成熟的艺术门类。（1）第一个网页 1991 年 8 月，Ti m Berners-Lee 发布了第一个基于
4、文本处理的简单包含几个链接的网站。原始网页的副本现在仍然在线，它有十多个链接，试图告诉人们 什么是万维网（图1-1-3）。,图1-1-2 创意型网站,图1-1-3 第一个网页,随后的网页都比较相似，完全基于文本、单栏设计、有一些链接等。最初版本的H TM L只有最基本的内容结构：标题（，.），段落（）和链接（ ）。新版本的H TM L开始允许在页面上添加图片（ ），然后开始支持制作表格（）。（2）W 3C的出现1994 年，万维网联盟（W 3C ）成立，他们将H TM （H ypertext M arkup Language，超文本标记语言）确立为网页的标准标记语言。W 3C 一直致力于确立与
5、维护网页编程语言的标准（如 JavaScri pt）（图1-1-4）。,图1-1-4 W 3C的网页,（3）基于表格的设计 表格布局使网页设计师有了更多选择。在 H TM L中，表格标签的本意是为了显示表格化的数据，但是设计师们很快意识到可以利用表格来构造设计的网 页，这样就可以制作出较以往作品更加复杂的、多栏目的网页。表格布局融合了背景图片切片技术，布局结构简洁。,第一批主要应用表格布局的“所见即所得”的网页设计软件的发展使表格的应用更加广泛。另外，某些软件自动生成表格十分复杂以至于设计师重写手写代码 （例如每行只有 1px 高却包含了几百列的表格）。因此，稍微复杂一点的网页（比如多栏目页面
6、），设计师们一般使用表格来创建（图1-1-5）。,（4）基于Fl ash的网页设计 Fl ash开发于 1996 年，起初只有非常基本的工具与时间线，后来逐渐发展成能够开发整套网站的强大工具。Fl ash 提供了大量的远远超过 H TM L 所能够实现的视觉表现效果（图1-1-6）。,图1-1-6 Fl ash网站,在 Fl ash 之前，使用M acr om edi a Shockw ave（之后是 Adobe Shockw ave），为 CD-RO M 制作目录和多媒体内容。Shockw ave 文件体积庞大，当时的网络连接以拨号上网为主，应用 Shockw ave 还是不够方便。与之相
7、比，Fl ash 影片体积小巧，在线应用更加便捷。,在 Fl ash 初涉网页设计领域的同一时期（20世纪90年代末至21世纪初），由几种网络技术（如JavaScri pt和一些服务器端脚本语言）组成的用于创作动画或互动页面元素的 D H TM L 技术的推广，也在如火如荼地进行中。随着 Fl ash 的发展和 D H TM L 的普及，网页不只是能阅读静态内容，还诞生了允许用户与网页内容互动的交互页面的概念。（5）基于CSS的设计 虽然CSS（Cascadi ng Styl e Sheets，层叠样式表单）已经存在很长一段时间了，但是在当时仍然缺乏主流浏览器的支持，并且许多设计师对它很是陌生
8、。 CSS设计受到关注始于21世纪初。与表格布局和Fl ash网页相比，CSS有许多优势。它将网页的内容与样式相分离，这从本质上意味着视觉表现与内容结构的分离。C SS极大地减少了标签的混乱，还创造了简洁并语义化的网页布局。C SS还使得网站维护更加简便，因为网页的结构与样式是相互分离的，人们完全可以改变一个基于C SS设计的网站的视觉效果而不去改动网站的内容。由CSS设计的网页文件体积小于基于表格布局的网页，这也意味着页面响应时间的改善。虽然首次访问一个网站下载样式比较占用带宽，但C SS会缓存在访问者的浏览器里（默认情况下），这样接下来的访问过程中，网页就都会迅速显示了（图1-1-7）。,
9、图1-1-7 学校网站首页,网页创意设计是一个不断更新换代、推陈出新的过程，它要求设计师必须要更新知识储备，把握最新的设计趋势。1.1.2 网页和网站 当浏览者进入某个网页，可以在浏览器中观看到文字、图片、动画、视频，并可以参与互动等，这一页页的内容，我们称为网页。网页浏览是互联网最基本的功能，网页是网络的最基本组成部分。网站是各种各样网页的集合。网站有综合的门户类网站，如新浪、网易等，内容极为丰富，结构极其庞大；有企业类网站，内容较为简洁，往往只有几个页面组成。在这些大大小小的网站中，有一个特殊的页面，好比是一份报刊的头版，那就是网站的主页，也称为首页。某种程度上，首页也具有目录的性质。不论
10、网页有多么复杂，风格、形式有多么不同，但基本上都是由H TM L所组成。网页有网址（U R L），可用于识别和存取。我们只需在地址栏内输入网址，经过程序处理，通过网络的传输，由浏览器把这些H TM L代码进行“翻译”后，我们就可以看到所需要的网页（图1-1-8）。,1.1.3 网页的基本构成元素 （1）文本 文本是网页中的基本元素，信息的传达主要是以文字为主。网页设计时，可以通过字体、字号、行距、颜色、底纹、边框等来设置文本的属性。我们这里指的文字是文本文字，并非是图片中的文字（图1-1-9）。,图1-1-9 网页文本文字,（2）图片 图片使网页丰富多彩，在网页设计中具有重要作用。用于网页中的
11、图片一般有PN G 、JPG 、G IF格式，后面章节我们将详细叙述。虽然现今为“读图时 代”，图片在网页中不可缺少，但也不能过多使用，否则网页内容显得空洞，也影响下载、屏幕显示的速度，影响浏览者的阅读耐心。如图1-1-10所示，为图 片在网页中的运用。,图1-1-10 图片在网页的运用,（3）超级链接 超级链接在本质上属于一个网页的一部分，是一种允许同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置等。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器
12、上，并且根据目标的类型来打开或运行（图1-1-11）。,图1-1-11 某税务局超链接结构,（4）表格 表格是网页的重要构成形式，通过表格可以精确地控制各网页元素在网页中的位置。这里的表格并非指直观意义的表格，其范围要更宽更广一些，是H TM L语言中的一种元素，主要用于网页内容的排列，组织整个网页的外观，通过在表格中放置相应的图片或其他内容，即可有效地组合成符合设计效果的页面。有了表格的存在，网页中的各种元素便可方便地固定在设计的位置上。一般表格的边线不会在网页中显示（图1-1-12）。,图1-1-12 网页中的表格,（5）表单 表单在网页中主要负责数据采集功能。一个表单一般有表单标签、表单
13、域、表单按钮三个基本组成，表单标签包含处理表单数据所用C G I程序的U R L以及 数据提交到服务器的方法，表单域包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等，表单按钮包括提交按钮、复位 按钮和一般按钮，用于将数据传送到服务器上的CG I 脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的工作（图1-1-13）。,图1-1-13 登录界面表单,（6）动画 动画可分为G IF格式动画和Fl ash格式动画，这是网页上最活跃的元素。制作优秀、创意出众的动画通常是吸引浏览者最有效的方法。动画制作的手段有很 多，技术发展也很快。G I F动画的标准简单，
14、在各种类、各版本的浏览器中都能播放。网页动画（Fl ash）是一种交互式矢量多媒体技术，是目前网上最流行的动画格式。Fl ash基于矢量的图形系统，只要用少量的矢量数据就可以描述一个复 杂的对象，占用的存储空间很小，非常适合于I nternet上的使用。Fl ash还提供了一些增强功能，以支持位图、声音、渐变等（图1-1-14）。,图1-1-14 动画类页面,（7）音频、视频 网络音频和视频是指网络中应用的各种声音和影片形式。随着技术和人们的视听觉需求的发展，网站上已不再是单调的M I D I 背景音乐，网络音频和视频可应用于网络多媒体演示、网络动画、网络广告、互动点播、远程交流、电子商务等多
15、种领域。网页中恰当运用音视频，能大大提高浏览的吸引力（图1-1-15）。,图1-1-15 网页上的音频、视频界面,1.2 网页创意设计原则 网页作为传播信息的一种载体，同其他出版物如报纸、杂志等在设计上有许多共同之处，也要遵循一些设计的基本原则。但是，由于表现形式、运行方式和社会功能的不同，网页设计又有其自身的特殊规律。网页的创意设计，是技术与艺术的结合，内容与形式的统一。它要求设计者必须掌握以下几个主要原则。1.2.1 主题 鲜明 视觉设计表达的是一定的意图和要求，有明确的主题，并按照视觉心理规律和形式将主题主动地传达给观赏者。诉求的目的是使主题在适当的环境里被人们即时地理解和接受，以满足人
16、们的实用和需求。作为视觉设计范畴一种的网页创意设计，其最终目的是达到最佳的主题诉求效果。这种效果的取得，一方面通过对网页主题思想运用逻辑规律进行条理性处理，使之符合浏览者获取信息的心理需求和逻辑方式，让浏览者快速地理解和吸收；另一方面通过对网页构成元素运用艺术的形式美法则进行条理性处理，更好地营造符合设计目的的视觉环境，突出主题，增强浏览者对网页的注意力，增进对网页内容的理解。只有两个方面有机地统一，才能实现最佳的主题诉求效果。,（1）服务于网站的主题 优秀的网页设计必然服务于网站的主题，什么样的网站就应该有什么样的设计。如设计类的个人站点与商业站点性质不同、目的不同，其制作标准也不同。要把握
17、好网页创意设计与网站主题的关系。首先，设计是为主题服务的；其次，设计是艺术和技术结合的产物，既要美观，又要实现功能；最后，美观和功能都是为了更好地表达主题。例如，雅虎作为一个搜索引擎，首先要实现搜索的功能，它的主题即是其功能，而个人网站则可以只体现作者的设计思想，或仅仅以设计出美观的网页为目的，它的主题就是美观。只注重主题思想的条理性而忽视网页构成元素空间关系的形式美组合，或者只重视网页形式上的条理而淡化主题思想的逻辑，都将削弱网页主题的最佳诉求效果，难以吸引浏览者的注意力，达不到网页设计的目的。要使网页从形式上获得良好的诱导力，鲜明地突出诉求主题，具体可以通过对网页的空间层次、主从关系、视觉
18、秩序及彼此间的逻辑性的把握运用来达到（图1-2-1）。,图1- 2-1 可口可乐的网页页面,（2）强化主题信息 大多数人在短暂记忆中只能同时把握4至7个独立信息，过多的信息容易产生记忆上的模糊或淡忘。视觉表现要强化主题，吸引浏览者的注意力，切忌内容过于杂乱，追求美的效果的同时，更要实现网站的功能，为主题服务。因此网页设计时，要充分运用排版样式、图像、文字的造型以及配色类型等元素来准确传递信息，确保访问者一眼就能明了表达的内容（图1-2-2）。,图1-2-2 页面的主题信息明显,（3）艺术个性突出主题 视觉设计在做到简练、精确的同时，还要强调艺术性，并且突出设计的主题。这需要有独特的风格和强烈的
19、视觉冲击力，使主题在适当的环境里被人们即时地理解和接受，以满足人们的实用和需求（图1-2-3）。,图1-2-3 艺术创意型网页,1.2.2 网页信息明晰 （1）信息目录清晰 对于网页来说，最重要的就是信息内容。信息的品质与数量决定了人们对这个网页的评价。网页设计时，首先要做的是将浏览者顺利地引向信息内容，明确划分信息群，使其能迅速找到所需要的信息，这也是目录设计最重要的任务。目录的整理决定了网页的可读性（图1-2-4）。,图1-2-4 明晰的目录,（2）网站导航清晰 导航栏能让浏览者在浏览时便捷地到达不同的页面，是网页元素非常重要的部分，因此导航栏一定要清晰、醒目。一般来说，导航栏要在第一屏就
20、显示出来，横向放置的导航栏要优于纵向的导航栏，因为浏览者的第一屏如果较矮，横向的仍能全部看到，而纵向则不确定，并且窗口宽度一般不会受浏览器设置影响，而纵向的不确定性则要大得多。所有导航性质的设置，如图片按钮等都要有清晰的标识，让人看得明白。链接文本的颜色最好用约定俗成的，如未访问的用蓝色，点击过的用紫色或栗色。总之，文本链接一定要和页面的其他文字有所区分，给读者清楚的导向（图1-2-5）。,1.2.3 形式与内容统一 内容是构成设计的一切内在要素的总和，是设计存在的基础，形式是构成内容诸要素的内部结构或内容的外部表现方式。网页设计的内容是主题、形象、 题材等要素的总和，形式是结构、风格或设计语
21、言等的表现方式。内容是形式的灵魂并决定形式，形式反作用于内容。一个优秀的设计必定是形式对内容的完美表现，只有在内容上面下足了功夫，再依据内容来设计网页，才能达到形式与内容的和谐统一。（1）适合主题需要的形式美 网页设计所追求的形式美必须适合主题的需要，这是网页设计的前提。只讲花哨的表现形式以及过于强调“独特的设计风格”而脱离内容，或者只求内容而缺乏艺术的表现，网页设计都会显得空洞无力。只有将二者有机地统一起来，深入领会主题的精髓，再融合自己的思想感情，找到一个完美的表现形式，才能体现出网页设计独具的分量和特有的价值。另外，要确保网页上每一个元素都有存在的必要性，多余的设计元素往往适得其反。只有
22、通过认真设计和充分的考虑来实现全面的功能并体现美感，才能实现形式与内容的统一（图1-2-6）。,图1-2-6 形式与内容的统一,网页具有多屏、分页、嵌套等特性，设计者可以对其进行形式上的适当变化以达到多变性处理效果，丰富整个网页的形式美。这就要求设计者在注意单个页面形式与内容统一的同时，更不能忽视同一主题下多个分页面组成的整体网页的形式与整体内容的统一。（2）注意视觉效果 首先要看整个页面的颜色搭配是否协调，注意颜色的搭配也要结合网页的主题、风格等，做到恰如其分。其次要看网页上的文字是否易于阅读，文字太 细、颜色太浅都是有违网页设计的原则。再次要看图片使用是否合理，图片太大、太多、质量差都会影
23、响网页呈现出来的效果，不可大意。最后要看“动”与“静”是否配合得当，无节制地使用Fl ash、动态图、滚动字幕等效果容易使人眼花缭乱，反而难以抓住重点（图1-2-7）。,图1-2-7 视觉效果较好的网页设计,（3） 强调整体性 网页的整体性包括内容和形式上的整体性，这里主要讨论设计形式上的整体性。网页是传播信息的载体，它要表达的是一定的内容、主题和意念，在适当的时间和空间环境里为人们所理解和接受，它以满足人们的实用和需求为目标。设计时强调其整体性，可以使浏览者更快捷、更准确、更全面地认识它、掌握它，并给人一种内部有机联系、外部和谐完整的美感。整体性也是体现一个站点独特风格的重要手段之一。网页的
24、结构形式是由各种视听要素组成的。在设计网页时，强调页面各组成部分的共性因素或者使各部分共同含有某种形式特征，这是强调整体性的常用方法。但无论使用何种手法对画面中的元素进行组合，都一定要遵循统一、连贯、分割、对比与和谐的设计原则。这主要从版式、色彩、风格等方面入手，例如版式上，将页面中各视觉要素作通盘考虑，以周密的组织和精确的定位来获得页面的秩序感，即使运用“散”的结构，也是经过深思熟虑之后的决定。要注意页面的相互关系，利用各组成部分在内容上的 内在联系和表现形式上的相互呼应，并保持整个页面设计风格的一致性，实现视觉上和心理上的连贯，使整个页面设计的各个部分融洽。一个站点通常使用两到三种标准色，
25、并注意色彩搭配的和谐。颜色的使用并无一定的法则，设计时可先确定一种能表现主题的主体色，然后根据具体的需要应用颜色的近似和对比来完成整个页面的配色方案，以使网页的页面具有和谐、悦目的视觉效果。对于分屏的长页面，不可设计完第一屏再考虑下一屏。整个网页内部的页面，都应统一规划，统一风格，让浏览者体会到设计者完整的设计思想（图1-2-8）。,图1-2-8 版式风格统一,1.3 网页创意设计的基本程序与方法 1.3.1 网页界面的设计制作流程网页设计从整体筹划、前期市场分析定位、设计定位、素材收集整理、设计方案到后期的调试、发布、运行，构成了一个较为庞大的系统工程。（1）前期调研阶段 进行充分调研工作，
26、指导整个决策设计方案定位，与其他设计准备工作一样，设计师要从主、客观角度入手，包括市场角度、消费者角度、地域角度、竞争对手 角度和资金投入角度等进行准备和谋划（图1-3-1）。,图1-3-1 调研阶段,（2）制定策划方案 在掌握客户的需求后，网站设计人员应根据实际情况制订一个网站的策划方案，许多客户也会要求提供该方案。网站的策划方案主要解决“做什么”的问题，即完成对网站的主题、风格和内容的定位，并对下一阶段具体工作的分工和进度进行规划，以便有目的、有计划、可监控地实现网站建设目标。网站策划方案的制订，要体现出网站建设的特色和重点，其内容、格式不应千篇一律。撰写时要详细说明网站的定位、完整的网站
27、建设计划和合理的建设步骤，具体来说应包括以下几个部分。 前言。说明网站策划方案的目标与任务。 目标分析与网站定位。对网站设计的最终目标进行分析和确定，并据此进行网站主题、风格和内容的定位。 网站建设内容与结构。包括网站栏目与版块的分布、网站的功能、网站的数据库、网站页面链接结 构、网站的用户友好界面等。 技术说明。对网站的开发平台、运行平台和相关技术进行分析说明。 建设进度表。合理分工，确定可监控的网站开发进度。 后期支持。包括网站的后期技术支持与维护、效果评估以及网站建成后的宣传推广。 费用明细表。详细列出各项事宜所需要费用的清单，预算出网站建设的总投资额度。,（3）功能定位与模块划分 网站
28、是由许多不同功能的模块相互联系而成。因此，在建设一个网站的时候，需要根据网站的流程图划分出不同功能的模块，分析需求以最终实现建设网站的目的。在制作网页之前，首先应该进行构思，最好将初步的设想画在纸上，以免因制作过程中发现页面不和谐而从头开始。要做一个网页，要先明确页面主题，并想好网页的标题，明确页面上要链接的目录等。一般网站功能模块如新闻系统功能模块、产品展示功能模块、招聘系统功能模块、会员系统功能模块、网上订单功能模块、网上调查功能模块、资源管理功能模块等，设计者要根据要设计制作的网站主题、内容和功能等做好相应模块划分（图1-3-2）。,图1-3-2 网站模块策划图,（4）界面创意风格定位
29、在这样一个内容丰富、信息繁杂的巨大网络世界里，网页界面设计必须要有独特的视觉传达系统来吸引浏览者的注意，从而使特定的信息得以准确迅速地 传播（图1-3-3）。在完成调研分析之后，我们应该对网页界面的风格和表现形态进行定位，应简约还是古朴、应时尚还是端庄、应典雅还是个性等；色调是纯色调还是灰色调、是明调还是暗调，是运用对比色系还是同色系等；在表现形态上是采用构思巧妙的静态界面、变幻莫测的三维效果，还是互动性较强的交互式动态网页等（图1-3-4）。,图1-3-3 构思网页风格,图1-3-4 定位网页风格,（5）设计制作阶段 这个阶段是最实际的操作阶段，但如果没有前面的决策，这一阶段将会变得无的放矢
30、。在这一阶段我们要按照决策方案，在客户整体视觉传达设计风格 的规范下，网页界面创意设计定位策略的引导下进行设计制作工作。设计制作应努力做到网站和客户标志的统一，网页的色调与机构标准色、辅助色的和谐延续，形式与内容的整体统一；任何一个不符合整体风格的界面设计都必须删去，一切分散浏览者注意力的图形、线条、可有可无的“装饰”都应适当摒弃，使参与界面形式构成的元素与传播的内容进行有机地融合，如图1-3-5所示的百事可乐网站中国站首页。,图1-3-5 百事公司网站中国站首页,（6）发布调试阶段 当网页设计制作完成后，就进入了网页的发布阶图1-3-5 百事公司网站中国站首页图1-3-6 网站维护程序界面段
31、。这是网页设计的最后阶段，成功与否取决于公众用户的评判，经过试运行调整后，设计制作工作就宣告完成，以后的工作就是推广、维护与更新。（7）网站的维护、更新阶段 一个好的网站需要定期或不定期地更新内容，才能不断地吸引更多的浏览者，增加访问量。网站维护是为了让网站能够长期并稳定地运行在Internet上（图1-3-6）。,图1-3-6 网站维护程序界面,1.3.2 网页创意设计的基本方法 设计风格的不断创新，设计手法的不断变化，既给设计师的创作提供了丰富的经验宝库，也容易使初次涉足这个领域的设计师茫然无措。但通过视觉传达领域中已有的经验性和规律性总结，并结合网页自身的特性，还是可以对创意方法有较为概
32、括的认识和分析。（1）网页创意的类型 在网页设计中，创意的中心任务是表现主题。因此，创意阶段的一切思考都要围绕着主题来进行。不图1-3-7 理性诉求的网页设计同的网站具有不同的主题，即不同的“诉求重点”。主题确定之后，就要解决从哪个角度来表现主题，用什么方式来表现主题，即如何“诉求”的问题。概括起来，创意的类型有两种，一种是理性诉求的创意，另一种是情感诉求的创意。 理性诉求的创意。理性诉求的创意是以诉诸 访问者的理智来传达网站的内容，以达到吸引访问者 注意力的目的。其特点是利用可靠的论证、确切的数 据、翔实的资料等展示网站的主题，以获得访问者理 性上的认可（图1-3-7）。,图1-3-7 理性
33、诉求的网页设计, 情感诉求的创意。情感诉求的创意是通过诉诸访问者的感情来传达网站 内容，以达到吸引访问者注意力的创意类型。其特点是强调和利用人的情感来影响访问者的情绪，以获得访问者对网站情感上的认同（图1-3-8）。,图1-3-8 情感诉求的网页设计,（2）网页创意设计的具体方法 在进行创意的过程中，需要设计人员新颖的思维方式。好的创意是在借鉴的基础上，利用已获取的设计形式，来丰富自己的知识、从而启发创造性的设计 思维。下面介绍常用的创意手法。 联想。联想是艺术形式中最常用的表现手法。在审美的过程中通过丰富的联想，能突破时空的界限，扩大艺术形象的内容，加深画面的意境。在网页 创意设计中，通过联
34、想的运用，使人们在审美对象上看到自己或与自己有关的经验，从而产生共鸣，并认可网页的创意设计（图1-3-9）。,图1-3-9 运用联想手法的网页创意设计, 对比。对比是一种趋向于对立冲突的艺术美中最突出的表现手法。在网页设计形式中加入不协调的元素，把网页作品中所描绘的事物的性质和特点进行鲜明对照，通过直接对比来借彼显此，互比互衬，从对比所呈现的差别中达到集中、曲折变化的表现。通过这种手法更鲜明地强调或提示网页的特征，给浏览者以深刻的视觉感受（图1-3-10）。,图1-3-10 色彩对比突显内容, 夸张。通过虚构把对象的特点和个性中美的方面进行夸大，可以引起人们丰富的想象，激发兴趣，赋予人们一种新
35、奇与变化的心理感受。按表现特征的不同，夸张可以分为形态夸张和精神夸张两种，前者为表象性的表现夸张，后者则为含蓄性的情态夸张。通过夸张手法的运用，为网页的艺术美注入了浓郁的感情色彩，使网页的特征性鲜明、突出、动人（图1-3-11）。,图1-3-11 运用夸张手法进行设计的网页,抓住生活现象中局部性的内容，以相应的性格、外貌和诙谐举 止等表现出来，通过风趣情节的巧妙安排，把某种需要肯定的事物延伸到一定程度，形成一种漫画般的趣味，创造引人发笑而又耐人寻味的幽默意境。矛盾冲突可以达到出乎意料又在情理之中的艺术效果，以别具一格的方式发挥艺术感染力的作用（图1-3-12）。,图1-3-12 个人网站的夸张
36、手法表现, 比喻。比喻法是指在设计过程中选择两个各不相同，而在某些方面又有些相似性的事物， “以此物喻彼物” ， 比喻的事物可以与主题没有直接的关系，但某一点上与主题的某些特征有相似之处，因而可以借题发挥，进行延伸转化，获得“婉转曲达”的艺术效果。与其他方法相比，比喻比较含蓄隐伏，有时难以一目了然，但一旦领会其意，便能给人以意味无尽的感受（图1-3-13）。,图1-3-13 用比喻诠释企业文化, 巧设悬念。在表现手法上故弄玄虚、布下疑阵，造成一种猜疑和紧张的心理状态，在浏览者的心理上掀起层层波澜，驱动浏览者的好奇心，从而引起进一步探明网页题意之所在的强烈愿望，然后在网页标题或正文中把网页主题点
37、明出来，使悬念得以解除，给人留下难忘的心理感受。悬念手法有相当高的艺术价值，它能加深矛盾冲突，吸引浏览者的兴趣和注意力，造成一种强烈的感受，产生引人入胜的艺术效果（图1-3-14）。,图1-3-14 用悬念表现的个人网站, 以小见大。以小见大中的“小”，是网页中描写的焦点和视觉中心，它既是网页创意的浓缩和升华，也是设计者匠心独具的安排，因而它不是一般意义上的“小”，而是小中寓大，以小胜大的高度提炼的产物，是简洁的刻意追求，以细节体现整体（图1-3-15）。,图1-3-15 房产网站首页, 综合型创意方法。综合型方法指在对网页各个构成要素进行分析的基础上加以综合，使综合后的界面整体形式表现出创新
38、性。综合型创意方法在网页设计中被广泛应用，通过对各个元素的适宜性处理来体现出设计师的创作意图和网站建设的风格，追求和谐的美感。对于大型网站，由于所包含的信息、资源众多，所以在网页创意设计时更要对各个部分进行合理的规划（图1-3-16）。,图1-3-16 利用综合手法进行设计的网页,1.4 网页创意设计相关软件网页设计除需要掌握网页编辑软件外，还需要利用其他软件来辅助完成网页视觉元素的制作及网站的发布、维护等工作，如图形图像软件、网页动画软 件、文件传输软件和音、视频编辑软件等。对于网页创意设计者来说，更多的是要熟悉图形图像软件，掌握不同的图形图像软件在网页创意设计中的技术优势，比如Photos
39、hop的图像处理能力非常强大，但Fi rew orks的W eb切片等功能优于Photoshop。1.4.1 网页编辑软件DreamweaverAdobe D ream w eaver，简称D W ，是集网页制作和管理网站于一身的所见即所得网页编辑器，D W 是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台和浏览器限制的充满动感的网页（图1-4-1）。,图1-4-1 D ream w eaver界面,1.4.2 图形图像软件 图形图像软件是网页创意设计者的主要武器，是创意设计的制造工具。这里我们主要介绍图形软件Adobe I l l ustrator、
40、图像软件PS与FW 。这几个是业界主流的图形图像处理软件，其兼容性也较好。（1）Adobe I l l ustrator A dobe Il l ustrator是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件，作为一款非常好的图形处理工具，广泛应用于印刷出版、海报书籍排版、专业插画、多媒体图像处理和互联网页面的制作等。新的 Perform ance System 具备 M ac O S 和W i ndow s& reg的本地 64 位支持，能够完成打开、保存和导出大文件以及预览复杂设计等原本无法完成的任务（图1-4-2）。,图1-4-2 I l l ustrator界面,（2）Ad
41、obe Photoshop Adobe Photoshop，简称PS，主要处理由像素构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作，在图像、图形、文字、视频等各方面都有涉及。PS与其他软件的兼容性强，并且支持主流图像格式（图1-4-3）。,图1-4-3 Photoshop界面,（3）Adobe Fi rew orks Adobe Fi rew orks是Adobe推出的一款网页作图软件，软件可以加速 W eb 设计与开发，是一款创建与优化 W eb 图像和快速构建网站与 W eb 界面原型的理想工具。Fi r ew or ks 不仅具备编辑矢量图形与位图图像的灵活性，还
42、提供了一个预先构建资源的公用库，并可与 Adobe Photoshop、Adobe I l l ustrator、Adobe Dream w eaver和Adobe Fl ash软件省时集成。 在 Fi r ew or ks 中将设计迅速转变为模型，或利用来自I l l ust r at or 、Phot oshop和Fl ash的其他资源。 然后直接置入Dream w eaver中轻松地进行开发与部署（图1-4-4）。,图1-4-4 Fi rew orks界面,1.4.3 网页动画软件 网页动画主要有Fl ash动画和Gi f 动画，Fl ash动画可以通过Adobe公司的Flash软件或第
43、三方的Fl ash动画软件制作，Gi f 动画可用图形、图像软件来制作，如Phot oshop，Fi r ew or ks等，也可用专门的Gi f 动画软件制作。（1）Adobe Fl ash A dobe Fl ash是一款二维动画软件，用于设计和编辑Fl ash文档，将音乐、声效、动画以及富有新意的界面融合在一起，制作出高质量的动画。Adobe Fl ash Pl ayer可以播放Fl ash文档（图1-4-5）。,图1-4-5 Fl ash界面,（2）G I F M ovi e G ear G I F M ovi e G ear 软件是一个非常好用的G I F动画制作软件，操作非常简单，
44、可以减少动画图片文件内存。除了可将编辑好的图片文件存成动画G I F外，还可以输出成AVI 或ANI 动画游标的文件格式（图1-4-6）。,图1-4-6 G I F界面,1.4.4 文件传输软件 制作完成的网页文件，需要上传到服务器上才能被其他人看见，这就需要用文件传输软件来进行文件的上传下载。除D ream w eaver自带的上传、下载功能外，在这里再介绍一个更为便捷的Cute FTP软件。Cute FTP，FTP工具之一，其传输速度比较快，速度稳定；Cute FTP 虽然相对来说比较庞大，但其自带了许多免费的 FTP 站点，资源丰富（图1-4-7）。,图1-4-7 Cute FTP界面,
45、第二章 网页创意设计的界面规划与布局,2.1 网页界面构成形式网页是通过视觉元素的引人注目而实现信息内容的传达，为了使网页获得最大的视觉传达功能，使网络真正成为可读强性而且新颖的媒体，网页的设计必须适应人们视觉流向的生理和心理的特点，由此确定各种视觉构成元素之间的关系和秩序。因此，设计时应该研究各种视觉造型元素之间的距离、位置、面积和视觉流程的问题。2.1.1 优秀网页界面应具备的特性优秀的网页界面设计是美学和功能在界面中的完美结合，具有以下几点特性。（1）合理性 优秀的设计能吸引用户，条理清晰的内容更能引导用户。,对于专业可用性功能来说，用户获取信息所花费的时间是关键，不论是文本、一个链接或
46、是一份表单，设计不能成为连接用户和信息的障碍（图2-1-1）。,图2-1-1 简单清新的界面,（2）直观性 优秀的设计可通过直观的导航条穿梭网站。导航条首先必须要有直观性，每一个链接都应有一个简洁的描述。导航条不仅能改变鼠标悬停的外观，还能指明网页的链接。其次，导航条、搜索栏、链接不是网页界面的主体，既要让用户容易分辨，又要处理好主次关系（图2-1-2）。,图2-1-2 导航清晰的界面,（3）整体性 优秀的设计能让用户确认不同的网页界面属于同一网站，也就是整体设计的规范统一。虽然主页界面会与其他网页界面有所不同，但所有的界面设计都应风格统一，努力做到表现形式一致 （图2-1-3）。,图2-1-
47、3 网页整体性,（4）简洁性 现代社会生活、工作节奏日趋加快，人们无暇去慢慢欣赏网页设计的繁琐艺术，页面设计以需求功能为目标，要求简练、准确，这样才能吸引用户的关注（图2-1-4）。,图2-1-4 页面简洁,2.1.2 网页界面设计版面构成法则（1）栅格理论栅格设计风格的特点是运用数字的比例关系，通过严格的计算把版心划分为统一尺寸的网格。可将版面分为一栏、两栏、三栏或更多的栏，在分割好的 栏目中就可以进行界面编排，将主体内容、标题、标识、图片、导航条等统一、有序地安排在其中，使版面具有一定的节奏变化，产生优美的韵律关系（图2-1-5）。,图2-1-5 网页栅格法划分版面,（2）对称与均衡视觉平
48、衡就是将页面中每一版块做得基本一致，从而达到相互平衡，主要分为对称平衡与不对称的平衡，也叫均衡。虽然绝对平衡对网页界面设计作用不 明显，但左右水平对称常在网页布局中得以运用。均衡是一种最常见的构成手法，也常用于网页界面设计中。仔细观察两栏布局设计的网页会发现，面积大的一边，通常是浅色的，或内容安排得较少，而小面积的常常会用深色，可以安排导航栏，这样不对称的布局就会取得均衡的效果，而不会导致重心的偏失（图2-1-6）。,图2-1-6 对称与均衡表现1,对称的版式设计稳定、庄严、整齐、秩序、沉静，体现了一种古典主义的风格。为了避免对称界面所带来的单调乏味，设计时必须在对称中略带些变化（图2-1-7
49、）。,图2-1-7 对称与均衡表现2,（3）对比与调和 对比与调和是辩证统一的关系，经常被使用在页面设计当中。对比是指在质或量方面有区别和差异的各种形式要素的相对比较。调和就是适合，即构成 美的对象在部分之间不是分离和排斥，而是统一、和谐，被赋予了秩序的状态。一般来讲，对比强调差异，调和强调统一，适当减弱设计要素间的差距，如同类色配合与邻近色配合具有和谐宁静的效果，给人以协调感。在网页界面设计构成中，对比与调和是相辅相成的，一般对比总是在局部，而调和却总是反映在整体版面上（图2-1-8、图2-1-9）。,图2-1-8 对比与调和表现1,图2-1-9 对比与调和表现2,（4）重复与交错 在页面版
50、式设计中，重复与交错也是较常见的表现手法，利用连续重复的基本形或线等网页的构成元素，使得页面中运用的组成元素的形状、大小、方向变得统一，这种形式的版式设计可以使整个页面产生统一、整齐、规律的视觉感受。一般而言，为了避免产生单调和呆板的视觉效果，可以采取对页面中的图片、文字、色彩、线条、形体等细节作相应的调整，在主体统一的前提下求得一些局部的变化，使整个版式看起来既是统一、完整的，又不缺少变化、活跃的视觉效果（图2-1-10、图2-1-11）。,图2-1-10 重复与交错表现1,图2-1-11 重复与交错表现2,（5）节奏与韵律 在页面设计中，图文的安排是按照一定的条理、顺序重复连续地排列的，这种形式就是页面的节奏，有等距离的连续，也有渐变、长短、明暗、形状、高低等排列，构成节奏中具有美感与情感的韵律。有节奏就会有情调，可以增强网页的感染力和吸引力（图2-1-12、图2-1-13）。,
