来源:微信公众号 PingMianDesigner(平面设计)

图标设计是怎么做出来的(详细解读图标设计)(1)

图标设计是怎么做出来的(详细解读图标设计)(2)

其实图标创意阶段前还有一个重要的步骤 -- 创意准备。根据设计师所要做的项目需求,确定ICON图标的风格样式,这一步骤在界面设计过程中,可用图标风格评测的方法来确定所绘制的图标是什么样的风格路线,这也是项目前期对用户研究的内容,有潜力的公司会制订“用户角色”,用来指导界面视觉风格方向、界面内容建构和交互设计等。

图标设计是怎么做出来的(详细解读图标设计)(3)

当设计师从客户那里接到设计任务后,应怎样开始设计图标呢?首先要看懂界面的需求,并对每个功能图标的定义要非常清楚,否则设计的结果将导致用户难以理解,这个也是图标设计所关心的可用性问题。

图标设计是怎么做出来的(详细解读图标设计)(4)

但视觉审美和可用性有时候存在着矛盾,设计师们不能走极端,只顾及可用性而忽视设计美观的一面,也不能太追求设计上美的需求而忽略了这是一个功能性很强的界面图标,最好是能在这两者之间取得平衡。

图标设计是怎么做出来的(详细解读图标设计)(5)

理解功能需求后,设计师要收集很多关于“关键词语—联想图形”之间能转化的元素,用生活中的物或其他视觉产品来代替所要表达的功能信息或操作提示。例如:音乐,我们会想到音符、光盘、音乐播放机、耳机等。但到底选择什么来表达呢?原则上是越贴近用户的心理模型最好,用大家常见的视觉元素来表达所要传达的信息。

图标设计是怎么做出来的(详细解读图标设计)(6)

图标设计是怎么做出来的(详细解读图标设计)(7)

草图绘制阶段就是将设计师的创意绘制出来,检验视觉关系,也就是在视觉方面多在草图上推敲,以提高效率,避免在渲染完成后再来修改而造成不必要的浪费。首先要确定图标透视,即关系到一套方案中的每个图标的透视方向,这是在图标设计一致性方面的基本要求,透视统一,然后一步步地进行细节添加。

图标设计是怎么做出来的(详细解读图标设计)(8)

图标设计是怎么做出来的(详细解读图标设计)(9)

图标要表达一定的含义就往往须组合不同的形态,借助单个形态所传达的内在信息,拼合在一起去传达另外一种信息。例如:在设计“导航”功能图标时,设计师第一反应是与卫星有关,但就以单个卫星的外形来传达导航的含义恐怕不够,于是再联想与导航有关的信息图示,如“坐标”“旗帜”“陆地”等。再经过设计师以视觉平衡原理合理地布置它们之间的主次、空间关系。

图标设计是怎么做出来的(详细解读图标设计)(10)

需要注意的是,不可随便使用其与要表达功能相关的图形或物体,要经过精心的挑选,最好是大家熟悉、易记的物或形,毕竟目的是要帮助用户更形象地理解程序的内在功能含义,以易记、易懂为前提。也不能借助过多的图形来表达图标含义,因为过于复杂反而影响用户的理解。

图标设计是怎么做出来的(详细解读图标设计)(11)

图标设计是怎么做出来的(详细解读图标设计)(12)

在前面的流程完成后,设计师设计的草图已经很清楚地表达了自己的想法,并且也能与功能信息密切地吻合,那就需要使用 PS、 AI等软件进行绘制,这要看个人的习惯,以及对软件的熟悉程度。

图标设计是怎么做出来的(详细解读图标设计)(13)

图标设计是怎么做出来的(详细解读图标设计)(14)

①常规扁平式

特点:纯色、剪影图形。

优点:简洁清新、识别性良好、色彩明朗、设计感强烈。

图标设计是怎么做出来的(详细解读图标设计)(15)

②渐变折痕式

特点:纯色、折痕、轻渐变。

优点:比常规扁平化丰富,有轻微空间感、色彩明朗,视觉统一性好。

图标设计是怎么做出来的(详细解读图标设计)(16)

③轻质感式

特点:简单层次、轻投影、轻渐变。

优点:简洁、明朗,有一定的精致感,有简单的层次,内容丰富。

图标设计是怎么做出来的(详细解读图标设计)(17)

④长投影式

特点:层次、投影。

优点:色彩对比度大,有明显而单纯的投影,有鲜明的层次感和空间感,视觉冲击力强。

图标设计是怎么做出来的(详细解读图标设计)(18)

⑤轻厚度式

特点:厚度、细节、轻投影。

优点:有明显的厚度,既有明显的立体感,有厚重感和细节感,但相对于复杂统一性没有。

图标设计是怎么做出来的(详细解读图标设计)(19)

图标设计是怎么做出来的(详细解读图标设计)(20)

所谓立体图标,就是在图标的设计中运用了空间透视、投影效果、浮雕效果、色彩渐变效果等,使图标本身看上去具有视觉上的立体效果的图标设计。立体指的是具有长宽高空间因素,平面图标的立体表现和设计师绘画中的立体感表现是一致的,相比起简洁的扁平化图标而言,立体的图标具有以下一些显而易见的独特优势。

图标设计是怎么做出来的(详细解读图标设计)(21)

①三维立体,视觉震撼。

②形象生动、易于识别。

③个性多样、美感十足。

④新颖别致、独具一格。

图标设计是怎么做出来的(详细解读图标设计)(22)

立体图标赋予了图标本身更高的艺术性,也使得图标本身拥有了得天独厚的视觉传达优势。立体图标拥有强烈的空间感、立体感和视觉冲击力,图标在显示屏中会更加的真实灵动、触手可及,同时对用户而言,也增加了图形的趣味性并引起用户的点击欲。

图标设计是怎么做出来的(详细解读图标设计)(23)

,