网页界面设计与制作第1章-网页界面设计的基础理论课件.ppt
- 【下载声明】
1. 本站全部试题类文档,若标题没写含答案,则无答案;标题注明含答案的文档,主观题也可能无答案。请谨慎下单,一旦售出,不予退换。
2. 本站全部PPT文档均不含视频和音频,PPT中出现的音频或视频标识(或文字)仅表示流程,实际无音频或视频文件。请谨慎下单,一旦售出,不予退换。
3. 本页资料《网页界面设计与制作第1章-网页界面设计的基础理论课件.ppt》由用户(三亚风情)主动上传,其收益全归该用户。163文库仅提供信息存储空间,仅对该用户上传内容的表现方式做保护处理,对上传内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(点击联系客服),我们立即给予删除!
4. 请根据预览情况,自愿下载本文。本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
5. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007及以上版本和PDF阅读器,压缩文件请下载最新的WinRAR软件解压。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 界面设计 制作 基础理论 课件
- 资源描述:
-
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、一定的方向集中而产生联想。者的兴趣向一定的方向集中而产生联想。 例如,人们会从长城、故宫等形象联想例如,人们会从长城、故宫等形象联想到中华民族传统文化的博大精深,会从林立到中华民族传统文化的博大精深,会从林立的高楼大厦、便利的交通设施等形象联想到的高楼大厦、便利的交通设施等形象联想到日益发展的现代化城市建设。日益发展的现代化城市建设。 种种形象都会引发人们的联想,唤起种种形象都会引发人们的联想,唤起人们对生活的体验、追忆以及对原有信息人们对生活的体验、追忆以及对原有信息的重新组织、回忆,从而有利于对新信息的重新组织、回忆,从而有利于对新信息的接受。的接受。 因此,对网页界面中视觉形象的构思因此
展开阅读全文