（设计艺术学专业论文）基于网页界面视觉艺术元素的分析与研究.pdf

基于网页界面视觉艺术元素的分析与研究 摘要 进入2 l 世纪，人类社会正经历着从原子时代向数字时代的转变。互联网代表 着一种崭新的信息交流方式，它使信息的传播突破了传统的政治、经济、地理和 文化的壁垒。互联网的产生使人类相互沟通的方式发生了很大的变化，网络己成 为了信息传播的重要渠道和最迅捷的资讯传递方式，它在世界范围内影响了人类 的文化、生活以及思维方式和行为方式。随着网络技术和网络经济的迅速发展， 人们对网页界面的设计产生了更高的要求。网页设计不仅是网页制作技术，更是 网页的视觉表现艺术。在网络的不断发展中，网页界面设计与视觉艺术相互影响， 逐渐形成了独特的网页界面视觉文化。 本文从网页界面和视觉艺术相结合的角度，以设计学、心理学、美学、统计 学为依托，对网页界面的视觉艺术元素进行了多层面的研究。本文首先对网页界 面的文字元素、图形元素、色彩元素、动态效果和网页界面的构图与布局五大基 本元素进行了详细的阐述与分析，总结出了网页界面视觉艺术设计的基本方法与 一般规律。随后依托于前一章的分析研究，在收集大量网页样本的基础之上，结 合网页实例，对六大类不同性质的网页界面视觉设计风格属性进行了分析与归 纳，并由此总结出了当代网页界面风格设计的发展趋势。最后基于以上的分析研 究成果，以购物网站作为研究对象，对网站界面设计风格定位进行了探究，运用 语义差异分析法、数量化i 类、因素分析以及集群分析等统计学方法，初步探讨 分析出了购物网站的风格类型以及其最佳市场定位的视觉设计要素。 关键词：网页界面；视觉艺术；基本元素；风格属性 h 硕十学位论文 a b s t r a c t c o m i n gt ot h e21s tc e n t u r y ，h u m a ns o c i e t yi sc h a n g i n gf r o mt h ea t o m i ca g et o t h ed i g i t a l a g e i n t e r n e tr e p r e s e n t san e ww a yt oc o m m u n i c a t ei n f o r m a t i o nt h a t e n a b l e si n f o r m a t i o nd i s s e m i n a t i o n b r o k i n gt h e t r a d i t i o no fp o l i t i c a l ，e c o n o m i c ， g e o g r a p h i c a la n dc u l t u r a lb a r r i e r s t h ew a yo fh u m a nb e i n g sc o m m u n i c a t i n gw i t h e a c ho t h e rh a sc h a n g e da st h et h ei n t e r n e t e m e r g e s t h en e t w o r kh a sb e c o m ea n i m p o r t a n tc h a n n e lo fi n f o r m a t i o nd i s s e m i n a t i o na n dt h es w i f t e s tw a yo fi n f o r m a t i o n d e l i v e r y ，w h i c hi m p a c t st h eh u m a n sl i f e ，c u l t u r ea n dt h ew a yo ft h i n k i n ga n db e h a v i n g i nt h ew h o l ew o r l d a st h ed e v e l o p m e n to ft h en e t w o r kt e c h n o l o g ya n dt h en e t w o r k e c o n o m i c ，p e o p l eh a v eah i g hd e m a n do nt h ew e bi n t e r f a c ed e s i g n w e bd e s i g ni sn o t o n l yaw e bp a g em a k i n gt e c h n o l o g yb u ta l s oaw e bp a g ei nv i s u a la r tp e r f o r m a n c e i n t h ee v o l v i n go fn e t w o r k ，w e bi n t e r f a c ed e s i g na n dv i s u a la r ta r ei n t e r a c t i n gw i t he a c h o t h e r ，g r a d u a l l yf o r m i n gau n i q u ev i s u a lc u l t u r ei nt h ew e bi n t e r f a c e t h i sa r t i c l ef r o maa n g l eo fc o m b i n i n gw e bi n t e r f a c ea n dt h ev i s u a la r t s ，w h i c h u s i n gt h ew a yo fd e s i g n ，p s y c h o l o g y ，a e s t h e t i c sa n ds t r a t i s t i c a l ，i sr e s e a r c ho nt h ew e b i n t e r f a c eo ft h ev i s u a la r t se l e m e n ti nam u l t i 1 e v e l f i r s t t h i sa r t i c l eh a sad e t a i l e d e l a b o r a t i o na n da n a l y s i so nt h ew e bi n t e r f a c eo ft h ef i v eb a s i ce l e m e n t sw h i c ha r et e x t e l e m e n t s ，g r a p h i ce l e m e n t s ，c o l o re l e m e n t s ，d y n a m i ce f f e c t s ，w e bi n t e r f a c ea n dl a y o u t ， s u m m a r i z i n gs o m eb a s i cm e t h o da n dt h eg e n e r a ll a wo fw e bi n t e r f a c ei nv i s u a la r t s d e s i g n t h e n ，d e p e n d i n go nt h er e s e a r c ho ft h ep r e v i o u sc h a p t e ra n dc o l l e c t i n gal a r g e n u m b e ro fw e bp a g es a m p l e s ，c o m b i n e dw i t hw e bp a g e e x a m p l e s ，a n a l y z ea n d s u m m a r i z et h ef i v ed i f f e r e n tk i n d so fw e bi n t e r f a c e sv i s u a ld e s i g nc h a r a c t e r i s t i c s ， a n dt h u ss u m m e du pt h ec o n t e m p o r a r yw e bi n t e r f a c es t y l et r e n d s f i n a l l y ，b a s e do n t h ea b o v ea n a l y s i sr e s e a r c hr e s u l t s ，t a k i n gt h es h o p p i n gw e b s i t ea st h eo b j e c to f s t u d y ， h a sc a r r i e do nt h ei n q u i s i t i o nt ot h ew e b s i t es u r f a c ed e s i g ns t y l el o c a l i z a t i o n u s i n g s e m a n t i cd i f f e r e n c ea n a l y t i cm e t h o d ，t h ef i r s tt h e o r yo fq u a n t i f i c a t i o n ，f a c t o ra n a l y s i s a n dc l u s t e ra n a l y s i s ，i ta n a l y z e st h es h o p p i n gw e b s i t es t y l et y p e sa sw e l la si t sb e s t m a r k e to r i e n t a t i o no ft h ev i s u a ld e s i g ne l e m e n t s k e yw o r d s ：w e bi n t e r f a c e ；v i s u a la r t s ；b a s i ce l e m e n t s ；s t y l ea t t r i b u t e 湖南大学 学位论文原创性声明 本人郑重声明：所呈交的论文是本人在导师的指导下独立进行研究所取 得的研究成果。除了文中特别加以标注引用的内容外，本论文不包含任何 其他个人或集体已经发表或撰写的成果作品。对本文的研究做出重要贡献 的个人和集体，均已在文中以明确方式标明。本人完全意识到本声明的法 律后果由本人承担。 作者签名：兰氖 日期：加节年6 月7 e t 学位论文版权使用授权书 本学位论文作者完全了解学校有关保留、使用学位论文的规定，同意学 校保留并向国家有关部门或机构送交论文的复印件和电子版，允许论文被 查阅和借阅。本人授权湖南大学可以将本学位论文的全部或部分内容编入 有关数据库进行检索，可以采用影印、缩印或扫描等复制手段保存和汇编 本学位论文。 本学位论文属于 l 、保密口，在年解密后适用本授权书。 2 、不保密囹。 ( 请在以上相应方框内打“”) 作者签名： 导师签名： 日期：棚尸年石月ie t 日期：加户年6 月e l 硕十学位论文 第1 章绪论 1 1 论文的研究背景及意义 1 1 1 研究的背景 互联网起源于二十世纪后半叶的西方，互联网的诞生使人类相互沟通方式产 生了新的革命，它代表着一种崭新的信息交流方式，使信息的传播突破了传统的 政治、经济、文化及地域的阻隔，使信息传达的范围、速度与效率都产生了质的 飞跃。进入九十年代以来，先进的计算机技术不仅征服了文字数字化的难题，而 且征服了比文字更复杂的声音世界。如今，表现和记录人类物质和精神世界的数 字、语言、文字、声音、图画和影像等过去相互之间界限分明的各种信息传播方 式，都可以用计算机的二进制语言来做数字化处理，从而可以浑然一体，相互转 换、报纸、广播、电视和书籍、杂志、电影等传统大众传播媒介在形式之间的差 异正在缩小和消失；交互式传播媒体的出现，使得传播者和受众之间传统的相互 关系面临着巨大的变化，人类进入了真正的信息时代。 二十一世纪的今天，是一个信息爆炸的时代，随着国际互联网络的不断普及 与发展，网络成为信息传播的重要渠道和最热门的资讯传递方式。互联网是由成 千上万的网站组成，而每个网站都是由诸多网页构成，因此，网页界面就是网页 的门面。网络是通过网页上的视觉元素来实现信息内容的传递，为了使信息传递 获得最大的视觉功能，使之真正成为可读性强而且新颖的传播媒介，网页设计必 须适应人们的视觉流向的心理和生理特点，由此确定各种视觉构成元素之间的关 系和秩序。因此，在进行网页视觉基本要素设计是就必须遵循一定得形式法则。 同时随着人们生活水平的提高，人们的观念发生了根本性的转变，人们对网 络的态度从开始的奢望、好奇到现在的频繁使用，越来越热衷于在网上查找资料、 收看新闻、休闲娱乐、网上购物等等。如今，各种网站如雨后春笋般地诞生，网 站之间的竞争越来越激烈。现在，网站不再是把信息简单的放在页面上供人浏览、 下载，而是要考虑如何向用户展示一个良好的网站形象，吸引用户的关注，提高 网站点击率。 据报道，由中国自主研发的下一代互联网主干网核心技术已通过国家教育部 组织的验收，于2 0 0 8 年提供商用。该项c n g i c e r n e t 2 主干网以2 5 兆到1 0 ；j l i 的带 宽连接了我国2 0 个城市的2 5 个核心节点，传输速度达n 2 5 g 到10 g ，是当前各国 使用的第一代互联网速度的10 0 多倍【1 1 。这充分说明我国互联网的发展给网页的是 视觉设计创造了广阔的空间。纵观人类历史，艺术的创新和技术的进步总是如影 基于网页界面视觉艺术元素的分析与研究 随形，几乎每一种艺术形式的产生都以某种新技术的问世为基础，甚至每次技术 的升级都会导致艺术形式的创新。一直以来，正是由于网络技术的不断创新和发 展，才有了今天精彩的互联网世界，网页设计也只有主动求变和创新，才能适应 互联网发展的潮流。 1 1 2 研究的意义 人们常常在技术的层面上探讨网页界面设计，但优秀的网页界面设计所依赖 和展现的绝不仅仅是一种新的技术形式。网页界面设计的艺术性必须得到关注， 而网页界面设计作为艺术的一种新的表现形式也值得深入研究【2 】。 目前，在我国的网页界面设计领域，界面设计考究、美术创意独特的中文网 站很少，我国网页界面的视觉设计还远没有达到西方的那种艺术高度，也没有在 设计和文化领域造成它应有的影响。同时在我国，设计人员多从事软件界面设计、 游戏界面设计等领域的研究，对网页界面设计这一课题的系统研究还比较薄弱， 特别是在视觉艺术设计领域中对网页界面设计的探讨尤显不足，仅仅是对色彩、 文字、版式等元素方面对网页界面视觉设计方面进行一些简单的陈述，缺乏对其 进行具体深入的分析。 除了上述这些，国内外对于网页界面视觉设计的风格和特征方面的研究寥寥 无几，即使有这方面的研究也只是对网页界面风格的简单罗列，流于表面化。目 前还没有文章从设计的角度专业化、系统化地对网页界面的视觉设计进行研究， 而这样的研究对于我们从事这方面研究的人来说才是更具有指导意义和文化价值 的。综合以上因素，以及物质生活日益丰富的现代社会对网页界面日益强烈的审 美需求，笔者认为对网页界面的视觉艺术设计的研究有着非凡的理论和现实意义。 1 2 论文研究内容与研究方法 1 2 1 研究内容 本研究以网站视觉艺术设计作为切入点，首先对构成网页界面视觉艺术的五 种基本元素分别进行了研究与探讨，总结出了基于五种基本元素的网页界面视觉 设计的一般规律；接下来，以上一章的研究结果为依托，同时结合大量的网页样 本，对不同类型的网页界面的视觉风格进行了归纳与分析，并总结出了当代网页 界面视觉风格设计的发展趋势；最后一章以购物网站为例对网页界面的风格定位 进行了研究。主要以数量化i 类、因素分析及集群分析加以综合归纳购物网站的 设计风格，分析现有网站在市场定位的情形，并进一步探讨其典型的风格特征。 1 2 2 研究方法 本课题运用系统分析与归纳研究法、案例分析法、学科交叉研究法、文献探讨 2 硕十学位论文 法进行研究。 ( 1 ) 通过广泛收集、整理和查阅相关的文献与资料，分析本课题国内外情感与 设计研究现状和发展趋势，运用分析和归纳的方法总结和整合其中的理论依据， 为本课题研究奠定坚实的基础。 ( 2 ) 通过互联网广泛搜集了各类网站界面设计实例，从理论上对于网站界面的 视觉设计进行分析总结，归纳出网站界面视觉艺术设计基本元素构成以及风格属 性，并通过实验研究对网站风格定位进行了初步探索，使研究具有较强的操作性。 ( 3 ) 运用不同的学科知识，包括认知心理学、色彩心理学、设计学、统计学等， 从不同的学科角度多方面研究。 1 3 论文的组织框架与研究流程 图1 1 本文的研究框架 论文的章节组织如下： 第1 章：绪论： 本章就本论文的研究背景和研究意义作简要分析，并对研究内容和研究思路 作简要的阐述。 基于i 】b 9 页界面视觉艺术元素的分析与研究 第2 章：网页界面视觉艺术设计基本元素的构成 本章对网页界面视觉艺术设计基本元素进行了详细的阐述与分析。 第3 章：网页界面设计风格分析 本章对网页界面的风格进行了探讨，并根据网站的不同类型，对各种网页界 面视觉设计的风格特征进行了分析与归纳，并总结出了当代网页界面风格设计的 发展趋势。 第4 章：网页界面设计风格定位分析 选择购物网站作为研究对象，对网页界面设计风格定位进行了分析研究。本 章主要分为三个部分：第一部分为购物网站样本的收集与分析，并确定了购物网 站首页设计因子及型态。第二部分为确定实验样本与意象语义。第三部分为实验 的执行与结果分析。 最后结论与展望 总结本文的研究成果，对基于网页界面视觉艺术元素分析与研究提出建议与 展望。 4 硕士学位论文 第2 章网页界面视觉艺术设计基本元素的构成 进行网页界面视觉设计之前，我们首先要了解一下网页界面视觉设计需要关 注的因素。网页界面的视觉设计有着它自身的特色，与传统媒介不同，网页界面 除了文字、图像和色彩以外，还包含声音、视频和动画等新兴多媒体元素，更借 助由代码语言编程所实现的各种交互式效果，增加了网页界面的生动性和复杂性， 也使得网页设计者需要考虑更多页面元素的排布、优化1 3j 。怎样将要传达的众多 文字、图像、音频、视频、动画信息通过视觉设计表现出来，并且能为受众所理 解和接受，是一个艰巨的任务，也是它特色所在。同时网页界面视觉设计还有着 它自身的制约因素。比如，带宽的限制、屏幕大小的限制等。如何在限定的设计 范围内，克服各方面的制约，达到吸引受众的目的，这些都是在设计时需要考虑 的问题。本章将通过对构成网页界面视觉设计的文字、图形、色彩、动态效果以 及网页界面的构图与布局五种基本视觉要素进行探究，以求找到一定的规律。 2 1 网页界面中的文字元素 文字是互联网信息最主要的载体，故而文字的设计在网页中占有举足轻重的 地位。文字除了传递信息，告知网站内容，还是增强视觉传达效果，提高网页诉 求力，增强网页审美价值的有利工具。文字表现的好坏直接影响到整个页面的质 量，处理好文字的关系，是设计者在网页视觉传达设计中应该特别关注的问题1 4 j 。 2 1 1 网页文字的视觉特征 独特性。字体的识别性体现在独特的风格与强烈的个性印象上。依据信息经 营理念、文化背景和行业特征等因素的差别，创造不同个性的字体。 易读性。字体应传播明确的信息，说明内容简要易读。这才符合现代信息讲 究速度、速效的特点。具有视觉传达的瞬间效果。 造型性。字体设计成功与否，造型因素是决定性的条件。在遵守造型原理与 规则的前提下，追求创新感、亲切感和美感，字体通过其形态特征传达信息的个 性特征，力求做到美的传达，创造美的形象，提高传播效益。 2 1 2 网页文字的编排设计 随着技术的发展，一部分网站的正文页面采用程序生成，这使人们忽略了文 字版面设计的重要性。实际上，一个网站尽管信息量很大，多则有上千张页面， 要做到每个页面都进行独立的用图形排版设计，几乎是不可能实现也无必要的， 基于网页界面视觉艺术元素的分析与研究 但网络上并非都是信息量巨大的网站类型，一些信息量不是很多，页面内容少， 形式单一的网站也很常见。同时，并非所有网站都能依靠图形图像作为补充元素， 这种情况下，页面中的文字整体编排设计就成为使作品突破平庸的唯一武器。 2 1 2 1 网页文字编排方式对易读性的影响 文字编排方式的主要因素是行距。行距的变化对文字的可读性产生很大影响。 其中正文的行距以接近字体尺寸大小的空间设置为宜。文字与行距最合适的比例 为1 0 ：1 2 ，即用字l o 点，则行距1 2 点，这些参数也不是固定不变的，一般使用 1 2 p x 宋体时，我们一般使用1 8 2 0 像素的行距。1 4 p x 宋体通常使用2 2 - 2 4 像素的 行距。适当的行距会形成一条明显的水平方向的空白地带，以引导浏览者的目光， 而行距过宽会使一行文字失去较好的延续性。 2 1 2 2 网页文字编排设计的基本模式 页面里的正文部分是由许多单个文字经过编排组成的群体，要充分发挥这个 群体形状在版面整体布局中的作用。 两端对齐：文字从左端到右端的长度均齐，字群形成方方正正的面，显得端 正、严谨、美观。 居中对齐：在字句相等的情况下，以页面中心为轴线排列，这种编排方式使 文字更加突出，产生对称形式美感。 左对齐或右对齐：左对齐或右对齐使行首或行尾自然形成一条清晰地垂直线， 很容易与图形配合。这种编排方式有松有紧，有虚有实，跳动而飘逸，产生节奏 与韵律的形式美感。左对齐符合人们阅读时的习惯，显得自然；右对齐因不太符 合阅读习惯而较少采用，但显得新颖。 绕图排列：将文字绕图形边缘排列。如果将底图插入文字中，会令人感到融 洽、自然。 2 1 3 网页文字构成的图形特性 从信息化、视觉化、艺术化的视角来审视文字艺术，我们可以领略到它是一种 巨大的生命力和感染力的设计元素，它具有其它设计元素和设计方式所不可替代的 设计效应，不仅可“读”，而且可“看”。文字已成为名副其实的信息传达工具。 文字作为设计元素有着丰富的发展空间，他越来越引起设计师们的兴趣和重视【5 】。 将文字用图形的形式来表达的“图形文字”，或将文字编排成图形的“文字的图形”， 对文字的图形特征的研究，充分发挥文字的表现力愈显重要。我们在尊重文字的信 息传递功能、阅读功能时，也应注意到文字作为一种视觉载体所具有的图形魅力与 震撼力。 文字已不仅是表达概念的符号，而是表现生命的单位。正如德国著名设计家 6 硕十学位论文 冯德里希所理解的那样“文字于人类文化同样古老。它的形象具有魔术般的力量， 人们的视线无法避开那伟大的杰作。它产生对比、紧凑、感觉、情调。活拨和严 肃，明亮和黑暗，安静与运动都是它的特征。在满足它的使用功能的同时，能够 赋予其最崇高的审美需要”【6 】。 对于不同类型的网站在其功能性和审美性上对文字设计要求会有所偏重。对 于艺术性的网站如娱乐性的网站、个人网站、企业形象网站，则以突出各自的个 性和特点为主要目的，重点展示自己的独特之处，特别像企业网站，它要传递给 大家的是它的企业文化，它企业的素养，所以尽可能的突出其企业独特的特点， 其网页中的文字设计表现方式就应该更加艺术化，更加注重于追求文字设计的审 美性。 文字的表现形式具有极大的可塑性，既具有规律性又具有极大的自由度。文 字的自身结构又具有视觉图形的意义，文字的造型变化构成了各种形状和性格。 文字的形态变化和组合方式的变化，使它以点、线、面的形式构成了设计中的最 基本元素。一个字符可作一个独立的单位，进而连为线，也可集结成为一个面。 对文字研究，更充分发挥文字在视觉传达中的作用。利用文字视觉传递、视觉规 律、视知觉感受的生理效应及传统和现代审美趋势等作用，寻求和创造更丰富多 彩的个性化、风格化的视觉语言形式1 7 1 。 2 2 网页界面中的图形元素 人们常把图形喻为一种“世界语”，因为它能普遍为人们所看懂，并不同程度 的了解其中的含义。究其原因在于图形比文字更形象、更具体、更直接，它超越 了地域和国家，无需翻译，却能实现广泛的传播效应【8 】。图形在网页界面中具有 重要作用。图形的出现，打破了网页初期单纯的文字界面，也带来了新的直观表 现形式，图形占据了网页重要视域位置，有的甚至是全部页面。图形往往能引起 人们的注意，并激发阅读兴趣，图形给人的视觉印象优于文字，合理的运用图形， 可以生动直观、形象地表现设计主题。 2 2 1 网页界面图形元素的基本类型 网页界面图形主要分为两种类型。一类是传统图形元素，另一类是图形用户 界面。 传统图形元素多采用摄影图片、手绘插图等多种表现形式构成了网页界面中 的主图与背景图片。如图2 1 ，为服装品牌h a z z y s 的首页截图，设计师将穿着 该品牌服装的模特作为界面主图放置，突出了界面主题，是整个页面的视觉中心， 增强了页面的活力。用户不受文化背景的限制，不用阅读文字就能理解页面的主 题，给人以强烈的视觉信息。如图2 2 ，是一位设计师的个人主页截图，该页面 7 基于阿页界面视姑艺术i 素的分析与研究 采用抽象的手绘插图作为页面背景，以图形为背景能够很好的烘托主题，增强页 面的层次感，而且融入了设计师的个人风格。进入数字化时代以来，平面软件的 强大功能是图像创作获得了新的发展，数字化的处理方法带来了全新的图像视觉 体验，大量具象和抽象形态的图像传递着新时代的平面语汇并成为了网页布局中 重要的组成都分。 融 搽 诌h “以 ，。1 蘑j ” = 一j 。 图21 服装品牌h a z z y s 的首页 来源h t t p ：w w wh a z z y sc o r n 围22 设计师的个人网站 来源h t 坤，w e b d e s l g n e r d 。p o t 与传统的罔形相比图形用户界面中的视觉7 l 索具有变+ i ：性。用户通过闻标、 按钮、和其它的元素与系统进行互动。陶形界面必须对用户的行为作出反应，并 通过视觉信息反馈使用户能够顺利的与系统进行交互。圈形用户界面土要利用了 米自于人们甘常g ：活中的绎验和功能件隐喻来引导计算机用户理解计算机系统中 硕士学位论文 的各种功能。通过效仿人们日常化生活中熟悉的视觉形象和行为来制作图形界面， 易于被用户理解和使用。比如计算机系统中的功能性图标，如文件夹、回收站等 的视觉形象都是依据生活中实际物体的形象抽象出来的。 2 2 2 图形的编排要素 尽管图形的创作具有一定的独立性，而一旦被放置入页面后，图形编排的意 义在于为图形与图形，图形与其它页面元素之间寻找适合的视觉关系。 图形的处理。图像的处理包括了对图像进行色彩、结构、尺寸上的修改和完 善。对于编排设计而言，图像处理的意义在于：统一编排版面中图片的比例关系； 突出处于视觉中心的图像主体；协调图像和其他编排元素之间的风格样式。 图形的组合。图像的组合关系主要包括并列关系、主次关系、和韵律关系。 并列关系是指版面中具有相同信息级别和视觉形态图像组合；主次关系是指版面 中具有不同信息级别和视觉形态的图像组合；韵律关系是指图像之间按照一定的 视觉规律排列形成的重叠、螺旋、发射及渐变等多种组合形式。在多幅图像组合 的页面中，对于图像信息级别和视觉意义的分析有利于寻找图像之间的内在联系， 这种图像之间的组合关系往往也决定了页面整体的结构形态。 图形的构成。无论摄影图片还是创作的图形，图形总是带有创作者的主观意 识所形成的视觉结构。对于编排页面而言，图形本身的构成方式是影响版面整体 布局的重要因素，具有明显结构样式和方向性的图形构成是版面结构的重要提示， 利用这一特征，可以形成图形与页面中其它元素之间整体而有机的关联，从而建 立版面视觉的整体性和趣味性。 2 2 3 数码图形的设计特点 ( 1 ) 传播信息为终极目的，是信息传播时代对设计的基本要求。因此，始终 以信息内容为设计诉求中心的根本原则，设计如果偏离了诉求目标而不能准确传 达信息，甚至完全忽略了信息内容，而使图形根本没有信息价值。既丧失了图形 的实用功能，也丧失了主要的存在价值。 ( 2 ) 图形设计的主要目的是建构能表达信息内容的、视觉形式的、独立完整 而有序的“语句”。现代图形设计充分发挥视觉形象的独特的表现优势和表达能力， 有意识地建构能完整表达信息内容的视觉语句，有效地进行信息传播并兼有审美 价值。 ( 3 ) 现代图形设计的表现形式呈现多样化。数字化设计艺术在艺术与科技之 间任意游离，兼收并蓄对信息传播有用的各种因素，艺术和科技的成就创造了丰 富的视觉表现手段和形式，给视觉传播设计以无穷的启示和诸多可借鉴之处。设 计可以吸纳其中有利于信息传播的各种表现手段和形式，而毫无定式地自由表现。 9 基于网页界面视觉艺术元素的分析与研究 ( 4 ) 以创造性为最高要求，以创意为中心进行设计表现。时代需要创造，一 切没有独创性和新意的设计很难引人注目。如果设计没有引人关注，很难使传达 产生效果【引。 2 2 4 网页界面图形元素的独特性 因为计算机和网络本身的一些特点，网页界面的图形还具有与其它视觉设计 的图形不同的特点：一是图片质量不需要很高，因为网络图片一般只显示于计算 机的显示器上，受显示器最小分辨率的限制，即使图片的分辨率很高，颜色深度 很大，我们的肉眼也无法把它和一副处理过的普通图片区分开类。一般来说，分 辨率7 2 d p i 是大多数图片最佳选择；二是图片要尽量小，网络页面的图片用于网 络的传输，受到带宽的限制，其文件尺寸在一定范围内越小越好，文件越小，下 载的时间就越短，浏览速度也就会越快。 2 3 网页界面中的色彩元素 色彩是人类在地球上任何地方都能够知觉到的，且灵活运用的普遍媒体，它 是文明的基础。色彩是艺术设计中不可或缺的元素。好的色彩设计可给人以强烈 的视觉冲击力和艺术感染力，能引发人们从美学意义上了解和鉴赏其表达的形象 和内容【9 】。网页色彩设计的意义亦是如此。运用不同的色彩，网站的外观风格会 有所不同，网站给人的感觉也不相同。也就是说，色彩作为传达网站形象的首位 视觉要素，会在访问过网站的用户脑中留下长久的印象。即使用户无法清楚地记 住自己访问过的网站的外形特征，至少能够容易地想起网站的色彩。色彩作为最 直接的视觉语言，可以让使用者很容易地联想到与色彩及其相关的视觉要素，比 如“蓝色的背景 ，“红色的导航”等。研究表明，在网页设计中，色彩能提高信息 浏览与分类的速度和准确度。好的色彩设计是网页设计成功的保证。 人常常感受到色彩对自己心理的影响，这些影响总是在不知不觉中发挥作用， 左右我们的情绪。色彩的心理效应发生在不同层次中。尽管色彩本身没有特定的 感情内容，但色彩呈现在人们面前总能引起一系列心理活动。有些属直接的刺激， 有些要通过间接的联想，更高层次则涉及到人的观念、信仰。 2 3 1 色彩的相关理论研究 2 3 1 1 色彩的心理效应 色彩的直接心理效应来自色彩的物理光刺激对人的生理发生的直接影向。心 理学家对此曾做过许多实验。他们发现，在红色环境中，人的脉搏会加快，血压 有所升高，情绪兴奋冲动。而处在蓝色环境中，脉搏会减缓，情绪也较沉静。有 的科学家发现，颜色能影响脑电波，脑电波对红色反应是警觉，对蓝色的反应是 l o 硕十学位论文 放松。自1 9 世纪中叶以后，心理学已从哲学转入科学的范畴，心理学家注重实验 所验证的色彩心理效果。色彩给人的心理感觉主要有冷暖感、轻重感、明快与忧 郁感、兴奋与沉静感、华丽与朴素感、舒适与疲劳感、积极与消极感等等范畴【l0 1 。 2 3 1 2 色彩与联想 人类不同于动物，在动物脑中只存在为生存所需的反射活动，即第一信号系 统，只能进行到条件反射为止。但是人类还存在能用语言来描述、进行逻辑思维 的第二信号系统。由于第二信号系统的存在，人类还能在有限的感性经验中发展 出大量的、丰富的理性联想。色彩也不例外，当我们看色彩的时候，常常回忆过 去的经历，不由自主地把色彩与这些经历相联系。根据色彩的刺激想起与它有关 的事物称为色彩联想。如橙色，我们可能会联想到活力、健康、快乐、华丽、创 造性等。橙色带给人的是朝气活泼，积极向上的感受。橙色的特点是具有容易与 人亲近的亲和力，也是社交文化氛围浓厚的现代社会的时代色彩。红色，我们可 能联想到热情、感动、勇气、力量、能量、温暖、开放等。红色给人的印象具有 强烈的力量，给人温暖的感觉；同时又包含着恐怖和危险性。黄色，我们可能联 想到快乐、轻快、可爱、智慧、幸福、和平、明朗、希望；同时也可能会联想到 嫉妒、偏见、破坏、神经质。我们可以通过色彩的恰当使用，把网页的思想传达 给浏览者并使信息交流活动得以实现，反之，如果使用方法不当，产生不良的联 想就会带来相反的效果。因此发挥色彩联想，切实了解色彩联想的一般倾向是不 可忽视的问题。 2 3 1 3 色彩与象征 随着色彩联想的社会化，色彩日益成为是有某种含义的象征。人们的联想内 容也随之具体事物为抽象、情绪等意境。色彩成为具有普遍意义的某种象征后， 便会给人相同的心像。不过色彩的象征含义也有局限性，它受不同国度的传统文 化的影响。所以，同一种色彩往往包含数种迥然不同的含义与象征。如在中国， 红色与所联想到的革命已被固定为一种社会观念，红色则成为了革命的象征，革 命则成了红色的象征意义。一旦形成了象征性之后，它就被纳入了这一特定的文 化体系，成为社会约定俗成性的符号、一种语言。当你接触这一符号时不论自身 有何感想，只要你生活在这一文化体系中，这种象征语意就成为你必须接受、无 法摆脱的观念。或许最初它始自某一联想，但它与一般联想完全不同，很少有个 体的分散性。色彩象征语义在它所属的文化体系中已成为一种必须遵循的、约定 俗称的社会性制约或规则】。 2 3 1 4 色彩与记忆 色彩记忆是大脑对过去视觉经验中发生过的色彩的反映。色彩刺激作用停止 基于网页界面视觉艺术元素的分析与研究 以后，它的影响并不立刻消失，可以形成视觉后像，这种视觉后像是最直接的原 始记忆，带有具体形象性的色彩可以长期保留在记忆中。人对色彩的记忆，由于 年龄、性别、个性、教育等不同，差别也较大。一般情况下，暖色系要比冷色的 色彩记忆性强，高纯度的色彩记忆率高，华丽的色调比朴素的色调易于唤起大脑 中的记忆。色彩单纯形态简单的比色彩多而形态复杂的容易记忆。 2 3 2 色彩在网页设计中的作用 2 3 2 1 吸引视线 有魅力，新颖，亮丽，刺激等，这些印象能够将人的视线吸引到对象上，设 计师最重要的任务就是要将人们的视线快速吸引到设计作品上。一般而言，人们 对于大型设计作品的视觉要素的认知顺序依次为“色彩一图画一图案一标志一文 宝，【1 2 】 jo 可以说，色彩就是最先吸引人们视线的特殊视觉要素。比如说，超市的货架 上最醒目的是黄色包装的商品，这是因为黄色具有醒目的膨胀效果，同时也说明 了色彩能最快吸引人们的视线。当然，网页设计与吸引消费者注意激发购买欲望 的商品包装设计有很大区别，与最快地吸引用户的视线相比，网页设计的重点更 要放在提供用户满意的用户界面及优质的内容，让用户关注网站。 对于网页设计来说，色彩是最先吸引使用者视线的要素，因此，必须选择适 合网站理念的色彩，确定一个网页中色彩的使用范围和比例，并策划色彩具有的 实现集中效果，这也是吸引用户视线的积极方法。 2 3 2 2 诱导视线 在使用者随时都可能离开的因特网环境里，吸引用户的视线并诱导其不改变 视线就显得非常重要。 做网页设计要掌握网页内容的优先顺序。首先要根据内容的重要性，按照确 定第一重要内容、第二重要内容、第三重要内容、第四重要内容的顺序，然后根 据优先顺序突出重要内容诱导用户视线；在内容优先顺序的强调方法中，最好的 视觉效果就是色彩。通过调节色彩饱和度的强弱、基于亮度的明亮和黑暗，如图 2 3 所示，可以突出重要内容，按优先顺序诱导用户视线。当然，对于静止的网 页而言，相比色彩的视线集中效果具有动态效果的动态对象更能吸引或诱导者使 用者的视线。 1 2 图23 通过色彩饱和度诱导使用者视线 来源h t t p ：w w wh i ec ok r 动态效果更能 j 色的诱导用户的视线，尤其是f l a s h 动画影响，他不仅能吸 引使用者的视线还能诱导使用者作出反应；在f l a s h 动画影响播放过程中，使 用者完全处于入迷的状态，很自然地作出各种反应。不过，对于f l a s h 动画影像 而言，色彩也是非常重要的构成要素；使用者在浏览丰富精彩的f l a s h 动画影像 时，色彩仍然起到首先l 吸引使用者视线的效果；同时，在动画影像捅放刚歇的静 i t 画面里，最能有效地顺次诱导使用青视线、表现内同信息重要性的也是色彩。 2323 记忆视线所捕捉的画面 在大量的视觉信息中，使用者容易记忆的是那些容易吸引视线的对象。吸引 视线即印象深刻的意思，相比一般而言比较特别的画面会给用户留下较深的印象。 网页中最先吸引用户视线的色彩所起的作川就是讣用户记住网站印象深刻的画 面。 实际上，浏览过某个网站之后，回想一下那个网站的外观，可能大家最先想到 的是红色的导航和黑色的背景及框架等网站的主色调画面。可以说，即使是非常 仔细地浏览了网站，也很难记住网站的网页布局以及形态。相反，却能容易地记住 视觉要素中最先被感知的色彩。 网站的色彩不仅受能够最先吸引用户的视线，还要成为经得起回忆的刚站代 表彤苏，因此，必须通过设计理念的开发慎重地策划色彩来表现视觉形象。 233 网页色彩的基本设计原则 233l 与网站主题相协调 不同的色彩有不同的象征意义，给人的心理感受也不同。网页的色彩设计要有 针对性，应体现出自身的特色。如政府部门的划贞风格应有庄重感，呈现宁静、严 肃、高雅的氛围，以冷色啕为宜电f 商务类删负町以通过红色、橙色、黄色等暖 色调的搭配，呈现温馨、和煦、热情的氛围：蓝色给人的心理印琢足崇高、深远、 广大而睿钾，为高科技企业网站所钟爱保健炎的刚站不宜人面积地采用刺激性强 基于网页界而视觉艺术元素的分析与研究 的大红、黄和橙等色彩，因为它们易造成人们心理上的紧张感和恐慌感，而绿色象 征生命与希望，给人健康、安全的感觉，适宜作为保健类网页的主调色【i4 1 。 2 3 3 2 个性鲜明 在网站云集的互联网上，网页的色彩只有与众不同、有自己独特的风格，才能 显得个性鲜明，给浏览者留下深刻的印象。尤其在同类网站中，网页的色彩不但要 符合此类网站的用色特点，还要有其独到之处。网页设计是一种艺术活动，只有按 照内容决定形式的原则，大胆进行艺术创新，才能设计出既符合网站主题，又有一 定艺术特色，风格独特、个性鲜明的网页。 2 3 3 3 与浏览者的审美情趣相统一 由于地域、民族、宗教信仰、生活环境、年龄、性别、文化修养等存在差异， 人们的审美角度、审美能力也有很大差别。不同的浏览者对色彩的联想和理解不 会相同，对色彩的喜好也不一样。网页设计师要尽可能地采用符合浏览者审美倾向 的色彩，以使其产生共鸣。如针对儿童喜欢对比强烈、个性鲜明的纯色，儿童网站 应采用红、黄、蓝、绿等对比鲜明的色彩，以营造活泼、愉快而富有童趣的视觉效 果等。 设计师要适当关注流行色的发展。流行色是特定时期内社会风行的时髦色彩， 是一种时尚色、鲜活色，具有很强的诱惑力和冲击力。若能抓住浏览者紧跟潮流、 追赶时尚的心理，适时地选用流行色作为网页的主色调，必定能产生良好的传播效 果。 2 3 3 4 便于阅读识别 人们从物理、生理、心理、化学等多角度对色彩进行研究后发现，色彩的美 存在于各色彩的相互关系中，这种相互关系就是色彩的对比与和谐。色彩的对比包 括明度对比、纯度对比和色相对比。最能引人注意也是运用得最为普遍的色彩对 比，是色相对比中的互补色或冷暖色的对比。色彩的和谐是指色彩在对比关系中能 给人造成既鲜明又协调的视觉感受。 网页色彩设计还要注意文字与背景色彩的明暗对比，文本要易读，图像要易于 识别，以使人们在浏览大量网页信息的时候，减少屏幕刺激，减轻视觉疲劳。 2 3 3 5 有一定的延续性 网页色彩要保持用色的延续性。虽然网页的信息会不断更新，网页的版式也 会定期修改，但网页色彩的基调和风格一旦形成后，不宜大幅或频繁地改换，而应 保持一定的延续性，这样才能使浏览者迅速识别且印象深刻【1 5 】。但为了保持新鲜 感、提高吸引力，也应小范围地对网页色彩的明度、纯度进行适当的调整和变换。 1 4 硕士学位论文 色彩作为网页设计中一个重要而独特的设计元素，应该受到网页设计师的足 够重视。色彩设计是网页设计的灵魂，网页设计师要以科学的色彩理论为指导，把 美学规律同现代网页设计技术结合起来，以敏锐的色彩感觉去发现，以高超的配色 技巧去完成，在创造出更时尚、更鲜活、更具吸引力的网页色彩作品的同时，也不 断引导和提高大众的色彩审美情趣和能力。 2 4 网页界面中的动态效果 以静态的文本和图像为主的网页设计运用g i f 动画可以表现部分的视线集中 效果，近来还产生了以基于f l a s h 的运动动画( m o t i o n ) 为首的诱导使用者反应的 多样化交互式设计，丰富多样的动态效果( d y n a m i ce f f e c t ) 逐渐出现。运动动画 的表现本身就是设计时间和空间，这已经超出了静态的范围，但是，在以计算机 和网络为基础的数码环境里，新媒体具有的网络双向互动特点极大地支持了新环 境下的交互设计环境。 但是，多样化的动态效果至今人面临着网络传输速度的限制，在网页设计师 中的推广运用率不高。另外大多数客户认为绚丽的运动动画及新颖的交互设计可 能对于整个网站是一中负担，这也为网页设计师提出了一个不容忽视的制约条件， 就是网页设计的标准要建立在面向使用者的使用性基础之上。 根据不同的交互表现方法可以将动态效果分为三个类型：交互式导航、故事 叙述、通过脚本建立的使用者互动【”】。 2 4 1 交互式导航 现在，使用者仍然是通过单纯的鼠标点击和键盘操作进行网上冲浪，浏览网 页，但是使用者选择菜单的导航方式非常丰富多样。虽然传统的导航设计在使用 性方面还占有优势，但是追求新颖互动的导航方式正式得到广泛的开发和运用。 交互导航不仅仅是单纯的鼠标移动效果，它能够带给人新鲜感和愉悦感，但 是，完全忽视原有使用性的交互式导航会造成使用者的不便，也需要使用者熟悉 和学习【1 7 】。有时候，使用者必须寻找隐藏的导航才能看到所有内容，或必须捕捉 住动态移动、运动的导航，也就是说必须完全解决交互式难题才能看到下面的内 容，使用者的参与就成了交互式导航的必要条件，在这种情况下，必须有诱导使 用者互动的计划。如图2 4 所示，该网站加载时，蓝色背景上3 d 制作的人低着头， 加载结束后，会向j 下面抬起头，