1、图标设计图标设计前言：图标设计前言：图标设计前言：设计活动的重心改变 在农业占主导地位的时代，由于生产力水平的限制，设计与单件产品的加工是密不可分的，这个时候的设计以手工艺的形式出现的。在以机器大工业占主导地位的时代，由于机器大生产极大地促进了社会生产力的提高，大量的产品被批量的生产，设计由原来的单件产品的制作变为设计一个模型被用来大量的拷贝。在信息社会，数字化的生活方式使人类进入了一个前所未有的生存状态。其实信息对于从古至今的人类并不是一个陌生的概念，从原始人发出的报警声音到文字的出现再到印刷术的发明以至现代的因特网的普及，信息一直贯穿于人类社会的发展过程中。广播、报刊、杂志、电台等媒体曾经
2、是信息的主导者与垄断者，由于现代通讯和互联网的广泛应用，信息与人类的关系也发生了重大的变化，信息逐步被多向交流，人们不仅可以接受信息还可以发出信息，每天都处于选择信息与消费信息的活动之中。在信息社会我们面临着两种状况，一方面，信息成为影响人类生活乃至经济发展、社会进步的重要方面。另一方面，信息超载也给人类生活和社会进步带来负面影响。于是我们就面临着信息的分散、无序与人们获取信息的选择性不强之间的矛盾。如何使信息得到有效的交换、如何使人们能够有效的、快速的、准确的获得信息是我们需要解决的问题，信息时代设计的目的就是使信息有序、准确的传达和被有效的利用，设计活动集中在对信息的分析与处理上。人类的各
3、种动，本质上不过是为了理解信息、设计信息、表达信息以至于最终传播信息，图标设计不应该以美为导向,而应该以传递信息为目标图标设计 图标设计是信息可视化设计中很重要的一部分。是一种结合计算机科学、美学、心理学、行为学，及各商业领域需求分析的人机系统工程，强调人机环境三者作为一个系统进行总体的设计。图标是一个显示设备区域，通过图形化方式来表示对象。与图标相关的典型特性包括：用于表示一个对象的图形标志、一个标题名名字和直观操作。描述某一个功能的图形。图标设计一、关于图标：定义：图标从某种角度来说，图标有点类似标志、徽标等物体的特性，因为无论是图标还是徽标，一旦出现，总是希望能够被观者识别并且记住！图标
4、与徽标的区别在于，图标更多采用直观的比喻，讲究一目了然；而徽标更喜欢象征，追求图形的象征意味。图标设计一、关于图标：直观的图标象征的徽标 图标设计一、关于图标：图标设计师：图标设计师，是从事图标设计这类人的总称，不管是专业或者仅仅是爱好，他们统称自己为Iconist。作为一个图标设计师，他对自己所从事的设计要有深刻的认识：设计不再是为了好看，设计也不仅是独创，图标设计绝不是我们以前图形创意里面接触的“新、奇、怪”的思路，图标设计和界面设计一样，是为了设计对象能够被用户正确、简单、快捷地认识！图标设计二、设计思路：图标设计是界面设计中非常生动的部分，不少相关书籍和文章把太多的注意力投射到设计过程
5、、设计手段而对其科学性的部分关注不够。纵观当今的图标设计，有以下一些不足：最常见的是以美为导向，太多地关注在图标的外观效果，很少关注为何选择这个内容以及怎样选择内容；其次就是以设计师为导向，图标内容的选择以设计师自己的喜好为标准，较少关注用户的感受；再就是各自为政，属于单干行为，同一系统的图标之间没有任何关联性和相似性，等等。图标设计二、设计思路：图标设计的一些原则：1、识别性：图标不同于一般的图形，它要求强烈的视觉识别，图标的出现和存在的价值都源于为了让人们识别，所以图标设计中，形式美并不是关键的，能不能准确被识别一定是设计师的第一目标。所以好的图标要么是功能一目了然的，要么用户能够通过学习
6、明白图标的意思，并且今后所有类似的工具都使用一样的绘图语言。图标设计二、设计思路：图标设计的一些原则：1、识别性：图标设计二、设计思路：图标设计的一些原则：1、识别性：图标一旦变成范例，它就不可动摇：有些软件开发者可能会试图改变设计，但几乎要冒着令部分用户无法理解的危险。过分简洁的符号会导致无法理解。即使曾经知道意思，时间一长，就留不下多少印象，如果图标中没有留下唤起记忆的要素，要想通过表面视觉形象去猜测图标意思就比较困难。有时干脆就是打消用户的使用欲望。当我们在经验图像上加入其他功能时，一定要倍加小心：用户的经验是延续的、有惰性的，它会经常与你所加入的新功能冲突。图标设计二、设计思路：图标设
7、计的一些原则：看一下下面几个例子：图标设计二、设计思路：图标设计的一些原则：看一下下面几个例子：（比较一下哪个更合理？）图标设计二、设计思路：图标设计的一些原则：1、识别性：所以，我们在选择隐喻对象的时候一定要慎重，好识别的图标对用户使用某个功能大有裨益，容易引起歧义的图标，即便有个好看的外象，甚至哪怕有一定的可比性，那也是差之毫厘，谬以千里！图标设计二、设计思路：图标设计的一些原则：2、一致性：有关一致性的问题是界面设计中老生常谈的一个问题。就图标设计而言一致性表现在三个方面：图标设计二、设计思路：图标设计的一些原则：2、一致性：1）、首先是同一图标家族，根据前面的介绍，同一图标要根据具体应
8、用环境，设计出不同尺寸以及色深度的图标家族成员，然而尺寸以及色深度的变化，使得保持图标外观的一致成为艰难的工作。但不管怎样，大图标和小图标看起来要相似，彩色图标和黑白图标也要感觉差不多，这样用户在不同显示环境下，都可以正常使用软件。具体来说，应该从色深度高的大图标开始设计，再根据具体要求，弱化一些不重要的内容，删减一些无法保留的内容，强化图形中的一些结构方面的因素，使得各种版本看起来差不多。图标设计二、设计思路：图标设计的一些原则：2、一致性：图标设计二、设计思路：图标设计的一些原则：2、一致性：2）其次是同一系统的不同图标之间，也要在风格上有一致性。MacOSX就是一个在设计上功夫精到的系统
9、，它的图标之间非常相似，玻璃风格的图标都采用同样的造型手段，色彩上也都比较关联（图518），而后推出的Jugular风格又都采用皮毛的外观，视觉语言呼应的非常好。图标设计二、设计思路：图标设计的一些原则：2、一致性：MacOSX玻璃风格图标图标设计二、设计思路：图标设计的一些原则：2、一致性：MacOSX Jagular豹皮风格图标 图标设计二、设计思路：图标设计的一些原则：2、一致性：3）、再次是应用程序和操作系统的图标之间也要尽可能一致。每一次操作系统的更新也是应用软件更新的时候，软件开发商不仅在功能上进行升级，就是在图形界面的风格上也是不遗余力地追求和操作系统的一致性圣哲样做的目的也是力
10、求用户能够在完美和谐的环境下工作。下面的例子就是一些著名软件在MacOSX环境下力求与操作系统一致性的一些例证。图标设计二、设计思路：图标设计的一些原则：2、一致性：MacOSX Aqua风格的微软公司Mac版软件图标 图标设计二、设计思路：图标设计的一些原则：2、一致性：MacOSX Aqua风格Mac版网络软件图标 图标设计二、设计思路：图标设计的一些原则：2、一致性：MacOSX Aqua风格Mac版应用程序图标 图标设计二、设计思路：图标设计的一些原则：3）兼容性：图标的兼容是指图标在不同的文化语义下都可以识别为同样的内容和意义。文件夹、垃圾桶、画笔等都是广泛隐喻的经典范例。在一种文化
11、语义下理解的事物到了另一文化语义下就可能不被理解，或者被理解成其他的意义。图标设计二、设计思路：图标设计的一些原则：3）兼容性：所以在设计图标的时候，要充分考虑到各种用户在理解上的差异，要确保不要发生理解上的困难和偏差。图标设计二、设计思路：图标设计的一些原则：4）尽量避免文字：只要可能，尽量避免在在图标中使用文字。图标中文字会让人感到不知所措，不能实现对其他地区、国家或者语言的本地化。图形的特点就在于直观性，图形通过模拟已有的东西，让用户得以凭借经验，通过简单的视觉对比就可以认知图形所代表的内容和含义；而语言则不然，因为世界各地甚至同一国家使用的语言都不太一样，所以在母语国家看来容易理解的文
12、字，对其他国家和地区的人们来说竟不啻为天书！更不要说即便在母语国家，还存在文盲等文字认知障碍的人。图标设计二、设计思路：图标设计的一些原则：4）尽量避免文字：Yahoo图标超级解霸图标 图标设计二、设计思路：图标设计的一些原则：4）尽量避免文字：图标设计三、图标的隐喻：1）、隐喻：在人际信息交互的过程中，为了把事物解释得更清楚，人们自觉不自觉地使用了比喻的手段。所谓比喻，就是打比方，根据事物之间的相似点，把某一事物（或行为）比做另一事物（或行为），从而达到把抽象的事物说得具体，把深奥的道理变得浅显的目的。比喻的基本结构分为三部分：本体（被比喻的事物），喻词（表达比喻关系的词语）和喻体（打比方的
13、事物）。比喻一般分为明喻、隐喻(暗喻)及借喻三类。隐 喻（暗 喻）是指本体、喻体同时出现，但用“是”、“成”、“成为”、“变为”等系词代替“像”一类的喻词。举个例子：莎士比亚说：“世界就是一个大舞台”图标设计三、图标的隐喻：1）、隐喻：在语言学的领域内，隐喻通常是在修辞范围内研究的。隐喻和多种修辞方法相邻。例如借代，龙井是用地名来代表一种茶，胸有成竹是用竹来代表准备的充分与自信，停止了呼吸是用一个不刺眼的现象来代死亡。人们通常把比喻分成隐喻和明喻。最流行的观点认为用“是”字带出的比喻是隐喻，用“像”字带出的比喻是明喻。张三像条狗是明喻，张三是条狗是隐喻。所以，隐喻是未加明言的明喻，明喻是说明了
14、的隐喻。塞尔同意用“是”和“像”来区分隐喻和明喻，但不同意明喻是说明了的隐喻。他所持的一个主要理由是：隐喻和明喻的真值条件经常是不同的，张三像只大猩猩可能是真的，张三是只大猩猩则一定是假的。图标设计三、图标的隐喻：1）、隐喻：隐喻是比喻的一种“隐喻就是为一事物借用属于另一事物的名称。”“隐喻”一词来自希腊语metaphora,其字源meta意思是“超越”，而pherein的意思则是“传送”。从词源上看，“隐喻”在希腊文中的意思是“意义的转换”，即赋予一个词它本来不具有的涵义；或者，用一个词来暗示它本来表达不了的意义。“隐喻”一词来自希腊语metaphora,其字源meta意思是“超越”，而ph
15、erein的意思则是“传送”。从词源上看，“隐喻”在希腊文中的意思是“意义的转换”，即赋予一个词它本来不具有的涵义；或者，用一个词来暗示它本来表达不了的意义。图标设计三、图标的隐喻：1）、隐喻：隐喻是比喻的一种“隐喻就是为一事物借用属于另一事物的名称。”“隐喻”一词来自希腊语metaphora,其字源meta意思是“超越”，而pherein的意思则是“传送”。从词源上看，“隐喻”在希腊文中的意思是“意义的转换”，即赋予一个词它本来不具有的涵义；或者，用一个词来暗示它本来表达不了的意义。“隐喻”一词来自希腊语metaphora,其字源meta意思是“超越”，而pherein的意思则是“传送”。从
16、词源上看，“隐喻”在希腊文中的意思是“意义的转换”，即赋予一个词它本来不具有的涵义；或者，用一个词来暗示它本来表达不了的意义。图标设计三、图标的隐喻：1）、隐喻：那么为什么界面设计中还能用的到修辞学的原理呢？举一个现实生活中的例子说，当我们想解释一个很抽象的问题时，通常不会用最直接的解释它的定义的方式，我们为了把事物解释得更清楚，自觉不自觉地使用了比喻的手段。根据事物之间的相似点，把某一事物（或行为）比做另一事物（或行为），从而达到把抽象的事物说得具体，把深奥的道理变得浅显的目的。界面设计也一样，本来界面的概念就是抽象意义上讲的，没用过电脑的人有谁理解桌面的含义，用过的人才体验的到桌面这个隐喻
17、真是做的非常绝。界面设计中的隐喻用的比较多的还是图形的隐喻比如界面中的图标。其实，人类很早就认识到图形可以传达信息。早在文字发明之前，人们就利用图形符号记录思想和事迹，至今保存在法国Ardeche地区30,000年前的chauvet岩画是较早的例证。图标设计三、图标的隐喻：1）、隐喻：之所以在图标设计中提到隐喻，因为图形是传递信息最便捷的方式，但是不是最准确的方式。图标设计三、图标的隐喻：1）、隐喻：之所以在图标设计中提到隐喻，因为图形是传递信息最便捷的方式，但是不是最准确的方式。图标设计三、图标的隐喻：1）、隐喻：比较以下哪个容易识别？图标设计三、图标的隐喻：1）、隐喻：比较以下哪个容易识别
18、？图标设计三、图标的隐喻：1）、隐喻：之所以在图标设计中提到隐喻，因为图形是传递信息最便捷的方式，但是不是最准确的方式。图标设计三、图标的隐喻：1）、隐喻：在进行图形用户界面设计的时候，利用对现实环境的既往经验，使用隐喻的手段可以很好地表达程序的概念和特征。如：垃圾桶、桌面、菜单等图标设计三、图标的隐喻：1）、隐喻的分类：事物隐喻 事能隐喻 事理隐喻图标设计三、图标的隐喻：1）、隐喻的分类：事物隐喻是从隐喻对象的“物”角度出发，它包含现实世界中一切物质和现象，无论其是自然界固有的还是再生形成的。以上提到的拟人化 的隐喻手法、借镜自然的隐喻手法、借镜人为产物的隐喻手法应该都可以归于此类。图标设计
19、三、图标的隐喻：1）、隐喻的分类：事能隐喻是从隐喻对象的“能”角度出发，它包含一切的事物运动。功能性隐喻把你在计算机环境下所做的工作同你在其它环境下所从事的工作联系起来，从而在初始阶段就能对即将开始的行为和随后发生的结果有一定的预测性，从而节省学习时间。图标设计三、图标的隐喻：1）、隐喻的分类：事理隐喻是从隐喻对象背后所包含和存在的“道理”出发，它包括两种情形：其一是事物运动发展过程中内在的、偶然或者必然形成的结构。另一种事理隐喻是指事物运动过程是由一系列前后相连或者前后因果的事件组成的一个复杂过程，因此它无法用一个隐喻题材来完成，而是由多个隐喻题材来实现的。图标设计三、图标的隐喻：1）、隐喻
20、的分类：事理隐喻图标设计三、图标的隐喻：2）构筑隐喻当我们了解了隐喻的基本分类和特点，如何构筑隐喻就显得理所当然和急不可耐。隐喻之所以在图形界面设计中行之有效有几个理由：易识别 易记忆 跨文化 占用更少的空间图标设计三、图标的隐喻：2）构筑隐喻 易识别 从一定的距离来看，有符号的交通牌比只有文字描述的交通牌更易识别 图标设计三、图标的隐喻：2）构筑隐喻易记忆认知图形符号要比记忆很多键盘命令要容易。图标设计三、图标的隐喻：2）构筑隐喻跨文化有隐喻内容的符号比词语在跨文化交流以及克服语言障碍上的表现更好。图标设计三、图标的隐喻：2）构筑隐喻隐喻的图标在界面的项目中能为用户提供非常直接的通达。人们可
21、以看到一个文件夹，打开它，并看它的内容，或者他们还可以仅仅通过组织图标来组织桌面。这胜于记住许多文件名或者用目录来跟踪其文件。因此，使用图标可以使界面整洁，提高美感。图标设计三、图标的隐喻：3）隐喻设计的原则：界面隐喻设计的首要原则是选择合适的隐喻对象。图标设计三、图标的隐喻：3）隐喻设计的原则：其次，要一致性的使用隐喻元素。如果存在一种造型合于隐喻元素，不要轻易改变它。例如，不要发明新的设计来取代既有的诸如文件夹、文档等这些系统认可的隐喻。你可以用各种手段来表现文件夹，让它看起来更加丰富，但决不要放弃这一隐喻元素转而诉求别的隐喻元素。这是因为人们会推测不同的形状有不同的含义，可当人们试图去读
22、懂它时，又没有任何不同，这样反而给用户认知带来负担。当隐喻元素一致时，用户可以凭借经验，很容易地推测其意义！图标设计三、图标的隐喻：3）隐喻设计的原则：图标设计三、图标的隐喻：3）隐喻设计的原则：第三，要考虑全球的兼容性。隐喻对象要具有全球识别性，能够在世界不同地区本地化或者说应该设计得有广泛的使用性。全球通用意味着它能够被广泛的理解 图标设计三、图标的隐喻：3）隐喻设计的原则：第四，要避免“完全隐喻”。所谓完全隐喻就是过于强调隐喻对象和图形之间从外形到功能一一映射。“完全隐喻”是隐喻设计中的一大沼泽，这种隐喻是一种企图将整个程序包含其中的隐喻。当现实开始同隐喻产生分歧时，完全隐喻就成为一个沼
23、泽，我们立刻就可看到它同现实的分离。比如说”桌面”的概念与隐喻图标设计三、图标的隐喻：4）隐喻的误区：长期以来，在图形用户界面设计中，隐喻一直很流行。隐喻用得好，就会对用户很有帮助，但隐喻也并非万能药，不能保证增加价值。虽然有少数简单的隐喻如文件夹及垃圾箱令人击节叫好，可事实上，大多数隐喻不仅未能增加产品的可用性，反而弄巧成拙。图标设计三、图标的隐喻：4）隐喻的误区：(1)帮忙与帮倒忙图标设计三、图标的隐喻：4）隐喻的误区：(2)蹩脚的模拟产品可用性所出现的问题常常源自隐喻的误用。隐喻的误用多种多样，其中最蹩脚的误用无论是结构性还是功能性常常表现为在屏幕上对实际物体及其特性过于简单地模拟。例如，一些软件CD播放器控制方法和现实世界中音响系统控制方法相同，其中包括使用旋转音量按钮（用鼠标来拖动）来放大或减小音量。又如某些软件电话系统要求用户点击电话图样上的按键键盘来拨号。诸如这种愚蠢的模拟方法却常常被声明为“具有直观性”和“用户界面友好”，事实并非如此。图标设计三、图标的隐喻：4）隐喻的误区：(3)错置的隐喻隐喻设计是一个比较复杂的过程，有时历经千辛万苦还找不到了隐喻对象，好容易找到了，如果设计者设计的图形与用户的心智模型相冲突，也会带来使用的困难和抱怨。图标设计三、图标的隐喻：4）隐喻的误区：(3)错置的隐喻
