试析GUI设计中图标元素的设计

【摘要】本文在计算机人机交互图形化用户界面图标设计的基础上,分析了图标在软件中的应用,详细论述了软件系统图标的特征和特点,给出了图标设计原则和设计个性化图标的一般方法。为软件系统图标设计提供了理论依据和借鉴模型。

【关键词】GUI 软件系统图标特征图标设计研究

GUI全称为Graphical User Interface,即计算机图形用户接口界面,通俗理解就是指人机交互图形化用户界面,采用平面图形的方式直观地反映计算机的用户操作界面。伴随数字技术的发展,计算机界面操作人性化程度的提升,界面图标在人机互动过程中发挥的作用也日益增强,表现出的视觉魅力也日益丰富,成为GUI设计的重要表现元素。

1. 图标的发展史

图标系统的出现与发展的每一步,都与计算机界面技术的发展紧密相连。1981年Xerox Star系统的图标是最早的界面图标,由于技术有限,只有黑白两色。 Xerox Star系统中的图标十分抽象,只用了圆形和矩形。1991年,Microsoft公司在其Windows3.0界面上首次使用了彩色图标,该图标突破了以往机械的外形,简单的构造,初次采用了投影立体效果。直到2001年,Microsoft在参照了Mcitish OS系统后成功研发出世界上第一套真正具备现代意义的界面图标:WindowsXP系统图标。该系统以蓝色为主色,象征理性与速度,科技与时尚。图标辅以绿色和红色,对比效果强烈。深沉的主色调统一,稳健之中不乏热情,具有很强的视觉冲击力。

2. 图标的发展图标的色彩与情感

成功的艺术作品要倾注作者的个人情感,才能达到与读者的共鸣,图标也是一样,它是一种像素艺术,方寸之间进行表现,在设计的时候要充分考虑图标带给人的心理作用和视觉感受。以蓝色、紫色、绿色等冷色为主色调的图标,给人以冷静、成熟、干练的感觉,以红色、橙色、黄色为主色调的界面图标给人以热情、年轻、冲击的感觉。在图标设计的过程中,色彩的效果不是一种或两种色彩决定的,是所有色彩元素,相互影响、共同作用形成的。合理的运用明度、纯度、色相进行有目的的对比,才能使作品具有设计美感。

图标设计的效果是通过UI界面来实现的,考虑电脑的色彩成相原理也是设计者不可缺少的工作环节。操作界面上色彩的效果是通过像素的计算得来的,早期的黑白效果简单的色彩结构,在电脑上用的是一位的资料。虽然,黑白只有两色,单仍能够以疏密不同的黑点和白点进行矩阵排列,形成视觉上的256个灰色阶调,除去黑白两色,还有254个,电脑必须以8位的技术实现这256位阶调。电脑屏幕是通过光,把信息进行展现的,所以,我们看到的色彩必须以色光模式进行计算,即RGB格式,我们进行设计所用的颜色,都是通过红、绿、蓝这三种颜色进行配比形成的。

在8位色体系中,一位色包含两种颜色,二位色四种颜色,四位色16种颜色,8位色24种颜色………….依次类推,色彩的数目是随着位数的增长而上升的。采用过高的位数会衍生更多的色彩,但同时也会给人的视觉识别带来负担,采用合适的色彩体系进行设计,是至关重要的。在设计时,要选用少的色彩,和简单的外形,利用色彩空间混合原理,设计出美观适用的图标。

3. 图标的可识别性

图标在服从界面需要的前提下,更要体现出艺术化的效果。在定位上,应当采用符合行业特征的符号,只有具有一定的广泛性,才有利于识别和操作,只有具有一定的个性,才能

在同类产品中脱颖而出。比如,COREL DRAW 是一款矢量图形制作软件,这类艺术性实用性很强的图标,更有独特的视觉表现力。有丰富的色彩效果和优美的外轮廓。如,Coreldraw9的图标,是一个彩色的降落伞,采用倒置水滴外形,辅以鲜艳的色彩和谐的明暗关系以及适度的立体效果,富有很强的视觉美感。Coreldraw12采用圆点做背景,铅笔做主形,成熟的灰蓝色为主色调,软件的功能定位一目了然。再如,很多音乐播放器的图标,如千千静听,采用耳机和电频为主要图形,辅以晶莹时尚的玻璃按钮,使用户在第一时间就可以准确的判断并记忆。

在设计中,要避免面面俱到,在一个小图标上呈现对象的全部特征而使效果杂乱模糊。图标的尺寸一般都比较小,设计者必须力求简约,选择最具有独特性和表现力的特征去设计和制作,使作品线条简约,色彩适度,定位明确。

4. 图标的一致性

统一的图标设计风格,统一的色调设置,统一的尺寸,和统一的交互方式给用户统一的感觉,增加软件的可信度和支持率。首先,一个好的软件图标风格是一致的,但不同产品也有不同的特色。总结起来,有以下几个风格:1、卡通漫画风格,这类图标往往是在游戏类软件中最为常见,因为游戏类软件的情节性较强,使用者在其中扮演自己喜欢的角色,并参与到设计好的情节。这类图标为了吸引使用者,采用有代表性的人物形象作为图标,使信息由效地得到传递。2、传统风格,这类软件几乎无一例外地呈现内容的原貌,不添加任何人为加工的成分,如实的反映软件的内容和功能,外型上给人四平八稳的感觉,一般具有明确的指定使用人群和市场。此类图标多服务于办公类软件,此类的设计有利于提高工作效率。3、高科技风格,此类图标采用3D动画技术,虚拟现实的效果,营造出真实的视觉感受。此类图标多为时代感较强,具有前瞻性的软件。

同一信息产品,采用统一的外观风格,对于保持用户的使用和感官优势,促进交互效率有很大帮助。

其次,应用功能近似的软件应该保持外观一致,如Adobe系列应用软件,PHOTOSHOP、ILLUSTRATOR、INDESIGN、IMAGEREADY等,这些软件图标,在外观上保持尺寸一致,统一白色的字体镶嵌效果,统一的彩色的图标,统一的圆角正方形和左上角的光源,仿立体的阴影效果等一系列近似的特征使他们保持了一致。用户在长期的交互过程中形成了稳定的心理模型,用户在熟悉了一个界面之后,切换到另一界面也可以很快猜测出界面工具的功能,节约了时间成本,象征性图形符号所传达的意思也不再那么抽象费解。

再次,交互行为的统一性。所有的交互行为控制图标都有,图像被选择时,图像未被选择时,双击左键进入程序,单击右键选择隐藏的下拉任务菜单……等状态。统一交互行为,让图标的识别和使用变得更加便捷,软件技术也更加通俗和简易。

计算机技术的进步和人的心理需求促使图标的出现和发展,从而,给我们的工作和生活带来巨大的变化。在未来人与计算机交互的过程中,图标将成为一个不可替代的角色,在满足使用功能的同时散发出更加迷人的艺术魅力。

参考文献

[1]张舒予.视觉文化概论.南京:江苏人民出版社,2003.

[2]周宪.反思视觉文化江.江苏社会科学,2001,(5).

[3]徐柏容.编辑创意论.天津:天津古籍出版社,1999.

[4]金元浦.视觉图像文化及当代问题域[J].学术月刊,2007,(5)