扁平图标原创笔记
扁平图标比线性图标更能表达出图标的力量感和重量感,比线性图标会更加容易吸引用户目光。
在识别度上,扁平图标更加依赖于面的轮廓,清晰的轮廓可以提高图标的识别度,用户对于图标的认可更高。
我们先对图标进行分类,以了解扁平图标的不同姿态。我们大致把扁平图标分为5类,如下图
接下来我们分别看一下不同图标的表现,首先看一下常规扁平图标
可以看到图标主要是面型图标,由填充的图形组成,填充色彩相对单一,图标内容简约,颜色使用统一,图标展现简单明了,没有明显特点。
常规扁平图标在现实中应用广泛,因其视觉效果简约,设计上更容易实现,只是视觉效果过于扁平,吸引力有限。
这是投影式图标,在视觉上,比常规扁平图标更吸引用户。投影增加了整体图标的空间感,结合图标本身色彩,一致性得到了充分体现。
在制作这类图标时,要注意投影的颜色及范围。首先颜色上尽量和图标本身色彩一致或同色系色彩,如果是深色投影,要注意调整颜色不透明度,过深或过浅的颜色都不是好的选择。另一个投影范围,要注意范围过大,投影可能会减淡甚至消失,范围太小,又容易使得投影过重,需要根据图标本身调整投影范围。
上图为长投影图标,与投影图标最大的区别就是其投影的范围较大,并且呈现一定角度。长投影图标是由现实场景转化而来,夕阳西下,太阳照在身上,留下长长的影子。
长投影的制作,一般采用向右下倾斜45度的方式(也有左下方向,相对较少),颜色比图标背景色更深,一般为同色系色彩。长投影图标的空间感强,视觉效果有延伸。
上图为渐变图标,渐变类型一般为双色,不过随着渐变图标的演变,色彩的控制已经不止双色,呈现出多色状态。如下图
当然这对于色彩要有绝对的把控,不然色彩过多,会导致视觉效果混乱,反而引起不适。
在双色渐变中,比较常见的为邻近色配色,色彩相对靠近,整体效果协调。也有同色系搭配,通过饱和度变化,一般颜色较浅的在上方,保证图标的重量感。
接下来我们说最后一种类型,折叠式图标
折叠式图标灵感来源于折纸效果,通过双色,利用视觉差,达到折纸效果。由于背景颜色已经足够丰富,则在内容设计一般使用单色,白色居多,再利用不透明度等变化,使其视觉效果更完善。
还有一种图标给大家介绍,用色很大胆的MBE图标。
MBE图标的诞生主要原因是由于大众对于扁平图标的视觉疲劳。扁平图标自发展以来,变化并不算太大,视觉特征也相对单一,于是MBE图标也应运而生。
MBE图标主要有以下几个特点
● 用色大胆,色彩艳丽
● 会有比较粗的线框,颜色较深,且有断点
● 内部填充与线框会留有间隙,模拟光影关系
● 周围一般有装饰图形
最后我们来说说扁平图标的设计技法,主要有三点
1. 提炼精华勾勒轮廓
2. 调整线条优雅得体
3. 增加细节出风格
如下图
图标右侧都为真实效果,如果想做扁平化设计,则需要先勾勒轮廓,保证图标的识别度与准确性,然后绘制与图形更贴合的线条,曲线或直线,圆角或直角,最后再调整细节,以丰富图标表现。