网页创意设计

《网页创意设计》由会员分享，可在线阅读，更多相关《网页创意设计（287页珍藏版）》请在金锄头文库上搜索。

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-

9、1-7）。,图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

14、I F动画的标准简单，在各种类、各版本的浏览器中都能播放。 网页动画（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）服务于网站的主题 优秀的网页设计必然服务于网站的主题，什么样的网站就应该有什么样的设计。如设计类的个人站点与商业站点性质不同、目的不同，其制作标准也不同。要把握好网页创意设计与网站主题的关系。首先，设计是为主题服务的；其次，设计是艺术和技术结合的产物，既要美观，又要实现功能；最后，美观和功能都是为了更好地表达主题。例如，雅虎作为一个搜索引擎，首先要实现搜索的功能，它的主题即是其功能，而个人网站则可以只体现作者的设计思想，或仅仅以设计出美观的网页为目的，它的主题就是美观。 只注重主题思想的条理性而忽视网页构成元素空间关系的形