图标是用户在应用中接触最多的视觉符号，它既承载了引导用户操作的功能，也是构成产品视觉风格的重要元素。很多新入职场的设计师可能会因为时间紧张、急于出效果，而直接上网找素材开始设计图标，导致最终被问及设计依据时，只能说出“流行”或者“比较有设计感”这样的理由。所以本文主要分享在接到新项目时，如何确定并把控图标风格，以及图标设计的方法和创意。

Step1. 设计分析：从产品出发确定视觉方向

为什么要从产品出发？

图标是产品整体视觉的一部分，它和界面的其他设计元素应保持统一的设计语言。通过产品定位、品牌确定的视觉方向，能够实现产品界面中所有视觉设计的一致性。

从产品到视觉，如何提炼视觉关键词？

这其实是一个从产品开始发散，渐渐具像化、视觉化的过程。笼统地说有点像“名词（产品定位）-形容词（视觉关键词）-名词（设计语言）”。举个简单的例子：bilibili-二次元、弹幕（名词）-快乐/活泼/可爱（形容词）-多彩/圆/表情（名词）。有经验的设计师可能在接到需求时脑海中已经有一个大概的设计图了。对于新人来说，需要平时多研究别人的产品设计，网上有很多关于如何赏析的文章可以阅读，积累素材。总之通过产品定位，希望能得到一些形容视觉氛围印象的词汇，最终才能变成具体的、设计语言的东西。

举例：产品定位与视觉表现

虾米：定位于小众、文艺、品质，通过它的产品我们能感受到它的精致和细腻的质感。产品中没有用到大面积的彩色色块或分割线，界面很干净；图标设计方面，则采用非常细的描边（2-3px，和tab下的线条一致），同时应用了断线的处理和短线条的修饰，图标显得非常精致。外加造型上的创意：首页的功能入口图标都结合了圆（CD的造型）的形式，这些细节烘托出虾米音乐的细腻。

网易云音乐：app开屏Slogan是“音乐的力量”，进入主页看到顶部用了大面积的主题红，整体氛围较为热烈。相应的，它的金刚区图标也运用了红色渐变的圆形底板，以平衡界面的视觉重量，避免头重脚轻。如果用虾米那种细线形式的图标，首先它无法传递力量感，其次也无法撑起界面（因为头部色彩太重了）。图标造型虽中规中矩，没有过多的修饰性设计，但图标表意准确，简洁易懂。

QQ音乐：Slogan是“听我想听的音乐”，给人的品牌印象是“潮流的”、“个性的”。因此首页入口图标采用更有重量感的面性设计而非线性，即便是其他线性图标的设计（如播放控制及“我的”界面中），所用的描边也是较粗的，以形成更为“强烈”和“肯定”的风格。

所以，当我们需要为产品设计一套新图标时，不能急着找参考，首要分析产品定位和用户群特征，提炼视觉关键词，拿准视觉方向。

Step2. 设计方法：确定图标各要素的设计表现

视觉的关键词确定后，可以开始定义设计语言了。如果你对于图标设计还不是很熟练，那么可以尝试将图标设计细分成几个要素：造型、描边、色彩、圆角、大小、质感等，分别去定义这些要素，一套图标的设计语言的雏形也基本形成了。

如果你的产品是活泼的社交产品，那么你可能要去尝试圆角、较细的描边、饱和丰富的色彩，来表现产品的亲和力，渲染热烈的氛围。

如果你要做高端的电商平台，那么你的图标可能采用稍细的描边、干净简洁的图形表现、以及较为克制的用色，来体现平台的高级感。

在这个阶段的设计并不是一蹴而就的，需要耐心地多去尝试，对比不同的效果。

Step3. 加分项：创意方法

按照这个思路基本可以把图标风格定下来，但是如果只按照这个思（套）路（路）去做图标，最终设计可能会陷入严重同质化。这时候就需要加入一些创意性、特色的设计表达，形成与竞品的差异。

但是创意难求，也许很多人都经历过在网上不断刷图片找参考期待灵感闪现，所以我尝试从图标的造型、色彩、质感等维度去归纳图标的创意方法，从其中一个点切入寻求创新，也许能更快地找到好的表达。

01.从品牌LOGO延伸设计

1. 从品牌logo或IP延伸设计：这种方式应该是最自然的，结合IP的设计就像让图标瞬间有了生命，情绪感染力更强。比如虾米音乐、same、全民k歌多处用到了IP形象:

2. 从图标的一个或两个设计要素入手寻找突破口（下图）

自如：在造型和色彩上，采用线条+色块结合的设计实现创意；

大众点评：在色彩和质感这两个元素上，通过渐变和投影的方式形成特点；

enjoy：在色彩方面采用邻近色搭配，在造型上选择粗线条形式，形成自己的特色。

只需要一点点的创意设计就能让图标具有差异化特色，深化品牌风格。但创意固然重要，更重要的是设计不能偏离主题，设计的过程中要时不时停下来看看，参考前面所做的产品分析和视觉关键词，检视自己的设计是否还满足基本要求。