1、第三章 网页图形图像设计,网页图形图像设计,网页设计艺术,主要内容,图形图像能将信息传达得更具体、真实、直接、易于理解，从而高效率高质量的表达设计理念，使网页充满强烈的感情色彩。在网页中合理的应用图形图像，能够形成视觉信息的中心，有利于重要信息的传达。,3.1 网页图形图像设计的构成要素,1.标志（LOGO） 标志具有象征功能、识别功能，是网站形象、特征、信誉和文化的浓缩，一个设计杰出的、符合网站理念的标志，会增加网站的信赖感和权威感，在社会大众的心目中，它就是一个网站或某品牌的代表。图形的标志能够避免文字做标志所给人的单调感，图形标志是一种简洁但不简单的图形符号，具有以小见大、以少胜多、以一
2、当十的特点。在现代社会生活中，经过精心设计而具有高度实用性和艺术性的图形标志，以其特有的功能和新颖别致的艺术效果，感染和影响着人们，指导人们的认知和选择。,3.1.1 图形图像在网页中的应用,中国银行网站,2.背景插图 背景插图可以把浏览器变成一个真实的环境，用图形为背景来衬托主题，可以增加层次感，可与网页主题图像形成对比或共鸣，从而突出主题形象，彰显网页的风格。,C 网站,3.主图 网页主图是指网页中表达主题、突出主题的较大幅面的图形图像。一幅好的主图，可以使浏览者见其图即知其内容，主图能够形成整个页面的视觉中心，它具有直观性强的特点，不需要像文字那样去逐字逐句地阅读，可以不受文化水平的限制
3、，并能在瞬间给人以深刻印象。,李宁li- 网站,4.超级链接 将图形设计成超级链接形式，能够使网页链接变得样式丰富，可以使网页更为美观。若能利用标志性符号，便可以减弱语言的障碍。图形按钮具有直观、形象的特点，可以为单调的文字信息增添活力，可以更加明确地表现它所要进行的操作。,奥运火炬 网站,点、线、面是平面设计的基本元素和主要视觉语言，是一切构成设计中最基本的造型要素，存在于任何造型设计之中。作为视觉形式的语言，构成网页设计图形图像的最基本的要素是点、线、面，通常被人们称为“构成三要素”。在网页设计时，运用组合、对比、均衡、节奏、统一等构成方法将它们进行安排，互相补充，互相衬托，就可以创造出形
4、式多样，引人注目的网页，从而将网站的信息有效地传达给浏览者。,3.1.2 构成要素点、线、面,1.点 点必须要以视觉的表现为前提，因此点是一种具有空间位置的视觉单位，而且有大小不同的面积和不同的外观特征以及属性。点可分为规则点和不规则点两类，如圆点、方点、三角点属于规则点，而锯齿点、泥点、雨点则属于不规则点。 点无一定的大小和形状，点的概念是相对的，是与周围的视觉元素相比较而言的。只要与周围其他造型要素共同比较时具有凝聚视觉的作用，都可以称为点。点的判断完全取决于它所在的空间的相互关系上面，越小的形体越能给人点的感觉，点的面积变大就成了面。,1.点 点具有视觉集中的属性。 两点时，人的视线就会
5、在这两点之间来回流动，产生“线”的感觉。 当页面中有三个点时，视线在这三点之间流动，并将这些点连起来，让人产生面的联想。 点只有通过人为地组织排列，才能充分展示其自身个性。,gg-go的点线结构子页 网站,2.线 视觉形态中的线除了位置、长度、方向性，还具有宽度、形状和性格。线具有刚柔相济、优美和简洁的特点。不同的线形会表现出不同的意念，给人的视觉和心理带来不同的感受。因此在网页设计中，可根据需要和布局特点运用不同性格的线造型和不同的线性组合作为视觉元素，丰富网页界面的视觉效果。,上海磁浮列车网 网站,2.线 线可分为直线与曲线两种。直线包括水平线、垂直线、斜线、折线等，直线具有固定的方向性，
6、给人以单纯、明确、庄严的感觉。利用直线对网页进行分割，可以使网页中的各部分内容更加清晰明了、增强页面的可视性。,Tword 网站,2.线 曲线包括几何曲线、自由曲线，曲线具有不固定的方向，常给人以柔软、流畅、温和的印象，在网页设计中具有跳动、流畅之感。利用曲线对网页进行分割，可以使网页中的各部分内容以活泼新颖的形式呈现。,www.DYEnter.co.kr 网站,2.线 任何形态都可以通过线的界定而确定下来。因此在网页设计中，线的布局安排主要体现在线的空间分割上。线的分割产生各种比例的面。在利用线进行页面分割时，既要考虑各形态元素彼此间支配的形状，又要注意空间所具有的联系，保证良好的视觉秩序感
7、，这就要求被划分的空间有相应的主次关系、呼应关系和形式关系，以此来获得整体和谐的视觉空间。 网页中的图文在直线的空间分割下，会得到清晰、条理的秩序，同时求得统一和谐的因素。而通过不同比例的空间分割，页面各空间将会产生对比与节奏感。 线框的限定使网页中的动感与情感获得相应的稳定和规范。另外，线框细，版面则轻快而有弹性，当线框加粗，图像有被强调的感觉，同时诱导视觉注意；但若线框过粗，版面则变得稳定、呆板、空间封闭。 线具有方向性、流动性、延续性，因此在网页设计中可以运用重复、近似、渐变、对比、密集等构成手法，将线进行不同方式的排列组合，会产生很多具有奇妙效果的视觉形态。,3面 视觉形态中，面是一种
8、形，体现了充实、厚重和整体并稳定的视觉效果。面除了有大小，还具有位置、形状、摆放角度等特征，在版面中具有平衡、丰富空间层次，烘托及深化主题的作用。经分割所产生的比例关系，是决定页面均衡、协调的重要因素。网页设计中要对面进行多样化处理，以避免重复、单调，做到相互衬托、相互呼应。面分为几何形和自由形两大类。,（1）几何形 几何形表现出的特点是形状规矩、具有理性的节奏，易于被人们所理解和识别，网页中的几何形有方形、菱形、圆形、三角形等。 方形 能够使人产生稳重、厚实、深沉、规矩的感觉，具有男性特征，属于直接、有效的设计元素因此网页界面中很多图形图像都采用方形。对于企业网站来说，网站所展示的内容偏重于
9、理性、追求简洁、明快的特点，因此方形在企业网站中的应用较为广泛。,www.ChongHab.co.kr 网站,菱形 使人产生端正又具有动感的感觉。网页内容被放置于不同菱形面内，整个网页明快、内容清晰明了，现代感很强。,C 网站,圆形 给人以充实、柔和、圆满的感觉 。,www.e-W 网站,三角形 正三角形给人以坚实、稳定的感觉。倒三角形有一种不安定、新奇感。网页左侧的图像构成倒三角形，给人以新奇的动感 。,www.fmc-Korea.co.kr 网站,（2）自由形 自由形比较洒脱、随意，偏于感性，给人以新鲜、灵妙之感。适合自然法则而且有秩序性美感，给人更为生动的视觉效果。自由形包括有机形、手绘
10、形和偶然形。 有机形：由一定强度的曲线所组成，富有内在的力感，是自然中外力与内力相抗衡而形成的形态，有纯朴、温暖而富有生命力的感觉。 手绘形：徒手描绘或用特定工具制作的图形，能充分表达作者的个性或情感。 偶然形：因自然力而形成的图形，具有天然成趣的效果，是利用偶然因素提炼美的一种方法。偶然形具有自然美的构成规律，具有随意，神秘的特点。,www.Imoin.co.kr 网站,扩展构成元素 空间，运动，质感作为图形图像的扩展构成元素，是在点线面这些基本造型元素基础上发展而成的。图形图像所产生的空间感，一方面可以通过摄影、绘画的技法获得，一幅好的摄影绘画作品使物象有呼之欲出的感觉；另一方面还可以运用
11、不同的手法对点线面等元素进行组合，从而使平面图形图像的三维空间感得以加强。,www.D 网站,3.2.1 图形图像的创意设计原则1.精练简洁 图片的数量过多，图片所占的空间过大，都会影响网页的下载速度。因此网页中放置图片一定要做到少而精。如果图片的内容与网页的主题不相符，就会干扰浏览者的注意力。2.颜色协调 颜色协调指图像、文字及整个页面的主色调协调一致。众多图像的色彩应融于主色调这个整体中去，使整个网页的色调趋向统一，不给人杂乱堆砌之感。 3.风格吻合 图像的风格要与网页的主题内容保持氛围、情感上的一致。,3.2 网页图形图像的创意设计,图形图像的创意是网页创意的核心，是视觉形象的再创造过程
12、。创意就是客观地思索，然后天才地表达。如果说，图形图像的创意解决了“做什么”的问题，设计就是具体的“怎样做”。,3.2.2 图形图像的创意设计方法,1.同构 同构运用了影射和借代的手段，把要传达的内容用其它物象表达出来，因此主要利用浏览者求新求奇的心理状态，运用对比和联想的方法，达到传达信息的目的。用同构方法设计的形象幽默诙谐、印象深刻，给人一种情理之中、意料之外的视觉冲击力。同构的图形图像表现，往往含义深邃并能给人全新的视觉感受，充分的表达出设计师对世界的理解与审美的理念。,hybridworks 网站,2.替代 替代是一种特殊的同构现象，替代的创意侧重于网页设计中各要素的具体表现，替代的创
13、意侧重于局部形象的替代。物象的替代部分往往在画面中形成视觉中心。替代的表现重点是要充分发挥形象与图形的想象力，运用物体之间的相似性和意念上的相异性，按一定的需要，在保持物象原有基本型的基础上，把物象的某局部用其他相类似的形象代替，产生新的异常组合。,Ben Watts 网站,3.联想 联想方法是一种侧面的、简洁的表达商品的方法。主要是通过联想把商品内容与有关的使用材料、使用对象、使用方式、使用效果、使用环境等，以及与各种有关联的媒介产生联系来补充画面中没有直接表现的内容，用于突出诉求对象的特征与特点。在具体创意设计中，常常可以把相距很远的，甚至毫不相干的事物联系在一起，通过画面中直观图像的想过
14、，是人们在视觉心理上产生从这一物象到另一物象的联想。,Hybridworks.jp 网站,4.寓意 寓意的方法是选择与诉求目标主题有相符之处的物象，通过比喻和象征等手法来表现主题，这种方法常常适合于不易直接表达的主题内容。,www.L 网站,5. 情感 在图形图像设计中，让情感贯穿于视觉形式的表现，让原本无生命的视觉元素表达丰富的内心情感，以此增加图形图像的视觉感染力，使其含有深刻的意念。在创作图形图像时，以情托物或以物寄情，创作出内涵丰富、意境深渊、充满生命力的图形图像，才能引发人们思维美感的共鸣。,Storyville 网站,6. 夸张 夸张是对事物的特征进行强化与夸大。夸张常常用于表现某
15、些情节，有形体比例的夸张，也有心理逆反的夸张。夸张使形象非常醒目，可以产生强烈的戏剧性效果，引起浏览者的关注。,Coca-cola 网站,7. 幽默 将深刻的意义用诙谐、有趣的方式表现出来，这就是幽默，幽默是生活和艺术中的一种喜剧性因素。抓住人或事物的某些特征，运用喜剧性的手法，造成一种耐人寻味、引人发笑的幽默意境，使人们在忍俊不禁的一刹那，得到一种精神上的快感和满足。,www.J 网站,8.层次空间 在网页这样一个平面上通过创意得到层次与空间感，通过掀起的纸张，打开的窗户，投射的阴影等，营造出一种层次感、空间立体感，从而使作品跃然屏幕上，体现出网站的创意与风格。,Double-A.co.kr
16、 网站,9.直接 将要表达的主题以最直接、最明确的方式表现出来，即所谓的“开门见山”。这种方法要求图形图像的选择准确、恰如其分的体现主题，不能给浏览者以误导。直接表达的方法容易实现与浏览者在沟通上的平等、自然。,www.zF 网站,3.3 网页图形图像的处理实例3.3.1 网页图形图像的设计形式,1.概括 概括就是抓住设计对象的主要特征，以最简明扼要的方式予以视觉表现。要想在最短的时间内表现事物，就必须对事物的特征加以概括。图形越概括，传达的信息越单纯，人们就越容易记忆，传达效果也就越好。,Bukp.or.kr 网站,2.具象 具象的方法是指以现实中的事物为基础，运用写实性与装饰性相结合的艺术
17、造型手法，对现实事物进行艺术再创造。其最大特点在于能够反映自然形态的美，亲切、生动、清晰，让人信服。具象图形既保留了自然对象的特点，又注入了超自然的观念和设计意识。只有从创意的角度出发，抓住自然中具有鲜明个性的形象结构和有传达特征的细小形态，才能塑造出具有形式美感的具象图形 。,Myelit.co.kr 网站,3. 抽象 抽象与具象相对立，它更强调现实中事物的内在性质，而非表面特征，在对事物规律性的概括与提炼中，找出构成视觉图形的造型元素。抽象所运用的视觉元素，常常是由最基本的点、线、面所构成。它的特点是形式语言简练、单纯、意蕴无穷，给人以无限的想象空间，富有现代感。,Mind Medium
18、C 网站,4. 卡通漫画 漫画是设计师在画面上随心所欲地发挥想象力，创造现实生活中不存在的事物或看不到的场景的一种绘画形式。它在技法上夸张变形，在内容上诙谐幽默，给人感觉轻松、充满童趣。夸张与变形能使漫画中的事物特征更加鲜明、更加典型，并有加强叙事和传情的效果。漫画多运用于儿童网站，构图新颖，新奇，不拘一格，形象生动、活泼。,Talkman.playstation.co.kr 网站,5. 装饰 装饰化图形是指采用形式美的原则和装饰艺术手法创作出的图形，它按照对称、均衡、节奏、韵律、调和等形式原理，运用上面提到的概括、抽象、夸张、变形等造型手法，对自然形象进行艺术加工和处理，创造出富于幻想的审美
19、空间。装饰化是具有思维限定的审美结构，给人的感受是优雅的、流畅的。,LG首页 网站,6. 图标 图标是将要传达的信息赋予图形，让两者建立内在的对应关系，当图形被观众认知时，它便成为传达该信息的图标。因此图标具有很强的传达性，它形式上虽然简洁、单纯，却传达出深刻的含义。例如信封的图形代表邮件，具有特定的含义。 作为修辞中比喻的一种写法，隐喻目前已成为人机界面设计中一项非常重要的造型观念与手段。常见的隐喻形式，如电脑中文件夹图标的设计采用了我们办公室中的文件夹的造型，桌面图标中我的电脑干脆使用了电脑的图形，和平鸽的和平含义与红十字的博爱精神。 利用具体的为人熟知的想法使界面简洁明了，具有易识别、易
20、记忆、跨文化的特点。尽量采用家喻户晓的一般性常识视觉经验是信息得到广泛传达的重要手段。,Circular mnbtmedia 网站,1图像的面积 大图像能表现细节，容易形成视觉焦点，感染力强，传达的感情较为强烈，更容易吸引浏览者的注意。小图像显得简洁精致，有点缀和呼应作用。大小对比强烈，给人跳跃感；大小对比减弱，则页面稳定、安静。图像在网页中占据的面积大小能直接显示其重要程度。 在网页设计时，应首先确定主要形象与次要形象，把重要的能吸引注意力的图放大，从属的图缩小，形成主次分明的层次格局。,3.3.2 网页图形图像的处理方法,Hwa Meai O.tw 网站,2图像的外形 方形的稳定、严肃，三
21、角形的锐利，圆形或曲线外形的柔软、亲切，退底图及一些不规则或带边框图像的活泼，都能产生强烈的装饰感。（1）方形图： 以直线边框来规范和限制，是一种最常见、最单纯的形态。方形图使图像内容更突出且将主题形象与环境共融，可以完整地传达主题思想，有利于气氛的渲染，富有情节感、直接感和亲和力。配置方形图的页面，给人以稳重、可信、严谨、理性、庄重和安静之感，但有时也显得平淡、呆板。网页中的方形图使整个网页呈现出一种严肃、安静、稳重的氛围。,（2）菱形图 打破方形的常规，具有很强的立体感 。,www.a2i.co.kr 网站,（3）圆形图 圆形图是指利用曲线边框将图像进行规范和限制。圆形图给人以充实、柔和、
22、圆满的感觉，给浏览者以流畅、随意、自由的感受。, 网站,（4）三角形 即图像以直线边框规范，在网页中表现为三角形。三角形图给浏览者动态的感受，使网页生动、灵活。（5）退底图 根据设计内容所需将图片精选部分沿边缘裁剪，而保留轮廓分明的图形。退底后的形象，其外轮廓呈自由形状，具有清晰分明的视觉形态，显得灵活自如。配置退底图的页面，轻松、活泼、动态十足、富有个性，而且图文结合自然，给人以亲和感；为了避免可能造成凌乱和不整体的感觉，可用加线、线框、色块或方形图的方法，使版面取得平衡和稳定。,www.fsb.or.kr 网站,（6）出血图 即图像以直线边框规范，在网页中表现为：图形图像充满了整个版面、无
23、边框、有向外扩张、自由舒展的感觉。一般用于传达抒情或运动信息的页面，因不受边框限制，便于情感与动感的发挥。一个形象在完整的状态下，往往容易被忽视。完整的形象一旦被打破，人们的注意力就会上升。出血图能拉近读者距离，有亲近感，使情感与动感更能得到发挥。, 网站,3图像的数量 网页中图象的数量应根据网站内容需要来精心安排。只采用一副图象，会使网站主题突出、页面安定，但要求图象的质量要高，才能显示出格调高雅的视觉效果。采用两张图的网页就相对较为活跃，同时也能产生对比的格局。三张以上的图象能够营造出热闹气氛的页面。,family 网站,4图像的位置 在网页中上下左右及对角线的四个角都是视觉的焦点，处理好
24、这些位置关系能表现出丰富的效果。,www.worldro.co.kr 网站,5图像的虚实 图像的虚实对比能够产生空间感，实的物体感觉近，虚的物体感觉远。要想让图像“虚”，一种方法是将图像模糊；一种方法是将图像的色彩层次减少，纯度降低，尽量与背景靠近，使图像产生悠远的感觉。网页中的背景图片采用单色图，容易使图像与其它视觉元素协调统一，使整个网页浑然一体。,www.GetaHappyF 网站,6. 图像的合成 图像的合成是指将几幅图片有选择地合成为一个图像，合成后的图像传达的信息更加丰富，能够更集中地体现创意。将不同人物的头像经过处理后合成为一个图像，统一的色彩，统一的处理手法，体现出一种特有的风
25、格。,www.Mecenat.or.kr 网站,7. 图像的组合 图像的组合，就是把多幅图片或图形以不同方式摆放，形成一个图像群或图像组，以期传达更多信息。图像的重要程度可以因面积、摆放位置的不同而有所不同。图像组合的方式有块状和散点两种。（1）块状组合 块状组合是将图片或图形通过水平、垂直线分割，在网页上整齐有序地排成块状，这种组合形式有强烈的整体感、严谨感，并富于理性和秩序之美。如果图像大小相等，它们之间则是平等的关系。,www.gscaltex.co.kr 网站,（2）散点组合 将图片或图形按散点排列在版面各部位，能形成明快自由的感觉，组合时要注意图的大小、主次的搭配，方形图与退底图的搭
26、配、文字与图形的组合搭配，同时还有考虑疏密、均衡、视觉方向等因素。,I 网站,8图像的局部与特写 相对于整体而言，局部的图像能让视线集中，有一种点到为止、意犹未尽的感觉。将局部图像加以放大，用特殊手法作重点表现，就是特写。特写能让图像具有独特的艺术魅力，使浏览者对图像产生瞬间的凝视，引发浏览者的兴趣点。,www.michelin.co.kr 网站,9图像的规格 网页中所使用的图形，大部分都是使用JPG和GIF两种格式。这两种格式除了具有压缩比高、利于浏览和下载的优点外，还具有跨平台的特性。不管浏览者使用何种操作系统或浏览工具，都可以直接从浏览器上看到这两种格式的图片。网页图片的特点是图片质量不需很高。因为网络图片一般只显示于计算机的显示器上，受显示器最小分辨率的限制，即使图片的分辨率很高，颜色深度很大，我们的肉眼也经常无法把它和一幅处理过的普通图片区分开来。一般来说，分辨率为72dpi（像素/英寸）是大多数图片最佳选择；另一个特点是，图片要尽量小。网络页面的图片用于网络的传输，受到带宽的限制，文件的大小越小，下载的时间就会越短。,
