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

01.从品牌LOGO延伸设计

这是最为推荐的思路，因为从Logo设计特征延展出来的图标设计，其实是把品牌基因融进UI设计，能让用户自然地产生与品牌间的联想，加深品牌印象。

马蜂窝：提取了Logo底部的弧线设计，在系统图标中多处都应用了弧线，成为其标志性的设计元素，app logo和系统图标形成一套统一的视觉系统。

链家、Quark：都采用断线（或称为开口）的设计，由于品牌Logo本身具有这种特点，因此让人感觉非常自然、一体化。

02.从品牌IP延伸设计

和从品牌logo延伸的设计一样，从IP延展也能让用户自然地联想到品牌，并且拟人化的形象能让图标富有情感和活力，更好地将情绪传递给用户。

03.造型创意

断线法：

断线（开口）的设计让图标更有造型感。需注意的是，开口通常选择在线条交界的地方，让图标有透气的感觉。

几何法：

运用基础的几何图形如圆、方、线条、点等做设计，这种设计语言最终呈现的风格往往会有较强的设计感；

由于这种设计造型简洁，所以通常会结合稍粗的线条增加图标视觉重量。

04.色彩创意

1） 色块（自如）：描边的图标造型结合几何形状的色块，是现在较为流行的一种设计；

2）微渐变（大众点评）：流行了一整年的设计，在很多app的金刚区图标上会采用这种设计来强调入口，吸引用户视觉注意力；

3）邻近色的碰撞（enjoy）：比较少见，如果应用不当容易导致图标过于花哨，失去视觉焦点。

4）同色相的不同透明度或不同明度组合：能够丰富图标的色彩层次，同时又不至于让图标太复杂。

05.质感创意

具有质感的设计会让图标视觉非常突出，因此通常适合应用在界面本身内容较多，需要特别强调的图标类型上（如金刚区图标）。

常用的表现手法：

1）渐变：应用渐变色让图标具有厚度或形成前后关系；

2） 投影：应用投影提高图标的视觉层级，使具有重量感；

3）轻拟物：比起以前追求逼真细节的拟物，通过色彩变化形成的轻微拟物质感能让图标更具现代感。

06.动效创意

在图标上应用动效的例子越来越多了，但多数是在切换tab时有一个缩放效果的动效。以下这两个例子是图标在选中状态时有很轻的动画效果，让人感觉很舒服：

氧气app：商店Tab在选中时，盒子上方的气泡在轻盈地晃动碰撞，创意也符合产品“氧气”的主题。并且这种微动效很轻，不会过于分散用户注意力，在图标动起来的瞬间，能给用户眼前一亮的惊喜；

饿了么：分类图标的“水果”图标，是会轻微弹跳的（嗯截图的时候橙子正跳着所以拉长了）；

VSCO：DSCO icon有渐变色彩变化的动效，可能是出于推广的需求，需要吸引用户的注意，对于第一次看到的用户来说，出于好奇点击的可能性应该比较大。

只需要一点点的创新就能让图标形成差异化，深化品牌风格。以上每种创意方法都有各自的特点，在我们确定好风格方向后，需要结合项目特点选择合适的创意方法。

实用技巧 ↓ （点击免费观看~）

和套路说"No"，解锁LOGO设计新技巧！

吉祥物设计，原来就这么简单！

字体这样改，就能为公司节省上万元开销！

LOGO百变方法大解析

建了个裙，大家一起学 UI 啊 700842555 有很多同样在学习UI的小伙伴在里面。大家可以一起学习，分享学习资料，每天还会有免费的直播公开课，大家手动添加下，找管理要资料就好

附件有相关的学习视频，需要的可以自行下载观看哦~~

Powered by Froala Editor