图形化用户界面图标设计原则

张振中

郑州成功财经学院，郑州 451200

图标是图形化用户界面设计中的重要元素之一，也是图形化用户界面设计中最直接、最生动的视觉形态，有着优秀图形化用户界设计、形象明确、造型突出的图标，能够迅速地被用户所理解和接受，从而使软件或程序的使用效率提高，最终带给用户很好的使用体验。同时，图标的设计，并不是简单对图形或图片进行堆砌，而是要深入到用户的操作和交互使用过程中，区分用户对图标“使用”和“适用”的需求[1]。因此，在图形化用户界面的图标设计中，需要对图形化用户界面的用户使用过程中各个方面进行考虑。图形化用户界面图标设计的原则，主要有以下几个，即图形化用户界面图标的统一性原则；图标的用户认知性与民族性原则；图标的简洁性和符号性原则；图标的尺寸性原则和图标的文字应用原则。具体从这几个方面入手，通过相关案例分析在图标设计中需要注意的问题，进行了相应的探讨。其目的，就是要将上述原则，继续落实在今后的图标设计实践之中。

一、图标的统一性原则

一个软件或程序的系统中，图标的设计风格需要保持统一。因为统一的图标比单一零散的图标更具品质，更容易让用户理解和接受[2]。图标的造型设计，可以使用轻松诙谐的绘画风格，也可以使用简洁明快的平面剪影效果或酷炫时尚的3D效果。而在当下流行的3D效果图标中，透视效果和光影效果，则无疑很好地促成了图标的整体统一风格。

其一，图标的透视效果表现，是图标造型中的重要因素。如果某一图标元素的造型设计成平行透视的表现效果，那么其他的图标，也要按照平行透视效果来进行设计。而如果图标元素视觉效果是成某一个特点角度，即成角透视效果，那么其他所有的图标，都要按照这个特定角度进行设计。例如，智能手机主题的图标设计。又如，REAL VⅠSTA General 3D图标设计（见图1），如果其中一个照相机图标的放置效果为正面透视成30°角，那么在这一主题下，其他图标包括用户、游戏、打印机、摄像头等在内的应用程序的图标设计效果，也同样需要按照正面透视成30°角的效果来设计。因为只有这样的设计，才能使所设计的界面整体有统一的视觉效果。

图1 REAL VISTA General 3D图标设计①

其二，图标的光影效果表现，也能很好地体现图标的统一性。图标的光影效果，如果不是从同一光源角度射入，那么可能会导致整个图标系统视觉混乱。使用统一的光源效果，不仅可以使图标整体效果统一，而且也会让使用者觉得图标的设计比较专业。

在VⅠSTAR系统的使用说明书中，有一章专门介绍图标的光影效果的使用规范，这样的开发细节规定，便于图标设计者和开发者设计的图标，能够和VⅠSTAR系统相一致。同时，使用阴影也可以提升图标在背景上的可视性，这是大多数设计师习惯用到的手法，如果只在空白背景上做一个立体效果的图标，而没有添加任何的背景或阴影，那么使用者就会感觉到这个图案漂浮在背景空间上，是不稳定的。如果加入阴影作为背景，那么就不至于让人感觉到如此地飘忽不定，整体图标也显得稳定。统一的阴影位置和角度，搭配统一的光影角度，这样图形化界面也会显得统一协调。

例如，创意医疗图标设计（见图2），使用统一的立体方形为背景，搭配统一的右上角光源效果和左下角阴影位置，虽然图标造型简单，但是整体效果统一明确，同时具有强烈的视觉稳定感。

图2 创意医疗图标设计②

其三，图标的色彩风格，也需要和图标造型风格相统一。特别是在色彩的选择和搭配上，尽量考虑色彩三属性的协调，色相、明度或纯度3项中至少有1项是相互统一协调的。同时，颜色选用也不宜过多，因为过多的颜色在一个很小的区域里出现，会让人产生杂乱的感觉，影响到最终视觉效果。例如，女性手机图标（见图3），其使用了玫红色为图标设计的主色调，这不仅体现了女性的特色，而且使整个的图形化用户界面的图标，排列成为了一个统一的整体。

图3 女性手机主题图标设计③

二、图标的用户认知性与识别性原则

图标设计的目的，是通过符号化的图形传达信息。因此，图标的用户认知性与识别性原则，在图标设计中就显得尤其重要。图标，是建立在虚拟世界和真实世界的一种隐喻或映射关系的桥梁。隐喻旨在“以一种更为明显，更为熟悉的观念符号来表示某种观念”[3]，观念之间存在着类似性。在图标设计中，隐喻是一个相当重要的表现手法。通过归纳和联想，使图标的图案造型与图标的使用功能，可以建立起最为直接的联想。但是，这种直接的联想关系，取决于图标使用用户的认知水平和认知习惯。相较之下，具有隐喻表现手法的界面图标设计，可以化繁为简，将抽象事物的内涵明确化，让使用者更容易理解和认知，因此显著地提高了图标在人机交互间的有效性和准确性[4]。

一个小型企业内部程序专属的软件图标，其设计的定位与规划，与大众软件所使用的图标的定位与规划，是截然不同的。因为，特定软件的图标所对应的使用人群，和大众软件所对应的使用人群的范围，存在着很大的差异。这些用户的认知水平和认知习惯，因而也就存在很大的不同。在设计图标时所要考虑的因素，最为关键的就是用户的认知能力。据心理学家研究表明，用户认知的差异来自于多个方面，其中主要包括用户在社会文化、民族文化、地域特点、性别、教育程度等方面的差异。

很多人对社会文化的理解，感觉很抽象。其实，在图形设计特别是图标设计中，所谓用户认知的社会文化差异，就是社会文化视觉元素的区别。这些差异，又体现在视觉图形的使用习惯、视觉符号的地域特点、地域环境对视觉元素的区别与影响等方面。相同的视觉元素，应用在符号设计中，可能会产生不同的视觉效果和符号含义。

在图标的设计中，也是一样的道理。相同的元素，使用在不同系统，图标就会出现不同的应用效果。例如，移动通讯设备中应用程序“设置”功能的图标，欧洲和北美的部分区域，使用了齿轮作为图形元素，而亚洲国家则使用扳手和螺丝刀作为图形元素（见图4）。产生这种情况的原因，主要是欧洲和北美的人进入机械化工业的时间较长，齿轮是工业化的代表，因此，在他们的心目中，对“设置”功能的印象，就是机械齿轮的调整。而亚洲国家由于进入机械化阶段时间短，大众对“设置”功能这个概念的印象，还停留在手工业时代，所以手动的扳手和螺丝刀，给他们带来更为直接的联想。在图标设计中，正确地理解和分析不同使用者对视觉图形的认知，显得尤其重要。

图4 “设置”功能图标设计④

图标的用户识别性体现在文化传统、生活环境和行为习惯这3个方面，因为在不同的国家和民族，这3个方面是彻底不同的。在电子邮件之类应用程序的图形化界面设计中，邮件图标造型设计体现得最为突出。因为邮箱在全球各个地方都有，但是，在不同的国家或不同的区域，这些邮箱的造型，却有着很大的不同。

苹果公司的智能手机图标中，有用到邮件功能的图标，它所设计的图标，需要带有人机交互识别性原则。如果苹果公司设计的这个大众软件的邮箱图标，其图标视觉形象基于一个小国家的乡村邮箱造型，显然是错误的。因此苹果公司的智能手机邮件图标，选用了更适合于大多数使用，又易于让人识别的“邮票”元素（见图5）。因为邮票是全球通用邮资凭证，邮票外框的半圆孔造型的识别性，远高于造型各异的邮箱，同时具有普适性，所以这种元素的视觉形象，在苹果的图标设计上，获得了大众的广泛认可。

图5 苹果公司“邮件”功能图标设计⑤

三、图标的简洁性和符号性原则

研究表明，视觉图案的写实程度，与受众对视觉图案的关注度，是成正比的。即越写实的图案，越容易引起受众的关注。因此，设计师在进行图标设计时，其设计的图标的视觉表现越是逼真，越是可以引起用户更多的注意，也可激发更多用户的使用兴趣。但是，形象写实逼真的图标设计，却也从另一个方面影响了图标信息的快速传达。因为图形在传递信息时，其简约程度，与受众的识别认知度，也是成正比的。即越是简洁的图案，越容易让人识别和记忆，也越是能高效地传达信息。而极度写实或加入过多装饰效果的图标，其信息传达的快捷度，也是大打折扣的。

象征性的符号，在图标设计中也是常见的。符号图标能够更快地被用户所接受、记忆和识别。同时，符号图标所使用的图形文件小，便于硬件的支持和运算效率的提高。因此，在图标设计时，尽量不要使用过于复杂的图案。过多的图形和装饰效果，会降低图形的认知度，特别是在小尺寸图标中，由于图标尺寸偏小，导致视觉上的识别度降低。同时，也需要避免过多的元素在同一图标中出现。如果必须在图标中加入过多元素的话，那么就要尽量在图标设计时保持强烈的符号品质，让主体图案以符号化的形式出现。

在图标中，应谨慎地设置图标的图形元素，因为不可能所有的图标，都有使用简约的黑白剪影效果。虽然WP8系统图标基本使用这一风格（见图6），还同时体现了图标扁平化趋势，但是要在图标中加入使人感兴趣的视觉效果，在设计时，就不能减少对用户视觉的冲击体验效果的关注。过于平淡的设计，往往会导致用户的厌恶和抵触心理。因此，图标设计可以在明确识别和信息传达的同时，加强一下视觉效果，哪怕是损失一部分快速识别的符号化元素。把握识别度和符号化相关的程度关系，是很重要的。这种类型的设计，一般在大尺寸的图标上应用得相对多一些。而相对小尺寸的图标，则更多地需要较少的装饰或视觉效果，这样能够便于用户识别。

图6 WP8系统图标设计⑥

四、图标的尺寸性原则

由于图形化用户界面的使用环境不同，导致图形用户界面在使用中的显示环境不同。因此，图形化用户界面的图标尺寸，也出现了不同。同时，随着显示技术的不断发展，图标对应的显示尺寸越来越大，分辨率越来越高，这使得图标的细节，也不断地在进行改进中。并且跨平台软件的图标大小或像素的数量，通常按照特定的技术规范进行设计[5]。一般的图标标准尺寸有4种，分别为16×16像素、24×24 像素、32×32像素和48×48像素。这4种常规尺寸的图标，在PC系统中使用，从Windows 98系统开始，一直持续到Windows XP。随着电子产品的不断发展及操作系统的更新换代的不断加速，图形化界面设计的形式越来越多，图标的尺寸也越来越大，目前已经逐步发展成为4种标准尺寸，即小图标32×32像素、中图标64×64 像素、大图标 128×128 像素，以及特大图标256×256像素。在Windows 7系统中，最大的图标尺寸，已经发展到了512×512像素。在图标设计中，图标的尺寸越大，意味着设计师在制作图标的过程中，所需要考虑和展现的细节就越多，同时也需要配合和考虑到系统的整体性[6]。

图标设计，不同于其他的视觉设计。同一图标，由于其尺寸不同，展示效果和制作细节也不尽相同。因此，在不同显示系统下的图标，在图标设计时，都有其对应的图标效果。例如，Artisan Ophone手机图标（见图7），在不同的尺寸大小上，其效果有着细微的差别，同时在整体观看时，又是效果统一协调的。

图7 Artisan Ophone手机图标设计⑦

因此，在设计制作不同系统、不同尺寸的图标时，应注意相关的问题。在设计制作大尺寸图标和小尺寸图标时，也有需要注意的问题。在Windows XP系统中，桌面快捷方式的大图标，使用的是带阴影效果的，而在导航栏中的小图标，则是不带阴影效果的。这些因素，都是要根据特定的软件或程序的尺寸需求，来进行设计的。

五、图标的文字应用原则

在图标设计中，除了图形设计之外，还有一个重要的组成部分就是文字。简洁明快的文字标签和清晰准确的文字说明，能更好地提高图形化用户界面的工作效率[7]。在设置图标文字时，最好使用简单通俗的文字作为图标的说明文字。在图标文字的选择上，需要具备高度的概括性。同时，图标文字又需要有高度的信息传达性，能够充分体现其是对图标图案的一种解释和说明。

在图标文字的设计中，需要对文字属性和文字使用环境进行考虑。而文字的字体、尺寸和色彩等方面，也会对图标的整体视觉和运行效果产生影响。在文字字体的选择上，考虑图标字体的形态不宜复杂。黑体和中等线体等字体，因其横竖撇捺笔画一致相等、空隙均匀，是图标文字中比较常用的字体[8]。而图标字体的大小，则应根据图标显示尺寸的大小来进行设计。由于文字的识别度差异，在通常情况下，中文字体应不小于14px，英文字体应不小于12px。另外，应该尽量使用均匀的间距，使文字更为整齐清晰，易于辨识[9]。

图标中的文字使用，是对图标图案的说明，能够让用户高效、快速地读懂图标所需要传达的全部信息。图标文字的设计，涉及到图标文字内容的选择、字体选取、字形安排以及文字的色彩的选用等多个方面，是综合应用的结果，也体现了图标文字应用在图形化界面中的重要性。

六、结语

设计的对象是产品，但是设计的目的并不是产品，而是满足人类的需要[10]。图形化用户界面的图标设计，也是如此。图形化用户界面的图标设计，是一个高度系统化的工程，需要考虑的原则很多，需要满足的需求也很多，可以说，其需要解决的问题，存在于图标设计过程中的各个方面。本文研究图形化用户界面图标设计的原则，通过图标设计过程中的各个方面原则的理论分析，是希望在图标设计的基础理论上，加大探讨与研究的力度，找寻更为人本化的图标设计的策略与方法，从而推动我国图形化用户界面设计的理论发展，并带动我国ⅠT创意产业的持续发展和不断进步。

注释

① 图1来源： REAL VISTA General.REAL VISTA General 3D图标设计[EB/OL].（2011-09-19）[2014-12-03].http://www.visionunion.com/article.jsp?code=201109190023.

② 图2来源：佚名.创意医疗图标按钮图片[EB/OL].（2013-05-12）[2014-12-03].http://www.taopic.com/vector/201305/348826.html.

③ 图3来源：http://tieba.baidu.com/p/286904 9777.

④ 图4来源：作者PS拼合.

⑤ 图5来源：http://www.24ker.com/app/92.html.

⑥ 图6来源：IT之家.WP8.1的Metro动态磁贴：彰显你的个性[EB/OL].（2014-04-21）[2014-12-03].http://wp.msn.com.cn/news/focus/26617 6.shtml.

⑦ 图7来源：http://www.uedhome.cn/visual/sho jiui/032210092013.html.

[1]黄炯.手机界面图标设计发展研究[J].艺术与设计：理论，2013（6）：111-113.

[2]潘璠，明兰.智能手机GUI设计原则研究[J].湖北经济学院学报：人文社会科学版，2012（12）：38-40.

[3]刘伟元.用户界面中图标设计原则[J].包装工程，2013（8）：94-97.

[4]任美琪，谢庆森.手机交互界面中图标的隐喻设计研究[J].包装工程，2014（4）：29-31.

[5]滕兆烜，金颂文，甄永亮.论手机图形用户界面中图标设计可视性[J].包装工程，2013（4）：66-70.

[6]张婷婷.图形用户界面中影响用户认知的图标设计因素研究[D].上海：上海交通大学，2011：28-29.

[7]李琰君，张振中，吴李玥.图形化界面设计分析[J].包装工程，2008（5）：141-143.

[8]毛珊珊.手机图形界面的图标设计风格研究[D].北京：北京服装学院，2012：37-38.

[9]郭霞.软件用户界面图标的易用性设计研究[D].南京：南京航空航天大学，2012：34-35.

[10]李砚祖.产品设计艺术[M].北京：中国人民大学出版社，2005：5-6.