L14-《网络信息制作与发布》网页艺术设计5

1、1/21浙江广播电视大学 徐斌立2/212/21 从从网页的艺术设计的角度来说，版式、色彩和文字是决定页面视觉传达艺网页的艺术设计的角度来说，版式、色彩和文字是决定页面视觉传达艺术效果的重要术效果的重要 因素，而标志可以说是网站的灵魂。前面巳经给大家介绍过因素，而标志可以说是网站的灵魂。前面巳经给大家介绍过了色彩和构成的相关知识。下面了色彩和构成的相关知识。下面 将给大家详细介绍关于网站的标志和文字将给大家详细介绍关于网站的标志和文字的的设计。设计。3/213/21 在在科学技术飞速发展的今天，印刷、摄影、设计和图像科学技术飞速发展的今天，印刷、摄影、设计和图像传送的作用越来越重要，这种传送的

2、作用越来越重要，这种非语言非语言传送的发展具有了和传送的发展具有了和语言传送相抗衡的竞争力量，标志则是其中一种独特的传语言传送相抗衡的竞争力量，标志则是其中一种独特的传送方式。送方式。 标志，是表明事物特征的记号。它以单纯、显著、标志，是表明事物特征的记号。它以单纯、显著、易识别的物象、图形或文字符号为直观易识别的物象、图形或文字符号为直观语言语言，除标示什么、，除标示什么、代替什么之外，还具有表达意义、情感和指令行动等作用。代替什么之外，还具有表达意义、情感和指令行动等作用。一个网站的一个网站的标志标志代表着网站的形象，其最重要的作用是用代表着网站的形象，其最重要的作用是用图形化的方式传达网

3、站的定位和经营理念图形化的方式传达网站的定位和经营理念4.4.1 标志设计4/214/211 1. .标志设计的标志设计的原则原则 标志标志设计不仅是实用物的设计，也是一种图形艺术设计。设计不仅是实用物的设计，也是一种图形艺术设计。它与其他图形艺术表现手段它与其他图形艺术表现手段既有既有相同之处，又有自己的艺相同之处，又有自己的艺术规律术规律。 它它必须体现上述单纯、显著、易识别的特点，才能必须体现上述单纯、显著、易识别的特点，才能更好更好地地发挥其功能。由于对标志设计简练、概括、完美的要求发挥其功能。由于对标志设计简练、概括、完美的要求十分苛刻，其难度比其他任何十分苛刻，其难度比其他任何图形

4、艺术图形艺术设计都要大得多设计都要大得多。4.4.1 标志设计5/215/21l 详尽详尽明了设计对象的使用目的、适用明了设计对象的使用目的、适用范畴；范畴；l 考虑考虑其实现的可行性其实现的可行性，应用，应用形式、材料和制作形式、材料和制作条件；条件；l 采取采取相应的设计相应的设计手段手段，同时还要顾及应用于其他视觉传，同时还要顾及应用于其他视觉传播方式（如印刷、广告、映象等）或放大、缩小时的播方式（如印刷、广告、映象等）或放大、缩小时的 视觉效果视觉效果。l 构图构图要凝练、美观、适形（适应其应用物的形态）要凝练、美观、适形（适应其应用物的形态）。l 图形、符号既要简洁、概括，又要讲究艺

5、术性图形、符号既要简洁、概括，又要讲究艺术性。l 色彩要单纯、强烈、醒目色彩要单纯、强烈、醒目。4.4.1 标志设计6/216/212.2.标志设计的表现与构思手法标志设计的表现与构思手法标志标志设计的表现手法极其丰富多样，并且在不断发展设计的表现手法极其丰富多样，并且在不断发展创新，仅举常见手法概述如下：创新，仅举常见手法概述如下：（1 1）表象）表象手法。采用与标志对象直接关联而具典型特手法。采用与标志对象直接关联而具典型特征的形象。这种手法直接、明确征的形象。这种手法直接、明确、一目了然、一目了然，易于迅，易于迅速理解和速理解和记忆。如记忆。如表现出版业用书的形象，表现铁路表现出版业用书

6、的形象，表现铁路运输业用火车头的运输业用火车头的形象形象，表现银行业以钱币符号配合，表现银行业以钱币符号配合变幻的图形为标志图形变幻的图形为标志图形等。等。4.4.1 标志设计7/217/21(2)(2)象征手法。采用某种意义上与标志内容有联系的图象征手法。采用某种意义上与标志内容有联系的图形、文字、符号、色彩等，形、文字、符号、色彩等，以比喻以比喻、形容等方式象征、形容等方式象征标志对象的抽象内涵标志对象的抽象内涵。 如中国农业银行如中国农业银行行徽以麦穗图形为主，直截了当地行徽以麦穗图形为主，直截了当地表达出表达出这个这个专业银行专业银行- -“农业农业”银行银行的特征。麦穗中部的特征。麦

7、穗中部横与坚的十字行处理不仅简练地概括了麦穗行横与坚的十字行处理不仅简练地概括了麦穗行，而且，而且恰成一个恰成一个“田田”字，从而进一步加强字，从而进一步加强了了“农业农业”的含的含义。上端麦芒与圆形交节的义。上端麦芒与圆形交节的断开处理断开处理，完善了整体的，完善了整体的内外关系，从而强化了标志形象的个性特色。内外关系，从而强化了标志形象的个性特色。4.4.1 标志设计8/218/21（3 3）寓意）寓意手法。采用与标志含义相近似或具有寓手法。采用与标志含义相近似或具有寓意性的形象，以影射、暗示、示意意性的形象，以影射、暗示、示意的方式的方式表现标志表现标志的内容和特点。如马的形状与的内容和

8、特点。如马的形状与“马马”字互字互恰，用恰，用奔奔马的形象示意马的形象示意名称。名称。4.4.1 标志设计9/219/21（4 4）视）视感手法。采用并无特殊含义的简洁而形态感手法。采用并无特殊含义的简洁而形态独特的抽象图形、文字或符号，给人独特的抽象图形、文字或符号，给人 一种强烈的一种强烈的现代感、视觉冲击感或舒适感，引起人们注意并难现代感、视觉冲击感或舒适感，引起人们注意并难以忘怀。这种手法不靠图形以忘怀。这种手法不靠图形含义含义而主要靠图形、文而主要靠图形、文字或符号的视感力量来表现字或符号的视感力量来表现标志。标志。4.4.1 标志设计10/2110/213.3.标志设计的流程标志设

9、计的流程4.4.1 标志设计l 调研分析调研分析。在。在设计之前，首先要对制作网站的客户做全面深入的了解，包括经营设计之前，首先要对制作网站的客户做全面深入的了解，包括经营战略、市场战略、市场分析等分析等l 要素要素挖掘挖掘。依据。依据对调查结对调查结 果的分析，提炼出标志的结构类型、果的分析，提炼出标志的结构类型、色彩，色彩，列出标志所列出标志所要体现的精神和特点，挖掘要体现的精神和特点，挖掘相关的相关的图形元素，找出标志设计的图形元素，找出标志设计的方向。方向。l 设计设计开发开发。可以。可以从不同从不同的角度的角度和方向进行设计开发工作。设计师基于对标志的理和方向进行设计开发工作。设计师

10、基于对标志的理解，充分发挥想象，用不同的表现解，充分发挥想象，用不同的表现方式方式，将设计要素融入设计中，将设计要素融入设计中。经过。经过讨论分析讨论分析或修改或修改，开发出适合，开发出适合客户的标志。客户的标志。11/2111/214.4.标志修正标志修正4.4.1 标志设计 提案提案阶段确定的标志，可能在细节上还不太完善，我们需要对标志的标准制图、大阶段确定的标志，可能在细节上还不太完善，我们需要对标志的标准制图、大小小修正修正、黑白应用、线条应用等不同表现形式进行修正，使标志使用更加规范，同时、黑白应用、线条应用等不同表现形式进行修正，使标志使用更加规范，同时标志的标志的特点特点、结构在

11、不同环境下使用时也不会丧失，达到统一、有序、规范的传播。、结构在不同环境下使用时也不会丧失，达到统一、有序、规范的传播。12/2112/21 文字文字是网页中非常重要的页面元素，网站的内容主要是通过文字信息来传递，网是网页中非常重要的页面元素，网站的内容主要是通过文字信息来传递，网页中的文页中的文 字包括大段的文字信息、网站标题、导航信息、图片里的文字等。所以网字包括大段的文字信息、网站标题、导航信息、图片里的文字等。所以网页中文字的设计、页中文字的设计、排版排版方法都会对网站的设计效果起到重要的作用方法都会对网站的设计效果起到重要的作用。4. 4. 2 文字设计13/2113/21字号字号、

12、字体、行距、字体、行距文字文字的修饰可以通过字号、字体、行距来进行控制。下面依次来进行介绍。的修饰可以通过字号、字体、行距来进行控制。下面依次来进行介绍。（1 1）字号。）字号。 网页开发中字号网页开发中字号大小可以用像素（大小可以用像素（pxpx）来定义。）来定义。W3CW3C对网页最小字体并没有硬性的对网页最小字体并没有硬性的规定。只是我们在设计网页的时候因为考虑到可阅读性，最小一般为规定。只是我们在设计网页的时候因为考虑到可阅读性，最小一般为12px12px大小。大小。l 常规常规文字文字 12px12px；l 标题标题，页头，页头 14px14px、16px16pxl 大大标题，横幅标

13、题，横幅等一般使用等一般使用 18px18px。4. 4. 2 文字设计14/2114/21（2 2）字体。）字体。 字体字体是网页的主要组成部分，是信息重要的载体。正确选择字体，不仅是网页的主要组成部分，是信息重要的载体。正确选择字体，不仅关系到关系到网页网页的页面艺术效果，还对浏览者的阅读及信息的传达有直接的影响。学习字体设计的页面艺术效果，还对浏览者的阅读及信息的传达有直接的影响。学习字体设计，需，需要要了解汉字和拉丁字母（含阿拉伯数字）这两种作为东、西方文化代表的不同的文字了解汉字和拉丁字母（含阿拉伯数字）这两种作为东、西方文化代表的不同的文字体系体系。在区别两种文字的字形结构和设计特

14、点的基础上，应用美学规律，相互借鉴，。在区别两种文字的字形结构和设计特点的基础上，应用美学规律，相互借鉴，发挥发挥设计者设计者的主观创造性。的主观创造性。4. 4. 2 文字设计15/2115/21（2 2）字体。）字体。 从从加强平台无关性的角度来考虑，正文内容最好加强平台无关性的角度来考虑，正文内容最好采用系统采用系统所自带的字体。所自带的字体。因为浏览因为浏览器器是用本地机器上的字库显示页面内容的是用本地机器上的字库显示页面内容的。如果确实要使用。如果确实要使用的特殊的特殊字体，可以字体，可以将文字将文字制成图像，然后插入页面中。制成图像，然后插入页面中。4. 4. 2 文字设计16/2116/21(3)(3)行距行距。 行距行距是指文字段落中行与行之间的距是指文字段落中行与行之间的距离。行距的变化也会对文本的离。行距的变化也会对文本的可读性产生可读性产生很大影响很大影响。 除了对于除了对于可读性的影响，行距本身也可读性的影响，行距本身也是具有很强表现力的设计语言，为了加强是具有很强表现力的设计语言，为了加强版式的装饰效果，