图标的设计制作

图标的设计制作

【摘 要】随着智能手机的火爆流行,界面设计越来越受到用户、商家的欢迎,如何进行界面设计也成为很多设计师关注的话题,尤其是那些初次让行的设计师,很多时候面对客户的需求总是一头雾水,如何设计的?且听笔者细细道来。

【关键词】图标制作;尺寸;细节

大多数人比较注重界面的最终效果，这当然无可厚非。但是要想设计并绘制出一个贴切的精致的icon也不是那么简单的事，整个过程中请牢记你不仅是GUI设计师，你还要兼顾程序开发人员的需求。笔者以一个实际案例来阐明一下自己的观点。

图标有很多种分类，那我们是做剪影的还是写实的？是制作水晶质感的还是原材质质感的？在商业项目中我们设计师首先会综合甲方的需求、用户研究的结果及整个界面的视觉风格来确定图标的风格。这是一个定位的问题，也是图标设计中最重要的问题，一旦图标风格与整个界面产品不搭调，那么我们的工作就是白费力气。

其次，确定图标的大小。图标的大小尺寸一般都会是16的倍数。如16*16 48*48 64*64 128*128 256*256 512*512等。但是也会由于终端界面显示屏物理尺寸的原因，图标的尺寸也会发生变化，这个还要依据实际情况来定夺。

下面笔者来说明具体的设计制作步骤：我们要为国内某大型银行的手机银行中“理财”这一功能设计一个图标。首先我们应理解理财的含义；它包含哪些功能；我们怎样去表现这一概念。经过一番思考，笔者从把钱投进存钱罐这一日常行为作为设计出发点。从一枚硬币开始我们的理财，开始新的一天。然后我们可以把概念付诸简单的草图。在这一过程中我们尝试多种图标的主体形状和配色以使我们的概念更加清晰，也为提高剩下工作的效率。本例，我们结合客户需求和用户测试结果，采用了色调柔和、低质感的立体图标。

下面的工作需要在photoshop里面完成。首先我们按照确定的图标尺寸绘制图标的底也称作图标背景（在此案例中，我们根据实际情况绘制的图标大小为88px*88px，圆角2px）。在这个过程中，为了最终的开发效果清晰，边缘像素一定更要对齐网格。所以我们通常会把图像放大很多倍以便精细观察。（图1）

图标的底制作比较简单，加上一些效果就有立体感了，这个时候，我们可以进一步考虑一下，单色的底会不会单调，有没有可以加上什么元素能让图标不是那么单调，而且还符合理财的功能定义（即图标上不会产生多余的无意义的元素）。

经过思考，我决定在底纹上加一些数字符号。既可以加强图标的功能语义，也可以摆脱单调、丰富图标视觉效果。（图1）

背景制作好，剩下的是图标的主体。主要是形状的绘制，跟造房子一样，先毛坯，后装修。先绘制形状，再在上面一层一层做效果。（图3）

可爱的小猪存钱罐马上绘制好了，只需画个投币孔和一枚金币。最后在细节调整过程中，设计师会给整套图标润色一下，本例中，我们给所有图标上方加了一个不规则形状的高光。图四

最后如果对色彩还感觉不满意，可以再微调一下。至此，整个图标绘制完成。在整个过程中，需要注意的几点是：

(1)像素对齐。

(2)要有耐心和专业精神，直到做出自己认为最满意的效果。 (3)保证整套图标的风格一致。 小结：图标的发展趋势

(1)图标分辨率越来越大。现在无论是桌面设备还是手持设备，其界面都在向高清方向发展，dip值都越来越高，所以图标也越来越大。

(2)写实风格与剪影图标并行。这是由市场垄断所造成，苹果（高质感的、带有写实风格的图标）与微软（以windows phone7为例的纯平面的、摒弃一切装饰的剪影图标）风格对立但各占市场。引领整个界面设计行业的风格。

(3)个性的手绘图标风生水起。我们整日对着的显示器和鼠标导致设计表达语言和表现手法的单一化。这需要到其他领域去寻找新的灵感，获得新的视觉效果。传统的手绘不仅仅能丰富创作手段，更重要的是它重新唤醒了视觉设计师们对设计中的原创性和艺术性的再认识。让我们的设计更加回归人性。

【参考文献】

［1］俞建章,叶舒宪.符号：语言与艺术.上海：上海人民出版社，1988. ［2］施耐德曼,普莱萨特,李建利,张国印.用户界面设计：有效的人机交互策略.北京：电子工业出版社，2011.

［3］陈素敏.设计图典系列·icon设计手册.北京：化学工业出版社，2008. ［4］http://cdc.tencent.com.