试论网页制作中平面视觉元素的应用

目录摘要 试论网页制作中平面视觉元素的应用摘要：网页设计作为一种新兴的大众信息传播方式，视觉效果好不好，主要看它对大众有没有吸引力，或者说能不能使他们看着舒服，有种享受的感觉。网页设计主要是通过图像、声音、动画和视频这种多媒体来表现的，是一种看得到的东西。要把网页设计做好，首先要把你想表达的东西和内容设计好，其次还要做到内容的精彩度和视觉美观。本文基于此，通过分析网页设计中视觉元素的不同特性和作用，探讨了视觉元素如何运用及其存在的问题，研究了平面视觉元素被动到互动的变化的应用。关键词：网页设计；平面；视觉元素TrytotalkaboutapplicationofplanevisualelementsinwebproductionAbstract:Webdesignasanewwayofpublicinformationdissemination,Itcanbeintegrateduseoftext,images,sound,animationandvideoandotherelementstoconveyinformationandcontent,hastherichmultimediaandinteractivefeatures.Goodwebshallhaveatraininginadditiontothefirstconsiderationshouldbegivenonthecontentofexcellence,Thesecondisthecontentofreasonableandeffectivevisualformat.Visualelementsisnotonlyinordertomeettheneedsofusers,moreimportantistocreateapleasantvisualenvironment,sothattheyhaveafullenjoymentandresonance.Inthispaper,basedonthis,throughtheanalysisofthedifferentcharacteristicsofthevisualelementsinwebdesignandfunction,discusseshowtousevisualelementsanditsexistingproblems,andstudythepassivetotheapplicationofthechangeoftheinteractivegraphicvisualelements.Keywords:Webdesign;Theplane;Visualelements前言进入21世纪以来，由于互联网络的迅速发展，使得信息传播业面临深刻的革命。万维网络作为一种全新的传媒，具有价廉、迅速、及时、互动性好、传播面广的特点，为视觉传达设计的推广传播提供了良好的条件；同时基于万维网络传播的视觉传达设计也会受到万维网技术的限制。新媒体、新工具的发明，对于设计者来说，有着十分重要意义。众所周知，互联网的最基本单元就是网页。在我国，互联网的迅速发展，带来网站的成倍增长，但网页设计的质量参差不齐。除一些大型的专业功能性网站在排版设计上比较考究外，在小型网站很少能见到比较考究、有视觉冲击力的网页设计。一、网页设计中平面视觉元素的概述（一）视觉元素的概念视觉元素是指构成视觉对象的基本单元，是人类接受与传达信息的工具与媒介，是视觉传达语言的单词与符号，因而人们可以从视觉元素来认识和研究大自然和人类社会不同时空的变化和事物静态与动态的所有信息。视觉要素由信息要素和形式要素构成。信息要素由图形、文字、形状、形体等内容组成；形式要素由点、线、面、色彩、空间等内容组成。一幅平面广告的大部分信息来自于视觉要素，视觉沟通只需要少量的视觉元素就能提供大量的信息。形式元素在画面上的组织、排列包括方向、位置、空间、重心等要素的安排，目的是通过确定各种视觉要素来构成元素之间的关系和秩序，以此来构建广告画面的视觉效果。（二）网页设计中平面视觉元素的特性随着网络时代的发展，网页的应用已深入到人们生活的各个领域，那么我们要如何让做好网页设计呢？这就要做到信息设计和信息传递目的，要用及时、简练、迅速、互动性好的视觉语言来表达。作为一种全新的传媒，平面视觉要做到以下几个要求：注目性注目性用通俗易懂的话语来描述就是，能够吸引到大众的眼球。在这个信息化飞速发展的时代，要引起浏览者的注意是很不容易的，如果没有好的网页，浏览者会很快的跳过页面或者只会粗略的看看，完全不知道设计师想要传达的理念，所以注目性是网页好坏之分的一大因素。为了让浏览者认真观看页面，设计师将会以简洁、形象生动的视觉语言和图案、颜色的创新来呈现出设计理念，以此来达到注目性。2.适应性适应性是想要表达什么样的设计理念的一大特征，它要符合浏览者的文化层次、心理因素，还有现代社会人的特点、习惯。当这些要求都满足了，也就达到了视觉语言适应性这一大特征，会使页面和色彩具有严谨性，从而提升浏览量。记忆性记忆性的目的就是让浏览者看过网页之后，留下深刻的印象，并产生相应的条件反射。这个主要是通过形象生动、通俗易懂、简洁明了的视觉语言，以及使用到对比、结构比例、调和等因素来对图案进行设计，给网页带来不一样的视觉感受，以此让浏览者感受到艺术的独特魅力，使之会长期的记忆。4.确定性确定性是从心里活动上产生的，主要是人们从听觉上、视觉上所感受到的触发点。要达到这个目的，网页的视觉语言要时效、精炼、速达、明确，图案不要过多的复杂繁琐，像一些繁琐的线条，复杂的图案就是不可以存在于网页中的，因此这些图案要去除，这些图案不能让浏览者忘了网页的主题，图案的元素还要与想要表达的设计理念相符合，从而做出简洁、明确的网页，色彩和形象的完美结合，从视觉信息上让浏览者产生兴趣，从而做出行动，这一系列活动会让浏览者对设计理念有一个正确的理解，让设计理念得到很好发传播。5.选择性网页要做到选择性的浏览，因为浏览者不会对网页里面的所有内容感兴趣，因此网页的选择性很是重要。在视觉中，点、线、面是常用的元素，我们要将不同的内容以点化之，以线化之，使视觉注意在标题，图案中，可以让浏览者在大量的内容中很容易的选择自己感兴趣的部分。6.连续性连续型在网页中就是视觉流程的设计，网页界面要按照人类浏览的习惯，要一层一层的递进，有逻辑性，视觉系统一般是从点、线、面这个顺序侦测的，而人们的浏览习惯也是从点到直线，再到环形，最后到轮廓，因此，网页的内容要有层次性、逻辑性，让读者能够充分的理解到设计理念，很容易的掌握到网页的内容。（三）网页设计中平面视觉元素的作用1.版式的设计屏幕大小是有限的，因此要在有限的空间内做到内容信息明确，且让浏览者能读懂内容，当然还要凸显出版型的特征。那么怎么把页面版型做好呢？这个要考虑到多媒体元素，通过调和、均衡、留白等手法，让内容有序地出现，有规律可循，只要是能让网页信息可以有效的被记忆在浏览者脑海中，那就是完美的版型。它还要通过元素的形状、大小、颜色以及留白的手法，让内容有明显的层次，视觉上有享受的感觉。总而言之，就是要达到让浏览者对网页有兴趣，产生阅读量，看了之后有深刻的记忆(见图1)图12.文字的编排文字的编排是让浏览者浏览的关键之一，与版式、色彩、图像差不多重要。网页风格要根据网站内容相符合，比方说历史文化这一类网站的设计，就是比较偏向于魅力高雅的；像政府，它的网站相对于其它网站来说就是比较大气、简明、端庄的；像教育类，就是端庄、严谨的，而像商业网站就是要凸显自己的企业理念，还要跟自己的产品、服务相结合；而个人主页就是要有自我情感的展示，还有突出自己的个性、爱好，以此来吸引读者的眼球，给读者留下不一样独特魅力，增加粉丝。除此之外，字体的效果，也是吸引读者的因素之一。每一个字体都有它独有的魅力，通过字体可以体现出不一样的风格和情感，所以字体也是可以引起读者的共鸣。目前在市场上有很多种的字体，这也给了设计者很大的空间，设计师可以根据自己的需求或者审美选择合适的字体，然后安装就可以直接来使用了。值得一提的是，在网页中不要存在超过3种字体，字体太过多会给读者带来繁杂的感觉，也会影响到网页的视觉感受，所以字体的选择也是比较重要的（见图2）图23.图片的处理图片在网页中是或不可缺的。那我们应当应该怎么来处理图片，应用图片呢？一般平面的图片，我们会选择Photoshop来进行处理；而像gif格式的图片，则需要专门处理网络图片的Fireworks制作，它有储存空间小，下载速度快的特点，因此当我们在处理图片时，应先根据图片的特点、形式来选择合适的软件，再进行处理。虽说精巧的的图片可以增加浏览量，它比文字更具有吸引力，还会给读者带来不同的视觉享受。而且图片在网页中是必不可少的，可以给读者带来乐趣，但是也要合理的安排图片的数量，因为图片的内存相对于文字来说要大一点，图片太多，会导致打开网页时，图片有的可能已加载出来，有的则可能会没有及时的加载出来，使网页变得凌乱，失去美感。为了网页的美观，设计师要合理的应用文字、图片，以此来达到文字图片的协调性、完美性。4.色彩的搭配色彩的搭配在网页设计中是尤其的重要，每个读者在打开网页时，最先看到的是网页的色彩，而不是内容和布局，这个决定了读者对网页的第一印象。每个颜色都代表了不一样的情感与风格，红色代表热情、开放、喜庆；绿色代表清新、自然；黄色代表明快、活力；紫色代表高贵、沉重；黑色代表压抑、黑暗；粉色代表可爱、青春。设计师要对各种颜色都有清晰的认知和出众的把控能力，还要有良好的审美，以此来利用颜色来搭建一个合理、成功的网页。网页中一般都会选用比较鲜艳的色彩，极少使用暗色系的色彩，在搭配上要体现出明显的特证。一般彩色的网页更容易吸引人的注意。其次，具备独特性。在网站数量不计其数的互联网上，一个网站的网页色彩只有与众不同才能给浏览者留下深刻的印象。最具备针对性。网站的主色调要根据网站的类型和性质，切合网站的主题来定位，不应与主题相差甚远，这样会使效果适得其反。二、网页设计中平面视觉元素的运用（一）网页设计对传统平面构成方式的运用大多数在我们眼前呈现的信息都是通过纸张、图文信息的电脑屏幕表现的，也就是和比较传统化，像纸张和图文信息、版式、色彩等版式。网页设计要利用到众多元素，要达到任一元素与任一元素的合理结合，比如说，文字与字体、颜色、图案等元素形成版面的一种形式，成为独特的艺术符号，还可以传达文本信息；图片可以单独的存在于版面中，起到形式感的作用，也可以传达文本信息；色彩在版面中可以起到分割的作用，增强结构感，也可以营造一种气氛，以及体现页面的个性，总之就是要符合网页的版面的合理性。网页设计可以通过一些报纸，刊物的设计版式来寻找灵感，它们符合平面设计的视觉传达方式；也可以通过对比，统一、均衡对称、比例尺度等来体现传统的形式规律；还要让信息有效的、明确的传达，可以通过建造视觉效果，安排合理的版式，利用传统的画面。（二）平面视觉元素适应网页设计发展的新特点1.文字与字体在网页设计中，文字是一种比较直接的表达方式，字体就较为复杂，要把握到设计版面，还有读者的习惯。文字在网页设计中是占有很大一部分的比例的，它可以更加清晰的来表达内容。文本字体大多数都是默认的，默认的字体下载的速度是比较快的，但是由于浏览器都是通过本地系统来显示页面的，读者的系统里一般只有几种字体，所以设计师设计的比较新颖的字体是显示不出来的，这一点也给设计师带来了一定的难度。2.图形图像图片相对于文字的使用在时间上稍微慢了一点，它的表达方式更加的形象生动，可以很好的表现出内容，且也给版式增添了美感。传统的平面设计远远比不上网络图片的处理方式，前者要求分辨率高，而后者图片一般是显示在显示器上，显示器的分辨率是有限的，人的视线也会有限的，所以图片的精度与色彩的深度是没有什么影响的，要求比较低。后者的图片分辨率在72像素每英寸是最好的；还要图片文件比较小，在规定的范围内，图片越小越好，这是因为图片是通过网络来进行传递的，受宽带的影响，也要尽量满足信息高速的发展速度。前者还对原图的色彩影调、尺寸要求高。3.色彩在网页设计中，色彩占有了很大的比例，也是很关键的视觉元素。网页设计色彩要是网络安全色，它是按照国际标准来的，建立在国际标准的原则上。“颜色的感觉依靠眼的功能，是生理现象，同时通过感觉的冲击对心理起作用。”所以每一种颜色会给人带来的情感是不同，比如说红色让人觉得热情，蓝色让人觉得开阔，理智。在我们的调查中，大部分人都认为暖色调相对于冷色调要给人留下印象的要深刻一些。色彩在网页设计的应用中，我们要以“总体协调，局部对比”的基础来运用，再利用人对颜色的心理印象来合理的搭配颜色，建立出美观的网页。在网页设计之前，我们要会根据网页特点来定主色、辅助色，像有企业形象识别系统的企业，就更需要根据VI进行色彩的应用。网页的颜色是没有规定死的，搭配主要是设计师看对颜色的运用和理解，还有就是最好不要随意使用多种颜色。4.版面网页设计的版面要做到在有限的空间内，要通过主题，将内容层次进行合理的分配，利用多种元素来进行调和、均衡、律动的视觉导向，还需要以留白的手法让版面看上去完美。不知是因为信息量比较大，还是设计是有意为之，目前网页很多都是需要应用到滚动条，因为网页都是比较长的，它不像纸张一样，可以将内容全部写在纸上。根据读者的习惯，目前在显示器分辨率下，我们可以直接应用滚动条来移动网页。一般综合性网站，层次都比较分明，网页版面还会有根据功能分区开进行分栏，可以很快的让读者找到自己想要了解的内容，从而有利于读者进行阅读。三、结论网络在当今时代是不可或缺的，而网页在多媒体中有众多优点，使之崭露头角，让网页发展的速度突飞猛进，因