《网页美工设计》课件-第3章 网页布局与视觉流程设计

网页美工设计目录第一部分

理论基础篇第二部分技能提升篇第三部分综合实训篇第三章网页布局与视觉流程设计本节主讲：视觉流程的含义01020304网页视觉流程设计的作用网页视觉流程的筹划网页设计的视觉流程类型1一、视觉流程的含义网页布局视觉流程设计视觉流程：人在观察事物时视线在空间中的移动过程和运动轨迹，即观察事物的先后顺序。

网页设计视觉流程：访问者在浏览网页时视线的运动走向。2网页布局视觉流程设计二、视觉流程设计的作用1、秩序感、节奏感2、感染力、冲击力3、轻松、舒适、美观4、提升受众的浏览兴趣5、引导观者的视线3三、网页视觉流程的筹划左侧：轻便、自由、舒展、活力右侧：局促、庄重网页布局视觉流程设计

（一）合理运用视域上部：轻快、漂浮、积极、高昂下部：压抑、沉重、限制、稳定4（二）遵循阅读习惯从左到右，从上到下，先中间，后四周。（三）强化视觉元素的可视性

通过颜色、大小、字体、字型、角度、虚实、位置等加以区分。网页布局视觉流程设计5

四、网页设计的视觉流程类型

（一）线性视觉流程

直线视觉流程斜线视觉流程曲线视觉流程

网页布局视觉流程设计6

1、直线视觉流程稳定、恬静、平和直观、坚定网页布局视觉流程设计72、斜线视觉流程自由、活泼、动感十足网页布局视觉流程设计83、曲线视觉流程舒畅、饱满、曲线美、时尚网页布局视觉流程设计91、文字导向通过文字的编排方向引导浏览者视线

2、肢体导向利用肢体语言或是手部动作引导视觉走向（二）导向视觉流程网页布局视觉流程设计103、指示导向

利用流程线、符号箭头将视线引向主体4、形象导向

利用事物形象特征引导视线。如：人或者动物的视线、钟表的指针等。网页布局视觉流程设计11（三）反复视觉流程网页布局视觉流程设计

（四）散点视觉流程

安定、整齐、秩序、规律感性、自由、随意、新奇12（五）重心视觉流程

从页面的中心点开始，产生向心或离心的视觉运动。网页布局视觉流程设计突出、醒目、强调之感。13第三章网页Logo设计第二节

网页Logo设计的风格定位本节主讲：1网页Logo设计的风格定位

网页

网页Logo设计的风格定位2讲授人：设计对象的调研分析0102网页Logo的风格定位3一、设计对象的调研分析（一）调研内容

对象的性质、特征、造型，行业类别和经营范围、产品的属性、设计对象的环境、地域文化、经营理念、生产流程和工艺。（二）分析提炼

分析对象的性质和主要特征和核心卖点，受众最关心的点是什么。4网页Logo设计的风格定位（三）设计定位

我是谁、我是做什么的、我的特色二、网页Logo的风格定位（一）性质定位

以企业或者组织的性质为定位点，在LOGO设计中突出企业的性质特点。5网页Logo设计的风格定位+中+人+（二）内容定位

保证LOGO与企业产品或名称内容一致，使LOGO具有清晰、易懂、简洁的特点。（三）艺术化定位

大多针对具有一定的文艺气息的团体或机构，如文化馆、美术馆、文化交流中心等，LOGO设计过程中主要强调艺术与高雅。6网页Logo设计的风格定位（四）民族性定位

大多用于具有悠久历史的企业或者机构，以突显该企业或机构的历史底蕴和民族特色。（五）国际化时代感定位

这种定位方式，大多用于外贸企业、跨国公司或准备进军国际市场的企业。LOGO设计特点多采用字母作为企业品牌标识的主体内容，表现方法上采用构成、波普艺术、晶格化等现代艺术审美形式。7网页Logo设计的风格定位（六）理念定位

可用于任何企业或机构、组织，通过其象征或寓意的手法来进行表达，表现企业的发展战略和美好愿景等。第三章网页Logo设计第三节网页Logo设计的创意与表现第一讲网页logo设计的创意与表现（上）本节主讲：2网页Logo的创意表现方式01第三节网页Logo设计的创意与表现第一讲

网页logo设计的创意与表现（上）(一)从图形出发

1、用具象表现

具象类标志设计可直接描绘客观对象形态特征，充分运用具象造型手法，具有强烈的识别性，能够获得更加直观、充实、感性的视觉效果，适当运用，可以实现标志以人为本的个性化、风格化、艺术化。

主要包括:

动物标志、植物标志、人物标志、风景标志、器物标志。网页Logo的创意设计与表现一、网页Logo的创意表现方式图形文字含义形式3

2、用象形表现

象形标志，在具象标志的基础上开始简化，提炼特征形态符号，来传达企业的关键信息。网页Logo的创意设计与表现

造型方式:再现式、印象式香港美宝莲美容有限公司铜陵职业技术学院校徽4

3、用抽象表现

标志抽象表现方式可分为有机形和无机形两种。

（1）有机形表现形式

有机形是指有生长机能的形态，是自然的生长姿态，外形随意、流畅。

（2）无机形表现形式

无机形是以更加简洁、规则、抽象的几何形态进行表现而构成的图形，给人一种明快、简洁而有力的心理感觉。网页Logo的创意设计与表现5(二)从文字出发

1、用字母表现

用单个字母或组合字母设计，使用字母设计的标志，构成简练、明快、独树一帜，在字母标志中通常用首写或特殊字母进行设计。

2、用汉字表现

汉字造字方法多样，书写形式多变，汉字不光具有图形美，同时具有博大的文化内涵和艺术魅力。网页Logo的创意设计与表现6

3、用数字表现

标志中的数字通常用来表现特定的数量关系，有着较强的提示作用。这一类型标志主要以阿拉伯数字、罗马数字等为设计元素。

(三)从含义出发

1、比喻性标志

比喻就是采用一个或一组视觉符号，表达相平行的另一层含义。通常将甲事物比喻成乙事物。在两者之间建立起性质或关系上的共性。

网页Logo的创意设计与表现7

2、象征性标志

象征是采用视觉图形符号，唤起人们对于某一抽象意义、观念或情绪的记忆。以此将企业的理想和气质含蓄的表达出来。

3、故事性标志

采用故事中的角色或事物，作为标志设计的元素，借用故事的广泛流传程度，传达企业的理念或行业特征，顺水推舟，顺势而动。

网页Logo的创意设计与表现8(四)从形式出发

1、点的纯粹

点的形象是相对的，由点构成的线、面、体则具有空灵、通透的视觉效果，点在具体运用时还可以创设出许多具象的形态，从而营造不同的意境。

2、线的敏感

线有着丰富而细腻的视觉表现力，可以表现多种视觉感受，如刚柔相济、抑扬顿挫、粗细长短、疏密变化。用于标志设计，可很好地表现形象的性质和状态，传达不同的艺术思想。

3、面的多变

面是线移动的结果，是体的截断。在二维空间里，面具有强烈的形态感，在标志设计中具有醒目、肯定、整体、强烈的特征。网页Logo的创意设计与表现9

4、空间的现代

空间是一种以平面表现立体虚空的效果方式，根据不同的表现方式和不同着眼点，使图形呈现不同形态的空间感，达到一种幻视的效果。

5、肌理的多元

肌理又称质感，由于物体的材料不同，表面的组织、排列、构造各不相同，因而产生粗糙、光滑、软硬等不同触感。

6、正负形的巧妙

通过正形和负形的相互衬托，使各形体在视觉传达上既表现出形中有形，又各自独立，简练明了。

7、想象的有趣

想象是人脑对已储存的表象进行加工改造形成新形象的心理过程。通过这种特殊的思维形式可以创造出新奇的标志设计作品。网页Logo的创意设计与表现10第三章网页Logo设计第三节网页Logo设计的创意与表现第二讲网页logo设计的创意与表现（下）本节主讲：2网页Logo的创意表现内容0102网页Logo的创意表现方法03网页Logo的创意表现案例赏析第三节网页Logo设计的创意与表现第二讲

网页logo设计的创意与表现（下）

（一）以企业理念为题材

企业理念包含企业的宗旨、目标、精神、价值观等，比较抽象。标志是将企业独特的经营理念和企业精神、企业文化等采用抽象化的图形或符号具体的表达出来。

（二）以经营内容或产品外观造型为题材

对于一些行业特点或产品特征较强的企业，标志设计可使用经营内容或产品外观造型为题材进行设计，这种方法具有形象直观，易认易记的优势。二、网页Logo的创意表现内容小伙伴服饰43届世乒赛网页Logo的创意设计与表现3

（三）以企业或品牌首写及关键文字为题材

其设计特点，在于取首写或关键文字形成强烈的视觉冲击力，强化字形特征，增强了标志的可视性和识别功能。

（四）以关键文字与图形组合为题材

文字标志与图形综合的产物，兼顾文字说明和图案表现的优点，具象和抽象的结合。两种视觉形式相辅相成。旗王牌茶叶网页Logo的创意设计与表现4

（五）以企业或品牌名称为题材

这是近年来在国际上较为流行的做法，即名称标志，它可以直接传达企业的信息。在企业名称字体的设计中，采用对比手法，使其中某一字母具有独特的差异性，以增强标志图形的视觉冲击力。往往特异部分也是企业信息的主要内容所在。

网页Logo的创意设计与表现5三、网页Logo的创意表现方法网页Logo的创意设计与表现

创意表现是在前期调研、分析、定位等工作的基础上进行的具体设计、制作的过程。

（一）方案构思

方案设计必须以调研和分析的结果为依据，确保设计出的作品风格、形式与企业的形象、理念、定位、目标相一致，并且满足企业的要求。

构思阶段应考虑的几个问题：1.企业的经营理念或目标追求是什么？2.企业或品牌的主要特征是什么？

3.企业最具代表性的事物是什么？

4.企业最希望展现给受众的是什么？6网页Logo的创意设计与表现

（二）元素提炼

根据头脑风暴的结果提炼出核心概念和元素，以文字或图形的方式进行呈现。

（三）设计草图

草图是将思维活动变成具体创作形态的过程。将提炼的核心元素进行图形化的设计和表现，确定基本造型、风格、表现手法和颜色方案等，以确定标志设计方案初稿。

注意：方案稿要设计不少于3套，以供选择。7网页Logo的创意设计与表现

（四）深入调整

对方案形态、结构、比例、大小、色彩等各方面进行深入调整，使其达到精准、完善的理想状态。

如:奥运五环标志的彩色稿，由于五种颜色之间明度差异较大，相同粗细的环看起来却粗细不均匀，为了达到最佳视觉效果，设计师对五色环的粗细做了适当调整，蓝、黄、黑、绿、红的比例为1:1.3:0.98:1:1，最终使五个环看起来粗细协调、均匀。

（五）标准制图

标志是企业形象的核心，标志方案确定以后，为维持标志的严肃性和权威性。确保标志在实际使用过程中因不规范使用，造成标志的变形和失真，有损企业形象，必需对其进行精确的标准化制图。

通常使用矢量制图软件，通过规范的制图方法如:方格标示法、圆弧标示法、角度标示法、比例标示法等进行标准化制图。网格标示法比例标示法圆弧标示法角度标示法8网页Logo的创意设计与表现

1、标志以公司中文名称“朗润”的含义为出发点进行创作：朗——阳光，润——生长，并以阳光及水滴为基本元素进行创意设计。

2、冉冉上升的阳光喻意朗润公司事业蒸蒸日上，同时，阳光造型如璀璨的鲜花，象征公司的美好明天。阳光下端的钻石形象，彰显公司优良的产品品质及良好的服务质量。标志下部为两片嫩芽及水滴，体现公司健康完善的管理体制为员工打造优质的成长环境，激发员工的进取心和凝聚力。

3、嫩芽、水滴、阳光充分展现了生生不息的生命力，寄予朗润公司健康发展、永续经营、不断壮大的美好愿景。四、网页Logo的创意表现案例赏析关键词：[优质、阳光、生长、持续]案例：温州朗润电气有限公司标志9网页Logo的创意设计与表现

1、立足美容服务行业，以莲花为基础元素，外形如一尊王冠，喻意以天然植物成分为追求美好形象和生活品质的年轻女性提供尊贵、自然的美容服务；

2、莲花两侧形如轻抚着脸蛋的双手，莲花中间立着一位着旗袍的典雅女性形象，象征品牌以呵护、关爱女性形象为中心，专业、用心为女性塑造高洁典雅的青春靓丽形象，提升女性气质。

3、标志整体端庄、稳重，寓意为客户提供优质、可靠的美容服务。四、网页Logo的创意表现案例赏析案例：香港美宝莲美容有限公司标志关键词：[高洁、尊贵、典雅、美容、呵护]10第三章

网页Logo设计第四节网页Logo设计与制作第一讲网页logo设计与制作（上）本节主讲：网页LOGO第四节

网页Logo设计与制作第一讲

网页logo设计与制作（上）网页Logo设计与制作（上）“心味岛”标志（Logo）设计01“心味岛”标准字体设计02网页标志设计与制作（上）

一.“心味岛”标志设计（一）前期准备实地走访电话咨询浏览网站网页标志设计与制作（上）

一.“心味岛”标志设计（二）创意构思进行创意构思展开头脑风暴选取重点词汇确定品牌性格基调开心、快乐俏皮、新鲜提炼设计元素开心果、松子、做鬼脸、俏皮、舔嘴唇、可爱、绿色、新鲜收集视觉图像设计、修改方案网页标志设计与制作（上）

一.“心味岛”标志设计（三）方案设计提炼设计元素开心果、松子、做鬼脸、俏皮、舔嘴唇、可爱、绿色、新鲜网页标志设计与制作（上）

一.“心味岛”标志设计（三）方案设计配置调整颜色网页标志设计与制作（上）

二.“心味岛”标准字体设计（一）标准字体字形设计网页标志设计与制作（