商业图标的汇总及创意拆解

这篇文章讲的知识面可能会有点多，所以不能将每一个图标类型详细解释，可能会有些理解门槛，这里建议大家先了解一下整个文章的结构！

本文章是我对商业图标（商业图标指：已上线app中的icon）的一个分析汇总。大纲我分了两大类，一类是针对结构创意icon的汇总与分析，另一类是针对icon修饰方面的汇总与分析。每一个板块都会借用一个icon来分析这几个方面：讲解创意点、制作难点或注意事项、分析图、延展方案、制作难度。因为对于表达的方便可能会用到一些我自己定义的词汇，例如元素、主体来形容图标的核心结构，文章中提到的创意点意思是基于一个普通图标上的一些设计点，普通图标的理解就交给大家了 =。=

目录

A.结构

  a1.基本型                 

  a2.主体附加结构型

  a3.双主体结构型

  a4.“袋鼠”型

  a5.多层构成

  a6.连体结构

  a7.布尔结构

  a8.断口结构

B.修饰

  b1.多色线型

  b2.立体视觉

  b3.流体感

  b4.场景简写

  b5.旋转合成

  b6.视觉中心转移

  b7.面型渐变

  b8.线型主体+浅色投影块

  b9.线型渐变

  b10.径向渐变

  b11.线型前景+渐变修饰色块

  b12.低饱和背景+高饱和前景

  b13.低饱和度暗面设计

  b14.线型不同明度

  b15.拼色

  b16.黑边

a1.基本型

讲解：在基础图形上进行绘制创意。以（微信消息icon）为例子，是以椭圆为基础型，做对话气泡的效果。

制作难度或注意事项：此类图标虽然容易绘制，但要注意绘制出来的样子和所用的基础型要基本相似，让整体感觉很稳固又有辨识度。

延展方案：  是否可以更改基础型进行创意？

                    是否可以保留基础型再进行创意？

                    和别的创意点融合是否可行？

制作难度：✦

a2.主体附加结构型

讲解：在基础图形上进行绘制创意。以（微信消息icon）为例子，是以椭圆为基础型，做对话气泡的效果。

制作难度或注意事项：附加小主体一定要选好放的位置，保证图标的整体性

延展方案：  是否可以更改附加体的位置来进行创意？

                    附加体的功能是不是可以创新？ 

                    *和别的创意点融合是否可行？

制作难度：✦✦

a3.双主体结构型

讲解：图标存有两个主体，可以是镜像，也可以是两个不一样的主体互相搭配成一个整体。像扫一扫这个图标用了45度的镜像，让两个手指间形成了一个基本型（正方形），灵感来源于生活中的手型相机。

制作难度或注意事项：注意两个主体需要有一定关系

延展方案：  是否可以更改镜像角度来进行创意？

                    是否可以不采用镜像的方式进行双主体创意？

                    *和别的创意点融合是否可行？

制作难度：✦✦

a4.“袋鼠”型

讲解：图标类似袋鼠的口袋一样包裹着一个主体

制作难度或注意事项：注意对齐问题，工具对齐不一定在视觉上对齐。

延展方案： *和别的创意点融合是否可行？

制作难度：✦

a4.多层结构型

讲解：图标存在前后关系，或则说是多层关系。像微粒贷这个icon一个正方的基本型和一个钱币的符号就可以表达，但这样会显得太常规，不够有趣。多层设计很好的提升了可看性。

制作难度或注意事项：注意前面的层要遮挡住后面的层才能体现多层关系

延展方案： 2层？3层？更多？

              *和别的创意点融合是否可行？

制作难度：✦

a5.连体结构型

讲解：将常规图标上进行连体，使图标各个线条成为一个整体。如加入音乐人的icon里面的音符和外面的基础型（圆）可以成为一个“袋鼠”型结构，但为了再创意，进行连体，将外圆进行断线将音符连在了一起。

制作难度或注意事项：用到工具为钢笔工具

延展方案：是否可以改变连体点的位置进行创意？

                 *和别的创意点融合是否可行？

制作难度：✦✦

a6.布尔结构型

讲解：此类图标存在布尔运算的设计，如歌单这个图标，含有一个表单的图形和一个音符，他们的重合点是音符和表单做的一个布尔（减去顶层），使他们两个很紧贴的成为了一个整体。

制作难度或注意事项：注意用减去顶层的时候顶层图形应该稍大一些

延展方案：是否可以用别的布尔进行创意，如排除重叠形状？

               是否可以更改布尔运算点的位置进行创意？

              *和别的创意点融合是否可行？

制作难度：✦✦✦

a7.断口结构型

讲解：线性图标出现断口，打破了原本闭合的外框

制作难度或注意事项：无

延展方案：是否可以改变断口位置来进行创意？

               是否可以有多个断口？

              *和别的创意点融合是否可行？

制作难度：✦

b1.多色结构型

讲解：前提是线型图标，在配色上用了两种或两种以上的色彩。如卡包这个icon用了蓝色和绿色的组合。

制作难度或注意事项：颜色选择要和谐

延展方案：可不可以是面性？

              *和别的创意点融合是否可行？

制作难度：✦

b2.立体视觉

讲解：没有光影，但存在透视关系。就如收藏这个图标，是一个2.5D的结构存在平行透视。

制作难度或注意事项：尽量用简单的透视例如平行透视

延展方案：*和别的创意点融合是否可行？

制作难度：✦✦✦

b3.流体感

讲解：图标整个感觉是很有弧度很有流动感，如腾讯公益这个icon设计核心是一颗爱心，在爱心的表现上用了流动感很强的绸带。这种图标在绘制上是需要手稿绘制，不断刻画流动感。

制作难度或注意事项：用到工具为钢笔工具

延展方案：*和别的创意点融合是否可行？

制作难度：✦✦✦✦✦

b4.场景简写

讲解：图标简单的刻画了一个场景，如上图的漂流瓶icon，通过瓶子为主题以横线的水波纹理作为背景刻画了一个漂流的场景。

制作难度或注意事项：场景可以包含有前景、中景、背景

延展方案：换个前景？换个中景？换个背景？

               *和别的创意点融合是否可行？

制作难度：✦✦✦✦

b5.旋转合成

讲解：图标是由其中的一个结构通过旋转复制出来的。如朋友圈的图标是由里面的一块通过中心旋转8份得到。这种设计方法可以创造很多有趣的图形。

制作难度或注意事项：旋转后的角度要刚好为360度

延展方案：旋转主体的方向是不是可以变换？

               旋转的次数是不是可以变换？

               旋转主体到旋转中心点之间的距离是不是可以更改？

               *和别的创意点融合是否可行？

制作难度：✦✦✦✦✦

b6.视觉中心转移

讲解：图标的中心不在正中央，而是转移到别处。如搜一搜这个icon，五个条状指向的位置并不是中央而是左上角。

制作难度或注意事项：绘制前得先确定好中心点位置

延展方案：中心点的位置变换？

               *和别的创意点融合是否可行？

制作难度：✦✦✦

b7.面型渐变

讲解：图标有个渐变的圆底块，前面为浅色主体带投影的设计。如找人这个图标，是一个橙色到偏黄的色渐变。一般这样的图标很多用于金刚区。

制作难度或注意事项：绘制前得先确定好中心点位置

延展方案：渐变是否可以进行不同的尝试？

               *和别的创意点融合是否可行？

制作难度：✦✦✦

b8.线性主体+浅色投影块

讲解：线性图标底部给一块明度高饱和度低的颜色块，貌似投影一般。如我的赞图标，赞这个图标下面给了一个较浅的色块，给人一种投影的感觉。

制作难度或注意事项：注意底部色块不宜太满

延展方案：面性图标是不是也可以这么做？

               *和别的创意点融合是否可行？

制作难度：✦✦✦

b9.线性渐变

讲解：线性图标加上渐变。如借钱图标，图标虽然前面是一个“借”字，但并没有面状结构，所以还是线状结构的图标，然后整个图标加上渐变色。图标给人丰富感，不会单调。

制作难度或注意事项：注意渐变使用的柔和度

延展方案：渐变角度是否可以变换？

               *和别的创意点融合是否可行？

制作难度：✦✦

b10.径向渐变

讲解：渐变类型是径向渐变。如私人FM的图标，后面的园底是一个饱和度的径向渐变，而且饱和度的跨度很大，给人一种朦胧感。

制作难度或注意事项：注意把握径向渐变的大小

延展方案： *和别的创意点融合是否可行？

制作难度：✦✦

b11.线型前景+渐变修饰色块

讲解：线性图标后面加上一个渐变底块。如演唱会这个图标，是个线状，但略显简单，但设计了一个渐变底块，起到了很好的装饰作用。

制作难度或注意事项：修饰底块不宜太满

延展方案：装饰色块的面积大小是否可以变化？ 

              *和别的创意点融合是否可行？

制作难度：✦✦

b12.低饱和背景+高饱和前景

讲解：图标是一个低饱和明度高的背景和一个饱和度高的前景组成。如地址这个图标，同样是蓝色系，只是在饱和度上形成了反差，这样使整个图标不会单调，有光影层次的感觉。

制作难度或注意事项：前景和背景都应该用同色系

延展方案：*和别的创意点融合是否可行？

制作难度：✦✦

b13.低饱和暗面设计

讲解：图标绘制存在暗面，暗面用饱和度低的主色系。如芝麻信用这个图标，前面的图形刻画了轻微的暗面关系，颜色用的是主色系调低饱和度的浅绿色，整体感觉很干净也有光影关系。

制作难度或注意事项：颜色尽量保证在主色系附近

延展方案：*和别的创意点融合是否可行？

制作难度：✦✦✦✦

b14.线性不同明度

讲解：无色线性图标上，对不同线条做不同明度的处理。如侃侃社区这个图标，用到了两个灰度，一个是爱心的灰度，一个是气泡的灰度，给人具有明暗变化的感觉，丰富性提升了很多。

制作难度或注意事项：明度跨度不宜太大

延展方案：是否可以尝试多个明度？

              *和别的创意点融合是否可行？

制作难度：✦✦

b15.拼色

讲解：图标含有多个色相的颜色拼接在一起。如视频这个图标，用了白色、粉红、宝蓝三种颜色，组合在一起带来一种不一样的感觉。

制作难度或注意事项：颜色搭配要和谐

延展方案：配色数量是否可以变换？

              *和别的创意点融合是否可行？

制作难度：✦✦✦✦

b16.黑边

讲解：黑色的线性图标，加上了有色色块。如服务保障图标，整个图标是黑色，但加上了粉色底块后显得不太单调，丰富了整体感。

制作难度或注意事项：色块不宜太满

延展方案：黑边的明度是否可以变换？

              *和别的创意点融合是否可行？

制作难度：✦✦

总结

本次的列举是目前上线产品中80%-90%的设计结构创意点，文章反复强调多个结构创意点是否可以重组，肯定是可以的，这样运用数学算法是否会发现，这个创意发散是非常多的，也许可以运用到你的工作学习上哦！