Quantcast
Viewing latest article 7
Browse Latest Browse All 8

菜鸟弄斧—聊聊图标设计

   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

 


Viewing latest article 7
Browse Latest Browse All 8

Trending Articles