Image may be NSFW.
Clik here to view.
温馨提示:笔者入行不久,所言有不当处还望看官海涵:)
在我们日常生活中,图标应用无处不在,软硬件、网页、社交公共场合等。
广义上:
图标指具有指代意义的图形符号,具有高度浓缩并快捷传达信息、便于记忆的特性。
狭义上:
就是我们所熟悉的在计算机程序方面的应用。包括:程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。
一套好的图标能够为用户直观传达所描述的物体,减轻用户的认知负担,特别是一些抽象的功能和意义。同时增添图标的精美度不仅能提升整个界面的吸引力 和观赏性,还能使产品与用户产生共鸣。
以下笔者以制作电话本和短信息图标二者为例,与看官分享心得:
STEP.1
设定风格。通观整个图标设计,设定风格是基础,亦是非常重要的一步。需要对整套图标进行周全的构想,因为这一步为图标设定了一个方向,之后图标设计的造型,上色的深入展开都要以此为基础。在这里我设定的是复古做旧的风格。
STEP.2
绘制草图。这一步骤主要是设计图标的造型。造型在图标设计中有着决定性的影响,他直观的给用户展现其所代表的含义。而草图是最直观,最快速展现设计 构思的一种方法。此时我们可以通过头脑风暴列举出一些能让用户一目了然,又贴合电话本和短消息含义的元素,同时列举的元素又要符合复古做旧的风格。因此, 我选取做旧的通讯录来表示电话本,选取羽毛笔和信纸来表示短消息。在绘制草图时,要注意图标造型的统一,方向的一致性,使图标有充分的辨识度。其次要控制 单个图标元素的数量与其他图标相协调,用最少的元素来表达图标的含义。不然过多的元素不仅会使图标臃肿不堪,更会使图标的含义模糊不清,难以琢磨。
Image may be NSFW.
Clik here to view.
STEP.3
上色刻画。在确定造型之后,就需要对图标上色以及深入刻画。
1、 勾勒造型
用钢笔工具依循手绘线稿勾勒出图标造型,并上色区分体块
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
2、 添加细节
确定光源位置后,根据光影变化添加细节
Image may be NSFW.
Clik here to view.
3、 刻画羽毛笔
对羽毛笔进行深入的刻画
Image may be NSFW.
Clik here to view.
4、 丰富细节
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
5、 做旧质感
为了贴合之前设定的复古做旧风格,给通讯录和信纸加上破损的效果,再为通讯录的封面添加边角,以凸显其年代做旧感,迎合主题
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
综上总结一些要点供参:
1、设计一套完整的图标要确保其风格的一致性。在造型,透视,大小,色彩,效果处理等各个方面做到统一,以保证每个图标都与其风格相契合。
2、控制图标元素的数量,对一些不必要的元素要果断去除。图标应该是一种能使用户轻松识别的图形语言,而不是成为用户阅读的负担。更要充分展现各个 图标间的差异程度,提升图标自身的辨识度,从而帮助用户理解阅读。
3、考虑这套图标所应用的环境。不同国度,不同社会环境,不同文化传统对图形也有不 同的认识理解。同时也要考虑到人们的情感因素,避免使用敏感图形。所以在设计开始就应考虑周详,谨慎使用。
4、画图标要有足够的耐心,对于细节要不怕繁琐,细心揣摩。
最后,让图标点亮用户对你的界面认同,第一时间抓住用户的心,细节处体现设计的品质感,我相信,众位大师跟本菜鸟一样,把给用户与众不同的体验和视觉关怀奉为心中无上的信仰,设计路上,与众位共勉。
本文转载自草根网 链接http://www.20ju.com/content/V192701.htm