header_v1.7.39

如何绘制扁平图标

6天前发布

原创文章 / 多领域 / 教程
Shell_Xiao糯米 原创,如需商业用途或转载请与Shell_Xiao糯米联系,谢谢配合。

本教程通过模拟企业项目中图标优化的真实案例,手把手教你如何快速绘制扁平化图标。


一套ICON系统的定义,是需要很多的步骤和方法论的支撑的,这样做出来的ICON才是有灵魂的。

本教程谨代表个人观点,不做企业宣传用途。


一、图标的作用


图标是一种抽象的,跨语言的符号,它不仅是一种图形,更是一种标识,它具有高度浓缩并快捷传达信息、便于记忆的特性。随着信息传播速度和载体的快速增长,图标的使用频率也在不断提高。在设计图标之前,你有没有想过图标的作用何在?通过反复思考,有助于我们设计水平的提升。

经过设计师的总结和提炼,把图标的作用归结为4个点:装饰、表意、趣味和品宣。


1、装饰

是指通过图标对页面进行润色,使页面看上去更加饱满。同时,通过图标增加页面的层次感,使页面各部分内容得以区分。装饰作为图标的基础作用,大多数图标都满足装饰的作用。

例如下图中左侧ENJOY的首页中,icon作为页面的亮点装饰元素出现,在表意的基础上,提高了页面的识别性,在产品品牌推广上功不可没。右侧的饿了么也是一个很好的案例。

左侧:ENJOY  右侧:饿了么


2、表意

图标的第二大功能就是表意,在装饰的基础上有所升华。直白来说,图标的表意体现在对于功能的解释上。互联网经过这几年的快速发展,用户对于一些图标形成了一些约定俗成的认知。我们在进行产品设计时要做到心中有数,使用的时候切忌打破常规。

例如网易云音乐里的分享、下载、播放等icon,和站酷里的阅读、点赞、留言、收藏等icon,对于这些在用户心智中形成固有模式的图标,我们使用的时候可以在此基础上做变形、创新,但如果要打破用户的习惯认知,一定要谨慎。

左侧:网易云音乐  右侧:站酷


3、趣味

能带给人愉悦感受的图标可以称得上很好的图标了,这也就是图标的第三大功能。如果愉悦的同时有很好的表意性,无疑是一个极棒的图标了。

我们来看看QQ下面标签栏的icon是我们很熟悉的一组icon,在不同页面进行切换时,不仅icon有相对应的小动效,而且当选中不同的页面时,中间小人的眼睛也会随之变化,一个微妙的小细节往往是打动用户的关键之所在。

QQ app的标签栏icon


4、品牌宣传

随着互联网ui趋势概念的增强,市面上的产品同质化也越来越严重。那么如何能让自家的产品脱颖而出?其中很重要的因素之一就是品牌塑造。通过icon来进行品牌传达是一种简单有效的方法。

例如咸鱼app很好的将icon结合品牌色,打造了个性化的视觉体验。大众点评的V10改版更是通过整体的品牌升级,重新对UI进行了定义,通过全新的icon展示,传达了年轻化、娱乐化、社交化的产品理念。

左侧:咸鱼  右侧:大众点评


二、背景介绍

本次图标优化的需求来源于积木盒子app的redesign。

图标位置:位于积木盒子app一级页面“发现页”顶部的4个常驻活动入口。

由于本次优化时间有限,仅对这4个icon进行优化。如果优化效果好,会考虑在后期继续优化运营活动页的整体ui。

原有图标样式:

在app中的应用:

结合前面讲到的图标的作用,我们对原有图标进行分析。

我们从标签栏看出,整个app分为4部分,有首页、投资、发现、我的四个一级页面,而我们优化的图标位于发现页的一级页面中。根据图标的4个作用我们来逐个进行分析。


1、装饰

原有图标起到了较强的装饰性作用,细节上非常到位,颜色也很丰富,但仍然存在一定的问题。

与pc相比,app的界面空间很有限,在如此小的空间里,图标大小仅有50pt左右,因此与丰富的细节相比,更看重其识别性。这组icon为面性icon,要求每一个色块清晰可识别,尽可能避免含糊不清的阴影或颜色,使其即使在小屏也能迅速被用户所识别。

统一性欠缺,1、2、4的icon均为圆形icon中主要元素进行破形处理,第3个icon圆形即主元素,点缀的箭头进行破形处理。1、2、3的icon破形部分均有阴影,而第4个icon破形部分没有阴影。


2、表意

表意上基本明确。

“邀好友”为伸出的友谊之手。

“招财奖”利用招财猫为原型,如果再加入抽奖的元素则表意更佳。

“转转赢”利用转轮的元素,很好的表达了转盘抽奖的意思。

“周周乐”用宝箱来表意,虽不是特别贴切,但也不出错。如果结合实际的双色球活动,则表意效果更佳。


3、趣味

本组icon有较高的趣味性,希望改版优化能给用户带来同等程度的愉悦感受。


4、品牌宣传

由于改版对品牌及产品定位进行了全新升级,因此新版icon希望更多的体现出年轻化,色彩上有更高的饱和度,与品牌logo风格更贴近。

另外由于运营活动的更新,希望icon在风格上能有更好的延展性,便于后期相同风格的icon绘制。


总结:

通过以上分析,我们对新版icon提出了4个设计要点,对图标优化的风格定位起到指导性作用:高识别性、表意清晰、贴近品牌、易于扩展


三、图标设计五步法

1、定义

图标是界面中的一部分,因此在设计图标时,我们首先要考虑图标的使用场景。根据图标的使用场景的关键因素,进行样式的推导。可以从以下四个方面进行分析。

(1)承载的作用

发现页按功能可划分为2部分:活动入口、积分商城。由于积分商城图片质量较差,因此这4个图标成为影响页面是否美观的重要因素。因此构图上以整齐统一为主。考虑去除破形设计,改为统一的圆形icon。


(2)重要性

此图标为当前页面最重要的ui元素,视觉层级较高。应通过设计,增加活动入口的吸引力,提高点击率。


(3)所处页面信息的复杂程度

发现页信息较为简单,仅有活动icon和积分商城2部分,因此在设计时,可以考虑加入一些细节和质感,使页面更加丰富。


(4)扩展性要求

由于后续会就该设计风格进行更多图标设计,需制定出图标规范,方便后续样式风格延伸。


2、提炼

经过上面的推导,我们对即将设计的图标风格大体上有了定位,可以开始针对单个图标进行设计。由于图标设计时间有限,因此要在最短的时间里,得到最优的效果。我使用的是发散关键词—提炼关键词—提炼特征的方法。

以邀好友为例:首先进行头脑风暴,邀好友的活动内容大致为邀请好友后,自己和好友均可获得超值大礼包。我列出的关键词有:递东西的手、爱心、紧握在一起的手、礼包、优惠券、红包、招财猫、温暖、拥抱。通过归纳和提炼,最终保留的关键词为递东西的手,和礼包。设计上体现温暖的感觉。

同理进行其他icon的关键词提炼。

接下来进行图片参考,经过素材收集,最终选定灵感参考图片。参考图片种类可以很丰富,可以选择风格近似的插画,也可找实物进行参考,唯一要注意的是,内容一定要符合提炼的关键词。

由于设计时间并不富裕,设计时可以尽量借鉴参考图片上的元素。还是以邀好友为例,参考图片我找到了礼包原型,和手的原型,接下来很容易将两者进行结合,绘制出我们所需要的icon内容。

3、风格

通过关键词提炼,我们已经对即将绘制的图标有了大体的概念,但在颜色和风格上还需要进一步的考究。为了快速出图,风格借鉴必不可少。在这里要着重强调借鉴和抄袭的界限。我们所做的是优秀作品风格的提取,并不表示照搬优秀设计作品。下面,我将从风格提取、造型提取和颜色提取三个方面进行借鉴的详细讲解。

图标的种类多种多样,经过上文对图标风格的推导,我们将图标风格大体定位:圆形面性图标,扁平风,色彩鲜艳。我们发现,好好住app的插画风格清新扁平年轻化,颜色上虽然和品牌色有出入,但用色方法上值得借鉴,因此打算从提炼这组插画的风格入手。

好好住app的插画


通过观察,不难总结出,这组icon 在风格上,采取扁平的风格,将主题内容抽象画,去除多余的透视、肌理、投影关系,配合轻微的渐变色,给人以清爽舒适的感觉。

造型上:用简单的几何图形和不规则的图形的进行组合,画面主体部分显示,并搭配适当留白,制造出画面的空间感。

颜色上:大面积使用同色系,营造和谐的氛围;邻近色作为点缀,使画面更为生动活泼(多为黄色);利用消色(白色)表达明暗关系,起平衡作用。

在颜色设定上,并不建议大家直接吸取参考的颜色,而是通过规律的提炼,进行大胆尝试。在设计icon时,我利用同色系+消色+黄色点缀,进行了4种颜色尝试。

4、绘制

经过之前的关键词提炼,找出元素参考,再根据风格和颜色提炼,选定绘制的主色和点缀色,绘制过程就变得简单多了。

绘制图标时,要注意图层之间的遮挡关系。即使画面只露出了主体物的一部分,也要考虑主体物的形状和比例是否正确。如果对主体的结构把握不好,可以继续寻找类似的插画或照片进行参考,或对现实物体进行观察。另外需要确保画面中每一个邻近的色块,结构和颜色都清晰可辨,不要有含糊不清的结构,或糊在一起分不清边界的颜色,不然会显得画面很脏,同时也会降低整体图标的识别度。

5、调整

通过上面4个把单个图标设计好后,需要从整体上和细节上重新审查我们的图标,看看是否整体能够达到一致的视觉统一和视觉平衡。有时候自己设计的图标会因为过于熟悉而不易发现问题,这时候也可以请教下你的朋友,从旁观者的角度提出问题,往往会得到建设性的意见。越到后面的阶段越需要我们耐心和细心的调整,以达到更好的效果。


(1)以我们的图标为例,通过整体观察,发现在统一性和视觉平衡上存在一定的问题。第1个图标主体物右下部分进行隐藏,2、3图标左下部位隐藏,而4图标上面部分被隐藏,造成杂乱无序的视觉体验。经过位置调整和主体物的翻转,统一把主体物的左下角进行隐藏,增加了图标的统一性。


(2)进一步观察发现,3图标的转盘外圈和圆心部位给人以高起的感觉,原因是阴影给的过重,使其明显与其他图标不协调。通过调整阴影透明度和局部颜色,最终得到了与其他icon协调的视觉呈现。


(3)再进行细节观察,2图标主体物在比例上有一些不舒服的地方,于是把老虎机的结构进行了调整优化,使其看起来更舒服。

四、扩展设计说明

为了方便后续图标的延展,还要将所绘制的图标要点进行总结,概括出扩展设计说明,一来方便以后查看,二来其他同事进行同类icon绘制时,可以迅速把握图标特点,绘制出一致统一的图标。

1、表意上,突出主题,表意清晰;

2、颜色上,采用同色系为主色,配合黄色或邻近色进行点缀,利用同色系的消色配合,表达明暗关系的变化;

3、风格上,以扁平风为主,适量加入渐变色,营造年轻化的感官效果;

4、主体物统一进行左下角的隐藏,圆形的右上角适当留白,增加icon的空气感;

5、阴影上,考虑到视觉效果的统一,如需添加阴影,不易过深。


五、总结

以上四点可以帮助大家在绘制图标时捋清思路,摸清方法。扁平化风格特点较为突出,具有很高的通用性,大部分日常设计中都会用到。当然写这篇教程的初衷,并不只是希望大家学会这种设计风格,而是希望能在设计过程中进行思考和方法总结。设计产物是灵活的,但方法是可以融会贯通的。在今后的工作中,不管是什么风格,是图标还是插画,我们都可以参考以上的设计方法来进行设计。

第一次手写教程,有不清楚或者不完善的地方希望大家多包涵。


参考文献:

如何系统地设计界面图标

拾慧(02):图标说


15

    文章信息

    • 文章标签

    Hello PM 意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功