【图标】第五篇 | 装饰图标的设计

本章就开始进入下一个主题,关于装饰图标的设计。

【图标】第五篇 | 装饰图标的设计

在装饰图标中,就没有工具图标那么严谨的规范需要遵循,也就意味着自由度越高,可以任意发挥。显然,想要通过一篇文章掌握所有的装饰图标视觉设计方法,并不现实,新手只要将精力聚焦在最常用的几种图标风格的设计上即可。

装饰图标最主要的应用区域,集中在首页的快速入口上,也是今天多数应用中会使用的组件。下面,我们会通过讲解国内主流应用中的几种装饰图标的设计。


【图标】第五篇 | 装饰图标的设计

装饰图标的主要作用是丰富视觉体验,对于识别性的要求较弱,所以我们可以在这里应用更复杂的图形和添加更多的细节。在这里的扁平插画风格设计更具象,而不是像工具图标一样的抽象化,所以完整的采用扁平插画的设计是没问题的。

例如在肯德基客户端首页的服务分类中,使用的图标就是依据扁平插画的形式设计的,有较多的色彩和完整的细节。

【图标】第五篇 | 装饰图标的设计

这类图标设计的并不困难,只要具备了工具图标的设计基础,就可以很快学会并运用。它的设计特征是这样的,先通过绘制具体的图形轮廓,然后为这个轮廓内添加细节,并对不同的面填充不同的色彩进行区分。

下面,我们通过讲解几个图标的设计过程,帮助大家学习这种设计风格。

1、优惠券图标

先通过模拟现实世界的优惠券样式,确定出基本的线性轮廓。

【图标】第五篇 | 装饰图标的设计

但作为装饰图标来说,这样的设计目前有点简陋,左侧空出了大量的留白,所以我们要考虑如何增加细节来丰富这个区域。于是,使用 % 号就可以比较好的标示折扣。

【图标】第五篇 | 装饰图标的设计

最后,开始为图标填色。因为在这套图标中,红色是主要基调,所以我们不能大面积的使用其它颜色,于是就将其中一侧进行留白处理,只修改了它描边的色彩。并且还在票据两侧的连接处添加了一个用来标示阴影的竖线。

【图标】第五篇 | 装饰图标的设计

2、店铺图标

【图标】第五篇 | 装饰图标的设计

3、我的卡包图标

【图标】第五篇 | 装饰图标的设计

【图标】第五篇 | 装饰图标的设计

和其它风格比较,在快速入口中,线上案例应用得最多的风格其实是渐变几何背景的设计方案,即在一个应用了渐变色的背景上帖了一个线性或面性的图标。

【图标】第五篇 | 装饰图标的设计

这种风格的设计,主要在于背景渐变色的应用上,通常,在一组彩色快速入口的图标中,要让它们的渐变色看起来自然和谐,是需要技巧的。

例如有四个图标,首先要定义出不同的色相,然后再对它们应用相同的渐变模式。例如,使用相同的渐变角度,然后在渐变的起始色使用该色相,在结尾使用不同明度、饱和度的色彩。

【图标】第五篇 | 装饰图标的设计

之后,再在上方置入图标的图形,并为它们添加适当的阴影即可。

【图标】第五篇 | 装饰图标的设计

如果在这个基础上,还想再添加细节,那么就可以在上方的图形中添加一些折叠的阴影效果,强化立体感。

【图标】第五篇 | 装饰图标的设计

【图标】第五篇 | 装饰图标的设计

这是一个比较奇特的设计风格,在过去只存在于飞机稿中,是一种单纯为了追求视觉表现力的设计形式,通过高饱和的渐变、撞色,抓取浏览者的眼球。

【图标】第五篇 | 装饰图标的设计

这类风格的设计,在确定了图形以后,就是为它们填充高饱和度的渐变色。和扁平插画比较不同的是,色彩的填充不是用来描绘物体的颜色,而仅仅是视觉表现的一种方法,所以颜色的添加追求的不是 “合理”,而是纯粹的 “好看”。

并且,通常这类图标还会使用前两年开始流行的彩色投影,增加界面本身的层次感。下面,我们也通过 3 个案例,为大家演示一下这类图标设计的过程。

案例1:

案例2:

【图标】第五篇 | 装饰图标的设计

案例3:

【图标】第五篇 | 装饰图标的设计

【图标】第五篇 | 装饰图标的设计

最后,讲讲实物贴图的图标风格。这种图标出现在涉及到实物产品的应用中,例如电商应用,智能硬件控制应用等等。

【图标】第五篇 | 装饰图标的设计

这类设计看起来很简单,只要画出一个几何的背景,并建立蒙版将实物图置入进去即可,但还是有不少新手会犯的错误,下面我们主要说说常见的问题有哪些。

第一,就是物体的透视。和工具图标一样,我们要尽可能的保证整组图标中图形的形状和透视可以统一,如果实物图采用的透视不一致,那么空间的对立感就更强,也有更容易被用户觉察到的违和感。

【图标】第五篇 | 装饰图标的设计

第二,形体和比例。当我们采用实物照片时,该物体完整的形状我们往往不能控制,但切记的是,不是物体本身是什么形状我们都要完整的置入进去。

比如如果入口中有口红和香水两种,口红是细长的而香水是圆形,那么我们可以做的就是要放大口红,最终只展示它的局部,否则它们的对比会完全失衡。

【图标】第五篇 | 装饰图标的设计

第三,图形的质感。实物的图形,还有一个非常重要的细节,就是它们的质感。这种质感指的不是物体本身的材质,而是摄影、后期产生的质感。如下图的对比,同一件商品,手机直出的图,和经过商品精修的图,展现出来的质感是完全不一样的。

【图标】第五篇 | 装饰图标的设计

如果强行将有精修痕迹和普通照片抠出来的商品放到一起,也只能给用户产生巨大的违和感。所以,如果提供给我们的素材本身质感不同,那么我们就要在 PS 中对它们进行调试,尽可能保证它们的一致。

第四,前后对比。因为是摄影图,所以图形本身包含的细节会非常丰富,而且色彩也可能比较多。在采用了几何背景时,就要保证它能更好的衬托主体物。如果使用较强的颜色,或是太多细节,就会导致前后元素的分离度不足,无法凸显物体本身。所以,多数采用这种风格的设计案例中,背景用色都使用饱和度偏低的配色。

【图标】第五篇 | 装饰图标的设计

只要能保证不犯上面 4 种错误,那么设计这类图标时,就能保证最终的效果不会太差。


【图标】第五篇 | 装饰图标的设计

对于装饰图标的设计占时解释到这里,掌握以上这种风格的画法,已经可以应对绝大多数的需求和场景了。

但这并不是终点,应用对于视觉风格的追求越发的重要,想要尝试界面设计风格更多的可能性,那么就需要掌握越多种装饰类图标的设计方法。需要读者们在之后的时间里努力积累相关的技巧和思路。

本系列文章在下方,同学可以点开阅读~

【图标】第一篇 | 图标的设计详解
【图标】第二篇 | 工具图标的设计
【图标】第三篇 | 基础线性图标的设计
【图标】第四篇 | 面性图标设计详解
【图标】第五篇 | 装饰图标的设计
【图标】第六篇 | 启动图标的设计
【图标】第七篇 | 进阶线性图标的设计
【图标】第八篇 | 图标的应用详解

超人为图标设计录制了系列免费课程,如果时间充足可到哔哩哔哩学习~

《哔哩哔哩图标设计系列课程》

网站声明:
1. 本站资源来源于用户上传和网络,如有侵权请邮件联系站长处理
2. 分享素材仅供大家学习和交流,所扣积分并非购买素材版权,而是赞助网站资源收集与整理,可商用原创素材会单独声明
3. 如果你也有好资源分享,可以到审核区发布,分享有积分奖励和额外收入
4. 如果资源下载需要密码,下载按钮下方有百度盘提取码哟
5. 有任何疑问,可以点击右侧边栏的联系QQ进行咨询

产品导航网 » 【图标】第五篇 | 装饰图标的设计

发表评论