当前位置: 首页 >文章 > 超全的图标设计教学.1 —— 图标设计详解
收藏
分享

超全的图标设计教学.1 —— 图标设计详解

举报酸梅干超人酸梅干超人发布于 2019-04-255143阅读50点赞4评论
这就是全网最全面的ICON设计教学......


在 UI 的设计体系中,图标是最重要的组成部分之一,是任何 UI 界面中都不可或缺的视觉元素。了解图标相关的概念,以及正确绘制的方法,是入门 UI 设计的必备条件。

网上现存不少关于图标绘制的文章和教学,但不是太笼统,就是太片面。即使看了很多这种碎片化的知识,也很难在我们的认知中对它有比较全面、系统的认识,所以大多数初级的 UI 设计师,始终画不好图标。

针对这个问题,我希望用一篇长文来讲清楚图标设计的所有要点和具体的设计方法,让所有设计新人更快的上手图标设计。

本文共分为以下5个部分:

1. 图标设计详解:先对图标有个整体的认识,了解图标总共有哪些类型和应用场景。

2. 工具图标设计:最常见的工具型图标的相关规范,以及对应的设计案例演示。

3. 装饰图标设计:近年来使用越来越广泛的视觉型图标设计认识,以及对应的讲解。

4. 启动图标设计:讲解启图标的相关规范,如何高效的进行设计。

5. 图标应用详解:介绍在一个UI项目中,要应用多少种图标规格,并如何设计出正确的图标

undefined

图标,是一种图形化的标识,它有广义和狭义两种概念,广义指的是所有现实中有明确指向含义的图形符号,狭义主要指在计算机设备界面中的图形符号,有非常大的覆盖范围。

对于 UI 设计师而言,我们主要针对的就是狭义的概念,它是 UI 界面视觉组成的关键元素之一。

在当下最常见的扁平化设计风格中,界面的实际视觉组成只有 4 种元素,图片、文字、几何图形、图标。

undefined

可以说,图片、文字、几何图形的运用,都只用到排版的技巧,而图标,是 UI 设计中除了插画元素以外唯一需要我们 “绘制”、“创作” 的元素,一涉及到这两件事,难度就直线上升了。

本来往界面里丢一些方方圆圆、贴几张图、填一些字,就可以把界面做出来了,比如下图中的 Clear APP,不仅工作量少,而且还符合极简原则,为什么还要吃力不讨好地设计图标?

这就涉及对图标作用的探讨了,为了节约篇幅,更快进入大家最想看的重点干货,我就不长篇大论从上古时期人类与图形符号的纠葛开始写了!就谈对于图形界面本身,为什么图标有这么重要的地位,没它不行。有两个原因,第一就是,文字虽然也是一种图形符号,但相对于图标而言,文字实在太复杂了,在识别效率上有先天的劣势!再者,不同的语言,文字的长度也不同,如果换成阿拉伯语或者俄罗斯语,或许一行还装不下所有文字。图标可以以一种更高效的方式,将我们想要传递的信息进行浓缩,不仅易于识别,也能让界面更简洁,利于排版,比如下方案例。

undefined

第二点, 就是关于视觉的观赏性上。有些页面中,如果把图标去掉了,也丝毫不会影响我们的操作效率,以及对内容的理解。但没有图标,缺少这些点缀,我们就会觉得这个页面看起来总感觉太枯燥了,不得劲,最好的例子就是应用的设置页了,见下方案例。

既然知道了图标的作用和重要性,那么接下来,就要进一步了解在工作中我们要设计哪些图标。

可以先划分成三种大类:

    • 工具图标

    • 装饰图标

    • 启动图标

下面,我们将为对它们分别进行介绍,以及展示相关的设计类型,方便读者在开始学习具体设计前,对 UI 设计会创作的图标有更全面的认识。

1.1 工具图标

首先,我们要说的是工具图标。这是我们在日常讨论中提及最频繁的图标类型,即应用内有明确功能、提示含义的标识。作为最常见的图标类型,我们就不需要做太多的说明了。

虽然理解起来容易,但是它所包含的设计样式却并不少,可以把它们归纳成线性、面性两个大类,再分别进行细分。

风格1:线性风格

线性图标,即图形是通过线条的描边轮廓勾勒出来的!多数人对它样式认识的第一反应应该是使用纯色的闭合轮廓,比如上图案例,线性图标的创作空间看似不多,但实际上有非常多的调整空间。

下面我们把它们统一罗列出来。

风格2:面性风格

面性图标,即使用对内容区域进行色彩填充的图标样式。同样,在这类图标中,也不是只能应用纯色的方式进行填充,还有非常多的视觉表现类型。

风格3:混合风格

当然,在设计图标类型的时候,也不一定非线性和面性不可,有一些热衷创造和尝试的设计师,还创作出了混合型的图标,既有线性描边的轮廓,又有色彩填充的区域。常见的样式类型如下。

1.2 装饰图标

和工具图标比起来,装饰图标的视觉性作用更多。对于一些比较复杂的应用来说,过分的简约并不能弥补信息过多的信噪问题,我们要通过丰富视觉体验的方法来增加内容的观赏性,减少一屏内显示内容的数量。

比如在分类列表里,是可以只使用线框和文字把大量内容浓缩到一屏以内,但实际浏览效率并不会增加,而且并不美观。

还有,就是国内的界面设计环境,会根据运营的设计需求进行特殊化处理,尤其在电商领域,首屏的图标都会改成首页风格的样式,增加活动氛围。

装饰性的图标设计,虽然没有明确的规范该怎么做,效果怎么好怎么来,但最常见的类型有四种,下面分别进行介绍。

扁平风格

扁平风格的装饰图标,通常可以理解成是用扁平插画的方式画出来的图标,除了继承扁平的纯色填充特性以外,也相对于普通图标有更丰富的细节与趣味性。

拟物风格

拟物风格的图标现在出现的频率越来越高,集中在大型的运营活动中,通常这些活动会通过拟物的方式将头部设计成有故事性的场景,所以自然顶部的相关图标使用拟物的设计形式会更贴合。

2.5D 风格

2.5D是一种偏卡通、像素画风格的扁平设计类型,在一些非必要的设计环境中,使用 2.5D 会比较容易搭配主流的界面设计风格,有更强的趣味性和层次感。

炫彩渐变

这是一个拗口的原创名词,找不到更合适的,还是觉得浮夸点符合它的气质。这种图标,就是通过一系列非常激进的渐变和撞色实现,通常还会使用彩色的阴影。

使用这样图标的区域,通常都会呈现出一副五彩斑斓的景象,只有在内容非常丰富且用户偏向年轻化的产品中可以使用,是一种非常难驾驭的设计风格。


实物贴图

最后一种,就是采用了真实摄影物体的设计风格。虽然它不属于完全依靠我们创作和绘制出来的,但想想还是放进来合适。因为这种图标的出现频率非常高,有必要再后面掌握它的做法。

1.3 启动图标

最后,就要说说启动图标了!启动图标的设计比前面两种类型的图标说起来更难,因为它实际上就是把 “LOGO嵌套进系统图标模版” 的图标。

除了必要的规范掌握以外,启动图标的主体物设计就是 LOGO 的设计,已经超出了图标绘制本身的知识点。所以,在后面我会针对这个问题讲解一些比较套路易懂的设计方案供新手学习,这里我们先来了解一下它有哪几种设计形式。


文字形式

适用了文字作为图标主体物的类型,通常是这类应用本身的品牌 LOGO 就使用了文字,所以这里就把字体照搬过来。

图标形式

对于一些偏工具,适合用简单图形传达应用功能的启动图标,就会采取使用工具图标的方式设计。

图形形式

图形形式看起来和图标形式很接近,但实际上完全不属于同一类型,之所以它不是图标,是因为这类图标的主体图形是一种经过高度抽象化的标识,传达的是品牌性,而不是图形的含义。

插画形式

对于一些比较纯粹的应用,如读本、漫画、幼儿类应用,就热衷于采用卡通形象作为图标的主体进行设计。

拟物形式

虽然现在扁平化的设计占据主导地位,但依旧有很多应用的启动图标是通过拟物的方式设计的。因为对于这些应用来说,拟物设计所传递的信息往往更直观和准确。

当然,还有其它的数之不尽的启动图标设计方式,比如明星大头照、摄影图、游戏原画等,但理解上面这些类型就够了!

前面介绍的三种图标,就是今后在进入 UI 行业设计的内容。虽然图标看起来简单,但可以玩出的花样不少。除了正确设计出图标以外,高低阶的 UI 设计师之间的区别也包含图标设计类型掌握的多寡。

所以,在开始学习前,不要将设计图标的目标局限在最简单的图形绘制上,还有很多有趣的设计形式等待你们去尝试。

了解了图标的类型,就要开始了解做出这些图标应该使用哪些软件了!通常,UI 主要使用的设计软件包含 PS、AI、Sketch、XD 四款,理论上,它们都包含了图标绘制的功能,如果我直接告诉大家去精通这 4 款软件那么画图标就一点难度都没有了,这是非常不负责任的,所以为了对新人更友好一点(如果已经全部精通了,就直接略过),我会分析一遍这四款软件对于图标设计的优劣,以及需要掌握的部分。

Sketch/XD

这两款软件是我们设计 UI 界面的主力。但大家一定要记得,它们主要的功能是用来完成 UI 界面元素的排版,而不是创作和绘图

虽然它们都包含路径、钢笔、布尔、等功能(Sketch 相对 XD 更完善一点点),想要绘制一些非常基础的线性或面性图标时没有问题,但只要涉及到比较复杂的图形,往往就束手无策。

所以,我建议所有学习 UI 的新人,都不要从这两个软件中入手,而是先掌握 PS 和 AI,后面想要快速实现一些简单的图标时,自然懂得如何使用 Sketch 和 XD。

可以说,PS 和 AI 的应用决定了我们图标设计的上限,而 Sketch 和 XD 是下限,所以,把上限拓展得越高越好。

Adobe Photoshop

undefined

PS 是一款无论什么东西都设计得出来的设计软件,但是,它本质上是一款 “位图软件”。后续的文章中会提及,在界面中采用矢量格式的图标是最理想的,而 PS 针对矢量的操作并不便捷,比如将矢量图层复制到其它软件中。

实际项目中,我们会用 PS 设计一些视觉表现相对复杂的图标,例如启动图标、拟物图标、实物图标等等。

绘制图标需要用到的 PS 功能并不太多,需要在前期学习这个软件的过程中加以筛选,重点是以下知识点:

    • 路径创建和调整

    • 钢笔工具和锚点

    • 路径图层

    • 布尔运算

    • 图层属性

虽然 PS 在实际项目中是用来画复杂的图标,但并不妨碍我们使用 PS 从最基础的图标开始画起,因为想要熟练掌握上方的知识点,简易的工具图标是最好的磨刀石,之后再学习 AI 的操作,就可以更快的上手。

PS:最近在准备一套 PS 教学,就会比较完整的讲解一遍这些功能和对应操作。

Adobe Illustrator

undefined

AI 也是 UI 设计必学的一款软件,它的功能异常丰富,主要用来设计矢量图形。对比 PS,它有更好的矢量操作支持,对于路径细节的调整上,是最全面最细腻的软件,并且 AI 中的图形还可以直接复制黏贴到其它应用的画布中。

如果掌握了上方提及的 PS 基础,那么学习 AI 也就轻松了不少,其中,AI 设计图标中有三个特殊的功能是需要重点掌握和学习的:

    • 形状生成器

    • 轮廓化描边

    • 路径查找器

花几个晚上,掌握了 PS 和 AI 的相关知识点以后,就为我们后续的学习提供了技术支持,可以进入下一阶段了!

这是图标系列文章的第一篇,信息量不算少!所以我们在结尾再总结一次,方便大家记忆。

    • 知识点1:在 UI 的界面中,图标的主要作用是用来高效的传递信息,以及起到美化界面的作用。

    • 知识点2:UI 会涉及的图标类型主要有三种,工具图标、装饰图标、应用图标。

    • 知识点3:工具图标,是界面中用来传递信息的图形符号,主要包含线性、面性、混合三种设计风格。

    • 知识点4:装饰图标,是界面中用来提升视觉体验的图形,主要包含扁平、拟物、2.5D、炫彩渐变等风格。

    • 知识点5:应用图标,是用来启动应用的图标,主要包含文字、图标、图形、插画、拟物等设计形式。

    • 知识点6:学习绘制图标,优先学习 PS、AI 的路径相关功能,而不是 Sketch 和 XD。

下一篇,我们就开始讲解工具图标的相关设计规则和方法,总共会超过10篇超长干货详解,总字数会在 2W字以上,还会包含对应的视频课程演示,敬请期待!

4条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,481人)

【4月】趣味MG动画制作训练营
距离开班仅剩11天33人已报名
【4月】零基础手绘插画训练营
距离开班仅剩11天64人已报名
电商海报设计训练营
距离开班仅剩39天23人已报名
猜你喜欢
说说,东京奥运图形设计师

2021-07-25

小强老师 发表

说说,东京奥运图形设计师
Ai兵器谱之玩转3D效果

2019-03-12

百图特攻队 发表

Ai兵器谱之玩转3D效果
品牌基因法做图标(升级篇)

2019-07-25

菜心设计铺 发表

品牌基因法做图标(升级篇)
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了46,688
并提交了341份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证