设计主页 > 设计作品 > UI设计 >

最全面的图标设计类型和风格总结(2)

优设 / IDfor 时间:2019-06-18 10:24
2. 线性类型拓展

基础的理论,结合延展的应用,可以迸发出更多的创意想法。线形图标也并非只有一种设计形态。通过以下案例,可以看看线型图标设计类型的多样性。

极简风格

整体风格极为简约,没有多余的线条,通过线条还原图形的本质,外形 「简单」 却具有很强的识别性,在视觉感知上轻松、干净。

极简的风格图标在于对图形的把控,多一笔可能显得复杂,少一笔可能影响识别程度。以上图为例,图标的组合元素保持在 2 个左右,整体较为干净。

实际应用:Instagram、Airbnb、Facebook、Twitter

双色

相较于 「纯色的图标」 更具表现力,细节上也会更加丰富,形态感知上多了一层变化。结合颜色的叠加、对比、互补提升了图标的层次感和丰富度。

同色系:同为冷色系、暖色系或同一色系的表达形式。如下图案例,以暗色为主色,亮色点缀提亮,使得图标具有一种高光提亮的感觉。

另一组案例是亮色主色结合暗色,整体图标效果还算可以,但较亮的颜色没有应用在图标的关键特征上,使得图标第一眼的感知稍有减弱。

对比互补色:颜色跨度更大,层次更加分明。如下图案例,红色与蓝色的撞色之后相比单色的图标更加出彩和具有记忆点。

实际案例:腾讯动漫我的页面

透明度变化

本质上与上面一种为一个类型的设计,通过透明度的叠加和变化,提升图标的层次感和空间感,降低图标的压迫性。

实际案例:爱奇艺9宫格图标

渐变层次叠加

渐变带出了图标的质感,结合「不同深度」或「不同饱和度」的变化,让图标更具有细节和层次。

黑白+品牌色

黑白色作为主色调,结合品牌色作为点缀色。与常规的黑白图标相比,既产生了变化,同时兼顾了品牌色的透出。

实际案例:大众点评攻略页面图标

线性渐变

结合渐变的颜色,丰富了整个图标的视觉表达,并提升了图标的视觉冲击力和设计感。案例结合黑白背景作为尝试,白底:粗线比细线的视觉效果相对较好,渐变也能较为清晰地被表达;黑底:细线比粗线的视觉效果显示得更加精致和具有锐度感。

实际案例:网易考拉、NAVER

一笔成形

此类图标在视觉表达上具有较高的线性流畅度和设计感,关注点在于整组图标的 「开口起始点」 设定上需保持一致。例如,「从左到右」或「从右到左」形成一体化的连贯线条,开口起始点不一致会影响整组图标的一致性,应用在页面时也会显得杂乱。

断点图标

与上一种较为类似,但没有连贯度的要求。在线形图标基础上面,寻找一个缺口来打破 「全包边图标」 的沉闷感,使得图标具有透气性和线条的变化。缺口的位置尽量保持统一的方向及大小,另外需要控制开口个数避免过多导致图标外形过于零碎。

实际案例:腾讯体育、京东

面性图标

面性图标比线性图标更能表达出图标的力量感和重量感,比线性图标会更加容易吸引用户目光。在识别度上,面性图标更加依赖于外轮廓的清晰度,因此在设计时对于外形的打磨是重中之重,清晰的外轮廓可以帮助提高识别度。