网页设计与制作.ppt
安庆职业技术学院,网 页 设 计 与 制 作,本章内容,4.1 概 述,网页不只是传递信息的媒介，同时也是网络上的艺术品。如何让浏览者以轻松惬意的心态吸收网页传递的信息，是一个值得研究的课题。,一.创意的类型：1.改良型创意 2.创新型创意二.创意的功能:1.提高作品的审美价值，使作品充满张力。2.满足受众的情感需求，更好的推销作品。,4.2 网页设计中的创意思维,在网页设计中为了创造出高质量的作品，我们往往需要多种思维方式来开发对事物的理解，不断发现事物全新的含义，并赋予其新的表现形式和生命力。一发展思维 以思维的中心点向外辐射、扩散，积极的思考和联想，产生多方向，多角度的捕捉创作灵感的触角。发展思维的结构形式：树型结构、伞型结构、网状结构,4.2 网页设计中的创意思维,二.逆向思维 打破原有思维定式，将思维的方向和逻辑顺序完全颠倒过来。反其道而行。以达到异、新、奇的视觉效果。例如：网页设计中非均衡的视觉效果及色彩的反向运用等。三.独特思维 勇于挑战，超越常规、习惯的认识模式，综合复杂环境中的多种元素，产生一种新颖的不同凡响的视觉效果。如图(4-1)独特的视角,给人以新奇的感觉。法则：人无我有，人有我变。,图4-1 非常态界面,4.2 网页设计中的创意思维,四.思维的灵活性 思维的灵活性指改变思维的能力。1.举一反三，触类旁通。2.思维扩散、聚合。五.思维进程的跨越性 创意超越了思维的步骤，因某一事物激发起突然的顿悟。如：2008奥运会徽“中国印.舞动的北京”及中国申奥标志。,图4-2,图4-3,4.2 网页设计中的创意思维,六.思维效果的整体性 整体性是创新性思维的基本要求，脱离整体性作品就会显得凌乱。如图4-3世界著名搜索引擎Google的徽标设计(图4-34-4)，丹尼斯黄将简约雅洁的设计风格与“Google”巧妙结合，自然天成，使徽标充满灵气。,图4-3,图4-4,4.2 网页设计中的创意思维,七.思维认识的深刻性 明察秋毫、入木三分、见微知著。抓住事物的本质和发展趋向。如图4-5是推销女用香水。画面中的尺和剪刀，表面上与香水风马牛不相及，而实质上则表示量体、裁衣，香水香味如为女士量身定制一般。,图4-5,4.2 网页设计中的创意思维,八思维表达的流畅性 任何一件作品要想完整、准确、高效的表现出来，思维的连贯性是非常必要的。流畅性是对思维速度和效率的综合评价。如图4-6画面中色彩的呼应，排版的承接都为思维的连续表达创造了条件。影响思维流畅性的因素：1.知识储备 2.思维的敏锐度,图4-6,4.3 网页设计的创意方法,创意思维为构筑优美网页绘制了设计蓝图,而创意方法则在蓝图的基础上对“大厦”进行装饰.只有经过装饰的网页能使主题表现的更生动有趣，更具有审美享受。因而德国设计师霍戈尔.马蒂斯把创意手段称为“视觉修饰”。一.联想与想象联想即由A事物想到B事物的心理过程。如图4-7由喜庆的烟花,图4-7,4.2 网页设计中的创意思维,构成威严的雄师，雄师是中国古代千年文化的象征。人们一看到雄师也自然会联想到中华民族。联想的种类：虚实联想、接近联想、类似联想、对比联想、因果联想创意的联想方式：形体联想（图4-8 4-9）、材料联想（图4-10）、功能联想（图4-11）,图4-8,图4-11,图4-10,图4-9,4.3 网页设计的创意方法,二.比喻与拟人 比喻是把要表达的内容作为本体，通过相关联的喻体去表现内容的本质特征。要求：比体与本体之间要求相类似的特征。,比喻的种类：明喻、暗喻、借喻比拟。分为两种，拟人或拟物。,比拟离不开联想和想象，其效果使网页中内容更形象、生动，从而增强感染力，比拟可以让静态变得生动起来，让呆板的变得有生机活力，让抽象的形象变得具体，从而增加作品的艺术魅力。,4.3 网页设计的创意方法,三.夸张与变形 夸张就是把作品中所宣传对象的特征、性质特意放大或渲染，突出自然形态中最本质、最典型的部分，使主体特征更加鲜明突出。变形手法在实际运用中的表现方式：拉伸、压缩、扭曲、畸变或将某一部分突出渲染。,四.借代 不直接说出要说的人或事物，而是借与说的人或事物有密切、象征关系的其它某些事物来代替说明的一种修辞方法。,4.3 网页设计的创意方法,图4-12,图4-13,4.3 网页设计的创意方法,五.幽默 幽默的手法优点是抓住人或事物的某些特征，运用喜剧性的手法造就一种耐人寻味引人发笑的幽默意境，撞击浏览者的心灵。,六.象征 用具体的事物表现某种特殊意境，是对事物原型的延伸,是超越性的存在。,七.对比 把两种不同事物或同一种事物的不同方面放在一起，相互比较，运用对比使对立事物的矛盾突出揭示本质，给人以深刻的启示，留下深刻的印象。,4.4 网页创意设计中的基本要素,4.4.1 网页中的文字,在网页中,字体往往占据了很大的空间和页面,单一形态大小、颜色的字体，虽能传递信息，但不免让人们感到疲劳乏味。,一.字体的设计方法：根据文字内容的属性及网站的主题可以适当的作如下化。1.改变文字大小、比例人们已经习惯正常的视觉大小,突然间的变化会产生新的视觉感受,产生重新审视的兴趣。2.改变字体形态局部改变 整体改变,3.4.1 网页中的文字,措施:拉伸、挤压、扭曲、撕裂、切除、省略、替换、粗细变化。,3.文字的三维效果真实的空间：眼睛看得见，手能摸得到的。虚拟的空间：眼睛看得见，而不能触摸得到的。措施：添加投影、浮雕、透视效果，产生矛盾空间。,4.色彩的改变 色相、纯度、明度 5.机理及质地,4.4.1 网页中的文字,纹理的改变及不同质感效果6.置换及同构 将文字中部分笔画用实物、图形、符号、色块等替换，或利用文字外形与某一事物的相似点进行变化。二.文字的组合方法与形式1.字体的大小组合 将大小不等的文字放到一个平面上进行组合，这样大的文字相当于一个图形，而小的文字就成为可供阅读的文字，或将小的文字编排成图形而大的图形成为主要的文字,4.4.1 网页中的文字,2.汉字与拉丁字母的组合 如：“HONG KONG”与“喜”字的组合。3.汉字与具象形体的组合 如：“永久”牌自行车标志图4-14,“胖子”服饰。4.文字组合的处理手段(1).添加法 根据文字内容、笔画的多少进行添加文字的组合因素。A.添加与内容相关的文字B.添加与寓意相关的图形,图4-14,(2).重叠法 将文字组合因素重叠为一体，产生富有层次的效果。(3).删除法 在不影响识别的前提下将某些笔画删除。(4).连笔法 将文字组合因素产生连贯的整体感，可将两个以上的文字笔画连起来。如图4-15,图4-15,4.4.1 网页中的文字,（5）.适形法 将文字组合因素适合在一个图形内，产生适合图形的效果。（6）.共用法 将所设计内容的两个以上的文字笔画偏旁部首共用，产生你中有我我中有你的视觉趣味。,4.4.1 网页中的文字,(7).虚实形共用 实为笔画，虚为背景。利用实形周围空底显示字的形产生虚实相间的视觉效果。(8).几何形 利用不同的几何形状构成文字,给人以自由和轻松感，现代感强 5.文字编排的形式:A.竖排式 B.横排式 C.斜排式 D.曲线式,4.4.1 网页中的文字,E.渐变式运用文字字体大小产生渐变的效果。F.重叠式由句子重叠体现构成图形。G.分离式 拉大字与字之间距离，形成点壮效果。,(2).文字的头尾编排形式 A.齐头散尾式 B.散头齐尾式 C.齐头齐尾式 D.中轴分离式,4.4.1 网页中的文字,文字排列时从中间向两边分开,突出中间的垂直空间。E.分插式 行与行之间的关系上、下、左、右曲直交叉，长短参差、错落地排列。F.自由式 行与行不规则地排列，形成繁杂的视觉效果，其阅读功能减弱，作为背景图形用。,(3).图形化的文字编排效果 运用大量的文字组成平面的或立体的图形，文字与图形的结合形成了有趣的、有视觉内涵的编排形式。,4.4.2 网页中的图像,图形是一种视觉信息传递媒介，较符号文字在传递信息上的优势：易识别、不受地域、国度、知识体系等众多因素的影响。图形图象往往来源于现实世界的影像照片，在造型规律上有很强的客观制约性。所以设计师在对网页优化时应对图片作二次处理、加工，而处理时应从以下方面入手。图形图像的基本表现技巧：一.面积与视角 图像在网页中所占比例的大小直接影响整个页面的视觉效果和情感表达。面积大的图像在画面中占的份量重，表达情感直接。容易吸引浏览者的注意。面积小的图像通常在页面中作点缀和呼应，表达情感含蓄，给人,4.4.2 网页中的图像,精巧细致的感觉。1.平直的视角给人一种平稳、安定、规矩的感觉。2.非常规的视角如：倒置、旋转、仰视、俯视增强画面动感，更具强烈的视觉冲击。,二.局部与特写 对于整体的图像局部与特写能让视线更加集中，这种手法有点到为止，意犹未尽的感觉。局部放大，重点表现这一部分，称为特写。特写能对图像产生瞬间的凝视，引发浏览者的兴趣点。图4-16为突出本款车的最新性能，而将车创新的部位放大，以特写的形式展现。起到更有力的宣传,4.4.2 网页中的图像,三.合成与组合,效果。,图4-16,4.4.2 网页中的图像,图像的合成是指用计算机将多幅图片的不同内容有选择的合成一个图像，合成后的图像传达更丰富的信息，能更集中的体现创意。图像的重要程度可以因面积、摆放位置、组合方式的不同而有所不同。四.虚实和影调 图像的虚实对比能够产生空间感，实的物体感觉近，虚的物体感觉远。五.退底与轮廓 图像的退底是仅保留所选图像，而将沿图像边缘的背景去掉，退底后的形象的外轮廓成自由形状，具体清晰分明的视觉形态，显得灵活自如。,4.4.3网页设计中色彩的属性及其应用,设计精良的网站总有其色调构成的总体倾向,以一种颜色或几种临近颜色为主导,使全呈现在某种和谐、统一的色彩倾向，如同人穿衣服。要想恰如其分的表现网页中的内容，在竞争对手脱颖而出的，信息空间的构造也需要恰如其分的包装和表达。一.与网站风格 色彩是网页设计中很难把握的重要方面，是确立网站风格的前提，网站色彩的倾向，决定着网站给浏览者的第一印象。如：活泼、庄重、雅致（如图4-17）或热烈。二.色彩原理“色彩是破碎了的光，太阳的光与地球相撞，破碎分散，因而使整个地球形成美丽的色彩。”,4.4.3网页设计中色彩的属性及其应用,图4-17,4.4.3网页设计中色彩的属性及其应用,1.色彩的三要素 明度、色相和饱和度构成色彩的三要素。自然界中的颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色，而其它所有的颜色均属于彩色，任何一种色彩都具有明度、纯度、饱和度三大属性。(1).明度 明度指色彩的明暗程度。(2).色相 色相指色彩的相貌。如：红、黄、蓝、绿等。(3).纯度 纯度指色彩的纯净程度，纯度越高，色相感越强。,色 环,图4-18,4.4.3网页设计中色彩的属性及其应用,2.色彩的分类：原色、间色、邻近色、对比色、互补色3.色彩与心理 色彩对人们头脑和精神心理的影响是客观存在的，如：色彩的知觉力，色彩的辨别力，色彩的象征力及情感。(1).色彩的冷暖感觉A.暖色 色彩的冷暖与人们对世界的经验分不开。如：阳光呈现红、橙、黄、等颜色，所以人们一看到红、橙、黄等色就联想到火热和烈日给人们的感受，故称“暖色”B.冷色当人们看到绿、青蓝色时会与寒冷相联系.如冰川、海洋、夜空、树荫等(2).色彩的进退和胀缩感觉,色彩对比,图4-19,4.4.3网页设计中色彩的属性及其应用,a.长波长的暖色有前进的睡眠的感觉，短波的冷色有退缩的感觉b.明度高的色彩光量多、色刺激犬，有前进膨胀的感觉，反之有退缩的感觉c.不同北京的衬托也能产生前进、涨缩的感觉(3).色彩的轻重和软硬感觉明度高的色彩给人轻的感觉，明度低的色彩给人重的感觉。在色相方面，暖色给人轻的感觉，冷色给人重的感觉给人轻的感觉的颜色均有软的感觉，给人重的感觉的颜色均有硬的感觉,4.4.3网页设计中色彩的属性及其应用,(4).色彩的艳丽与素雅 色彩饱和度高，亮度高的色彩艳丽，反之素雅(5).色彩的记忆性 人们对色彩的记忆，由于年龄、性别、个性、职业、经历、所受教育、自然环境、社会背景的不同，差异很大。一般说来记忆性色彩强的色彩为：暖色、名度高、纯度高 记忆性弱的色彩：冷色、明度低、纯度低(6).色彩的联想与象征 色彩的联想是通过以往的经验、记忆或知识将当前的色彩与其他具象或抽象及相联系起来的过程,4.4.3网页设计中色彩的属性及其应用,常见颜色的联想：A.具象联想红色：血、火、太阳橙色：灯光、柑橘、秋叶、都市黄色：光、柠檬、迎春花、食品绿色：草地、树叶、禾苗蓝色：天空、宇宙、水、冰紫色：丁香花、葡萄、茄子黑色：夜晚、墨、石炭 白色：雪、牛奶、白云、面粉灰色：乌云、铁、木 B.抽象联想,4.4.3网页设计中色彩的属性及其应用,红色：热烈 热情 危险 活力 吉祥 喜庆 夏季 传统橙色：温暖 欢喜 嫉妒 华丽 甜蜜 兴奋 黄色：光明 希望快活 平凡 权利 清爽 安静蓝色：平静 神秘 悠久 理智 深远 科学 快捷紫色：优雅 高贵 注重 浪漫 神秘 女性 温柔 虚幻 魅力黑色：严肃 刚健 恐怖 死亡 罪恶 坚硬 沉默 绝望 悲 哀 男性 机械灰色：平凡 天意 谦逊 灰心 无聊 消极 谦虚 随便（7）人对色彩的情感 最基本的情感表现：好 恶 情感的差异的原因：,4.4.3网页设计中色彩的属性及其应用,a.年龄差异年龄高：冷色 明度纯度低年龄低：明度纯度高b性别差异男性：冷色或纯度高的色彩（如黑.灰）色调集中女性：暖色.纯度较低的粉色及白色色调分散c.种族差异原因：生活环境.社会文化.历史.宗教信仰等不同中国：红 黄 蓝 天蓝 浅蓝美国：淡黄 红 明灰 明蓝法国：黑 灰 红 蓝 绿 白德国：黑 白 天蓝 咖啡最基本的情感表现：好 恶,4.4.3网页设计中色彩的属性及其应用,菲律宾：淡黄 蓝 绿印度：红 黄 蓝 绿 埃及：绿 红 黑 蓝 绿三.web设计中的色彩应用原理确立网站色调确立网站色调的过程决定主体色选择辅助色 选择背景色,4.4.3网页设计中色彩的属性及其应用,图4-20,图4-21,4.4.3网页设计中色彩的属性及其应用,色彩调整 确定主页的题材后，要了解哪些颜色适合哪些网站，如影视题材的站点，基本任何颜色都适合，但用黑色或深色则更符合夜间观众的视觉感受 页面色彩搭配 色相相比 明度对比 饱和度对比 补色对比 面积对比 调和色调3.调和色彩的基本法则,4.4.3网页设计中色彩的属性及其应用,建立主调统率页面色彩关系善用金银黑白灰等中性色缓解中和，以烘托主题拉开距离（从纯度和明度.面积上着手）四.色彩意象的设计应用 当我们看到色彩时，除了感觉其对生理和物理方面的影响,心理也会立即产生感觉，这就是色彩的意象1.红色的色彩意象 由于红色容易引起注意，所以在各种媒体中被广的运用；除了具有较佳的明视效果之外，更被用来传达有力.热诚.温暖.前进等涵义的企业精神与形象。另外红也常用来作为警告.危险.禁止.防火等标志用色.(例:中国人一看见红色就充满了喜悦和激情),4.4.3网页设计中色彩的属性及其应用,2.橙色的色彩意象 橙色明视度高，在工业安全用色中。橙色是警戒色。如火车头、登山服饰、救生衣的设计大都含有橙色。由于橙色明亮刺眼，有时会产生负面低俗的意象。所以运用时，要注意色彩的搭配及表现形式。由于符合大自然创造的色彩搭配模式，橙色与具有一定灰度的绿色搭配效果较好。3.黄色的色彩意象 黄色明视度高，同样在生活中属警戒色（如交通标志上黄灯）高亮度的黄色在页面设计中很少大块面的出现，多半由于颜色本身过于刺眼，造成浏,4.4.3网页设计中色彩的属性及其应用,览者视觉的不愉快。但与黑色搭配较好，会强烈突出主体。在细节部分使用效果更加。4.绿色的色彩意象 在页面设计中，绿色所传达的清爽、理想、希望、生长的意象。符合人们接近自然的生理需求。绿色在设计中应用很广，在工业上许多机械采用绿色，医疗机构场所，也常用绿色作空间色彩规划。5蓝色的色彩意象 由于蓝色沉稳的特性，具有理智、准确的意象。在商业设计中，强调科技、效率的商品或企业形象。大多选用蓝色作标准色。如：电脑、汽车、摄影器材等。另外受西方文化的 影响。蓝色作为页面基调能营造出深邃、忧郁的意境。用其展示博大的胸怀或感性诉求方面比较合适。,4.4.3网页设计中色彩的属性及其应用,6紫色的色彩意境 紫色由于其强烈的女性化的性格，在商业设计用色中，受到相等大的限制，除了女性有关的商品或企业形象外，其它类设计不常作为主色调使用。紫色被称为“魔鬼”颜色。深紫色会造成恐怖的气氛，对比气体颜色较难控制 紫色也有其优点：是高贵的象征。明度低的紫色有清澈爽朗的感觉，而且有一定灰度的浅紫色会有纤巧雅致的感觉，适合表现女性有关的题材。7.褐色的色彩意象 在商业上褐色用来表示原始材料的质感。如麻、木材等。或用来传达莫些产品的色泽及味感，如咖啡、茶、麦类等，或强调古典优雅的企业或商品形象。,4.4.3网页设计中色彩的属性及其应用,8.白色的色彩意象 白色具有高级，科技的意象。痛需和其他色彩搭配使用。纯白色绘入寒冷，严峻的感觉。所以在使用白色时，都会搭配一些其他颜色。如象牙白、米白、乳白等。白色是永远流行的主色调，是能和任何颜色搭配的万能色。较容易控制如图（4-22）。9.黑色的色彩意象黑色具有高贵、稳重、科技庄严的意象。黑色也是一种流行的主色调。适合与许多色彩搭配。以黑色为主色调可以创造出神秘的气氛，另外稳重的黑色可以烘托主体超凡气质和美感。10.灰色的色彩意象,4.4.3网页设计中色彩的属性及其应用,图4-22,4.4.3网页设计中色彩的属性及其应用,灰色具有柔和，高雅的意象。属中间色，男女皆能接受，所以，灰色也是永远的主要颜色。许多科技产品，尤其是和金属材料有关的，凡平却来用灰色来传达高级，科技的形象。以灰色作为设计的基调是当前设计流行的做法，在缓和过对比造成的强烈的反差，灰色显示了其杰出的能力。五.网页设计的配色技巧 色彩的意象可以延伸设计潜制的效果。网页设计新手可能喜欢选用一些漂亮的图片作为色彩背景。但浏览一下大型网站，会发现它们更多的运用的是黑、灰、蓝、绿、黄等。其他的色彩作为背景。使得网页显得典雅，温馨而又不失活泼，同时大大加快了网页加载的速度。,4.4.3网页设计中色彩的属性及其应用,1.运用色素 这里指在主色调选定的基础上，调整色彩的透明度或饱和度。将色彩变淡或加深调出新色彩或选用邻近色，使用页色彩统一、有层次感。2.使用对比色 可以充分的利用补色原理进行搭配，同时注意使用灰色调进行调和，这样的作为色彩丰富，意境深远。3.用黑色与明度、纯度、饱和度高的色彩搭配 对比强烈，不光雅致的同时更容易吸引眼球。4.文字与背景色的搭配 深色字体配素淡，柔和的色彩，读起来自然流畅，深色字体搭配鲜明的字体。如字体作为装饰性来表现出观而选择中间色调明时，纯度可适当降低如图（4-23）。,4.4.3网页设计中色彩的属性及其应用,总结:要想将色彩自然和谐的运用于网页设计中，使网页获得生命力。大自然是最好的老师。春夏秋冬都恩能够使设计和谐优美。色彩运用中应注意的问题；国家、种族、宗教信仰、风俗 地理位置、文化修养、性别、年龄。例:儿童喜欢对比强烈，生活在草原上的人喜欢红色，生活在闹市中的人喜欢淡雅的颜色，生活在大沙漠中的人喜欢绿色。,图4-23,4.5 网页创意设计的程序,4.5.1 前期策划,一.明确设计任务 一个设计师:在接受任务之前,必须搞清楚服务对象的基本情况和意图,弄清楚所要设计的是一个什么样的任务.企业设计网站的原因很多:(1)宣传新公司或服务的需要(2)旧网站的改版、更新 二.调查研究与分析 任何主页都要根据主题的内容形成风格,只有熟悉题材和内容设计工作才能有的放矢,取得理想效果.分析的内容包括:1.目标市场分析 分析受众群体的文化水平,价值观念,所在的国家,4.5.2后期更新及维护,族及其喜好等.2.同类行业网站分析 同类行业网站的总体色彩风格,排版布局,页面内容的选择及表现形式等。三.创意开发 由单图表现开始,确定设计方向,题材,构思多个方案,尝试从不同角度,方向,不同方式对网页主题进行挖掘和表现,然后将材料进行整理,选择其中较好的进行发散.四.修改及定案 应收时的听取多方面的意见及时对收集材料汇集整理,修改,并最终定稿.,4.5.2后期更新及维护,网站中随着新信息的加入,老信息的删除,要不断的对网页进行更新并维护,使其能始终正常运行。更新前的准备：1.了解市场需求 大多网页数网页都或多或少的与经济利益相挂钩,应以市场的导向，为其服务.2.了解询问者的心理设计网页需要了解你的观众,了解什么东西在吸引他们,需要了解他们的感受,则有助于你建立站点的色调和个性.,1.如何才能在作品中充分体现创意2.简述图形图象的创意技巧3.简述色彩的性格对突出网页设计主题的作用4.什么是创新性思维,习 题,安庆职业技术学院,
