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

版权申明：本文出自“laycka”原创，感谢“laycka”的原创教程分享！

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

本文章是我对商业图标（商业图标指：已上线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）为例子，是以椭圆为基础型，做对话气泡的效果。

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

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

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

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

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

制作难度：✦

a2.主体附加结构型

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

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

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

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

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

制作难度：✦✦

a3.双主体结构型

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

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

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

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

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

制作难度：✦✦

a4."袋鼠"型

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

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

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

制作难度：✦

a4.多层结构型

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

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

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

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

制作难度：✦

a5.连体结构型

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