维普资讯 http://www.cqvip.com 第２Ｏ卷第２期 合肥工业大学学报（社会科学版） Ｖｏ１．２０ Ｎｏ．２ ２００６年４月 ＪＯＵＲＮＡＬ ＯＦ ＨＥＦＥＩ ＵＮＩＶＥＲＳＩＴＹ ＯＦ ＴＥＣＨＮＯＩ ＯＧＹ（Ｓｏｃｉａｌ Ｓｃｉｅｎｃｅｓ） Ａｐｒ．２００６ 视觉元素在网页设计中的运用 刘 丹 （合肥工业大学建筑与艺术学院．安徽合肥 ２３０００９） 摘 要：网页的视觉要素主要包括网站Ｌｏｇｏ、文字、图形和色彩等。在网页设计过程中，设计师必须对这些视 觉元素多作深入的了解和研究，遵循构图的视觉美感和美学理念，才能设计出具有美感的信息传达形式 这 样不仅可以感染受众，还能使人们产生良好的形象记忆，从而达到网站建立的目标 关键词：视觉；形象；网页设计；审美 中图分类号：ＴＰ３９３．０９２ 文献标识码：Ａ 文章编号：１００８—３６３４（２００６）０２—０１２９—０４ Ａｐｐｌｉｃａｔｉｏｎ ｏｆ ｖｉｓｉｏｎ ｅｌｅｍｅｎｔ ｉｎ ｗｅｂｐａｇｅ ｄｅｓｉｇｎ ＬＩＵ Ｄａｎ ● （Ｓｃｈｏｏｌ ｏｆ Ａｒｃｈｉｔｅｃｔｕｒｅ ａｎｄ Ａｒｔ。Ｈｅｆｅｉ Ｕｎｉｖｅｒｓｉｔｙ ｏｆ Ｔｅｃｈｎｏｌｏｇｙ，Ｈｅｆｅｉ ２３０００９，Ｃｈｉｎａ） Ａｂｓｔｒａｃｔ：Ｖｉｓｉｏｎ ｅｌｅｍｅｎｔｓ ｏｆ ｗｅｂｐａｇｅ ｍａｉｎｌｙ ｉｎｃｌｕｄｅ ｗｅｂｓｉｔｅ Ｌｏｇｏ，ｗｒｉｔｉｎｇ，ｓｋｅｔｃｈ，ｃｏｌｏｒ ａｎｄ ＳＯ ｏｎ． Ｉｎ ｔｈｅ ｗｅｂｐａｇｅ ｄｅｓｉｇｎｉｎｇ ｐｒｏｃｅｓｓ，ｏｎｌｙ ｗｉｔｈ ｍｏ％ＳＯｕｎ ｄ ｕｎｄｅｒｓｔａｎｄｉｎｇ ａｎｄ ｒｅｓｅａｒｃｈ ｂｙ ｆｏｌｌｏｗｉｎｇ ｔｈｅ ｐｌｅａｓａｎｔ ｖｉｓｉｏｎ ｉｍｐｒｅｓｓｉｏｎ ａｎｄ ｔｈｅ ｅｓｔｈｅｔｉｃｓ ｎｏｔｉｏｎ，ｃａｎ ｔｈｅ ｄｅｓｉｇｎｅｒ ｃｒｅａｔｅ ｔｈｅ ｉｎｆｏｒｍａｔｉｏｎ ｃｏｍｍｕｎｉ— ｃａｔｉｏｎ ｏｆ ｅｓｔｈｅｔｉｃ ｓｅｎｓｅ，Ｔｈｕｓ ｔｈｅ ｖｉｅｗｅｒｓ ｍａｙ ｂｅ ａｆｆｅｃｔｅｄ，ａｎｄ ｈａｖｅ ｎｉｃｅ ｉｍａｇｅ ｍｅｍｏｒｙ，ｆｏｒ ａｔｔａｉｎｉｎｇ ● ｔｈｅ ｇｏａｌ ｏｆ ｗｅｂｓｉｔｅ ｅｓｔａｂｌｉｓｈｍｅｎｔ． Ｋｅｙ ｗｏｒｄｓ：ｖｉｓｉｏｎ；ｉｍａｇｅ；ｗｅｂｐａｇｅ ｄｅｓｉｇｎ；ａｅｓｔｈｅｔｉｃ 今天，随着互联网的发展和普及；“网页”已成为对外宣传和传播信息的瓶媒体。概括来说，网页就是 在网络上传递的各种信息的人机交互界面。网页上主要包括感官信息和计算机程序。感官信息有视觉 信息，如文字、图形和色彩等口］。网页设计是在规定的画面空间中把这些要素进行有机的组合过程，使其 按照一定的法则形成画面的节奏与韵律。设计的核心是传达信息 在网页设计中，不仅仅是把各种文字 和图案等元素放上去就行了，还要科学地考虑如何使受众能更多、更有效地接收网页上的信息，这就需 要从“审美方面”配合“使用方便”的要求，设计出内容表达清晰、整体性好、具有艺术内涵的页面。这样人 们浏览起来才会轻松、愉快，接收信息也更容易 在无形中塑造网站的形象。 一、Ｌｏｇｏ的设计和文字、图形的应用 １．Ｌｏｇｏ的设计 在计算机领域而言，Ｌｏｇｏ是标志、徽标的意思，类似于商标，它是网站形象的重要体现。’一个有特色 收稿日期：２００５—０４ ２８；１蓼回日期：２００５—１０—１２ 作者简介：刘丹（１ ９７６）．女．安徽蒙城人．合肥工业大学建筑与艺术学院硕士生 维普资讯 http://www.cqvip.com １３Ｏ 合肥工业大学学报（社会科学版） ２００６年４月 的网站和实体公司一样，每个实体都有自己独特的元素，如名称、标志、标准字体、标准色等等，通过这些 元素的合理应用，来塑造网站的形象与个性。标志的设计创意来自网站的名称和内容： 一是网站要有代表性的人物、动物、花草等，可以用它们作为设计的素材，加以卡通化和艺术化，例 如搜狐的卡通狐狸。 二是网站要有专业性的、可以用本专业有代表性的物品作为标志。如中国银行的铜板标志・奔驰汽 车的方向盘标志等等。 三是最常用和最简单的方式是用自己网站的英文名称作标志。采用不同的字体、字母的变形、字母 的组合可以很容易制作好自己的标志 Ｊ。 四是标志在所有的目的中最为重要的是“传达与识别”，而识别最为简易的方法是简化的图形与明 了的语言，将文字与图形组合起来是现代标志普遍采用的一种手法［３］。 ２．文字的应用 文字是传递信息最直接、最通用、最容易沟通的方式。如果我们把文字也看作一种符号，那么这种符 号也是经过长期的设计，并经由了简单 复杂 简练的发展过程。到今天，世界上许多被使用的文字已 经发展得非常成熟，有时候甚至不需要任何组合便能地成为一个成功的视觉传达符号口］。现在大多 数的网站所包含的内容有文字、图片、动画等，其中以文字占的比重最大，因为现在网络基本上还是以传 送信息为主，而用文字还是非常有效率的一种方式。 在很多成功的设计作品中，文字都被用来作为画面空间的分割线。在进行分割时应特别注意画面分 割后各个组成部分之间在面积上的比例关系。这里值得提出的是在使用文字对画面进行分割时，对于字 体、字距、字号、行距、文字数量以及文字排版的方式等都应采取谨慎的态度。其中，粗大字体可以造成视 觉上的强烈冲击，而细小字体则造成视觉上的连续性。用细小的文字构成的版面，精密度往往较高，可以 带给人一种精细之感［４］。因此，在网页及多媒体界面设计中的文字绝不能仅仅作为画面中一种静态的表 意成分出现，而应该作为画面中表形的成分，具有自身极强的表现能力。 在网页文字的编排与设计中，由于计算机给我们提供了大量可供选择的字体，导致了字体的多样 化。这样，我们在设计网页时，使用几种字体就需要精心编辑和考虑。一般来讲，同一页面上使用的字体 种类最多只能有三四种。由于文本字体的显示是需要本地硬盘字体文件的支持的，所以在互联网上使用 过多的字体是没有意义的；除非特别需要，才可以把它处理成图形文字。字体的选择还是一种感性、直观 的行为。但是，无论选择什么字体，都要求其风格与内容特性相吻合。如类网页，其文字具有庄重和 规范的特性，字体造型应规整而有序，简洁而大方；休闲类网页，文字应具有欢快轻盈的风格，字体生动 活泼，有鲜明的节奏感，给人以生机盎然的感受。 总之，文字的主要功能是在视觉传达中向大众传达作者的意图和各种信息，要达到这一目的就要 做到以下几点：一是提高文字的可读性，二是文字的位置要符合整体要求，三是在视觉上应给人以美感， 四是在设计上要富于创造性。 ３．图像的处理 传递信息的视觉要素包括文字、色彩、形状和形式等等。其中图像的作用是决定性的。在打开主页 的一瞬间，图像几乎与标题文字同时映入眼帘，观众对主页的印象也同时被确定下来。图像是指能够给 设计带来生命的图形元素。图形图像设计的过程可以用八个字来概括：“以意生相，以相生意”，即根据内 容创造形态，通过形态传达内容 ］。 创造一幅优秀的图形图像的方法很多。其中最根本的是要做好两个方面的工作。一方面是要妥善 处理好画面的基本摹素，即抛去是图还是文字的具体问题，而将其统一作为画面的基本构成要素一～ 点、线、面来进行处理。通常在一幅作品中．是需要点、线、面互相穿插、互相衬托、互相补充，才能设计出 具有最佳视觉效果的页面；另一方面是将图形图像分为两个类别，即具象与抽象，根据其在画面中是处 在实的位置还是虚的位置等不同情况分别处理 。直观的图形图像能在瞬间给人留下完整、深刻、生动 维普资讯 http://www.cqvip.com 第２期 刘 丹：视觉元素在网页设计中的运用 １３１ 的印象，抽象的能够引发人的联想，使信息的含量更加丰富。其实网页设计的图形图像无论采用具象的 还是抽象的。目的都在于创造一种能迅速传递信息的表达方式。 图像的使用有多种因素决定，其中包括希望达到怎样的视觉效果、目标读者是谁、方案的审美问题、 图像应具备的功能性以及整个设计需要多么创新或是多么传统等。由于对观赏者所产生的情感反应而 使图像对于一件作品的制作与成功影响深远时，图像的使用大概就是设计中最激动人心的部分＋了 。例 如，一个销售汽车的网站，没有图像，仅凭第一印象无法弄清这到底是否自己要找的主页，但是因为展示 了汽车的图片，所以在阅读文字之前，马上就能确认这是一个与汽车有关的主页。 在现阶段，因网络频宽不够引起的上网“塞车”常常阻碍人们顺利获取网络信息，所以在不是特别需 要时，就应尽量缩小或不用图片。图像文件的数量和大小对页面的影响很大，因为每下载一个图像文件， 浏览器都将向Ｗｅｂ服务器请求一次连接，所以图像文件越多就意味着页面下载的时间越长。比尔・盖 茨在《未来之路》中预言说：“在１Ｏ年的时间内，我们将拥有无限带宽。”看来，这个预言将随着高速宽带 网进入千家万户很快成为现实，可以想象那时的网站将会更加丰富多彩。 ４．文字与图像的结合 无论在何种视觉媒体中，文字和图像都是其两大构成要素，两者相结合能够引申出许多含义。在页 面上，如果文字太多，就显得沉闷，缺乏生气；仅仅加了一张图片，主页给人的印象就完全不同，能够再次 确认信息。使得观众愿意继续点击进入下面的内容；组合巧妙的图、文能使人感到愉快，留下美好的印 象，这样就可以很好地传达出作者想要表现出韵意图和构想。 随着多媒体技术的发展，互联网在表现方式上，可以做到融合报纸、广播、电视的各种表现手段，成 为一种丰富媒体，其表现形式可以是非常丰富的，包含文字、图像、声音、动态影像、动画、三维空间、虚 拟现实等各种形式。今天，带有动感的文字和图像在网页设计中的运用已成为一种时尚。Ｆｌａｓｈ动画在 今天的中国已经成为一种主潮流，它制作出的动画丰富多彩、体积小，可边下载边播放，还可在网页中加 入声音。由于它有这么多优点，因此，在许多站点看到的令人羡慕的不少动画都是用它制作的。动画可 以把抽象的内容形象化，使许多难以理解的内容变得生动有趣、动静结合、有声有色，合理使用可以达 到事半功倍的效果。 二、色彩的运用 色彩是最直接也是最持久地给浏览者以网站形象的因素。在网页设计中，色彩总的应用原则是“总 体协调，局部对比”，也就是页面的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些 强烈色彩的对比。 设计者在设计时，在开始思考对应的颜色之前，首先必须很清楚网站所要传达的讯息和目标，然后 再进行充分的测试，选择最适合的色调，这样就能使访问者在阅读文字信息之前，与主页产生共鸣。例如 中国瓷器网（ｈｔｔｐ：／／ｗｗｗ．ａｒｔｔｉｑｕｅｓ．ｃｏｍ），该网站以白色为背景，营造出洁净、细腻、典雅的氛围，同时 与色彩斑斓的瓷器形成强烈的反差，让人感觉到瓷器工艺品的精致和美丽。这种颜色搭配是展现色彩丰 富的工艺品的一种和谐方式。北美工艺品展（ｈｔｔｐ：／／ｗｗｗ．ｃｒａｆｔｓａｍｅｒｉｃａｓｈｏｗｓ．ｃｏｒｎ）・从这个网站页面 色彩的选择上，我们可以感受到网页设计者对手工艺品的认知，其色调选择和色彩搭配，突出了手工艺 品的巧夺天工。蓝色、灰白色、草绿色、淡黄色都是手工艺品常用的颜色，形成了站点风格的一致性。另 外，在当主题色确定好以后，设计者在考虑其它配色时，一定要考虑其它配色与主题色的关系，要体现什 么样的效果。 另外，哪种因素占主要地位，是明度、纯度还是色相，也要认真推敲。一个网站不可能单一地运用 、 种颜色，让人感觉单调、乏味；但是也不可能将所有的颜色都运用到网站中，让人感觉轻浮、花哨。一般来 说。一个页面尽量不要超过四种色彩，用太多的色彩让人觉得没有方向感、轻重感。但在特定情况下，还 维普资讯 http://www.cqvip.com １３２ 合肥工业大学学报（社会科学版） ２００６年４月 是要有变化的，例如娱乐性网站，就需要绚丽多姿。由此可见，最重要的还是对色彩的驾驭能力。 设计师要运用新颖的观念去表现色彩的特色，设计和组合上都要带给其他人清新的感觉，引导受众 进一步挖掘色彩背后的意义。另一方面，设计大多数是宣传性服务，所以设计师要为客户打算，考虑适合 运用的资源，客户预备在这个设计上投资多少等等，当然最重要的还是这个色彩的运用能否增强其吸引 力。因此，为了能让自己的网页设计得更靓丽、更舒适，为了增强你的页面的可阅读性，必须合理、恰当地 运用与搭配页面各要素间的色彩！ 三、结论与展望 随着网络技术的不断完善，在中国平均每天挂在网上超过八个小时的网民大有人在，这还不包括那 些每天坐在电脑面前进行数据处理、信息查询、远程教育等信息工作的职业工作者。新兴的网络媒体已 经在逐渐抢占其他传统媒体的受众注意力资源。电视收视率调查发现，因特网的主力用户正是传统媒体 的主力用户。 现在的网页设计，误区就是千篇一律，缺乏自己的特色。当我们上网浏览，会发现好多网站都是大同 小异的，从标题的放置、按钮的编排到动画的采用都是如此。随着互联网在生活中的应用越来越广，社会 对于网页设计师的需求和设计要求也不断增加。对于网页设计师而言，其任务正是在于如何创造一个最 佳的视觉语言，借以传达其设计理念和艺术主张。同时，在竞争日趋激烈的今天，还需要网页设计师树立 自己的风格，在设计上，除了继承传统媒体的设计特点外，还要融合日新月异的网络技术，追求艺术与技 术的高度统一。只有如此，才能制作出有个性、有特色，具有吸引力的网页。 ［参 考 文 献］ ［１］赵健，童慧明．陈小清，等．点线方缘［Ｍ］．广州：岭南美术出版社。２００３． ［２］施晓军，网页设计要素分析．圆点视线［ＤＢ／（）Ｉ ］．ｈｔｔｐ ｚ／／ｗｗｗ．ａｐｏｉｎｔｓ．ｃｏｍ／ｗｅｂ／ｗｚｓｊｊｑ／２００２０１／４６７．ｈｔｍｌ，２００２—０１—２５． ［３］钱竹．世界杰出标志全集（新一辑）［Ｍ］．北京：艺术与设计杂志社，２００２． ［４］严晨．个性与设计［Ｍ］．北京：人民邮电出版社，２００１． ［５］ （英）盏文・安布罗斯，保罗・哈里斯．创意设计元寒［Ｍ］．杨文俐译．北京：中国纺织出版社，２００４． （责任编辑 陈秀平） 我校新增两位长江学者讲座教授 经教育部评审和批准，美国佛蒙特大学吴信东教授和加拿大新不伦思瑞克大学张榴晨教授新增为 我校“计算机应用技术’’和“电力电子与电力传动’’学科２Ｏ０５年度长江学者讲座教授。吴信东教授在知识 获取与数据挖掘领域，张榴晨教授在可再生能源转换、分布发电系统、环境设计工程、电机、电力电子学、 电磁场的数值计算等领域的研究中，均具有较高的学术造诣，在海内外同行中有较高的知名度。 （本刊讯）
