Personal tools
最新动态 ·  中心介绍 ·  实验教学 ·  实践创新 ·  自主学习 ·  中心建设 ·  共享论坛 管理
文档操作

《网络视觉设计》教学大纲

课程负责人:王朝阳
课程中文名称:网络视觉设计
课程英文名称:Web Visual Design
课程类别:必修
课程学分数:3
课程学时数:54
授课对象:网络传播专业学生
本课程的前导课程:网页设计与制作
 
一、  教学目的和要求
本课程属网络传播专业基础课。
本课程将比较系统地介绍网络视觉设计的基础理论、色彩基础、构成基础、视觉设计的美学原则、传播学原理、网络基本图像格式运用、网页设计、动画原理、动画制作等。本课程旨在教授学生基本的设计原理,并能发挥学生的个人创意能力,运用目前常用的图像设计软件和网页设计软件,完成具有美学观感的网络视觉设计作品,并特别强调学生学习本课程后应具备最基本的网络视觉艺术评判能力,能对网页艺术设计效果做出正确评价和分析。
本课程要求学生在接受课堂理论知识学习之后,能熟练利用相关的图像设计软件和网页设计软件,创作富有表现力的网站作品,为本专业即将开展的其他课程作准备。
 
二、  课程内容与学时分配
课程内容与学时分配表
              
           
第一章 网页设计基础
3
第二章 视觉传达设计
3
第三章 网页图形设计
12(含实习)
第四章 网页色彩设计
9(含实习)
第五章 网页文字编排设计
12(含实习)
第六章 网页版面设计
15(含实习)
 
第一章 网页设计基础
第一节 网页界面设计的发展
一、字符界面设计时期
网页出现的早期,网页设计以功能性为第一指导原则,以技术因素为主要考虑对象,以完成或实现必要的功能为目的。
二、图形界面时期
三、高度发展阶段
重点讲授:界面设计发展的历程
 
第二节 网页界面的构成要素及特性
内容:
一、网页界面的构成要素
网页作为一种新兴媒体,包含的要素有文字、图形、声音、视频、动画等,以及Java、Active控件等制作特殊效果及交互功能的元素。
 
重点讲授:以网页实例解释网页界面的各种构成要素
 
第三节 网页界面设计的特征
内容:
网页界面设计应时刻围绕“信息传达”这一主题来开展。根本上来讲它是一种以功能性为主的设计。
一、设计以功能为主
二、形象明确、易于接受
三、形式简洁
 
重点讲授:功能第一性原则
 
第二章 视觉传达设计
第一节 网页界面中的视觉传达设计
内容:
一、视觉传达设计的基本元素
1、视觉符号与传达
视觉传达设计指利用视觉符号进行信息传达的设计。其中,“视觉符号”和“传达”是核心。
(1)视觉符号
视觉符号:以视觉系统认知的符号即为视觉符号。
视觉符号的分类:界面符号和界面中的符号,或设计符号和设计中的符号。
(2)传达
传达是指信息发送者利用符号向信息接受者传递特定信息的过程。
传达效果的制约因素:视觉刺激的强弱与视觉符号的强度、大小、构成、对比程度以及浏览者的个人兴趣、习惯和期望等因素有密切关联。
2、视觉传达设计的构成要素
(1)文字(2)图形符号(3)图像
 
二、网页视觉传达设计的特性
1、视觉符号的选取
重点讲授:“视觉符号”和“传达”
 
第二节 网页界面设计与创造性思维
内容:
一、创造性思维
1、含义
创造性思维:又称为变革性思维,是反映事物本质和内在、外在的有机联系,具有新颖的广义模式的一种可以物化的思维活动,是指有创见的思维过程。
2、创造性思维的特征
(1)思维方向的求异性
(2)思维进程的跨越性
(3)思维效果的整体性
(4)思维结构的灵活性
(5)思维表达的流畅性
 
二、创造性与借鉴
法国视觉美学家迈耶认为:“精心收集和审慎挑选艺术和设计的古今范例有助于训练设计师的头脑和眼力。”
1、对前辈的借鉴
2、对传统的借鉴
 
三、界面设计创意方法
1、综合型
2、趣味型
3、联想型
4、比喻型
5、矛盾型
6、古朴型
7、流行型
8、奇异型
 
重点讲授:创造性思维的特征
 
第三章 网页图形设计
第一节 图形图像在网页界面设计中的作用
内容:
一、图形图像在网页界面设计中的作用
1、传达性
2、艺术性
3、表现性
4、趣味性
5、超地域、超时空性
 
二、网页界面设计中图形图像的分类
1、主体图
2、辅助图
3、导航图标
4、标志
5、广告
6、动画中的静态图等。
 
三、趋势
网页界面设计以图形图像为主,文字为辅,或将文字视为图形图像的一部分。该趋势尤其适合于非门户网站、非政府职能网站的形象、艺术设计类网站。
 
重点讲授:图形图像在网页界面设计中的作用及发展趋势
 
第二节 图形图像设计的造型元素
内容:
一、基本造型元素
1、点
2、线
3、面
 
二、扩展造型元素
扩展造型元素是在基本造型元素的基础上发展的。
1、空间
这里所指的空间是图形图像通过二维平面形式所表现的虚拟空间,是一种幻觉和假象,是非实质的空间,即空间感。
2、运动
图形图像能产生运动的视觉效果,这种运动与动画中的运动不同,是由静态图让人感受到的运动,或称为“动感”。
3、质感
人们对不同物体的表面质地有不同的感受,如粗糙、细腻、光滑、柔软、坚硬等。
 
重点讲授:点、线、面、空间的概念及应用
 
第三节 图形图像的创意与设计
内容:
一、图形图像创意的出发点
1、想象——创意的基石
2、联想
联想综合了认知能力、记忆能力、理解能力和想象能力。
       3、情感的魅力
情感是人喜、怒、哀、乐的心理表现,它总是伴随着人们对客观事物的体验和感受。
4、夸张与幽默
夸张是一种语言文学上的修辞手法,在图形图像设计中,往往可以借助该方法。
夸张的手法能更鲜明地强调或揭示事物的本质,增强画面的视觉效果。
5、改变视觉惯性
人对于熟悉事物的视觉特征有固定的知觉,我们称之为视觉的恒常性。当这种事物的正常结构和视觉习惯被强制改变,人们在心理上会产生强烈的刺激,由好奇而引起注意。
6、借鉴传统文化
“传统”在时间上代表历史,但在观念上并不代表陈旧。传统的事物让历史得以延续,文化保持差异性,从而让人的内心产生归属感。
7、文字的变化
字形的变化、文字的组合、图形化。
8、直接表达
直接表达并不是没有创意,而是将要表达的主题以最直接、最明确的方式体现出来。
 
二、图像设计的表现技巧
1、面积与方向
(1)面积
图像的面积大小,会直接影响整个画面的视觉效果和情感的表达。
大面积和小面积的比较。
(2)方向
图像的方向和运动有很大关系,方向性强则运动感强,具有很强的视觉攻势,方向性弱则给人以平稳、安定的感觉。
2、退底与轮廓
(1)退底
图像的退底,是将图片中所选形象的背景沿边剪裁掉。
(2)轮廓
图像的轮廓除了方形外,还可以是圆形、椭圆形、平行四边形、特殊图形等。
3、虚实与影调
(1)虚实
图像的虚实对比能产生空间感,实的物体感觉近,虚的物体感觉远。
(2)影调
影调是指图像的调子,高明度还是低明度,高纯度还是低纯度,高对比度还是低对比度。
4、合成与组合
(1)合成
合成指得是将几幅图片的不同内容有选择地合成一个图像。
(2)组合
组合是指几幅图片以不同方式摆放,形成一个图像群或图像组,以期传达更多信息。其中组合中图像的重要程度可以通过面积、位置等产生变化。
5、局部与特写
(1)局部
(2)特写
 
三、图形设计的造型手法
1、概括
概括就是抓住设计对象的主要特征,以最简明扼要的方式予以视觉表现。
2、具象
具象的方法就是指以现实中的事物为基础,运用写实性与装饰性相结合的艺术造型手法,对现实事物进行艺术再创造。
3、抽象
更强调事物的内在属性,而非表面特征,在对事物规律性的概括和提炼中,找出构成视觉图形的造型元素。
4、漫画
漫画是设计师在画面上随心所欲地发挥想象力,创造现实生活中不存在的事物或看不到的场景的一种绘画形式。
5、装饰
装饰化图形是采用形式美原则和装饰艺术手法创作出的图形,它按照对称、均衡、节奏、韵律、调和等形式原理,运用概括、抽象、夸张、变形等造型手法,对自然形象进行艺术加工和处理,创造出富于幻想的审美空间。
6、符号化
符号化图形是将要传达的信息赋予图形,让二者建立内在的对应关系,当图形被观众认知时,它便成为传达该信息的符号。
 
重点讲授:图像创意与设计的案例分析
 
第四章 网页色彩设计
第一节 色彩在网页界面设计中的作用
内容:
色彩在网页界面设计中的作用,主要可以概括为以下几个方面:
1、视觉区域划分
2、突出主题
3、吸引视线
4、增强艺术性
 
重点讲授:案例说明色彩的作用
 
       第二节 色彩基本原理
       内容:
对于色彩的理解,基本可以分为主观性和客观性。
 
一、光与色彩
1、光谱
色彩是一种视觉效应,是由光的刺激而产生的。光是产生色的原因,色是光感觉的结果。没有光就不用谈色了。
2、物体色
物体本身不会发光,之所以能看到它,是因为光源色经物体表面的吸收、反射,反映到视觉中的光色感觉。
3、固有色
物体的固有色是指在正常的白色日光下物体所呈现的色彩。
 
二、计算机色彩显示
 
三、色彩的要素
       在有彩色系当中,任何一种色彩都包含了3个基本要素明度,色度和纯度,在非彩色系中则有明度要素。通常情况下我们把明度、色相、纯度称为色彩的三要素。
1、明度
明度指色彩的明暗或深浅程度。
2、色相
色相指色彩的相貌,是区别色彩种类的名称,又称“色度”。
波长不同才产生色相的差别。
3、纯度
纯度是指色彩的纯净程度,又称“彩度”、“饱和度”。
在光学上,它取决于色彩波长的单一程度(频率)。
4、明度、色相、纯度三要素的关系
 
四、色彩表示法
1、色立体
       (1)孟塞尔色立体(Munsell)
       (2)奥斯特瓦德立体(Ostwald)
       2、色立体的用途
 
五、数字色彩模式
数字色彩也称为电子色彩。网页界面中使用的色彩和图像都是以数字模式出现的。
1、色彩位深
色彩位深又称为色彩解析度、解像度,是数字图像技术的基础。在数字图像中,颜色数据的数目,或每一像素内含可表现颜色数据的总和,就被称作像素的色彩解析度。
2、色彩模式
3、色彩调整
重点讲授:色彩三要素
 
第三节 色彩设计与视知觉
内容:
一、人眼视觉色彩系统
色彩的产生主要是因为人眼接收来自物体表面或内部对于光源的反射或透射,因此色彩是由光、物体特性与人眼视觉机构等三大因素所涵盖。
1、杆状细胞
2、锥状细胞
二、视觉的适应
三、色彩视觉现象
四、色彩对比
五、色彩调和
色彩调和指将有差别、有对比效果的色彩经过调整与组合,形成和谐统一的整体效果的过程。色彩调和并不是要将色彩变得同一,而是可以使有明显差别的色彩变得协调而统一。
1、色彩调和原理
2、色彩调和方法
重点讲授:色彩对比与色彩调和
 
       第四节 色彩设计与心理
内容:
一、色彩的感觉
二、色彩的联想与象征
色彩的联想是通过过去的经验,记忆或知识而取得的。
色彩的联想可分为具体的联想与抽象的联想。
1、 具体的联想
2、 抽象的联想
 
三、各色相的心理分析(色彩表情)
四、色彩设计与视觉心理平衡
符合人生理需要的调和并不能作为衡量作品是否成功的唯一标准。首先,个人的审美是存在差异的;其次,当调和不符合网页主题时,调和再也不能称其为调和了。
重点讲授:色彩的联想和象征
 
第五章 网页文字编排设计
在网页界面设计中,文字既是信息传达的重要媒介,也是具有直观诉求力的视觉传达要素。
文字的编排设计主要包括字体的选择、字体的创造以及文字在界面中编排的艺术规律等。
 
第一节 文字在网页界面设计中的作用
重点讲授:文字设计的特征
 
第二节 字体及字体编排
内容:
一、字体
字体,又称文字的“体式”。在网页界面设计中使用的字体,分为中文字体和外文字体两大类。
(一)中文字体
(二)外文字体
二、字体编排
1、字号级数
适当的字号级数是保证文字的识别性和易读性的重要条件。
通常,人在计算机前眼睛距离屏幕为50~80厘米,这就要求界面中所用的字符规格应该限制在一定范围之内,过小或过大的字号级数都不便浏览。
Point,即常说的“磅”数,是计算机字符规格的基本单位,常用的规格有6P、7P、8P、9P、10P、12P、14P、18P、20P、24P、30P、36P、42P、48P、60P、72P等。
2、字符间距
字符的字距和行距是决定文字易读性的重要因素。
 
重点讲授:中文字体及字体编排
 
第三节 文字的编排设计
内容:
以文字表现为中心的编排设计,是网页界面达成视觉信息传达功能的重要手段。文字编排设计以传播效率为首要目的,要求做到易看易懂,一目了然地传递信息是设计的根本原则。
文字编排设计除了传达功能外,还具有表现情感的能力。
一、文字编排的规律
文字编排应当注意界面上下、左右空间和面积的经营,易于浏览并创造形式美感。
1、对比——突出主要成分
2、统一与协调
3、平衡
4、节奏与韵律
5、视觉诱导
(1)线的引导
(2)图形的引导
 
二、文字编排设计的手法
1、控制界面四角与对角线
2、将文字以线或面的形式加以构成
3、文字造型参差错落
4、文字中加入杂音
5、分离排列
 
三、文字群体的编排
1、文字群体的类型
文字群体的类型指界面构成中以“面”的形式出现的文字,根据其排列方式的不同而形成各具特色的形态。
2、文字群体在界面中的排布
重点讲授:文字编排设计的手法
 
第六章 网页版面设计
网页设计制作阶段的第一步就是设计版面布局。
理解网页版面
理解合理布局
 
第一节 版式在网页界面设计中的作用
内容:
版式在网页界面设计中的两大作用(功能):
一、实用功能
(一)体现
(三)“形式服从内容”(原则之一)
 
二、审美功能
(一)满足人们的心理需求(更高层次的需求);
(二)体现
1、增强整体感
2、增加表现性
(三)“局部服从整体”(原则之二)
 
重点讲授:两大功能
 
第二节 版式设计的造型元素
内容:
一、造型元素
(一)造型元素:点、线、面、空白;
(二)对造型元素的经营和组织;
(三)理解“版面空间”
1、动态的、变化的版面;
2、水平方向(宽度):<=780pixel(以目前流行的屏幕分辨率为准)
3、垂直方向(高度):<=3屏(中小型在1~2屏,大型站点一般>=3屏);
4、为取得好的版面视觉效果,采取的常用措施:绝对宽度、相对宽度、窗口化
(五)版面中的造型元素
1、点、线、面的位置
2、点的强调作用
3、线与面的分割作用
4、空白——虚空间
·理解“空间”
 
二、版式设计的形式原理
1、比例:(概念)整体形式的部分和部分之间、部分与整体之间的数量比率关系;
(1)黄金分割比
(2)根号矩形
(3)数列
2、重复与渐变
——重复
(1)单纯重复
(2)变化重复
——渐变:形状有规律地连续变化,通过类似的形状获得形式的统一。
3、对称与均衡
——对称:形态以某一点为中心,其左右或上下同等、同量、同形而形成的平衡。
(1)左右对称;
(2)上下对称
(3)放射对称
——均衡:版面以某一点为中心,左右或者上下等量而不等形的配置。
4、节奏与韵律
——节奏:单体按照一定的条理、秩序、重复连续地排列,形成一种律动形式。
——韵律:一种规律性的变化。
5、对比与统一
——对比:将性质相异的形态要素直接或间接地配置在一起,相异的特点因比较而更加鲜明,使人产生强烈的紧张感。
(1)形的对比
(2)色的对比
(3)质的对比
(4)势的对比
——统一:性质相同或类似的形态要素并置在一起,形成一种一致或趋向于一致的感觉。
 
重点讲授:造型元素和形式原理
 
第三节 版式设计的视觉因素
内容:
一、人的视觉特征与版式设计
1、主体与背景的关系
2、视觉的整体性——完形心理(格式塔心理)
影响视觉整体性的因素:
(1)接近性
(2)相似性
(3)连续性
(4)封闭性
3、错视:视觉形态受光、形、色等视知觉要素的干扰,在人的视觉中所产生的错误感觉。主观感受与客观事实不符;
(1)构形错视——主要体现在造型要素的几何形方面。
(2)色彩错视
4、视觉移动规律(视觉流程)
(1)人眼的视线沿水平方向运动比沿垂直方向运动快而且不易疲劳;
(2)视线的变化习惯于从左到右,从上到下和顺时针方向运动;
(3)当视线沿斜线方向移动时,在水平方向上下约45度的范围内,视线为从左到右移动,在垂直方向左右约45度的范围内,视线为从上到下移动。
 
二、如何提高视觉传达的效率
1、符合视觉习惯
2、避免视觉疲劳
3、强化页面的主从关系
4、合理的视觉流程
5、注重清晰的导航
 
重点讲授:如何提高视觉传达的效率
 
第四节 版式构成的类型
内容:
一、水平分割
1、均匀分割
2、不均匀分割
3、多次分割
4、变化分割
 
二、垂直分割
1、均匀分割
2、不均匀分割
3、多次分割
4、变化分割
 
三、水平—垂直分割
 
重点讲授:以案例对以上分割方式进行解释
 
第五节 版式设计的步骤及其他
内容:
一、版面布局的准备工作
1、确定网站的类型
2、合理规划网站目录
3、选择网站链接结构
4、确定网站CI要素
5、网站特色定位
 
二、版面布局的步骤
1、草案
2、粗略布局
3、定案
 
三、版面布局形式
1、“T”结构布局
2、“同”型布局
3、“回”型布局
4、“三“型布局
5、“匡“型布局
6、对称对比布局
7、POP布局
 
重点讲授:版面布局的准备工作及步骤
 
三、  教材与参考书
 材:《网页界面设计艺术教程》,人民邮电出版社,张帆等编著2002年2月第一版
参考书:
[1]《网页构图与设计》,人民邮电出版社,张晓清编著,2001年4月第一版
[2] 《Web Color Design—设计师谈网页配色》,电子工业出版社,[韩]I.R.I色彩研究所著, 2002年9月第一版
[3] 《网页设计师完全手册》,岭南美术出版社,陈勇著,2002年6月第一版
 
四、  作业和考核方式
1、作业
学生在课外访问老师指定的参考网站,针对某一类网站的界面设计进行分析评价,并在课堂上参与讨论。
2、考核
考试。


关闭本页
·武汉大学新闻传播学实验教学中心 Laboratory Center for Journalism & Communication, Wuhan University
·Copyright © 2004-2006. All Rights Reserved.
    This site conforms to the following standards: