浅谈网页视觉设计的基本元素

1、浅谈网页视觉设计的基本元素【摘 要】在互联网飞速发展的今天，网页设汁伴随着国际互联网络的不断 发展而快速兴起。网页作为网络的主要依托，已深入到人们生活的各个层面，不 断冲击着人们的视觉感官。网页中的视觉元素综合了文字、图形、色彩等多种 信息,给人们提供了一个便捷的信息交流平台。网页中视觉信息的表达成为网络 信息传达的重要部分。近年来，网页的视觉表现己经从简单的图文编排形式，发 展到多种视觉元素的综合运用。表面上看，网页设计不过是关于网页视觉元素 编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与技术的高度统 一。因而，进行网页设计时设计者需要考虑如何做到吸引浏览者的注意，这就需 要从艺术

2、设计的审美方面，设计出内容传达准确、整体效果优秀，有一定艺术表 现力的网页界面。网页的构成要素包括文字、图形、图像、标志、色彩等造型 要素及标题、信息菜单、信息正文、标语、单位名称等内容要素。本文通过对 视觉元素等概念的阐述及分析视觉元素的特性，提出根据视觉元素的运用规律 及其所引起的情感因素来创新思路，达到视觉传达和审美的LI的，更好地提高 网页设计的水平。【关键词】：网页设计；视觉元素的特性；文字；图形；版面设计；一. 引言在互联网飞速发展的今天，网页设计伴随着国际互联网络的不断发展而快 速兴起。网页作为网络的主要依托，已深入到人们生活的各个层面，不断冲击着 人们的视觉感官。网页中的视觉元

3、素综合了文字、图形、色彩等多种信息，给人 们提供了一个便捷的信息交流平台。网页中视觉信息的表达成为网络信息传达 的重要部分。近年来，网页的视觉表现己经从简单的图文编排形式，发展到多种 视觉元素的综合运用。表面上看，网页设计不过是关于网页视觉元素编排的技巧与方法，而实际 上，它不仅是一种技能，更是艺术与技术的高度统一。因而，进行网页设计时设 计者需要考虑如何做到吸引浏览者的注意，这就需要从艺术设讣的审美方面，设 计出内容传达准确、整体效果优秀，有一定艺术表现力的网页界面。网页的构成 要素包括文字、图形、色彩等造型要素及标题、信息菜单、信息正文、标语、 单位名称等内容要素。下面就网页设计的文字、图

4、形及版式、色彩基本元素进行分析:二、网页视觉设计的内容（一）网页视觉设计的概念网页设计一一网站是企业向用户和网民提供信息的一种方式，是企业开展 电子商务的基础设施与信息平台。而网站上的宣传是反应企业形象和文化的重 要窗口，网页在设计是具有很强的动态效果和视觉效果，网页的设计是基于新 型媒体的基础的上面建立的，同时他和其他的媒体传介不同，网页设计它是比 传统的媒体更具有影响力，它包含有传统媒体的优点，同时它在传播中比传统 媒体的速度更快、更有效。视觉设计与视觉传达设计是有一定的区别的，视觉 设讣主要是针对眼睛官能的主管形式的表现手段和结果，然后视觉传达设计它 主要传达的对象是观众，视觉传达设计过

5、程中不仅是将信息传达给设计者本人 同时也传给观众。而网页视觉设汁是将视觉元素特点运用到网页设计中，如文 字、图形、色彩动画等视觉要素，根据特定的内容和主题，在网页所限定的范 围内，运用造型元素和形式原理进行视觉的管理，从而将设计的意图以视觉形 式表现出来。（二）网页视觉设计的准则网页视觉设计是技术与艺术的结合体，内容形式相统一。网页是传播信息 的一种载体，同其他出版物像报刊、杂志等在设计上有很多共同之处，也一样 遵循着一些设计的基本原则，不过由于运行方式、表现形式不一，社会功能的 不同，网页视觉设计有着它自身的规律。1. 主题鲜明视觉的设讣要求是有一定的要求，必须要有着明确的主题以及并按照心理

6、 视觉的规律与形式将主题的内容与星系传达给观赏的人。信息在传达的U的它 是使人们能够及时地理解和接受主题中的内容以满足人们的心理需求和实用需 要。在网页设计中在要求设计达到简练以及清晰、精确的同时也必须强调艺术 性，注重实际的冲击力以及独特的视觉风格，将这些主题设讣中的特点来突出 主题的内容以及涵义，让阅读者能够更快捷的接收文章信息。2. 形式与内容相统一设计的时候要注重设计页面的清晰，使浏览者能够快速浏览，并能够快速 地体会到网站完整的设计思想和包含的信息内容。同时内容也是构成网页设计 一切内在因素总和。一个优秀的网页设讣时形式对内容的完美表现。在视觉设 计中保持与界面的一致性。如在字体、标

7、签风格、颜色等方面确保一致。不要 把无关的图片把页面装点起来，不能让别人明口设计者到底要突出什么内容、 表达什么主题和意念。3. 简洁明了在社会文化高度发达的今天，人们因为文化素质的提高和价值观念的变 换，生活情趣与审美情趣都发生了变化，更趋向简洁、精炼。简洁的图片、醒 LI的文字，适宜的色块更符合大众审美要求和当今人们欣赏趣味，给人以舒 适、现代的感觉。形式简洁是网页设计中应具有的外在特征。保持简洁的做法 是限制网页中所用的字体与颜色的数U, 般每页使用字体不应该超过三种， 色彩不能太过于炫口、图片不能过于繁杂。网页视觉设计要晚上视觉清晰度， 条理清晰，图片文字得当适宜。（三）视觉流程的筹划

8、网页视觉设计中构成的基本要素有文字、图形、色彩等视觉元素。网页设 计的视觉流程是一种空间的运动，是视线随着网页中的各构成要素在空间沿一 定的轨迹运动的过程。通过视觉流程，将各种视觉信息进行有序阻止，诱导浏 览者的视线依设计的意图进行流动，从而浏览者清晰、快速地接受信息。1视觉传达的流程视觉的传达流程是山人类的视觉特性所决定的，在阅读信息时，人们的视 觉总会有一种自然的流动习惯。视觉流程往往会体现出比较明显的方向感，它 无形中形成一种脉络、一条线、一股气贯穿其中，使整个版面的运动趋势有一 个主旋律。在网页设计中合理地运用视觉流程和最佳视角区域，阻止好自然流 程的视觉导向，直接影响到传播者传达信息

9、的准确与有效性。2. 视觉传达的元素设计一个既美观乂便利的网站页面，要考虑网页设计的各种视觉元素文 字、图片、色彩等其他的视觉元素。在网页页面的设计中，我们最常看到的视 觉元素如：按钮、图标、文字符号、图形等，图形或图标等视觉元素的引入， 不仅给人们的视觉带来很大的冲击力，同时也大幅度增加了网页也面的浏览 率，这种视觉传达的元素是现代网页视觉设计中不可缺少的。但是如今各式各 样的网页页里面都运用大量的视觉元素，不仅使得浏览着眼花缭乱，同时信息 得不到高效率的吸收传递，根据视觉传达的元素与人们的视觉接受信息的特 点，我们不得不注意视觉元素在网页页面上的运用，而在运用的同时要遵循造 型简洁的特点，

10、体现力强、统一性强的特点，并要求有一定的美感，以最快捷 的途径，最有效的感知方式获取视觉信息，能够有效地影响人们浏览网页的兴 趣，增强浏览者对网站的关注。三、视觉元素的分析（一）视觉元素的内容所谓“视觉元素”，实际上是指人类的视觉器官一眼睛所看到的并能表现 岀事物的特性、性质的符号，如摄影、电视、建筑物、各类设计及各种科学、 文字、音乐，它们都是能通过眼睛看到、感知的，所以都属于视觉元素。而网 页设计中基本的视觉元素是包括文字、图形、色彩等造型要素。网页设计中视 觉元素的传递是通过网页界面作为媒介而传达给受众。所谓传达，是指信息发 送者利用符号向接受者传递信息的过程，它可以是个体的传达，同时也

11、可能是 个体和个体之间的传达。它包括传达对象、传达内容、被传达者、传达效果这 四个程序，这也是设计者将思想和设讣概念转变为视觉元素的过程，即概念的 视觉化过程。（二）视觉元素的特性随着网络时代的发展，网页的应用已经深入到人们生活的各个领域，同时 它也通过其时效、精炼、速达的视觉语言达到信息交流和传递的U的。在网页 设讣中，恰当地使用视觉元素能收到很好的效果。同时作为是一门全新设计领 域的平面视觉元素它具有下儿个特性：1. 注目性、适应性注LI性和适应性是视觉元素的最基本特性，而在网页设计中越来越多的人 更加注重视觉元素在网页设计中的注目性，一般来讲，网页设计者都会通过图 形、文字、色彩等不同的

12、变化利用各种不同效果在网页设计中进行合理的编排 来吸引阅读者的忖光，达到注U性的加强。网页设计时语言的简洁概括、的生 动鲜明的展示这些都是能更增强网页的注訂性，而且这种效果能达到事半功倍 的作用。设计中的视觉语言设计，要在尊重阅读者的阅读习惯出发，这体现出 适应性特征，如果设计中页面的色彩设计或语言设计随意、杂乱，不仅是影响 到页面的美观，同时也影响到信息的浏览。3. 记忆性、确定性人类通过阅读接受信息，然后在脑中形成长期记忆，同时这种记忆的信息 在脑中不断的反复练习，自然而然就形成一种信息的反射。在人类大脑接受信 息的时候，山脑垂体利用各种相关的因素或比例，如：结构比例、动静比例、 均衡关系

13、等与视觉诱导相关的因素进行设计，使其成为强有力的图形构成。在 阅读者阅读信息内容的同时，人们的心理总会发生一系列的心理信息的反应， 视觉和听觉等重要的感官因素都是触发人们对知识接收处理的触发点。在阅读 者阅读信息后，所产生的大脑的“信息传输”，不管是透过色彩、或文字，都 是按照这样的一个心理活动规律进行的。在网页设计时应该各种视觉元素排版 时应该遵循着清晰简明的原则，使得阅读者在阅读的时候集中注意力，如果页 面絮乱复杂、杂乱无章这种情况传达的信息的效率将大大的降低。5.选择性、连续性可以说人类的阅读习惯各有不同，但是往往人们在阅读的时候，在阅读的 范圉内从点到直线，形成一定的形状或轮廓，并通过

14、大脑神经传入记忆细胞， 这就是我们通常所说的视觉流程，信息连续性出现是视觉流程中最好也是最有 效的方式，这种连续出现的信息在网页设计中能够使读者造成认知的累积，从 而有效地解读信息的内容，使浏览者自然舒畅地接受并理解。因此针对人类阅 读的惯性，网页在设计当中应该遵循从简而精，不要搞的太过复杂，网页的页 面应该突出网页主题和主要信息，这样才能方便与阅读者阅读信息。四、视觉元素在网页设计中的应用（一）版面设计在视觉设计中的应用网页的版式设计主动技术性与艺术性的高度统一，是视觉传达的重要手 段，是网页设计的重要组成部分。一个好的版面就能够浏览者能够清晰的浏 览，对网页的内容快速的了解、吸收，很多的优

15、秀网页之所以能够深深的吸引 着浏览者，是因为它靠版面的设计，只有成功的版面设计才能有成功的网页设 计。在版式设计的过程中应遵循以下原则：（1）主次分明、传达准确设计中要遵循版面的设计结构原理，版面设计主次分明，才能准确的传达 内容信息，而版面最重要的位置往往占据的是主要的信息内容，次要的信息被 设置在视觉中的第二流程。遵循从属次要内容占据，是版面设计主次分明的重 要因素，同时这也就要求版式设计作品首先要有鲜明主题的诱导力，版面上既 要有集中统一，乂要有多样变化，使主体形象更加鲜明突出，达到清晰的视觉 感受，能够让浏览者从网页设汁的主题中准确了解信息。同时在版面设计中还 要强调设汁的简洁和精炼，

16、根据文章的内容置放在版面的位置不同，只能通过 这样才能够准确的传达信息，让读者能够快速的接受里面的信息内容。（2）明朗易读、风格突出任何网页页面都是给读者看的，图形和文字明朗易读这也是版式设计的基 本要点，如果读者阅读起来很艰难，也就不会记住很多东四，只有抓住了重 点，明确了思想才能够击中了目标、能够迅速的接受内容信息，只有容易看 清，容易看懂，网页的信息才具有高效的传达信息的作用。不管是哪一种设 计，都有着它自身的特点与不同，让版式看上去更加精彩，这种追求新颖独特 的个性表现容易吸引读者，同时也给网页的浏览率增高。感性设计和理性设计 是这两种设计风格是不一样的，在设计的过程中，需要根据设计的

17、内容不同而 进行版面上的风格设讣，只有这样才能够很好的体现出符合版面内容的设讣风 格。版面在设计的风格上有千变万化、各不一样，比如有的追求无规则的空 间，有的追求幽默、风趣的表现形式；有的简洁大方、活泼开朗；有的则是追 求规范严谨或是富有哲理；有的喜欢装饰味很浓、追求浪漫幻想色彩等风格。 设讣风格白般各异，不管是哪种设计风格，每位设计师都是根据设讣内容的不 同 而 采 用 不 同 的 设 计 风 格 。（3）形式内容统一、强化整体布局从网页设计师的角度来看，版面的设计形式是必须依据特定的情景和表现 的媒介通过构思进行设计，而构思形式绝非简单的图形描述，它是一个互动的 过程，从受众的角度看，形式

18、是阅读者面对设计作品时第一反应与视觉知识的 相互融合。在设计的时候要利用平面中各组成要素在内容上的内在相互联系以 及表现形式上的格调进行融合，实现视觉和机理上的连续性，使得版面设计内 容层次分明让阅读者悦读吸收网页内容信息，以突出重点为基础而达到浑然一 体的效果。（二）文字在网页视觉设计中的应用文字的设计可以说是网页视觉设讣中的重要体现，文字具有传达信息内容 的作用，让阅读者深受感染，而文字的设计已经成为网页设计在传达信息过程 中的重要手段。网页的设计首先要依靠设讣者对所设计网站真题风格的准确把 握，以及对技术的精确掌握对艺术的表达以及创新。1. 静态文字的应用静态文字在标题中的应用，标题是阅

19、读者了解文章最快、及最明了的阅读 结构。标题在网页中就像是书本中的目录一样引导着阅读者的方向，静态文字 在网页的主页中最常应用到的。在设讣此类文字时，一般情况下是要将相关的 内容标题组合在一起并按照按顺序排列起来，让人一|_| 了然了解主要内容，避 免给人凌乱繁杂的视觉效果。过色彩调整、背景的变化、边框的运用，再将不 同类别的标题组成有序的组合在一起，通在符合网页整体设讣风格的基础上进 行有效区分，使之既有对比上的不同乂有整体的协调统一。在字体的设计上色 彩适宜，大小恰当要满足阅读识别轻松的特点。一般来说在文字设计中网页正 文的背景色彩不应该太强烈，浅淡适宜有利于文字的表现同时也符合人们阅读

20、的习惯。2. 动态文字应用在网页设讣中动态文字是经常被使用的，很多网站的标题和广告都使用动 态的文字与图片相结合，色彩丰富，表现力强，给人以美的感受。电脑图片格 式经常使用到的有：BMP、GIF、SVG等，但在网络上使用最多的格式是JPEG, 以及能显示动画的GIF和SWF格式，这些精心设计，图片化、意象化，以更富 创意的形式表达出深层的设计思想的动态文字时网页的点睛之笔。在网页设计的过程中，要特别重视文字的设计与编排，重点在于文字的设 计风格要与网页风格相一致，要与信息所传达的内容相吻合，要与网页上出现 的图形图像相协调，要依据网页的总体设想和浏览者的需要。文字在设汁时应 考虑文字的特点，以

21、及传达的信息内容，从文字编辑的风格，让人感受信息内 容的表总之，根据不同网页内容进行不同的文字设计和编排。（三）图形在网页视觉设计中的应用图形是整体的而且具有有内涵的和意识创造出的视觉符号，图形在视觉传 达设计中更具有直观性同时也起到了主导作用，是引起观众者注意和记忆的最 佳手段之一，而且图形时不受地域和民族的限制，更具有国际性，通过人们的 视觉感官进行判断和分析。在视觉顺序上，图形往往能首先吸引人们的注意 力，这是由于图形给人的视觉感官要比文字更鲜明、更强烈，同时图形在网页 设计中的引入也大大美化了页面，同时更丰富了页面的内容信息。如今儿乎所 有的网页都用到了图形，善用图形，可以生动、形象、

22、直观地表达网页的主 题。网页可以图文并茂地向用户提供信息，成倍地加大了它所提供的信息量。 对于一条信息来说，图片对浏览者的吸引远远超过单纯的文字。然而图形必须 完全符合网页的主题，并以创新的构思和强烈的个性，使主题与表现两者较好 地统一，有利于信息的传达。图片的位置、面积、数量、形式、方向等直接关 系到网页是视觉传达。在图文混排时，要注意统一、悦H、重点突出，应考虑 图片在整体编辑计划中的作用，达到和谐整齐。（四）色彩在网页视觉设计中的应用色彩设计应用于网页设计中，给网页作品带来鲜活的生命力。一个网站设 计成功与否，在某种程度上取决于设讣者对色彩的运用和搭配，我们在浏览网 页时，留下的第一印象

23、就是网页的色彩设讣，它的好坏直接影响阅读者的观赏 兴趣，在网页视觉设计中色彩运用应遵循以下儿点：1. 突出 主 题搭 配 合 理网页设计中色彩的运用要显得个性鲜明，给浏览者留下深刻的印象。网 页界面设计中，不同的色彩体现不同的内容信息，利用不同色彩的自身表现力 以及审美心理感受，将网页的内容与形式有机地结合起来，以色彩的内在力量 来烘托主题、突出主题。网页设计中色彩的运用还考虑人的生理特点，色彩搭 配一定要合理，给人一种和谐、愉快的感觉，避免采用纯度很高的单一色彩， 这样容易造成视觉疲劳。2. 讲究艺术性色彩设计不仅在视觉上，而且在心里作用和象征作用中的可以得到充分的 体现，以色彩的科学知识为

24、基础，进而从美学的角度去探讨色彩设计的表现形 式，网站设计也是一种艺术活动，因此它必须遵循艺术规律，在考虑到网站本 身特点的同时，按照内容决定形式的原则，大胆进行艺术创新，设计出既符合 网站要求，乂有一定艺术特色的网站，讲究色彩的艺术性，增强网页设计的艺 术性，创造出更具审美情趣的作品。訂前来说，网页设计者以所处时代所能获取的技术和艺术经验为基础，依 照设计LI的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动， 必然要成为设计艺术的重要组成部分，并随着网络技术的发展而发展。网页设 计除了运用平面设计的诸多元素以外，还有它自身独特的视觉元素，交互元素 和动态元素，它不同于传媒之处在于信息更新和交互的及时性。交互元素是平 面视觉元素与交互技术的结合，动态元素是平面视觉元素结合信息技术的产 物，网页界面设讣作为一种新的视觉艺术表现形式，不但兼容了传统平面设计 的特征，乂具备其所设有的优