网页设计与制作-2

《网页设计与制作-2》由会员分享，可在线阅读，更多相关《网页设计与制作-2（58页珍藏版）》请在金锄头文库上搜索。

1、安庆职业技术学院 ,网 页 设 计 与 制 作,安庆职业技术学院 ,本章内容,安庆职业技术学院 ,4.1 概 述,网页不只是传递信息的媒介，同时也是网络上的艺术品。如何让浏览者以轻松惬意的心态吸收网页传递的信息，是一个值得研究的课题。,一. 创意的类型： 1. 改良型创意 2. 创新型创意 二. 创意的功能: 1.提高作品的审美价值，使作品充满张力。 2.满足受众的情感需求，更好的推销作品。,安庆职业技术学院 ,4.2 网页设计中的创意思维,在网页设计中为了创造出高质量的作品，我们往往需要多种思维方式来开发对事物的理解，不断发现事物全新的含义，并赋予其新的表现形式和生命力。 一发展思维 以思维

2、的中心点向外辐射、扩散，积极的思考和联想，产生多方向，多角度的捕捉创作灵感的触角。 发展思维的结构形式： 树型结构、伞型结构、网状结构,安庆职业技术学院 ,4.2 网页设计中的创意思维,二. 逆向思维 打破原有思维定式，将思维的方向和逻辑顺序完全颠倒过来。反其道而行。以达到异、新、奇的视觉效果。 例如：网页设计中非均衡的视觉效果及色彩的反向运用等。 三. 独特思维 勇于挑战，超越常规、习惯 的认识模式，综合复杂环境中的 多种元素，产生一种新颖的不同 凡响的视觉效果。如图(4-1)独 特的视角,给人以新奇的感觉。 法则：人无我有，人有我变。,图4-1 非常态界面,安庆职业技术学院 ,4.2 网页

3、设计中的创意思维,四. 思维的灵活性 思维的灵活性指改变思维的能力。 1. 举一反三，触类旁通。 2. 思维扩散、聚合。 五. 思维进程的跨越性 创意超越了思维的步骤，因某一 事物激发起突然的顿悟。 如：2008奥运会徽“中 国印.舞动的北京”及中国 申奥标志。,图4-2,图4-3,安庆职业技术学院 ,4.2 网页设计中的创意思维,六. 思维效果的整体性 整体性是创新性思维的基本要求，脱离整体性作品就会显得凌乱。如图4-3世界著名搜索引擎Google的徽标设计(图4-34-4)，丹尼斯黄将简约雅洁的设计风格与“Google”巧妙结合，自然天成，使徽标充满灵气。,图4-3,图4-4,安庆职业技术

4、学院 ,4.2 网页设计中的创意思维,七. 思维认识的深刻性 明察秋毫、入木三分、见微知著。抓住事物的本质和发展趋向。如图4-5是推销女用香水。画面中的尺和剪刀，表面上与香水风马牛不相及，而实质上则表示量体、裁衣，香 水香味如为女士量 身定制一般。,图4-5,安庆职业技术学院 ,4.2 网页设计中的创意思维,八思维表达的流畅性 任何一件作品要想完整、准确、高效的表现出来，思维的连贯性是非常必要的。流畅性是对思维速度和效率的综合评价。如图4-6画面中色彩的呼应，排版的承接都为思维的连续表达创 造了条件。 影响思维流畅性的因素： 1.知识储备 2.思维的敏锐度,图4-6,安庆职业技术学院 ,4.3

5、 网页设计的创意方法,创意思维为构筑优美网页绘 制了设计蓝图,而创意方法则在蓝图的基础上对“大厦”进行装饰. 只有经过装饰的网页能使主题表 现的更生动有趣，更具有审美享 受。因而德国设计师霍戈尔.马 蒂斯把创意手段称为“视觉修饰”。 一. 联想与想象 联想即由A事物想到B事物的心 理过程。如图4-7由喜庆的烟花,图4-7,安庆职业技术学院 ,4.2 网页设计中的创意思维,构成威严的雄师，雄师是中国古代千年文化的象征。人们一看到雄师也自然会联想到中华民族。 联想的种类：虚实联想、接近联想、类似联想、对比联想、因果联想 创意的联想方式：形体联想（图4-8 4-9）、材料联想（图4-10）、功能联想

6、（图4-11）,图4-8,图4-11,图4-10,图4-9,安庆职业技术学院 ,4.3 网页设计的创意方法,二. 比喻与拟人 比喻是把要表达的内容作为本体，通过相关联的喻体去表现内容的本质特征。 要求：比体与本体之间要求相类似的特征。,比喻的种类：明喻、暗喻、借喻 比拟。分为两种，拟人或拟物。,比拟离不开联想和想象，其效果使网页中内容更形象、生动，从而增强感染力，比拟可以让静态变得生动起来，让呆板的变得有生机活力，让抽象的形象变得具体，从而增加作品的艺术魅力。,安庆职业技术学院 ,4.3 网页设计的创意方法,三. 夸张与变形 夸张就是把作品中所宣传对象的特征、性质特意放大或渲染，突出自然形态中

7、最本质、最典型的部分，使主体特征更加鲜明突出。 变形手法在实际运用中的表现方式： 拉伸、压缩、扭曲、畸变或将某一部分突出渲染。,四. 借代 不直接说出要说的人或事物，而是借与说的人或事物有密切、象征关系的其它某些事物来代替说明的一种修辞方法。,安庆职业技术学院 ,4.3 网页设计的创意方法,图4-12,图4-13,安庆职业技术学院 ,4.3 网页设计的创意方法,五. 幽默 幽默的手法优点是抓住人或事物的某些特征，运用喜剧性的手法造就一种耐人寻味引人发笑的幽默意境，撞击浏览者的心灵。,六. 象征 用具体的事物表现某种特殊意境，是对事物原型的延伸,是超越性的存在。,七. 对比 把两种不同事物或同一

8、种事物的不同方面放在一起，相互比较，运用对比使对立事物的矛盾突出揭示本质，给人以深刻的启示，留下深刻的印象。,安庆职业技术学院 ,4.4 网页创意设计中的基本要素,安庆职业技术学院 ,4.4.1 网页中的文字,在网页中,字体往往占据了很大的空间和页面,单一形态大小、颜色的字体，虽能传递信息，但不免让人们感到疲劳乏味。,一. 字体的设计方法： 根据文字内容的属性及网站的主题可以适当的作如下化。 1. 改变文字大小、比例 人们已经习惯正常的视觉大小,突然间的变化会产生新的视觉感受,产生重新审视的兴趣。 2. 改变字体形态 局部改变 整体改变,安庆职业技术学院 ,3.4.1 网页中的文字,措施:拉伸

9、、挤压、扭曲、撕裂、切除、省略、替换、粗 细变化。,3. 文字的三维效果 真实的空间：眼睛看得见，手能摸得到的。 虚拟的空间：眼睛看得见，而不能触摸得到的。 措施：添加投影、浮雕、透视效果，产生矛盾空间。,4. 色彩的改变 色相、纯度、明度 5. 机理及质地,安庆职业技术学院 ,4.4.1 网页中的文字,纹理的改变及不同质感效果 6. 置换及同构 将文字中部分笔画用实物、图形、符号、色块等替换，或利用文字外形与某一事物的相似点进行变化。 二. 文字的组合方法与形式 1.字体的大小组合 将大小不等的文字放到一个平面上进行组合，这样大的文字相当于一个图形，而小的文字就成为可供阅读的文字，或将小的文

10、字编排成图形而大的图形成为主要的文字,安庆职业技术学院 ,4.4.1 网页中的文字,2. 汉字与拉丁字母的组合 如：“HONG KONG”与“喜”字的组合。 3. 汉字与具象形体的组合 如：“永久”牌自行车标志图4-14,“ 胖子”服饰。 4.文字组合的处理手段 (1). 添加法 根据文字内容、笔画的多少进行添加文字的组合因素。 A. 添加与内容相关的文字 B. 添加与寓意相关的图形,图4-14,安庆职业技术学院 ,(2). 重叠法 将文字组合因素重叠为一体，产生富有层次的效果。 (3). 删除法 在不影响识别的前提下将某些笔画删除。 (4). 连笔法 将文字组合 因素产生连贯的 整体感，可将

11、两 个以上的文字笔 画连起来。如图 4-15,图4-15,安庆职业技术学院 ,4.4.1 网页中的文字,（5）. 适形法 将文字组合因素适合在一个图形内，产生适合图形的效果。 （6）. 共用法 将所设计内容的两个以上的文字笔画偏旁部首共用，产生你中有我我中有你的视觉趣味。,安庆职业技术学院 ,4.4.1 网页中的文字,(7). 虚实形共用 实为笔画，虚为背景。利用实形周围空底显示字的形产生虚实相间的视觉效果。 (8). 几何形 利用不同的几何形状构成文字,给人以自由和轻松感，现代感强 5. 文字编排的形式: A. 竖排式 B. 横排式 C. 斜排式 D. 曲线式,安庆职业技术学院 ,4.4.1

12、 网页中的文字,E. 渐变式 运用文字字体大小产生渐变的效果。 F. 重叠式 由句子重叠体现构成图形。 G. 分离式 拉大字与字之间距离，形成点壮效果。,(2). 文字的头尾编排形式 A.齐头散尾式 B.散头齐尾式 C.齐头齐尾式 D.中轴分离式,安庆职业技术学院 ,4.4.1 网页中的文字,文字排列时从中间向两边分开,突出中间的垂直空间。 E.分插式 行与行之间的关系上、下、左、右曲直交叉，长短参差、错落地排列。 F.自由式 行与行不规则地排列，形成繁杂的视觉效果，其阅读功能减弱，作为背景图形用。,(3).图形化的文字编排效果 运用大量的文字组成平面的或立体的图形，文字与图形的结合形成了有趣

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

14、页中的图像,精巧细致的感觉。 1.平直的视角 给人一种平稳、安定、规矩的感觉。 2.非常规的视角 如：倒置、旋转、仰视、俯视 增强画面动感，更具强烈的视觉冲击。,二.局部与特写 对于整体的图像局部与特写能让视线更加集中，这种手法有点到为止，意犹未尽的感觉。局部放大，重点表现这一部分，称为特写。特写能对图像产生瞬间的凝视，引发浏览者的兴趣点。图4-16为突出本款车的最新性能，而将车创新的部位放大，以特写的形式展现。起到更有力的宣传,安庆职业技术学院 ,4.4.2 网页中的图像,三.合成与组合,效果。,图4-16,安庆职业技术学院 ,4.4.2 网页中的图像,图像的合成是指用计算机将多幅图片的不同

15、内容有选择的合成一个图像，合成后的图像传达更丰富的信息，能更集中的体现创意。 图像的重要程度可以因面积、摆放位置、组合方式的不同而有所不同。 四.虚实和影调 图像的虚实对比能够产生空间感，实的物体感觉近，虚的物体感觉远。 五.退底与轮廓 图像的退底是仅保留所选图像，而将沿图像边缘的背景去掉，退底后的形象的外轮廓成自由形状，具体清晰分明的视觉形态，显得灵活自如。,安庆职业技术学院 ,4.4.3网页设计中色彩的属性及其应用,设计精良的网站总有其色调构成的总体倾向,以一种颜色或几种临近颜色为主导,使全呈现在某种和谐、统一的色彩倾向，如同人穿衣服。要想恰如其分的表现网页中的内容，在竞争对手脱颖而出的，信息空间的构造也需要恰如其分的包装和表达。 一. 与网站风格 色彩是网