《试析GUI设计中图标元素的设计》由会员分享，可在线阅读，更多相关《试析GUI设计中图标元素的设计（3页珍藏版）》请在金锄头文库上搜索。
1、1试析 GUI 设计中图标元素的设计【摘要】本文在计算机人机交互图形化用户界面图标设计的基础上,分析了图标在软件中的应用,详细论述了软件系统图标的特征和特点,给出了图标设计原则和设计个性化图标的一般方法。为软件系统图标设计提供了理论依据和借鉴模型。 【关键词】GUI 软件系统图标特征图标设计研究 GUI 全称为 Graphical User Interface,即计算机图形用户接口界面,通俗理解就是指人机交互图形化用户界面,采用平面图形的方式直观地反映计算机的用户操作界面。伴随数字技术的发展,计算机界面操作人性化程度的提升,界面图标在人机互动过程中发挥的作用也日益增强,表现出的视觉魅力也日益丰
2、富,成为 GUI 设计的重要表现元素。 1. 图标的发展史 图标系统的出现与发展的每一步,都与计算机界面技术的发展紧密相连。1981年 Xerox Star 系统的图标是最早的界面图标,由于技术有限,只有黑白两色。 Xerox Star 系统中的图标十分抽象,只用了圆形和矩形。1991 年,Microsoft 公司在其 Windows3.0 界面上首次使用了彩色图标,该图标突破了以往机械的外形,简单的构造,初次采用了投影立体效果。直到 2001 年,Microsoft 在参照了 Mcitish OS 系统后成功研发出世界上第一套真正具备现代意义的界面图标:WindowsXP 系统图标。该系统以
3、蓝色为主色,象征理性与速度,科技与时尚。图标辅以绿色和红色,对比效果强烈。深沉的主色调统一,稳健之中不乏热情,具有很强的视觉冲击力。 2. 图标的发展图标的色彩与情感 成功的艺术作品要倾注作者的个人情感,才能达到与读者的共鸣,图标也是一样,它是一种像素艺术,方寸之间进行表现,在设计的时候要充分考虑图标带给人的2心理作用和视觉感受。以蓝色、紫色、绿色等冷色为主色调的图标,给人以冷静、成熟、干练的感觉,以红色、橙色、黄色为主色调的界面图标给人以热情、年轻、冲击的感觉。在图标设计的过程中,色彩的效果不是一种或两种色彩决定的,是所有色彩元素,相互影响、共同作用形成的。合理的运用明度、纯度、色相进行有目
4、的的对比,才能使作品具有设计美感。 图标设计的效果是通过 UI 界面来实现的,考虑电脑的色彩成相原理也是设计者不可缺少的工作环节。操作界面上色彩的效果是通过像素的计算得来的,早期的黑白效果简单的色彩结构,在电脑上用的是一位的资料。虽然,黑白只有两色,单仍能够以疏密不同的黑点和白点进行矩阵排列,形成视觉上的 256 个灰色阶调,除去黑白两色,还有 254 个,电脑必须以 8 位的技术实现这 256 位阶调。电脑屏幕是通过光,把信息进行展现的,所以,我们看到的色彩必须以色光模式进行计算,即 RGB格式,我们进行设计所用的颜色,都是通过红、绿、蓝这三种颜色进行配比形成的。 在 8 位色体系中,一位色
5、包含两种颜色,二位色四种颜色,四位色 16 种颜色,8 位色 24 种颜色.依次类推,色彩的数目是随着位数的增长而上升的。采用过高的位数会衍生更多的色彩,但同时也会给人的视觉识别带来负担,采用合适的色彩体系进行设计,是至关重要的。在设计时,要选用少的色彩,和简单的外形,利用色彩空间混合原理,设计出美观适用的图标。 3. 图标的可识别性 图标在服从界面需要的前提下,更要体现出艺术化的效果。在定位上,应当采用符合行业特征的符号,只有具有一定的广泛性,才有利于识别和操作,只有具有一定的个性,才能 在同类产品中脱颖而出。比如,COREL DRAW 是一款矢量图形制作软件,这类艺术性实用性很强的图标,更
6、有独特的视觉表现力。有丰富的色彩效果和优美的外3轮廓。如,Coreldraw9 的图标,是一个彩色的降落伞,采用倒置水滴外形,辅以鲜艳的色彩和谐的明暗关系以及适度的立体效果,富有很强的视觉美感。Coreldraw12 采用圆点做背景,铅笔做主形,成熟的灰蓝色为主色调,软件的功能定位一目了然。再如,很多音乐播放器的图标,如千千静听,采用耳机和电频为主要图形,辅以晶莹时尚的玻璃按钮,使用户在第一时间就可以准确的判断并记忆。 在设计中,要避免面面俱到,在一个小图标上呈现对象的全部特征而使效果杂乱模糊。图标的尺寸一般都比较小,设计者必须力求简约,选择最具有独特性和表现力的特征去设计和制作,使作品线条简
7、约,色彩适度,定位明确。 4. 图标的一致性 统一的图标设计风格,统一的色调设置,统一的尺寸,和统一的交互方式给用户统一的感觉,增加软件的可信度和支持率。首先,一个好的软件图标风格是一致的,但不同产品也有不同的特色。总结起来,有以下几个风格:1、卡通漫画风格,这类图标往往是在游戏类软件中最为常见,因为游戏类软件的情节性较强,使用者在其中扮演自己喜欢的角色,并参与到设计好的情节。这类图标为了吸引使用者,采用有代表性的人物形象作为图标,使信息由效地得到传递。2、传统风格,这类软件几乎无一例外地呈现内容的原貌,不添加任何人为加工的成分,如实的反映软件的内容和功能,外型上给人四平八稳的感觉,一般具有明
8、确的指定使用人群和市场。此类图标多服务于办公类软件,此类的设计有利于提高工作效率。3、高科技风格,此类图标采用 3D 动画技术,虚拟现实的效果,营造出真实的视觉感受。此类图标多为时代感较强,具有前瞻性的软件。 同一信息产品,采用统一的外观风格,对于保持用户的使用和感官优势,促进交互效率有很大帮助。 其次,应用功能近似的软件应该保持外观一致,如 Adobe 系列应用软件,4PHOTOSHOP、ILLUSTRATOR、INDESIGN、IMAGEREADY 等,这些软件图标,在外观上保持尺寸一致,统一白色的字体镶嵌效果,统一的彩色的图标,统一的圆角正方形和左上角的光源,仿立体的阴影效果等一系列近似
9、的特征使他们保持了一致。用户在长期的交互过程中形成了稳定的心理模型,用户在熟悉了一个界面之后,切换到另一界面也可以很快猜测出界面工具的功能,节约了时间成本,象征性图形符号所传达的意思也不再那么抽象费解。 再次,交互行为的统一性。所有的交互行为控制图标都有,图像被选择时,图像未被选择时,双击左键进入程序,单击右键选择隐藏的下拉任务菜单等状态。统一交互行为,让图标的识别和使用变得更加便捷,软件技术也更加通俗和简易。 计算机技术的进步和人的心理需求促使图标的出现和发展,从而,给我们的工作和生活带来巨大的变化。在未来人与计算机交互的过程中,图标将成为一个不可替代的角色,在满足使用功能的同时散发出更加迷人的艺术魅力。 参考文献 1张舒予.视觉文化概论.南京:江苏人民出版社,2003. 2周宪.反思视觉文化江.江苏社会科学,2001,(5). 3徐柏容.编辑创意论.天津:天津古籍出版社,1999. 4金元浦.视觉图像文化及当代问题域J.学术月刊,2007,(5)
