（设计艺术学专业论文）图标在网页设计中的应用与设计研究.pdf

论文题目：图标在网页设计中的应用与设 十研究 专业：装潢 硕士生：吴杰 指导教师：郭线庐 摘要 网页图标作为网站的一个组成部分，承载着其自身的功能属性，扮演着嗍站所有者 与浏览者之问相互传递信息的枢纽角色。网页图标的设计，既包含在网页界面的整体设 计之中，又有其独特的设计思维和设计规律；既要与页面上的其他部分达到完美的交融 统一、使页两视觉感受整体化，又有着其设计上自身的特殊要求。在网络诞生之初，对 于网页图标的研究总是被包含在对网页设计豹整体研究之中，没有独立出来。但随着网 络的不断发展，网页国标列于优化网站功能方面的重要意义逐渐体现出来，应当被设计 界所关注，使其从早先隐含在网页设计中冉勺非独立状态，演变为今天成为具有独札意义 的专项研究。本文从研究网络图标的功能牲、艺术性等属性入手，对其进行多角度的分 类分析，研究其创作规律和对其进行设计上的延伸探讨，提出网页图标在视觉审美上能 进行多层次、多角度冉设计的可能性。 本文从对网负设计的基本概述开始论述，将应用于网史设计中蚓标的概念加以清晰化， 并在第二章中对网页翱标的技术属性、功能属性和艺术属性进行r 较为系统的阐述。，第 三章对虚拟世晃网页设计中的图标与现实世界中公共识别系统的符号进行较全面的比 较，对比说明了两者之间的共性和差异性。在本文论述的重点部分第四章和第五章中， 先阻艺术设计学的方法，在对大量图例进行分类归纳的基础上，对网页设计中的图标设 计做了规律性分析，包括它的基本设计思路、设计发展规律以及设计上的局限性和延展 性；最后一章是在前四章论述的基础上，对网页中图标设计进行延伸探讨，提出网页中 图标设计可以在满足功能属性的前提下在视觉审美上进行艺术性的再设计。 关键词：图标，设计，功能，审美性，民族性 s u b j e c t ：t h er e s e a r c ho fi c o nd e s i g na n di c o na p p l i c a t i o ni nw e bd e s i g n s p e c i a l t y ：g r a p h i cd e s i g n n a m e ：j i e w u i n s t i u c t o r ：x i a n - l ug u o a b s t r a c t a s p a r to f w e b s i t e s ，w e bp a g ei c o n sb e a rt h e i ro w nf u n c t i o n i n gp r o p e r t i e s , a n da c ta sh i n g e s f o ri n f o r m a t i o ne x c h a n g ep u r p o s eb e t w e e nw e bu s e r sa n dw e bo w n e r s d e s i g no f t h ei c o n si s i n v o l v e db o t hi nt h cw h o l cw c bp a g ed e s i g na n dh a si t so w nd e s i g ns t r a t e g i e sa n dd e s i g nr u l e s ； i tn e e d st ob em e r g i n gp e r f e c t l y 、撕t l lo t h e rp a n so fw e bp a g e si no r d e rt op r o v i d ev i s u a l n t e g r a l i t yt ot h ep a g e ，a n dh a sp a r t i c u l a rr e q u e s t sb yi t so w l d e s i g n o nt h eb i r t ho fw e b s i t e , r e s e a r c h e so i lw e bi c o n sw e r ea l w a y sb e i n gd o n ew h i l ed o i n gr e s e a r c h i n go nw h o l ew e b p a g e s r a t h e rt h a n 朗i n d e p e n d e n ts u b j e c t h o w e v e r , w h i l et h ed e v e l o p i n go f t h ei n t c m e t , w e b i c o n sc o n t r i b u t i o no no p t i m i z i n gw e b s i t e sf u n c t i o n si sm o r eo b v i o u sa n dn o t i c e a b l e ，w l d c h s h o u l dc a l la t t e n t i o n sf r o md e s i g n e r s ，a n dm a k e si ta ni n d e p e n d e n ts p e c i f i cs u b j e c l l o o ki n t o t h i sp a p e rf r o mf u n c t i o n a l i t ya n da r t i s t r yo f w e bi c o n s , i ta n a l y s e sa n dr e s e a r c h e so ni t sd e s i g n r u l e sf r o mnf e wa s p e c t sa n dh a sa ne x t e n s i o nd i s c u s s i o n , s u g g e s t st h ep o s s i b i l i t yo f m u l t i - l e v e l ，m u l t i - a n g l er e d e s i g n o nw e b p a g ev i s u a la e s t h e t i c s s t a r tw i t l lt h ep r i n c i p t ec o n c e p to fw e bp a g ed e s i g n t h i sp a p e rc l a r i f i e st h ec o n c e p to fi c o n s w h i c hi sa p p l i e d0 1 2w e bd e s i g n t h es e c o n dc h a p t e rh a sas y s t e m a t i c a le x p l a n a t i o no nw e b i c o n st e c h n i c a l f u n e t i o m n ga n da r t i s t i cp r o p e r t i e s t h en l i r dc h a p t e rp r e c e d e sac o m p l e t e c o m p a r i s o nb c l w c c ni c o n so fw e bd e s i g ni nv i r t u a lw o r l da n ds y m b o l su s e di np u b l i c r e c o g n i t i o ns y s t e m si nr e a lw o r d , w h i c hs t a t e st h ec o m l n o l la n dd i f f e r e n c e so f t h e m c h a p t e r 4a n dc h a p t e r5a l et h em a i nd i s c u s s i o n t h e ye m p l o yd e s i g n i n ga r tm e t h o d o l o g i e st oh a k ea d i s c i p l i n a r ya n a l y s i so ni c o nd e s i g nd w e l li nw e bd e s i g nb a s e do nc a t e g o r i z i n gm a s s i v e s a m p l e s ，i n c l u d i n gp r i m a r yd e s i g nc o n s i d e r a t i o n s ，d e s i g nr o u t i n e sa n dd e s i g nl i m i t a t i o n sa n d e x t e n s i o n s t h el a s tc h a p t e rd i s c u s s e sc x t c u s i o m l l y0 1 1w e bi c o nd e s i g nf o l l o w i n ga b o v e c h a p t e r s i tb r i n g so u tt h e i d e ao fa r t i s t r y r e d e s i g n i n go nv i s u a la e s t h e t i c s ，p r o v i d e d f u n c t i o n a t i t yi ni c o nd e s i g ni ss a t i s f i e & k e y w o r d s ：i c o n , d e s i g n , f u n c t i o n s , a e s t h e t i c , r a t i o n a l 引言 引言 2 0 世纪末以来，互联嚼络带着一种具有强制性的影响力闯入到人类的日常生活巾， 它的革命性信息交流方式使很多人趋之若鹜，不带任何疑问地接受了它。在互联网的世 界里，一个几周前还另人兴奋的新事物，却可以在几周后变成“船货”。人与人之间的 交流方式也在互联网络的出现下产生了戏剧性的变化。时至今日，网络在我们生活中的 几乎每个领域中都扮演着越来越重要的角色。通过网络，人类在网站上获取信息的速度 和数量都大幅度地提升了，获取信息的方式也打破了传统上时何和空间的限制，测览者 可以快捷任意地获得更多他们所需要的信息和服务。对于绝大多数的网络用户而言，要 参与到国际互联网络当中去，进入网站浏览网页是最直接的方式。在线浏览资料、收集 信息、网络游戏、网络教育、在线消费以及网上购物与支付等等，所有的这些网络行为 要成为现实，必须依靠众多计算机的连接，并在嘲络环境中诞生服务终端嘲站，而 州站的具体表现形式，就是嗍页一种通过计算机，连接人与人、人与嘲络媒体，借 助百联网络而存在、直观可视的界面形式。通过浏览、点击网页，人与人、人与网络媒 体。快速有效地交流推动网络经济不断创造着增长奇迹。 伴随着浏览者数量的激增，浏览者的种类也由比较单一的理工科人群发展到有着不 同背景的各类人群。而人们对网络的越来越依赖，使得他们对网站各个组成元素设计水 平的期望值不断增高，要求更加苛刻。人们对于网页设计的认识，从最初认为网页存在 就仅仅是作为互联网络上单纯传递信息的介质，发展到今天对其功能和审美性等诸多方 面的高要求。那些“机械”、“呆板”的网页界岔显然与时代发展、人们需求大相径庭。这 也就为网页的设计者们提出了课题，使他们在设计网页时，对组成网页的各种元素，诸 如图标、文字、颜色、版式等等有更深层次的思考、研究和更多样的设计手段。就网页 组成元素之一的网页图标而言，它在国内网页上设计应用的现状足非常单一的，很多图 标被无节制地套用和滥用，在认识上与文字链接混为一谈，功能属性不清，没有自身的 设计标准。再加上国内网页设计成品人多不规范，片面强调信息量，小广告、弹出窗口 很多，使那些原奉有价值的图标被淹没在众多“网页设计素材”中。网页设计者们也没 有完全成熟，有些设计者或者忽视网页中图标给测览者带来的操作和视觉审美上的双重 体验，或者只是单纯地把图标当作页面上的装饰元素而已。事实上，网页图标本身所具 有的特殊功能性和艺术属性，影响着它在网页中所产生的前后链接关系和用户体验效 粜，是网页设计中的重要部分。 阿页设计发圈标的基本概念 l 网页设计及图标的基本概念 1 1 网页设计的基本概述 网页设计足设计领域的一个新兴的分支，它以新的媒体为基础，充满令人兴奋的挑 战。n i c o m a c d o n a l d 在他的书网页设计是什么中描述网页设计是作为一项能带来 利益效应的服务而提供给它的客户的，它是一系列解决问题的方法和程序，在一定程度 上网页设计的成功与否是可测量的。基本上讲，网页设计是在人与技术之间创造一个 有效的界面 0 1 ，它是与使用者产生交互作用的一个结果。网页设计是在网络页面中为 了一定的目的而进行的对内容与图像的组织过程，这个目的可以是单纯的传递信息或者 是对浏览者进行有偿的信息销售与服务。 嘲页设计通常采用的是图像性的用户界面( g u i ，g r a p h i c a lu s e ri n t e r f a c e ) 设计手 法，构成界面的元素主要有t 窗口( w i n d o w ) 、菜单( m e n u ) 、表单( f o r m ) 和对话框( d i a l o g b o x ) 。“图像性的用户界面( g u i ，g r a p h i c a lu s e ri n t e r f a c e ) ，指的是基于| 鳘i 形( 图标、 幽像和菜单) 替代文字的用户界面，它的输入装置更多的是运用鼠标代替键盘，从而能 让更多的用户参与浏览。”c 0 2 网页能够给浏览者带来最直接的视觉感受，也是能否吸引浏览者继续深入浏览该网 页所属网站的关键。网页晃面的存在是连接着互联网络然后通过电脑程序和电脑硬件上 复杂的电路中的点和位元组完成交互作用。任意的敲打键盘或者点击鼠标，连接的是对 使用者来说既看不见且未知的程序。在一定程度上，界面能转化表现使用者的行为， 而存在于界面中的各个元素都应该帮助用户更好地使用互联网络，成功地控制计算机并 进行在线浏览。以企业网站为例，网页设计作为企业在网络媒体上的。门面”，与传统 商品在市场上的销售是不一样的。当测览者在使用网页的时候感觉它是不容易被学习或 者掌握，或者很难通过对界面的操作而在网站上获取信息时，即使这个网站背后的运营 者是一家非常好的公司，也不能成功地进行在线商业的运做。所以一个好的网站界面设 计能使这个网站很容易地被了解，使用并接受。 1 。2 网页设计中图标的概念 在网页的浏览过程中，浏览者很容易“迷路”，不知道自己处在什么位置，已看过 了哪些内容，下一步该看哪罩。一个网站的贞面设计应尽可能地做到不斟扰浏览者，使 浏览者能轻松愉快地到达目的地。只有这样才能把发布的信息最有效地传达给浏览者。 图标在喇页中的使用可以作为呈现给浏览者的有效的方式之一，引导浏览者以最方便、 4 h 页设计发圈标的肇奉概念 最快捷的方式找到他想要的东西。使浏览者时刻知道自己在什么地方，怎么完成下一个 浏览任务。图标在网页设计，或者说是w e b 图形界面中，是组成菜单和表单的重要组成 部分，却也是容易产生混淆和被忽视的一个设计元素，它在一定程度上可以成为网站视 觉语言成功的个重要元素。 1 2 i 图标的概念 图标在一般的定义上，它是一个图像，一种表示法；有时 它可以是重要的，并且具有持久效用的一个符号。在计算机科 学中，图标指的是显示在屏幕上的图解符号，它可以指示或指 代一个程序、一个命令、数据文件、窗口、选项或者是一个概 念。 c 0 3 点击图标可以产生不同的行为结果，好比是打开一 个文件或者执行一个程序。在绝大多数情况下，图标所采用的 图像是与它需要表现项目的功能相关。举例来说，一个在嘲页 卜的图标，它的附加功能是进行电子邮件程序，那么很有可能 被用来作为图标的是一个信封的图像。图标同时也应用于电脑 的开始菜单以及各个其他的地方，它有着相当广泛的应用范 围。特别是在我们电脑所使用的w i n d o w s9 5 9 8 2 0 0 0 x p 系统 中，都可以随时看到图标的应用。比如，电脑桌面上的浏览器 删1 。1 图标，以及其他链接各个程序的图标，( 见图i i ) 1 2 2 网站图标的定义 在本论文巾，对图标的研究主要是考虑它在互联网络当巾的应用。因此，有必要对 应用于互联网络当巾的图标加以特别的说明。在互联网的网 络晃面( 即网页) 中，图标( i c o n ) 的设计基于隐喻和模拟 的思路。这样可以令使用者很容易产生联想，提高图标的使 用效率。网络上运用的图标与非网络上的一些图标一样，都 是用于传达信息的小型图示符号。比如说，在汽车的仪表盘 图1 2 a 和1 2 b 上，就有闪光的加油泵图标用来指示油量偏低，提示司机需 不论是存汽车的仪 要给汽车加油了( 图1 2 a ) 。在网页中，我们同样可以发现有 表盘还是网页上，罔标是 打印机样式的图标出现，用来指示“打印此页面一( 图1 2 b ) 。 与系统或者程序进行信 在比如一个“喇叭一图标，可以实现声音播放；一个“信封一 息交流的小型视觉符号 图标，可以激活电子邮件。这些图标都是体积小并有图示性质的，同时，当它们m 现时， 是能够传达系统信息的。以卜：的两个例子，都是以很形象化的图形作为图标的表现，在 5 删页设计发圈标的基本概念 网页上有大量这样的图形元素出现，包括，照片、小型影像、标志、各种设计元素、艺 术化的文宁以及图标等等。而图标所表现的行为或者它所代表的所属网站的状况又让图 标有别于其他的图像。通过i m a g em a p 建立多项热区，直观形象地实现超链接的形式。 有另外的说法认为：图标受人的行为支持，同时再现电脑的信息反馈状况【0 4 】。虽然 单纯的图片、艺术字、小的图片点击处或者其他的图像元素同样可以传递信息( 比如说， 指示) ，但足它们却不具备图标的这两个功能。用花朵来代表一个网页 中的要点，可能对一些特别的观众对象产生亲和力，但是如果它是不能 够被点击的或者不能表现系统的状况，那么它只是单纯的美学意义上的 图像( i m a g e ) 而不是图标( i c o n ) 。反过来说，我可以用两个常见的例 子说明图像作为视觉语言的同时又传递网站所提供的某些功能：一个小 的信封的图像可能传达“给我们发信”或者“邮寄这篇文章”的意思；一个蓝色的圆圈 并带有i 在中间的图像可能意味着。点击这里获得信息”或者“帮助”。( 图1 3 ) 另外。在w e b 界面中图标的表现方式同时是组成表单( f o r m ) 的重要元素之一： 按钮。按钮是激活事件动作的界面对象。在网页中使用的按钮有三种：1 提交按钮，指的 是向服务器提交链接或者完成任务提交的元素：2 重置按钮，提供的功能是把已经完成 的指令重新恢复为初始状态；3 命令按钮，与上两种按钮的功能由系统赋予的不同，命 令按钮需要自己编写相应的脚本代码。因此功能更强大，使用也更灵活。 0 2 6 州页设计中圈标的性质分析 2 网页设计中图标的性质分析 2 1 概述及图标指令性质的分类 图标出现在网页中的形式可以足单纯的具有指示性质的 图示性图像或者是有文字的标签标题。在图标中加入具有描 述性质的标签能够帮助浏览者学习图标所代表的意思 0 5 。 在某些情况下，有标题存在的图标相对于单纯图像性的图标 对潜在的浏览者可能具有更大的意义。 网页中的图标可以由其代表的指令类型可加以类别。一、 导航性质的图标，这类图标可以指引浏览者如何进入网站的 小同区域举例米说，超市杂货车的圈标( 见图2 1 ) 就具有 一个儿乎成为所有嘲民都能明白的隐喻：代表从先前的恻络 购买消费进入到财务处理上( 即通常说的“购买结算”，好比 是网站“收银台”的位置) 。二、功能性质的j 鲞| 标，这类图标 可以表现一项功能，或者是浏览者可以在网站中完成的行为。 图2 t 这个超市购物车的 图标是一个导航性质图 标它可以暗示浏览者点 击进入到一个电子商务 的购炙消费页面。 图1 2 b 就是一个功能性质的图标，它暗示浏览者能够打印正在浏览的页面。三、代表 网站状况的图标，这类图标与系统得某些方面相沟通，但是却不能够象征网站所提供的 服务或者产品，也不代表网站的某些功能。比如我们在见到的挂锁的图标( 见图2 2 ) ， 它通常用于表现。安全的”范围或者是直接指示“安全”。另一类有指示状况性质的图 标，比如在e - b a y 或者是在“掏宝网”中出现的数宁和有阴影的五角 星，这样的图标代表的是由网站巾其他用户群对特定卖家的评估出来 的。卖家信誉度”。四、内容性质的图标，这类图标往往传达一些网 站内容的信息。比如，用小鸡连接到产品，这个图标就象征着它所 连接的产品是新品；用一些特定的图像作为暗示“需要记得的重要信 息”的图标。以下将对网页中图标的基本属性进行具体分析。 。 2 2 网页设计中图标设计的技术属性及实现手段 早期的网站链接制作中，技术人员的主要注意力放在应用编写程序语言的方法实现 链接的功能属性上，而图标只作为一个酱通符号元素出现，其本身的设计往往被忽略， 表现为视觉形式简单刻板，缺乏设计感。而且如果要编程序完成各项功能赳异图标的制 作，尤疑是一个十分繁重的工作。随着图标设计的意义和重要性逐渐被人们所认知，以 7 阿页设计中圈标的性质分析 及软件开发水平的提高，一些专门为图标制作所研发的工具软件，在设计者中问正在被 越来越广泛和频繁的运用，基本上都能实现上述的功能，并且能制作出相当专业和个性 化的图标。这些工具为制作图标提供了不同风格的制作方法。目前流行的图标设计软件 组合是a d o b e 公司的一系列绘图软件：i l l u s t r a t o r ，c o r dd r a w 和p h o t o s h o p 。在众多的 图形图像的工具软件中，有很多是专门为图标设计所丌发的，i c o n c o o le d i t o r ，a x i a l i s i c o n w o r k s h o p ， a d o b ei m a g e r e a d ，f i r e w o r k s 等等都属于这类软件下面介绍几种目前 最为流行的软件图标制作工具，见表2 1 l c o n w o r k s h o p 5 0 简体中史企业版 可自由编辑创作各种x p 样式图标和在各种图标义件问 互相转换。 i c a m e d i t p r o 支持多种文件格式，也可用于编辑2 5 6 色的图标和制作 3 d 罔标。 i c o n x pv 2 o 能制作编辑常见的标准图标，并全面兼容w i n d o w s x p 。 s p t m e 2 2 中文特别版 一个可以把图像放大而没有锯齿的工具。 m i c r o m g e l o5 ，5 7 汉化版 提供功能强大的图标、光标制作和替换套装工具。 o b j e e t o o e k 0 s s 简体中文版 模拟并实现了m e e o s xd o c k 软件的一些功能。它充分 利用了w m 2 k 和w i n x p 系统的可视化技术，使电脑桌 面展现m a c 的风采。 c r y s t a lb u t t o n 水晶按钮21 快速创建出水晶网页按钮的软什。 表格来源：h t t p ：w n v x l l , e n n 9 8 3 c 1 2 雌 0 6 我们可以在网络上轻易地搜索到很多相关软件的资料和使用方法。它们所各自拥有 的特殊功能为制作图标提供了方便。伴随软件技术的更新，将会出现更多的便于设计应 用，并且有着更强大功能图标设计类专业软件。 2 3 网页设计中图标设计的功能属性 广义地讲，网页中倒标设计的成功与否丰要取决十三个因素：图标本身所具有的特 征；图标所在网贝状况；罔标出现时给予用户认知感、审美感和操作体验。而这i 个凶 素就是网标的内涵和功能组成部分，是罔标意义的综合表现。 0 7 而网标所具有的特征 中，完成它的功能属性是图标本质的要求，也是最终实现图标意义的个先决条件。只 8 嘲页设计中图标的性质分析 有在保证图标功能性的基础之上，对图标的再设计才能使图标在网站中的运用就能发挥 其最大的效用。就图标的功能属性而言，它包括图标的可识别性、交互性、通用性。 2 3 1 图标的可识别性 图标的可识别性主要还足从其视觉性上加以定义的，它包含了图标的易读性、颜色、 辨别力、熟悉性和具体性这几个体现点。图标的可识别性是图标语言的生命，缺乏可识 别性的图标在网页中不具备生存力，也完全失去了图标应当具有的意义。 ( 1 ) 图标易读性是指图标能被辨别及容易看到的能力。在译码或理解发生之前， 图标必须是可见的。受显示器性能，周围环境光线，背景图像或者噪声的影响，图标可 能不容易被看到。用大图形和可操作的全局样本图形。视者可以用空间频率分析来区分 相似的图标。 0 8 出于大图和结构的需要，简易成为一个重要因素。有着精美线条和充 实的内容的华丽图标，在有些情况下是难以辨识的。此外，复杂的或者精细的图标要消 耗用户端更长的处理时间 0 9 j ，从而减慢他们使用这个圈标的能力。 ( 2 ) 颜色是i 玺i 标的一个重要元素，比起黑向或只有灰度的图标，色彩带来许多优 点，比如对l 璺| 标的组织分类，强调重点和吸引注意力，快速查找，辅助识别，及展示数 量或级别 1 0 。但是，如果图标的颜色与网站背景相似的话，会影响图标的易读性。因 此，推荐初始设计图标时使用黑白色，以便把重点放在形状和使易读性最大化。另外， 使用对比度来区分前景与背景比用颜色来区分更能保证易读性。 ( 3 ) 辨别力是和易读性在区分不同图标的能力上是 相关的 0 8 。图标间区别或区分的能力有助于增强可用 性，理解。学习和减少错误率。例如，用户能够在与众 不同的图标问比相似的图标问更快地发现目标图标 0 9 。虽然创造细微区别的图标是可能的，但是较大 的变化可以提高鉴别力( 见图2 3 ) 。设计丌发人员最后 需要考虑的是人能够轻易地区别大量的字母与数字信 息；例如，思考这篇文章的所有字。但对于形状和颜色 的区别就很有限。例如，人只能够区别2 到3 个亮度级， 6 到8 种颜色，l o 到2 0 种几何图形 i l l 。即使这样，区 别力仍是图标的重要特征，图标感知受阻于细微的图像 质量的衰退引起的混乱。 图标是容易相互区别的，但如果h j 户不能通过对图 标的熟悉程度或者操作经验来明白图标含义的话，图标 陶2 3 由于罔中a 和b 的进出箭头很小， 所以可能导致这两个图标不容易 被区别；但是图中c 和d 的大箭头 却能令对方很容易被区别出来，即 使是在同时出现的情况下。 在概念卜会很难区分 1 2 。冈此，对图标熟练地操作也是成功地识别图标的重要冈素。 9 埘页设计中图标的性质分析 ( 4 ) 熟悉性 熟悉性是图标被浏览者熟识的程度。浏览者可能熟悉， 也可能不熟悉某图标代表的对象和行为，或者图标和指示物 之间的关系。熟悉性是图标和浏览者思想之间的桥梁，因此 很重要。为网页浏览者所熟悉的图标和他们的指示物要比不 为人熟悉的图标更能发挥作用。 因此，与熟悉性相关的两个问题是：人对某个图标有多 熟悉与人对此图标所代表的信息和程序的熟悉程度。不为人 熟识的图标要求测览者学习相关的含义：非常陌生的图标则 需要更为大量的学习 1 z 。熟悉性也是决定图标劣于、，等于 还是优于义字命令的重要因素。 图24 熟悉性不仅取决于图标和代表物之间的关系，也取决于 由于图标设计采用的相 相似圈标的熟悉性。例如，图2 1 的购物车标志与其他儿个 关联的方式，使得对于熟 州卜找到的购物车图杯相似( 见图2 4 ) 用购物车来暗喻迸 悉购物车的浏览者而言， 行存线购买已经成为网上的标准( 虽然有些网站用书包等蚓 在遇到类似于图3 1 的图 怀， 标时能很容易的理解与 ( 5 ) 具体性是一个与罔标描述的事物或行为相关联的概 掌握它们。 念。与被描述代表物非常相似的图标就是具有具体性质的图 标。例如，一个用笑脸和哭脸来代表剧院的图标就比较具体，因为这两张脸的形象经常 和戏剧联系在一起。具体的图标可以被很快的学到，适合用于不经常被访问 的网站。外观上的显而易见是具体性的一条原则。一般来讲，具体的图标可 以明显地被发现，但也有例外。例如，代表删除文件的金属垃圾桶的图标是 源于美国的垃圾桶( 见图2 5 ) ，而其他国家的垃圾桶就未必采用同样的造型， 例如是泰国就采用竹筐作为垃圾桶 1 3 ；而代表返回主页的图标是一个在任 圉3 何文化中都非典型的房了( 见图2 6 ) 。尽管有这些文化上或者社会习俗上的 警告，用熟悉、标准化的图标，或创建新的用具体和熟悉形状的图标仍然将 增强网站的易学性，降低出错率。 图2 6 2 3 2 图标的交互性 交互过程实际上是一个向计算机输入和向用户输出的过程。网页设计中图标的交互 性是发生在剧户点击的实际操作之后，它指代了两个层血的含义：第一是指运用于网贞 中的图标在与其浏览者之间的交互性。图标在嘲页中作为一种信息链接的媒体，通过它 可以完成测览者点击时做出“响应”，其选择会及时从服务器得剑响应，这是一个非常 1 0 嘲页设计中图标的性质分析 让浏览者产生控制后愉悦感的过程。第二是指运用于网页中的图标在网页中对任务的交 互性，它具体体现在图标存在可以成功完成网页上下关系的链接交互。 通过浏览者手的不断点击，图标就能够实现网页上一定的交互能力，对于电视杂志 收音机来说是不可能实现的。图标的交互性也是存在于浏览者、图标本体和网页之间的 一种“关系”。交互性图标的使用能使浏览者不再足被动的信息接受者，而成为主动的 参与者，提高图标的使用效率。虽然通过图标实现的链接不足整个网站或者网页交互性 的全部，但的确是对图标功能设计的一个重要内容。具有良好交互性的图标能最终协助 完成网站与浏览者之问的深度沟通。 2 3 3 图标的通用性 图标的通用性指的是绝大部分用户都可轻易识别和操作。伴随互联网络的日趋成熟， 它开始产生属于它自己的并且有着前后脉络关系的标准化体系。例如，图2 4 所示的相 似的购物车图标。当标准化发生时，嘲页设计人员可以用 这些标准化来创建易学易懂的幽标。例如，网站标准化的 一方面是使用幽标的导航系统。由于a n l a t _ d n 和y a h o o 的流 行，上百万的网页浏览者学会点击标签来打开新的网页。 有意思的是，这些标签他们本身却没有给出“点我”的意 思 1 4 。但是流行的导航系统却教会浏览者们点击这些标 签。 应用于网页的图标也在互联网络的整体标准化趋势下 而变得标准化了。例如，前面提到的房子的图标通常连接 图2 7 到主页，而打印机通常用于表达“缺剩导航图打印本页”。 其他网页的图标例子包括放大镜或望远镜用于表达“搜寻”，一个带箭头的地球放置于 链了的旁边表示“离丌这个网站”。( 见图2 7 ) 网上购物流行之后，尤其是y a h o o 的网店，交易经验和网店上下文或多或少的标准 化了。例如，一个购物车图标普遍的用于让浏览者在购买前查看所选商品。一个挂锁或 钥匙图标已经成为表示安全的图标7 。( 见图2 2 ) 其他逐渐标准化的图标有信用卡图标 ( 表示哪种卡是可接受的) ，以及用一个卡车图标表示递送信息。 页底部的。链到系统页”的链按同样变得更为标准。例如，联系我们，私有陈述， 使用条件，网站地图都多少相同。如果这些链接变得更加标准化，像信封这样的图标， 锁眼或挂锁，合同，指南针等，将能被浏览者迅速处理和理解。 这些例子都展示j ，图标在完成嘲页前后联系的同时，以某种形式，变得标准化。的 确，对许多行为和用户任务，图标在某些范罔内的标准化已经初步建立起来。嘲页中图 嘲页设计中圈标的性质分析 标通用性的体现，将在一定程度上有助于保证用户的接受性和可用性。 2 4 网页设计中图标设计的艺术属性 图标设计足伴随网页设计的发展而发展的。伴随互联网的发展，在网页设计领域将 艺术性与功能实用性尽可能地结合成了必然的发展趋势。网页的艺术性足在不断的发展 和使用中创造出来的，是在功能实用性的基础上升华出来的。它的发展也是经历了一个 从单一向多元化的发展过程。作为网页视觉组成元素之一的图标，在满足必要的功能属 性之后，所应具备的是某种概括性、观赏性、亲和力和愉悦性。如同网页设计综合了技 术、艺术，心理学上的技能一样，图标的设计同样也需要考虑到这些方面。 图标在满足其必要的功能性之后，应具备较强的观赏性和愉悦性，以丰富的视觉形 式给用户带来新鲜感和亲和力。抛开网页界面的功能属性，单从其视觉形象来看，图标 在整个界面这个大的平面设计构成中表现为点的元素，而这种点的元素往往处于重要位 置并且起剑重要作用，冈此图标的视觉形象小但需要与整个界面的视觉氛同相融合，吏 重要的，其本身的形象设计也需要突出其艺术属性。设计感强、形象牛动的i 璺l 标，一方 面可以吸引浏览者的注意以促进其功能性的实现；另一方面。它的出现也可以成为整个 界而的精彩部分，如同绘画中的“画眼”。设计感强烈、艺术性突出的罔标设计对于提 高整个界面的视觉形象品质起着不可忽视的重要作用。 阿页设计中的圈标与公共识别系统中符号的比较分析 3 网页设计中的图标与公共识别系统中符号的比较分析 3 1 概述 符号( s y m b 0 1 ) ，足特殊的记号或者标记，它足负载和传递信息的中介，同时也是 认识事物的一种简化手段 1 5 。通常它具备常规或者习惯上的重要意义。公共识别系 统中符号是借用图形符号，以最佳的方式对公众提供他们在公共场所行动时所需要了解 的公共信息，“包括场所地点信息、服务功能信息、行为提示信息等，如旅游场所、宾 馆饭店、购物、医疗、教育、行路、驾车信息等等”。 1 6 符号的优势在于它能够比较 直观地、具体地和准确地把信息传达给人，能弥补文字传递信息的不足。最为重要的是： 在公共识别系统中使用的符号是维护社会传统秩序的信息符号。公共识别系统中的符号 是在恰当的位置，以最佳的方式提供人们需要的公共信息( 参见附录1 ) 完善的公共识别系统是利用可识别的导向性符号，使得人们从进入公共空间中能自 如行动：然后依靠这些符号系统( 位置标志或徽标的识别) 的指引顺利到达要寻找的目 的地，并日能在作为目的地的公共服务或娱乐设施内，依靠这些指示性符号指引人们自 由行动，从而达到公共识别系统使用者的最终目的。这就要求在公共空间中使用标准化 的公共识别系统，对于指示性的符号而言，不论在设计还是使用上都要遵从这个标准。 相同的道理，在网页中出现的图标，在网页中的存在方式、功能和属性等特征上，都与 公共识别系统中的符号有着一定的相似性。图标在一定程度上也可以被看作是运用于网 络空间中的具有导航性质的符号以下，我将对两者的共性和差异性作个较为全面的比 较。 3 。2 两者共性分析 由于公共识别系统存在的日的是需要在大众中广泛传播，这就导致了在公共识别系 统中的符号语言只有具备普遍性，才能为人众所接受。这些符号的普遍性这一特性，在 许多公共场所的标牌设计中体现得尤为充分。如公共卫生问的男女标识，相信不论男女 老幼，文化深浅，都能够清楚分辨。这一点也是网页图标所应当具备的一个特征之一， 如前文中举过的信封和购物车的例子( 见图3 1 ，图3 2 ) 。对于图标在表现或者说替代 网页中某些相同功能项目上，它的表现形式是要具有一定的普遍性的，即使是在完全不 同的网站中间。 卜论是嘲络中使用的图标还是在公共识别系中运用的符号，两者出现的目的都是要 避免他们在各自的使用空间内未被识别而导致导航或者其他功能失灵的现象。这些“失 m 页设计中的图标与公共识别系统中符号的比较分析 灵现象”包括：所给出的导航要素不容易被发现；虽然发现了导航要素但由于要素的细 节不清晰而不能看清；或者看清了要素的细节，但却对所要传递的信息不能理解；方向 信息传递有误等等。在这一方面上符号和图标都需要具有；识别性、清晰性、理解性和 导航性。 ( 1 ) 识别性；各导向要素在使用环境中醒目且容易被发现，剪且保证导向要素中 重要的元素易于被察觉。 ( 2 ) 清晰性：图形符号、文字本身细节的清晰，并且保证元素与元素( 如标志与标 志、标志与文字，图形与文字) 之间相互关系的清晰。 c 3 ) 理解性；使用中的各元素能够使人理解，包括对图形符号、文字、标志、箭 头指向等等的理解。 ( 4 ) 导航性：各个图形元素使用的过程中都能体现到其代表的导航导向功能。 3 3 两者差异性分析 公共识别系统中的符号与网络中的图标在意义、作用和表现手法上也是有着不同点 的。首先，两者使用空间的不同。网络图标只存在于网络f h = 界，只和人们在百联网上的 活动有关，一日关闭电脑，网络市即在人们的生活中消失，所以，网络罔标的使用，是 被用户所选择的，具有可选择性；而公共导向系统服务于人们的现实生活，对于人们的 日常行动起导向作用，具有社会性。其次，网络图标虽然在当今的网络界面中扮演重要 角色，但仅就功能性而言，图标存在与否本质上并不影响网站的功能和使用。在网站设 计的选择中，设计人员完全可以自由地选择单纯的文宁链接，或者其他方式代替图标。 因此，网络图标虽然在功能上、艺术性等诸多方面有着重大意义但并不是必须因素；而 公共识别系统密切关系着人们的日常生活，是维持城市秩序及公戈场所秩序的有效手 段，故其不但是需要的，而且是必须的。另外，在功能性与艺术性的辩证统一巾，二者 的偏重也明显不同：网络图标的基本作用足为网站功能服务，但由于其视觉形式不论足 对商业网站的效益还是其他类别网站上都具有直接影响，所以网页图标为了吸引用户注 意力，往往更重视其独特的设计形象，视觉个性。也就是说，图标设计更重视艺术性； 而公共识别系统中的各种标志，由于其负担的社会使命以及公共识别系统奉身的实用 性，导致它的美观和艺术要服务于它的导向功能，不能脱离识别系统功能的实现而突出 艺术和个性。公共识别系统中的符号和标志需要标准化来保证公共识别系统的导向和指 示功能的实现，保证处于公共场所的人们能够顺利快速地到达目的地。某些规则和要求 需要被固定下来应_ h j 于符号中。 第三，在公共识别系统中的符号一般强调“求同”，这样才容易被理解和广泛运用 于有着完全小同文化背景和社会习俗的公共空间之中，并被这些卜同的个体所共同认可 1 4 嘲页设计中的图标与公共识挣j 系统中符号的比较分析 与识别。故要求其做到传达信息直接明了，达到快速、清晰、明确导向的功能效果，因 此更为强调明确性、统一性。公共识别系统中符号设计，艺术性和美观性要为功能性服 务，即功能性为第一性，艺术性为第二性。但是，在网页巾的图标设计上却可以“求异”。 因为同样是针对一个主题，在网页巾图标的形式表现上完全可以找出与之相关的尽可能 多的表现形式来完成同一个功能属性，这样的创作出来的图标才能适应网络的更新与变 化。 最后，是在恰当性上的体现。公共识别系统中的符号需要保证其在使用中具有识别 和导向功能的没计风格与环境相协调，设置位景恰当，达到导向的预见性、正确性，并 且使具有指示性的公共识别符号设置不阻碍人流、车流等。丽图标在网页中的适当性只 是要求所采用的图形适合表示图标的功能属性，以及尽量令图标在设计上适合网页整体 风格。但即使有这两方面的限制，网页中图标设计也体现得相对灵活很多。 对目前列页设计中圈标设计的研究分析 4 对目前网页设计中图标设计的研究分析 4耋o 2 ) 。它可以被解释为“不允许带钥匙”或“不要厂 锁门”。当和一个汽油泵一起被看到的时候，意思就变得非常明，；j e r l 确，“注入汽油前关掉引擎”。j i i 厂。j 尽管图标存在的环境可能被忽略掉，但它对成功地理解图标1 【， 却是非常重要的。鉴于网站之间的巨人不同，网站上下文也会有_ - 7 1 6 埘h 翦m 页设计中雷拆设计的研究分析 4 1 对网页设计中图标的分类分析 图标设计在网络巾是一种图形艺术设计。它与其它图形艺术表现手段既有相同之 处，又有自己的艺术规律。它是用具有多种附属功能与性质的图形图像东表现的，它以 精炼的形象表达一定的涵义，并借助人们对图形和图像的识剐、联想等思维能力，传达 特定的信息并完成其提供的功能任务。w e b 图标的图形的选择上还足以具象表现为主， 具象表现下的图标基本是忠实于客观物象的自然形态，并且又是经过高度概括与提炼的 一种表现形式。这种方式的选用主要是考虑到，绝人多数的用户对易于识别的具象图形 能较容易地接受，并能将图标所要传递的信息和任务转达给图标的使用用户。图标设计 不可能像写实绘画的形式那样强求形似，而是以图形化的方式进行组织处理，在强化形 象的形态特征的同时简化结构，形成一种单纯、鲜明的特征来呈现所要表达的具体内容。 在此基础上可以对网络中的图标做如下的分类： ( 1 ) 具象特征的图标类犁 具象特征的图标图形苯本忠实予客观物象的自然形态，经过提炼、概括和简化，突 出与夸张其本质特征。这种彤式具有易识别特点。它包括了； 1 ) 人物造型的i 璺| 标：人物造型存网络幽标的运用中指它的局部，如肢体、无官等。 图4 3 人物选型的图标 2 ) 动物造型的图标：以动物造型一个非常古老的图彤表现题材。我们人类对动物 的喜爱也一直没有停i t 。动物造型是最奔易被考虑到的表现题材之一。 3 ) 植物造型的图标：有着和动物造型相似的缘由，植物也是长久以来为人们所喜于 乐见的题材之一。 阁4 4 动物和植物造犁的罔标 4 ) 器物造型的图标：器物是各种用具的总称。它涉及的范围非常广且品种繁多。 从形体上说，选材可以是大到高耸入云的建筑物、交通工具之类的，也可以是小到铅笔、 电器插座和插头、文具、餐具等等。 1 7 对目前网页设计中圉标设计的研究分析 5 ) 自然造型的图标：自然现象是神秘的自然力的象征。星象、水和火星是这一类型 主题也是常用的题材。 图4 6 自然造型的图标 ( 2 ) 抽象符号化的图标类型 抽象表现形式的采用是以抽象的图形符号来表达图标的含义，以理性规划的几何图 形或符号为表现形式。当网络中的某些图标设计用一般的表现方式不能完成图标必须创 造出的暗示含义，或者不能较明显地指代图标的任务命令时，抽象形表达方式正适用于 此类情况。可