闲话ICON设计
臭鱼说视觉设计时不应产生新信息,那是否意味着视觉设计师的工作纯属体力劳动?其实不然,交互设计只能说明页面的轻重缓急,在视觉表现层面,视觉设计师仍然有相当的创意可做。极端一点,如小小的Icon,也并不是花瓶。
1.先来看看Icon的作用:
表示强调:
![]()
表示说明:
![]()
表示动作:
![]()
表示状态:
![]()
表示体系:
![]()
2.既然icon的功效如此之多,那就千万别把它当成一个花瓶去设计,目的不一样,设计的方法也不一样。
表示强调:Icon设计要素需具备——别致性
比如无序列表的list-style Icon,作用在于引导用户视线到每一条内容的开头,并强化页面左对齐的形式感。
起强调作用的Icon在视觉上只要能够跳出来即可。常用的方法有用异类色,或者特殊形状等。
表示说明:Icon设计要素需具备——具象性
这种icon的运用也较普遍,一般都采取icon+文字链的形式,Icon作为对文字的补充说明而存在:
![]()
此类Icon需要具备一定的含义,简单的讲,就是将右侧的文字具象化。
设计时可以参考汉字造字中的“象形”设计法,即用描摹客观实体的外形来表达图标用意。直接采用具象的物品作为设计元素,就是一种方法。
表示动作:Icon设计要素需具备——指示性
一个动作包含两个问题:“做什么”,“对什么做”?“对什么做”可以通过调整icon位置来说明,而icon的设计重点,就在于做什么。
用icon去支撑一个动作,其实也是对视觉设计师提出了更大的挑战。这种表现,有些类似汉字造字中的“指事”,例如汉字中的“上”、“下”,即需要用象征性的符号或在图形上加些指示性符号来表示动作。
IE中的前进后退按钮做的很好,没有多于的元素,只有一个指示性符号:
![]()
表示状态:Icon设计要素需具备——认同一致性
设计此类icon也较简单,只需留意目标人群对设计元素是否有一致正确的理解即可。
比如“√”表示正确,“×”表示错误,“!”表示注意,几乎所有人都能会意。
但 “—”表示什么,却不是每个人都很清楚,所以淘宝的注册提示Icon让我很惊愕:
![]()
貌似“—”这个符号是一种针对司机的交通指示牌,而淘宝新用户中有多少会是司机?
所以,表状态的Icon也要避免使用过分专业的符号。
表示体系:Icon设计要素需具备——连续性
设计一个个互相之间没有影响的icon无需考虑icon相互之间的联系,如果要设计一个体系的图标,就需要去额外考虑图标之间的关联与区别,图标如何呈现一个体系,以及如何独自表达彼此的含义,连续而不耦合,留到下次再聊。

十月 17th, 2010 at 13:10
关于淘宝的ICON,本人发表点拙见。
“-”符号,是交通信号中的一种,意指“阻止”、“拒绝通行”。
淘宝引用此ICON时,用户没有输入用户名,按照程序流程,将不能把此用户注册行为予以“放行”。据此,淘宝使用本ICON是恰当、无误的。
另外,博主“推荐”的“X”、“!”式ICON,淘宝之所以没有引用,我想是出于“尊重用户”的前提。
带“X”的图标是错误的提示,但用户在填写表单的时候只是没有填写会员名而已,不是“错误”啊。而且“x”会给人一种很生硬的感觉,是不友好的象征。
带“!”则是警告之意,在此仍会给用户带来排斥的感觉,不够亲密,稍显突兀。
在以上的考虑之下,淘宝选用“专业”的ICON作为提示,应该也是意料之内的。