《网页设计与制作 教学课件 ppt 作者 何章强 王俊波 主编 课件第三章 网页界面的基本要素设计》由会员分享，可在线阅读，更多相关《网页设计与制作 教学课件 ppt 作者 何章强 王俊波 主编 课件第三章 网页界面的基本要素设计（135页珍藏版）》请在金锄头文库上搜索。
1、第三章 网页界面的基本要素设计,本章学习目标： 通过学习本章内容理解网页界面设计重要性，并能掌握网页界面设计的形式美法则。了解网页设计中的各种基本要素的分类及其特点；能够熟悉根据网页主题合理安排各种视听要素的设计、组织和运用，是每一个网页设计师应具备的基本素质。 本章学习关键词： 网页界面设计 网页界面设计的形式美法则 网页界面的构成要素 网页界面的形态要素 本章学习重点： 网页界面的基本要素及其表现形式,第三章 网页界面的基本要素设计,第三章 网页界面的基本要素设计,第三章 网页界面的基本要素设计,第三章 网页界面的基本要素设计,3.1 何谓界面,想象一下方向盘如果不是圆形的，而是三角形的话
2、，人们开车时将会是怎样的不方便。,第三章 网页界面的基本要素设计,界面是一种由色彩、文字、图像、符号等视觉元素以及多媒体元素为主构成的，传达特 定信息的，以方便人机交流为目的的中间媒体。,第三章 网页界面的基本要素设计,第三章 网页界面的基本要素设计,3.2 网页界面设计的形式美法则,网页界面设计的形式美是通过艺术化的设计手法带给浏览者的愉悦感受和体会。设计师将设计思想、情感通过媒体与表现技巧传达出来，以增强界面的艺术感染力，增强浏览者阅读的乐趣。界面的形式美包括品味性与可欣赏价值，形式美的创造有它自身所遵循的规律和法则。这些规律法则是在设计发展过程中逐渐为设计师所认识和掌握的经验的积累，是进
3、行网页创意设计的基础。,第三章 网页界面的基本要素设计,3.2.1 秩序之美,秩序产生的美感具有简洁、直观的特点。视知觉的这种纯化倾向的物化形式就是将复杂对象处理成具有秩序的图式，如线条、色彩块面、图形的规律性排列等。,第三章 网页界面的基本要素设计,网页界面中的各种构成元素以及它们相互之间的编排都可以体现出秩序。文字的排列方式，色彩的配置与变化，导航系统的设置，图形在界面中的分布，都能够以秩序性表现设计的美感。尤其是在门户型网站和大型公司、政府、事业性单位的网站界面中，秩序能够产生 理性、逻辑、信任、完善的视觉心理效应。,第三章 网页界面的基本要素设计,第三章 网页界面的基本要素设计,第三章
4、 网页界面的基本要素设计,3.2.2 和谐之美,和谐产生的美感体现在设计的整体性上。就界面设计的形式处理或形式美的创造而言，应当保持一个基本趋向，即界面形式的有机整体性。,第三章 网页界面的基本要素设计,第三章 网页界面的基本要素设计,网页界面中的和谐，是指构成界面形式的诸要素相互依存、彼此联系的紧密结合所具有的不可分离的统一性。构成界面形式的文字、图形、色彩等因素，它们之间相互作用，相互协调映衬，通过整体统一的调配，产生一定的和谐度。,第三章 网页界面的基本要素设计,第三章 网页界面的基本要素设计,3.2.3 变化之美,变化的法则体现了设计存在的终极意义，即不断地创造新的形式。没有变化，就没
5、有设计的存在和发展。变化是网页界面设计活力的体现，也是创造形式美的要求。变化使界面形式具有了不同审美倾向的特征。,第三章 网页界面的基本要素设计,富有变化的PC网页,第三章 网页界面的基本要素设计,印度Turokfreak设计作品,第三章 网页界面的基本要素设计,3.3 网页界面的基本要素及其表现形式,网页界面的基本要素有两种分类方法，一种是以网页视听元素作为分类方法的构成要素，主要由文字、图形图像、动画、音频、视频、交互元素等组成；另一种则以网页界面组织形态作为分类方法的形态要素，主要包括浏览器、题头、LOGO、BANNER、导航按钮、正文内容、页脚等元素组成。,3.3.1构成要素,网页设计
6、可谓是一个视听元素系统整合的工程。网页是由多个视听元素组合而成的。网页的视听元素属于网页的构成要素，它相当于网页的零部件，零部件设计好了，网页设计就有了好的设计基础。网页页面设计包括多种视听元素如文字、图形、图像、动画、声音和视频等，这些元素在艺术上都具有相对独立性。,网页设计包括多种视听元素，如文字、图形、动画、视频、声音等，这些元素在艺术上都具有相对独立性，其中有些视听元素本身就是一门艺术。,第三章 网页界面的基本要素设计,1、文字,漂亮的字体给人一种美的享受，可以让人阅读起来轻松。,第三章 网页界面的基本要素设计,(1) 文字的形式,网页文字在界面中形式可以分为两种：文本文字和图形文字。
7、, 文本文字 所谓文本文字，是指在网页编辑软件中可以编辑和更改内容的字符，它具有字体、字号、色彩等基本属性。比如，大多数页面的标题文字、正文文字、某些导航条的链接文字、页脚文字等，都是以文本文字的形式呈现的。,使用CSS具有以下主要优点： 1.丰富了文本的表现形式。 2.简化了文本的控制方式。 3.兼容性强。,第三章 网页界面的基本要素设计,第三章 网页界面的基本要素设计, 图形文字 图形文字是指内容不可编辑已经图形化的各种文字，包括静态和动态的文字图形、图像和文字动画等。图形文字具有图形语言的特征，能够使网页信息传达更为形象生动，也更直接。图形文字主要应用于LOGO文字、导航文字、广告条中，
8、它既可以是二维平面的，也可以是三维立体的。,图形文字是指内容不可编辑、已经图形化的各种文字。,第三章 网页界面的基本要素设计,第三章 网页界面的基本要素设计,（2）文字的控制, 字号大小 平面上图形大小的变化可以产生空间层次感，进而产生前与后、主与次的区别。同样的在网页设计中，字体相同时，字号大可使文字醒目而突出，像是站在队伍的前排；字号小使文字产生后退的观感使其成为背景或次要元素。随着文字的减小，精密细致的感觉逐渐加强。,第三章 网页界面的基本要素设计,第三章 网页界面的基本要素设计, 字体 单从视觉上讲，文字本身是一种特殊的图形，字体具有不同的性格和表现力。,第三章 网页界面的基本要素设计
9、,第三章 网页界面的基本要素设计, 行距 行距的变化也会对文本的可读性产生很大影响。,第三章 网页界面的基本要素设计,第三章 网页界面的基本要素设计,（3）文字的“杂音”,“杂音”效果是借用声学的概念形象地描绘在视觉上与之类似的感觉。顾名思义，文字的“杂音”就是利用模糊、撕裂、重叠、颤动、扭曲等多种手法使文字形成特殊的视觉效果，与传统美学追求的整齐、完整、绝对、清晰形成对立，与后现代主义的美学原则相吻合，常被一些个性化网站运用。“杂音”借助声音与视觉上的通感作用可产生非常丰富的表现力和独特的视觉效果，但文字的可读性受到不同程度的影响平衡两者的关系是运用此类手法时应注意的问题。,第三章 网页界面
10、的基本要素设计,（4）网页文字的设计原则,A. 文字的个性风格和编排形式应符合网页主题和特色。不同的网页主题需要不同的文字风格来配合，不同的文字编排也极大地影响着网页的风格倾向，因此，我们不能孤立地进行网页文字设计，而要将文字的设计和编排与网页的主题结合起来。,第三章 网页界面的基本要素设计,B. 保证特殊文字的可读性。文字的图像化处理使得一些特殊文字难以识别。文字最终是要为传达信息服务，杂乱无章、难于辨识、缺乏可读性的文字是无法承担起传达信息这一任务的。明确、清晰应是大多数网页文字的基本特征。 C. 保持文字设计的整体性。多个文字设计之间应有一定的主次逻辑关系，要避免各自为战，效果太多而出现
11、“花”的现象。,第三章 网页界面的基本要素设计,D. 大量的文字适合使用文本文字，以便于编辑内容和减少网页文件的大小。文本文字一般应选用常用的系统字体，避免出现页面文字混乱。 E. 图形文字要注意控制文件的大小。选用合适的文件格式、选择合适的色彩数量、调节好文件的压缩比都有助于减小文件的大小。,第三章 网页界面的基本要素设计,第三章 网页界面的基本要素设计,3.1.4平面设计中的文字（增加内容）,文字是人类文化的重要组成部分，是记录语言信息的视觉符号，同时也是人们思想感情的图画形式。,文字排列组合的好坏，直接影响平面设计的视觉传达效果。因此，文字设计是增强视觉传达效果，提高作品的诉求力，赋予作
12、平面设计审美价值的一种重要构成技术。在平面设计中，文字由两个方面组成，即字体设计与文案设计。字体设计是根据所表现对象的内容，选用或设计字体，使人很快地识读，并留下记忆。文案设计是根据表现对象和创意要求而创作的具有说服力、吸引力的简介说明文字文案不仅要准确地表达创意，而且要跟图形配合使用，把设计的表现力和感染力发挥到极至,一、文字的可读性：文字的主要功能是在视觉传达中向大众传达作者的意图和各种信息，要达到这一目的必须考虑文字的整体诉求效果，给人以清晰的视觉印象。因此，设计中的文字应避免繁杂零乱，使人易认，易懂，切忌为了设计而设计，忘记了文字设计的根本目的是为了更好，更有效的传达作者的意图，表达设
13、计的主题和构想意念(如图)。,二、赋予文字个性：文字的设计要服从于作品的风格特征。文字的设计不能和整个作品的风格特征相脱离，更不能相冲突，否则，就会破坏文字的诉求效果。 一般说来，文字的个性大约可以分为以下几种类型：端庄秀丽型；格调高雅型；华丽高贵型；坚固挺拔型；简洁爽朗型；强烈视觉型；深沉厚重型；庄严雄伟型；不可动摇型；欢快轻盈型；苍劲古朴型等等(如图)。,三、文字的位置应符合整体要求： 文字在画面中的安排要考虑到全局的因素，不能有视觉上的冲突。否则在画面上主次不分，很容易引起视觉顺序的混乱，有时候甚至1个象素的差距也会改变你整个作品的味道(如图)。,四、 在视觉上应给人以美感： 在视觉传达
14、的过程中，文字作为画面的形象要素之一，具有传达感情的功能，因而它必须具有视觉上的美感，能够给人以美的感受。字型设计良好，组合巧妙的文字能使人感到愉快，留下美好的印象，从而获得良好的心理反应。反之，则使人看后心里不愉快，视觉上难以产生美感，甚至会让观众拒而不看，这样势必难以传达出作者想表现出的意图和构想(如图)。,五、在设计上要富于创造性： 根据作品主题的要求，突出文字设计的个性色彩，创造与众不同的独具特色的字体，给人以别开生面的视觉感受，有利于作者设计意图的表现。设计时，应从字的形态特征与组合上进行探求，不断修改，反复琢磨，这样才能创造出富有个性的文字，使其外部形态和设计格调都能唤起人们的审美
15、愉悦感受(如图)。,第三章 网页界面的基本要素设计,2、图形,图形是传播信息的视觉形式，它是网页设计的重要组成部分。图形在网页设计画面中具有强烈的视觉冲击力，图形与文字在同一画面中，其注意度比为78%：22%。在视觉顺序上，图形往往能首先吸引人们的注意力，这是由于图形给人的视觉印象要比文字强烈得多。,第三章 网页界面的基本要素设计,第三章 网页界面的基本要素设计,（1）图形的运用 网页界面中的图形通常可以作为标题、背景、主图、插画和链接图标等形式存在。图形标题可以避免文字标题所给人的单调感和枯燥感；图形背景往往可以烘托出网页主题风格；图形类的主图直观且生动，并能瞬间给人以印象。图形与影像相比，
16、信息的处理更为灵活，并且可以进行有意识的取舍和概括，使信息的传达更为直接准确。,第三章 网页界面的基本要素设计,（2）图形的分类 网页中的图形有着极其丰富的表现形式，除了有抽象图形和具象图形的基本划分方法外，我们还可以将网页界面中的图形分为以下几种类型：, 漫画与卡通型,第三章 网页界面的基本要素设计,第三章 网页界面的基本要素设计,第三章 网页界面的基本要素设计, 手绘与涂鸦型,第三章 网页界面的基本要素设计,第三章 网页界面的基本要素设计,第三章 网页界面的基本要素设计, 位图转化型,第三章 网页界面的基本要素设计, 图文并茂型,第三章 网页界面的基本要素设计, 立体仿真型,第三章 网页界面的基本要素设计,第三章 网页界面的基本要素设计,3、影像 影像是一种形象的视觉语言，信息量太，可用来直接说明事物的属性、特征以及场景和情节，也可用来渲染某种气氛。,第三
