网页设计创意.docx

1、网页设计创意课 题第四章 网页设计创意课型理论课教学目的通过本章的学习，让学生感受到创意的神奇与魅力，激发学生的主动性和积极性。提升学生的创意思维能力，培养学生良好的创意思维方式和思维习惯。能够运用所学创意手法，不断的创作出高质量的作品。重 点难 点启发学生全面的创新思维，培养学生的个性化意识。如何掌握不同性质网页的创意设计技巧。教 具挂 图课本、图片教学方法讲授法授课班级授课日期 月 日月 日月 日月 日月 日教 学 过 程导入新课： 第四章 网页设计创意4.1 概述4.2 网页设计中的创意思维4.3 网页设计的创意方法4.4 网页创意设计中的基本要素4.5 网页创意设计的程序课 后小 结通

2、过对创意方法和创意步骤的了解，使学生掌握创意元素的搭配及创意的技巧。从而增强学生欣赏美和创造美的能力，创作出优秀的、具有吸引力的作品。第四章 网页设计创意 网页的规划与布局。 1.通过对创意思维及创意手法的讲解,辅以对优秀网页作品的分析。启发学生全面的创新思维，进而从多向度的思维中独树一帜，培养学生的个性化意识。2.让学生对优秀设计的创意进行解读和阐释，并分析其创新之处，鼓励学生敢于发掘新意，提出自己独到的见解。 创意是网页设计的试金石。通过本章的学习，让学生感受到创意的神奇与魅力，激发学生的主动性和积极性。提升学生的创意思维能力，培养学生良好的创意思维方式和思维习惯。能够运用所学创意手法，不

3、断的创作出高质量的作品。4.1 概述 网页不只是传递信息的媒介，同时也是网络上的艺术品。如何让浏览者以轻松惬意的心态吸收网页传递的信息，是一个值得研究的课题。一. 创意的类型： 1.改良型创意 2.创新型创意二. 创意的功能 1.提高作品的审美价值，使作品充满张力。 2.满足受众的情感需求，更好的推销作品。4.2 网页设计中的创意思维 在网页设计中为了创造出高质量的作品，我们往往需要多种思维方式来开发对事物的理解，不断发现事物全新的含义，并赋予其新的表现形式和生命力。一发展思维 以思维的中心点向外辐射、扩散，积极的思考和联想，产生多方向，多角度的捕捉创作灵感的触角。发展思维的结构形式：树型结构

4、、伞型结构、网状结构二. 逆向思维打破原有思维定式，将思维的方向和逻辑顺序完全颠倒过来。反其道而行。以达到异、新、奇的视觉效果。例如：网页设计中非均衡的视觉效果及色彩的反向运用等。三. 独特思维勇于挑战，超越常规、习惯的认识模式，综合复杂环境中的多种元素，产生一种新颖的不同凡响的视觉效果。法则：人无我有，人有我变。四. 思维的灵活性思维的灵活性指改变思维的能力。1. 举一反三，触类旁通。2. 思维扩散、聚合。五. 思维进程的跨越性创意超越了思维的步骤，因某一事物激发起突然的顿悟。如：2008奥运会徽“中国印.舞动的北京”及中国申奥标志。六. 思维效果的整体性整体性是创新性思维的基本要求，脱离整

5、体性作品就会显得凌乱。七. 思维认识的深刻性明察秋毫、入木三分、见微知著。抓住事物的本质和发展趋向。八思维表达的流畅性流畅性是对思维速度和效率的综合评价。影响思维流畅性的因素：知识储备、思维的敏锐性4.3 网页设计的创意方法 创意思维为构筑优美网页绘制了设计蓝图,而创意方法则在蓝图的基础上对“大厦”进行装饰. 只有经过装饰的网页能使主题表现的更生动有趣，更具有审美享受。因而德国设计师霍戈尔.马蒂斯把创意手段称为“视觉修饰”。一. 联想与想象联想即由A事物想到B事物的心理过程。联想的种类：虚实联想、接近联想、类似联想、对比联想、因果联想创意的联想方式：形体联想、材料联想、功能联想二. 比喻与拟人

6、比喻是把要表达的内容作为本体，通过相关联的喻体去表现内容的本质特征。要求：比体与本体之间要求相类似的特征。比喻的种类： 明喻、暗喻、借喻明喻：本体与喻体形象共同出现在页面当中暗喻：也称隐喻，只有喻体，没有本体形象出现。借喻：是引用某些事物做喻体，用来状物、抒情、说明。比拟。分为两种，拟人或拟物。 拟人：把物当作人来表现。 拟物：把人当作物来表现。比拟离不开联想和想象，其效果使网页中内容更形象、生动，从而增强感染力，比拟可以让静态变得生动起来，让呆板的变得有生机活力，让抽象的形象变得具体，从而增加作品的艺术魅力。三. 夸张与变形夸张就是把作品中所宣传对象的特征、性质特意放大或渲染，突出自然形态中

7、最本质、最典型的部分，使主体特征更加鲜明突出。变形手法在实际运用中的表现方式：拉伸、压缩、扭曲、畸变或将某一部分突出渲染。四. 借代不直接说出要说的人或事物，而是借与说的人或事物有密切、象征关系的其它某些事物来代替说明的一种修辞方法。五. 幽默幽默的手法优点是抓住人或事物的某些特征，运用喜剧性的手法造就一种耐人寻味引人发笑的幽默意境，撞击浏览者的心灵。六. 象征用具体的事物表现某种特殊意境，是对事物原型的延伸，是超越性的存在。七. 对比把两种不同事物或同一种事物的不同方面放在一起，相互比较，运用对比使对立事物的矛盾突出揭示本质，给人以深刻的启示，留下深刻的印象。4.4 网页创意设计中的基本要素

8、任何网页创意使用的视觉元素总的归纳起来不外乎三种：文字、图像、色彩。三者选用搭配的适当，编排组合的合理，将对网页的美化起到直接的效果。4.4.1 网页中的文字在网页中,字体往往占据了很大的空间和页面,单一形态大小、颜色的字体，虽能传递信息，但不免让人们感到疲劳乏味。一. 字体的设计方法：根据文字内容的属性及网站的主题可以适当的作如下变化。1. 改变文字大小、比例人们已经习惯正常的视觉大小,突然间的变化会产生新的视觉感受,产生重新审视的兴趣。2. 改变字体形态局部改变 整体改变措施:拉伸、挤压、扭曲、撕裂、切除、省略、替换、粗细变化。3. 文字的三维效果真实的空间：眼睛看得见，手能摸得到的。虚拟

9、的空间：眼睛看得见，而不能触摸得到的。措施：添加投影、浮雕、透视效果，产生矛盾空间。4. 色彩的改变色相、纯度、明度5. 机理及质地纹理的改变及不同质感效果6. 置换及同构将文字中部分笔画用实物、图形、符号、色块等替换，或利用文字外形与某一事物的相似点进行变化。二. 文字的组合方法与形式1.字体的大小组合将大小不等的文字放到一个平面上进行组合，这样大的文字相当于一个图形，而小的文字就成为可供阅读的文字，或将小的文字编排成图形而大的图形成为主要的文字2. 汉字与拉丁字母的组合 如：“HONG KONG”与“喜”字的组合。3. 汉字与具象形体的组合 如：“永久”牌自行车标志 “胖子”服饰4.文字组

10、合的处理手段(1). 添加法根据文字内容,笔画的多少进行添加文字的组合因素。A. 添加与内容相关的文字B. 添加与寓意相关的图形(2). 删除法 在不影响识别的前提下将某些笔画删除(3). 重叠法将文字组合因素重叠为一体，产生富有层次的效果。(4). 连笔法 将文字组合因素产生连贯的整体感，可将两个以上的文字笔画连起来。(5). 适形法将文字组合因素适合在一个图形内，产生适合图形的效果。(6). 共用法将所设计内容的两个以上的文字笔画偏旁部首共用，产生你中有我我中有你的视觉趣味。(7). 虚实形共用实为笔画，虚伪背景。利用实形周围空底显示字的形产生虚实相间的视觉效果。(8). 几何形 利用不同

11、的几何形状构成文字,给人以自由和轻松感，现代感强5. 文字编排的形式A.竖排式B. 横排式C. 斜排式D. 曲线式E. 渐变式运用文字字体大小产生渐变的效果。F. 重叠式由句子重叠体现构成图形。G. 分离式 拉大字与字之间距离，形成点壮效果。(2). 文字的头尾编排形式A.齐头散尾式B.散头齐尾式C.齐头齐尾式D.中轴分离式文字排列时从中间向两边分开,突出中间的垂直空间。E.分插式行与行之间的关系上、下、左、右曲直交叉，长短参差、错落地排列。F.自由式行与行不规则地排列，形成繁杂的视觉效果，其阅读功能减弱，作为背景图形用(3).图形化的文字编排效果运用大量的文字组成平面的或立体的图形，文字与图

12、形的结合形成了有趣的、有视觉内涵的编排形式。4.4.2 网页中的图像图形是一种视觉信息传递媒介，较符号文字在传递信息上的优势：易识别、不受地域、国度、知识体系等众多因素的影响。图形图象往往来源于现实世界的影像照片，在造型规律上有很强的客观制约性。所以设计师在对网页优化时应对图片作二次处理、加工，而处理时应从以下方面入手。图形图像的基本表现技巧：一.面积与视角 图像在网页中所占比例的大小直接影响整个页面的视觉效果和情感表达。面积大的图像在画面中占的份量重，表达情感直接。容易吸引浏览者的注意。面积小的图像通常在页面中作点缀和呼应，表达情感含蓄，给人精巧细致的感觉。1.平直的视角给人一种平稳、安定、

13、规矩的感觉。2.非常规的视角如：倒置、旋转、仰视、俯视增强画面动感，更具强烈的视觉冲击。二.局部与特写对于整体的图像局部与特写能让视线更加集中，这种手法有点到为止，意犹未尽的感觉。局部放大，重点表现这一部分，称为特写。特写能对图像产生瞬间的凝视，引发浏览者的兴趣点。三.合成与组合图像的合成是指用计算机将多幅图片的不同内容有选择的合成一个图像，合成后的图像传达更丰富的信息，能更集中的体现创意。图像的重要程度可以因面积、摆放位置、组合方式的不同而有所不同。四.虚实和影调图像的虚实对比能够产生空间感，实的物体感觉近，虚的物体感觉远。五.退底与轮廓 图像的退底是仅保留所选图像，而将沿图像边缘的背景去掉

14、，退底后的形象的外轮廓成自由形状，具体清晰分明的视觉形态，显得灵活自如。4.4.3网页设计中色彩的属性及其应用设计精良的网站总有其色调构成的总体倾向,以一种颜色或几种临近颜色为主导,使全呈现在某种和谐、统一的色彩倾向，如同人穿衣服。要想恰如其分的表现网页中的内容，在竞争对手脱颖而出的，信息空间的构造也需要恰如其分的包装和表达。一. 与网站风格色彩是网页设计中很难把握的重要方面，是确立网站风格的前提，网站色彩的倾向，决定着网站给浏览者的第一印象。如：活泼、庄重、雅致或热烈。二. 色彩原理“色彩是破碎了的光，太阳的光与地球相撞，破碎分散，因而使整个地球形成美丽的色彩。”1. 色彩的三要素 明度、色

15、相和饱和度构成色彩的三要素。自然界中的颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色，而其它所有的颜色均属于彩色，任何一种色彩都具有明度、纯度、饱和度三大属性。(1).明度 明度指色彩的明暗程度。(2). 色相色相指色彩的相貌。如：红、黄、蓝、绿等。(3). 纯度纯度指色彩的纯净程度，纯度越高，色相感越强。2. 色彩的分类：原色、间色、邻近色、对比色、互补色3. 色彩与心理 色彩对人们头脑和精神心理的影响是客观存在的，如：色彩的知觉力，色彩的辨别力，色彩的象征力及情感。(1)色彩的感觉A. 色彩的冷暖 色彩的冷暖与人们对世界的经验分不开。如：阳光呈现红、橙、黄、等颜色，

16、所以人们一看到红、橙、黄等色就联想到火热和烈日给人们的感受，故称“暖色”B. 当人们看到绿、青蓝色时会与寒冷相联系.如冰川、海洋、夜空、树荫等色彩的冷暖归属不能一概而论，在特殊情况下，色彩的冷暖感觉会发生变化(2). 色彩的进退和胀缩感觉a. 长波长的暖色有前进的睡眠的感觉，短波的冷色有退缩的感觉b. 明度高的色彩光量多、色刺激犬，有前进膨胀的感觉，反之有退缩的感觉c. 不同背景的衬托也能产生前进、涨缩的感觉(3). 色彩的轻重和软硬感觉明度高的色彩给人轻的感觉，明度低的色彩给人重的感觉。在色相方面，暖色给人轻的感觉，冷色给人重的感觉给人轻的感觉的颜色均有软的感觉，给人重的感觉的颜色均有硬的感

17、觉(4). 色彩的艳丽与素雅 色彩饱和度高，亮度高的色彩艳丽，反之素雅(5). 色彩的记忆性人们对色彩的记忆，由于年龄、性别、个性、职业、经历、所受教育、自然环境、社会背景的不同 差异很大一般说来 记忆性色彩强的色彩为：暖色、名度高、纯度高记忆性弱的色彩：冷色、明度低、纯度低(6). 色彩的联想与象征：色彩的联想是通过以往的经验、记忆或知识将当前的色彩与其他具象或抽象及相联系起来的过程 常见颜色的联想：a具象联想红色：血火，太阳橙色：灯光 柑橘 秋叶 都市黄色：光 柠檬 迎春花 食品绿色：草地 树叶 禾苗蓝色：天空 宇宙 水 冰紫色：丁香花 葡萄 茄子黑色：夜晚 墨 石炭 白色：雪 牛奶 白云

18、 面粉灰色：乌云 铁 木b抽象联想红色：热烈 热情 危险 活力 吉祥 喜庆 夏季 传统橙色：温暖 欢喜 嫉妒 华丽 甜蜜 兴奋黄色：光明 希望快活 平凡 权利 清爽 安静蓝色：平静 神秘 悠久 理智 深远 科学 快捷紫色：优雅 高贵 注重 浪漫 神秘 女性 温柔 虚幻 魅力黑色：严肃 刚健 恐怖 死亡 罪恶 坚硬 沉默 绝望 悲哀 男性机械灰色：平凡 天意 谦逊 灰心 无聊 消极 谦虚 随便（7）人对色彩的情感最基本的情感表现：好 恶 情感的差异的原因：a. 年龄差异，年龄高：冷色 明度纯度低年龄低：明度纯度高b性别差异：男性：冷色或纯度高的色彩（如黑.灰）色调集中女性：暖色.纯度较低的粉色及

19、白色色调分散c.种族差异原因：生活环境.社会文化.历史.宗教信仰等不同中国：红 黄 蓝 天蓝 浅蓝美国：淡黄 红 明灰 明蓝法国：黑 灰 红 蓝 绿 白德国：黑 白 天蓝 咖啡菲律宾：淡黄 蓝 绿印度：红 黄 蓝 绿 埃及：绿 红 黑 蓝 绿三.web设计中的色彩应用原理确立网站色调确立网站色调的过程决定主体色选择辅助色选择背景色色彩调整确定主页的题材后，要了解哪些颜色适合哪些网站，如影视题材的站点，基本任何颜色都适合，但用黑色或深色则更符合夜间观众的视觉感受页面色彩搭配色相相比明度对比饱和度对比补色对比面积对比调和色调3. 调和色彩的基本法则建立主调统率页面色彩关系善用金银黑白灰等中性色缓解

20、中和，以烘托主题拉开距离（从纯度和明度.面积上着手）四.色彩意象的设计应用当我们看到色彩时，除了感觉其物理方面的影响，心理也会立即产生感觉，这就是色彩的意象红色的色彩意象由于红色容易引起注意，所以在各种媒体中被广泛的采用；除了具有较佳的明视效果之外，更被用来传达有活力 .热诚.温暖.前进等涵义的企业精神与形象。另外红色也常用来作为警告.危险.禁止.防火等标志用色.(例:中国人一看见红色就充满了喜悦和激情)2.橙色的色彩意象橙色明视度高，在工业安全用色中。橙色是警戒色。如火车头、登山服饰、救生衣的设计大都含有橙色。由于橙色明亮刺眼，有时会产生负面低俗的意象。所以运用时，要注意色彩的搭配及表现形式

21、。由于符合大自然创造的色彩搭配模式，橙色与具有一定灰度的绿色搭配效果较好。3.黄色的色彩意象黄色明视度高，同样在生活中属警戒色（如交通标志上黄灯）高亮度的黄色在页面设计中很少大块面的出现，多半由于颜色本身过于刺眼，造成浏览者视觉的不愉快。但与黑色搭配较好，会强烈突出主体。在细节部分使用效果更加。4.绿色的色彩意象在页面设计中，绿色所传达的清爽、理想、希望、生长的意象。符合人们接近自然的生理需求。绿色在设计中应用很广，在工业上许多机械采用绿色，医疗机构场所，也常用绿色作空间色彩规划。 5蓝色的色彩意象 由于蓝色沉稳的特性，具有理智、准确的意象。在商业设计中，强调科技、效率的商品或企业形象。大多选

22、用蓝色作标准色。如：电脑、汽车、摄影器材等。另外受西方文化 的 影响。蓝色作为页面基调能营造出深邃、忧郁的意境。用其展示博大的胸怀或感性诉求方面比较合适。6紫色的色彩意境紫色由于其强烈的女性化的性格，在商业设计用色中，受到相等大的限制，除了女性有关的商品或企业形象外，其它类设计不常作为主色调使用。紫色被称为“魔鬼” 颜色。深紫色会造成恐怖的气氛，对比气体颜色较难控制 紫色也有其优点：是高贵的象征。明度低的紫色有清澈爽朗的感觉，而且有一定灰度的浅紫色会有纤巧雅致的感觉，适合表现女性有关的题材。7.褐色的色彩意象在商业上褐色用来表示原始材料的质感。如麻、木材等。或用来传达莫些产品的色泽及味感，如咖

23、啡、茶、麦类等，或强调古典优雅的企业或商品形象。8白色的色彩意象白色具有高级，科技的意象。痛需和其他色彩搭配使用。纯白色绘入寒冷，严峻的感觉。所以在使用白色时，都会搭配一些其他颜色。如象牙白、米白、乳白等。白色是永远流行的主色调，是能和任何颜色搭配的万能色。较容易控制。9. 黑色的色彩意象黑色具有高贵、稳重、科技庄严的意象。黑色也是一种流行的主色调。适合与许多色彩搭配。以黑色为主色调可以创造出神秘的气氛，另外稳重的黑色可以烘托主体超凡气质和美感。10. 灰色的色彩意象灰色具有柔和，高雅的意象。属中间色，男女皆能接受，所以，灰色也是永远的主要颜色。许多科技产品，尤其是和金属材料有关的，凡平却来用

24、灰色来传达高级，科技的形象。以灰色作为设计的基调是当前设计流行的做法，在缓和过对比造成的强烈的反差，灰色显示了其杰出的能力。五、网页设计的配色技巧 色彩的意象可以延伸设计潜制的效果。网页设计新手可能喜欢选用一些漂亮的图片作为色彩背景。但浏览一下大型网站，会发现它们更多的运用的是黑、灰、蓝、绿、黄等。其他的色彩作为背景。使得网页显得典雅，温馨而又不失活泼，同时大大加快了网页加载的速度。1. 运用色素 这里指在主色调选定的基础上，调整色彩的透明度或饱和度。将色彩变淡或加深调出新色彩或选用邻近色，使用页色彩统一、有层次感。2. 使用对比色 可以充分的利用补色原理进行搭配，同时注意使用灰色调进行调和，

25、这样的作为色彩丰富，意境深远。3. 用黑色与明度，纯度，饱和度高的色彩搭配对比强烈。不光雅致的同时更容易吸引眼球。4. 文字与背景色的搭配 深色字体配素淡，柔和的色彩，读起来自然流畅，深色字体搭配鲜明的字体。如字体作为装饰性来表现出观而选择中间色调明时，纯度可适当降低。总结；要想将色彩自然和谐的运用于网页设计中，使网页获得生命力。大自然是最好的老师。春夏秋冬都恩能够使设计和谐优美。色彩运用中应注意的问题；国家、种族、宗教信仰、风俗 地理位置、文化修养、性别、年龄 。例:儿童喜欢对比强烈，生活在草原上的人喜欢红色，生活在闹市中的人喜欢淡雅的颜色，生活在大沙漠中的人喜欢绿色。4.5 网页创意设计的

26、程序4.5.1前期策划：一, 明确设计任务 一个设计师:在接受任务之前,必须搞清楚服务对象的基本情况和意图,弄清楚所要设计的是一个什么样的任务.企业设计网站的原因很多:(1) 宣传新公司或服务的需要(2) 旧网站的改版、更新 二.调查研究与分析任何主页都要根据主题的内容形成风格,只有熟悉题材和内容设计工作才能有的放矢,取得理想效果. 分析的内容包括:1.目标市场分析 分析受众群体的文化水平,价值观念, 所在的国家,民族及喜好等。2.同类行业网站分析同类行业网站的总体色彩风格,排版布局,页面内容的选择及表现形式等。三 创意开发由单图表现开始,确定设计方向,题材,构思多个方案,尝试从不同角度,方向

27、,不同方式对网页主题进行挖掘和表现,然后将材料进行整理,选择其中较好的进行发散.四. 修改及定案应收时的听取多方面的意见及时对收集材料汇集整理,修改,并最终定稿.4.5.2后期更新及维护网站中随着新信息的加入,老信息的删除,要不断的对网页进行更新并维护,使其能始终正常运行。更新前的准备：1.了解市场需求大多网页数网页都或多或少的与经济利益相挂钩,应以市场的导向，为其服务. 2.了解询问者的心理设计网页需要了解你的观众,了解什么东西在吸引他们,需要了解他们的感受,则有助于你建立站点的色调和个性.小结: 网站创意关乎一个网站的生死存亡,如果想在众多的竞争对手中脱颖而出,在创意、策划上下功夫是必要的,同维护和制作一样,这是一个没有重点的航程.习题:1.如何才能在作品中充分体现创意2.简述图形图象的创意技巧3.简述色彩的性格对突出网页设计主题的作用4.什么是创新性思维参考书目: 网页设计与编程魏善沛编著 清华大学出版社 平面设计基础王友江编著 中国纺织出版社 现代招贴设计教程向雪编著 西南师范大学出版社 图形创意孙尔 沈雁东编著 辽宁美术出版社 超眩网页设计 李冰 李晓飞 潘海波等编写 中国宇航出版社 标志设计 卞宗舜朱俐 谢汇 孙舜尧 编著 湖南大学出版社平面设计基础 王友江 编著 中国纺织出版社