1、第第1章章 网页界面设计的基础理论网页界面设计的基础理论 课堂学习目标：课堂学习目标： 熟悉界面与界面设计的概念熟悉界面与界面设计的概念 了解网页界面设计发展的概况了解网页界面设计发展的概况 掌握网页界面的构成要素与特点掌握网页界面的构成要素与特点 掌握网页界面设计的基本原则掌握网页界面设计的基本原则 掌握网页界面的主要形式掌握网页界面的主要形式网页界面设计在信息传播科技中的应用网页界面设计在信息传播科技中的应用1.41.4网页界面设计概述网页界面设计概述1.11.1网页界面的构成要素及特征网页界面的构成要素及特征1.21.2网页界面设计的特征网页界面设计的特征1.31.31.1 1.1 网页
2、界面设计概述网页界面设计概述 1.1.1 界面与界面设计界面与界面设计 界面是一种由色彩、文字、图像、符界面是一种由色彩、文字、图像、符号等视觉元素以及多媒体元素为主构成的，号等视觉元素以及多媒体元素为主构成的，传达特定信息的，以方便人机交流为目的传达特定信息的，以方便人机交流为目的的中间媒体。的中间媒体。 界面设计作为设计学科的一个分支，界面设计作为设计学科的一个分支，具有很高的实用价值。具有很高的实用价值。 它以科学技术和艺术的结合为基础，它以科学技术和艺术的结合为基础，以外观表现形式为主要手段，谋求产品的以外观表现形式为主要手段，谋求产品的功能美与形式美，并体现产品的时代感，功能美与形式
3、美，并体现产品的时代感，以优良的设计努力满足使用者的心理需求。以优良的设计努力满足使用者的心理需求。 从定义中可以看出，界面是协调人机从定义中可以看出，界面是协调人机关系的重要环节。关系的重要环节。 它的应用范围十分广泛，在日常工作它的应用范围十分广泛，在日常工作和生活中可谓随处可见。和生活中可谓随处可见。 比如家用电器的操作控制界面、机械比如家用电器的操作控制界面、机械仪表的显示界面、计算机程序的使用界面仪表的显示界面、计算机程序的使用界面等，如图等，如图1-1所示。所示。 虽然应用领域很广，但它们都具有基虽然应用领域很广，但它们都具有基本相同的特征。本相同的特征。 网页界面设计网页界面设计
4、“website Interface”只是只是UI设计中的一个分支，通俗地讲，就是当设计中的一个分支，通俗地讲，就是当用户访问网站时所看见的画面。用户访问网站时所看见的画面。 网页界面由网页浏览器、网页导航要网页界面由网页浏览器、网页导航要素、网页内容三方面构成，网页界面设计素、网页内容三方面构成，网页界面设计主要是除浏览器以外，其他各个部分的设主要是除浏览器以外，其他各个部分的设计。计。 1.1.2 界面设计在我国的现状界面设计在我国的现状 1.1.3网页界面设计的发展网页界面设计的发展1.2 1.2 网页界面的构成要素及特征网页界面的构成要素及特征 1.2.1 网页界面的构成要素网页界面的
5、构成要素 1文字文字 文字是网页界面的主体，是用以传达文字是网页界面的主体，是用以传达信息的主要元素。信息的主要元素。 虽然利用网络多媒体的影音效果也可虽然利用网络多媒体的影音效果也可以达到同样的目的，但网页中文字的优势以达到同样的目的，但网页中文字的优势很难被取代。很难被取代。 这首先是由于以文字传达信息符合常这首先是由于以文字传达信息符合常人的接受习惯，其次因为文字所占的存储人的接受习惯，其次因为文字所占的存储空间极小（空间极小（1个汉字只占用个汉字只占用2个字节），利个字节），利于浏览及下载。于浏览及下载。 2图形图像图形图像 图形图像在网页界面中有着十分重要图形图像在网页界面中有着十分
6、重要的作用。的作用。 在网上浏览时，浏览者常常会因为看在网上浏览时，浏览者常常会因为看到一幅十分引人注目的图形而引发兴趣去到一幅十分引人注目的图形而引发兴趣去了解相关内容。了解相关内容。 在很多网页中，图形占据着整个页面在很多网页中，图形占据着整个页面的重要位置，有的甚至占据了整个页面。的重要位置，有的甚至占据了整个页面。 在视觉顺序上，图形往往能首先吸引在视觉顺序上，图形往往能首先吸引人们的注意力，这是由于图形给人的视觉人们的注意力，这是由于图形给人的视觉印象要比文字强烈得多。印象要比文字强烈得多。 几乎所有的网页都用到了图形，善用几乎所有的网页都用到了图形，善用图形，可以生动、形象、直观地
7、表达网页图形，可以生动、形象、直观地表达网页的主题，增强网页的宣传力、号召力和感的主题，增强网页的宣传力、号召力和感染力，吸引浏览者的注意，引起浏览者的染力，吸引浏览者的注意，引起浏览者的兴趣。兴趣。 3页面版式页面版式 页面版式也称页面的构图。页面版式也称页面的构图。 版式设计是网页界面设计的重要组成版式设计是网页界面设计的重要组成部分。部分。 它是指将文字、图形等视觉元素进行它是指将文字、图形等视觉元素进行组合配置，使页面整体的视觉效果美观而组合配置，使页面整体的视觉效果美观而易读，便于阅读理解，实现信息传达的最易读，便于阅读理解，实现信息传达的最佳效果。佳效果。 许多设计成功的网页能够吸
8、引浏览者，许多设计成功的网页能够吸引浏览者，往往并非仅仅依赖于几张引人注目的图片往往并非仅仅依赖于几张引人注目的图片或噱头式的标题，而是靠成功的版式设计。或噱头式的标题，而是靠成功的版式设计。 好的版式首先能以清晰的视觉导向使浏好的版式首先能以清晰的视觉导向使浏览者对网页内容一目了然，其次又以巧妙的览者对网页内容一目了然，其次又以巧妙的图文配置使浏览者获得悦目的视觉效果。图文配置使浏览者获得悦目的视觉效果。 4色彩色彩 色彩在网页界面设计中起着重要作用。色彩在网页界面设计中起着重要作用。 首先，彩色网页较单色网页更具吸引首先，彩色网页较单色网页更具吸引力；其次，彩色网页可通过色彩传达信息，力；
9、其次，彩色网页可通过色彩传达信息，是增强可理解性和易识别性的有效手段；是增强可理解性和易识别性的有效手段；第三，色彩本身具有象征作用，通过带有第三，色彩本身具有象征作用，通过带有主题倾向的色彩语言，可以更加有效地与主题倾向的色彩语言，可以更加有效地与浏览者进行情感沟通；第四，彩色网页具浏览者进行情感沟通；第四，彩色网页具有悦目、装饰性强的特点，使浏览者愿花有悦目、装饰性强的特点，使浏览者愿花更长的时间注目于此并了解相关信息。更长的时间注目于此并了解相关信息。 5多媒体多媒体 将多媒体元素引入网页界面，可以在将多媒体元素引入网页界面，可以在很大程度上增强对浏览者的吸引力。很大程度上增强对浏览者的
10、吸引力。 从网页界面的发展来看，由纯文字界从网页界面的发展来看，由纯文字界面到图文并重，再到引入新的多媒体元素，面到图文并重，再到引入新的多媒体元素，这是一个必然的过程。这是一个必然的过程。 浏览者希望在网上看到更具创造性、浏览者希望在网上看到更具创造性、更具吸引力和更具情趣的网页。更具吸引力和更具情趣的网页。 多媒体元素正是实现这一目标的重要多媒体元素正是实现这一目标的重要手段。手段。 网页界面中所涉及到的多媒体元素主网页界面中所涉及到的多媒体元素主要是音频、视频和动画等。要是音频、视频和动画等。 6技术技术 了解了网页界面的主要构成元素之后，了解了网页界面的主要构成元素之后，在进行网页界面
11、设计时还应注意到一些技在进行网页界面设计时还应注意到一些技术性元素。术性元素。 严格说来，这些元素并非网页界面的严格说来，这些元素并非网页界面的构成元素，但它们决定了浏览者的实际观构成元素，但它们决定了浏览者的实际观看效果。看效果。1.2.2 网页界面的特性网页界面的特性 1主体的经济性主体的经济性 2手段的先进性手段的先进性 3对象的广泛性对象的广泛性 4内容的丰富性内容的丰富性 5形式的多样性形式的多样性 6操作的交互性操作的交互性 1.3 1.3 网页界面设计的特征网页界面设计的特征 1.3.1 设计以功能为主设计以功能为主 网页界面设计的功能性主要体现在以网页界面设计的功能性主要体现在
12、以下两个方面：下两个方面： （1）信息传递功能）信息传递功能 （2）审美功能）审美功能 1.3.2 形象明确，易于接受形象明确，易于接受 人通过视觉、听觉等信息接收渠道来人通过视觉、听觉等信息接收渠道来触发心理活动。触发心理活动。 在网页界面中，主要是对视觉形象产在网页界面中，主要是对视觉形象产生视觉反应，进而发生心理活动，而逐步生视觉反应，进而发生心理活动，而逐步完成兴趣一联想一认知这一信息接受过程。完成兴趣一联想一认知这一信息接受过程。 网页界面设计正是依照这一信息接受的网页界面设计正是依照这一信息接受的规律，借助界面中各种视觉形象，引导浏览规律，借助界面中各种视觉形象，引导浏览者的兴趣向
13、一定的方向集中而产生联想。者的兴趣向一定的方向集中而产生联想。 例如，人们会从长城、故宫等形象联想例如，人们会从长城、故宫等形象联想到中华民族传统文化的博大精深，会从林立到中华民族传统文化的博大精深，会从林立的高楼大厦、便利的交通设施等形象联想到的高楼大厦、便利的交通设施等形象联想到日益发展的现代化城市建设。日益发展的现代化城市建设。 种种形象都会引发人们的联想，唤起种种形象都会引发人们的联想，唤起人们对生活的体验、追忆以及对原有信息人们对生活的体验、追忆以及对原有信息的重新组织、回忆，从而有利于对新信息的重新组织、回忆，从而有利于对新信息的接受。的接受。 因此，对网页界面中视觉形象的构思因此
14、，对网页界面中视觉形象的构思要以注意明确、易于接受的原则来设计。要以注意明确、易于接受的原则来设计。1.3.3 形式简洁形式简洁 形式简洁是网页界面应具有的外在特形式简洁是网页界面应具有的外在特征。征。 这主要基于以下两个方面的要求。这主要基于以下两个方面的要求。 （1）加强网页界面的视觉冲击力，）加强网页界面的视觉冲击力，迅速传递信息的要求迅速传递信息的要求 （2）形式美的要求）形式美的要求1.4 1.4 网页界面设计在信息传播科技中的网页界面设计在信息传播科技中的应用应用 1.4.1 网页界面设计与信息传播网页界面设计与信息传播 人类艺术形态与信息传播技术之间存在人类艺术形态与信息传播技术
15、之间存在着干丝万缕的关系。着干丝万缕的关系。 在历史上，曾经有过以实物传播、语言在历史上，曾经有过以实物传播、语言传播、文字传播为主导的时代。传播、文字传播为主导的时代。 目前，电子传播特别是网络传播后来目前，电子传播特别是网络传播后来居上，日甚一日地改变着人们的生活方式居上，日甚一日地改变着人们的生活方式和生产方式。和生产方式。 与此相适应，人类艺术也正在转变自与此相适应，人类艺术也正在转变自身的形态，网页界面设计成为信息传播与身的形态，网页界面设计成为信息传播与艺术形态之间关系研究的重要环节与课题。艺术形态之间关系研究的重要环节与课题。 我们在这里坚持强调信息传播是网页我们在这里坚持强调信
16、息传播是网页界面设计的首要考虑因素，并不是出于主界面设计的首要考虑因素，并不是出于主观的臆想或标新立异的追求，而是出于对观的臆想或标新立异的追求，而是出于对当今高科技和信息社会发展状况的正视以当今高科技和信息社会发展状况的正视以及对网页界面设计现状及未来趋势的正视。及对网页界面设计现状及未来趋势的正视。 事实上，网页界面设计正在日益紧密事实上，网页界面设计正在日益紧密结合日新月异的社会生活态势，使自已本结合日新月异的社会生活态势，使自已本质上具有的信息传播功能在越来越广的范质上具有的信息传播功能在越来越广的范围中有效地发挥出来，而这种功能的重要围中有效地发挥出来，而这种功能的重要性也越来越被人
17、们所重视，这主要体现在性也越来越被人们所重视，这主要体现在以下几个方面。以下几个方面。 1.4.2 网页界面的主要形式网页界面的主要形式 1信息查询类信息查询类 从网页界面出现的最初状态直到从网页界面出现的最初状态直到20世世纪纪90年代中期，信息查询一直是互联网上年代中期，信息查询一直是互联网上最重要的组成部分。最重要的组成部分。 即使是在现在网络内容极大丰富的时期，即使是在现在网络内容极大丰富的时期，信息查询依然是网络中必不可少的部分。信息查询依然是网络中必不可少的部分。 一般而言，以信息查询为主要内容的网一般而言，以信息查询为主要内容的网页界面更注重从技术上方便浏览者的信息检页界面更注重
18、从技术上方便浏览者的信息检索功能的实现，最具代表性的就是各种搜索索功能的实现，最具代表性的就是各种搜索引擎，如雅虎（引擎，如雅虎（Yahoo）（如图）（如图1-25所示）、所示）、百度（百度（Baidu）、搜狐（）、搜狐（Sohu）等。）等。 这种类型的网页界面设计以实用功能这种类型的网页界面设计以实用功能为主，注重视觉元素的均衡排布，较少装为主，注重视觉元素的均衡排布，较少装饰性的元素，通常以简洁、清晰为其主要饰性的元素，通常以简洁、清晰为其主要特点。特点。 2大众媒体类大众媒体类 互联网作为信息传播的一种手段，具互联网作为信息传播的一种手段，具有许多传统媒体所不具备的优势，这使其有许多传统
19、媒体所不具备的优势，这使其迅速成为一种新兴的大众媒体，并跻身于迅速成为一种新兴的大众媒体，并跻身于主流媒体的行列。主流媒体的行列。 从目前网络普及的程度来看，虽然电视、从目前网络普及的程度来看，虽然电视、报刊仍是一般大众收看新闻信息的主要来源，报刊仍是一般大众收看新闻信息的主要来源，但遇到突发性新闻事件或热点事件时，网络但遇到突发性新闻事件或热点事件时，网络则成为信息传播的重要渠道。则成为信息传播的重要渠道。 并且随着网络管理的日益规范化，网络并且随着网络管理的日益规范化，网络信息的可信赖程度也已被公众承认和接受。信息的可信赖程度也已被公众承认和接受。 以信息传媒形式出现的网站越来越多以信息传
20、媒形式出现的网站越来越多地引起公众的关注，最具代表性的就属各地引起公众的关注，最具代表性的就属各大门户网站（大门户网站（ICP）的新闻版块，如图）的新闻版块，如图1-26所示。所示。 还有就是传统媒体在网络空间的拓还有就是传统媒体在网络空间的拓展展报刊杂志的电子版，如图报刊杂志的电子版，如图1-27所示。所示。 这种类型的网页界面设计各具特色，有这种类型的网页界面设计各具特色，有的简洁明快，有的注重视觉形式的表现，不的简洁明快，有的注重视觉形式的表现，不一而足，根据各自内容而定。一而足，根据各自内容而定。 3宣传窗口类宣传窗口类 由于网络信息传播具有受众广、时效由于网络信息传播具有受众广、时效
21、性强、投入少等优势，网络成为商业企业性强、投入少等优势，网络成为商业企业青睐的宣传自身的窗口，网络广告也日益青睐的宣传自身的窗口，网络广告也日益为人们所接受，并逐步成为广告发布的重为人们所接受，并逐步成为广告发布的重要方式。要方式。 随着网络的普及，个人网站也成为这随着网络的普及，个人网站也成为这个巨大舞台上的重要组成部分。个巨大舞台上的重要组成部分。 宣传窗口类型的网页界面具有内容专宣传窗口类型的网页界面具有内容专一，形式多样的特点。一，形式多样的特点。 尤其是企业的网页界面，往往还具有尤其是企业的网页界面，往往还具有企业形象传达的作用，可以看作企业形象传达的作用，可以看作CI设计的设计的延
22、伸，因此格外受到重视，如图延伸，因此格外受到重视，如图1-28、图、图1-29所示网页，从企业特有形象入手，设所示网页，从企业特有形象入手，设计或时尚新颖，或严谨简约，充分表现企计或时尚新颖，或严谨简约，充分表现企业文化特征。业文化特征。 4电子商务类电子商务类 电子商务是近年来发展极其迅速的一电子商务是近年来发展极其迅速的一种以网络为媒介的商业服务。种以网络为媒介的商业服务。 电子商务的出现使单向的信息传送变电子商务的出现使单向的信息传送变成了双向的交互服务，从真正意义上实现成了双向的交互服务，从真正意义上实现了网络的交互性。了网络的交互性。 对于这种类型的网页界面而言，使浏对于这种类型的网
23、页界面而言，使浏览者在访问时进行愉快的商品交易是设计览者在访问时进行愉快的商品交易是设计的重点，要求既要具备人们乐于接受的交的重点，要求既要具备人们乐于接受的交互性，又要有吸引浏览者注意力的页面形互性，又要有吸引浏览者注意力的页面形式，如图式，如图1-30所示。所示。 提示：所谓电子商务是利用计算机技提示：所谓电子商务是利用计算机技术、网络技术和远程通信技术，实现整个术、网络技术和远程通信技术，实现整个商务（买卖）过程中的电子化、数字化和商务（买卖）过程中的电子化、数字化和网络化。网络化。 人们不再是面对面的、看着实实在在人们不再是面对面的、看着实实在在的货物，靠纸介质单据（包括现金）进行的货
24、物，靠纸介质单据（包括现金）进行买卖交易。买卖交易。 而是通过网络，通过网上琳琅满目的而是通过网络，通过网上琳琅满目的商品信息、完善的物流配送系统和方便安商品信息、完善的物流配送系统和方便安全的资金结算系统进行交易（买卖）。全的资金结算系统进行交易（买卖）。 5交流平台类交流平台类 网络吸引人的一个重要特点就是每个网络吸引人的一个重要特点就是每个人都有自己的发言权，可以就任何话题发人都有自己的发言权，可以就任何话题发表自己的意见。表自己的意见。 各种论坛和各种论坛和BBS曾经使早期网络用户曾经使早期网络用户痴迷其中，而如今各种聊天室更是让网迷痴迷其中，而如今各种聊天室更是让网迷们欲罢不能。们欲
25、罢不能。 这种形式的网页界面一般以方便实用这种形式的网页界面一般以方便实用为主要特点，指示性强，易于理解，如具为主要特点，指示性强，易于理解，如具有特色的界面形式则更易为网络用户接受，有特色的界面形式则更易为网络用户接受，如图如图1-31所示。所示。 6网络社区类网络社区类 互联网的普及带来了一种新的生活方式，互联网的普及带来了一种新的生活方式，即虚拟网上生活。即虚拟网上生活。 从网上交流发展到网络社区，网络己成从网上交流发展到网络社区，网络己成为人们生活、存在的新空间，用户注重的是为人们生活、存在的新空间，用户注重的是共同的爱好和所擅长的技能，其目的是在其共同的爱好和所擅长的技能，其目的是在
26、其中得以充分的消遣、放松，这是人们获得深中得以充分的消遣、放松，这是人们获得深入交往并享有充分自由的最理想场所。入交往并享有充分自由的最理想场所。 由于网络社区通常不带有商业性质，由于网络社区通常不带有商业性质，因此它的界面设计可以根据社区内容充分因此它的界面设计可以根据社区内容充分发挥创造性，营造一个自由、舒适、愉快发挥创造性，营造一个自由、舒适、愉快的氛围。的氛围。 这种界面形式信息发布功能相对较弱，这种界面形式信息发布功能相对较弱，更重形式感的表达，具有较大的设计自由更重形式感的表达，具有较大的设计自由度，如图度，如图1-32所示。所示。 以上列出的以上列出的6种形式的网页界面在一个种形式的网页界面在一个网站中可能会交错出现，因此在设计时还网站中可能会交错出现，因此在设计时还要考虑到每个网页风格之间的连续性和统要考虑到每个网页风格之间的连续性和统一性。一性。 这就要求网页界面设计人员在进行设这就要求网页界面设计人员在进行设计时从实际内容出发，综合分析，以设计计时从实际内容出发，综合分析，以设计出实用、舒适、美观的界面。出实用、舒适、美观的界面。
