赞助商
立即赞助

从零开始画图标系列:超全面的基础知识

UI设计3年前 (2021)更新 流光
2.1K 0 0

 UI 的设体系中,图标重的组部分之一,任何 UI 界面中都不可或缺的视觉元素。了解图标相关的概念,以及确绘制的方法,入门 UI设的必备条件。

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

针对这个问题,希望用一篇长文来讲清楚图标设计所有要和具体设计法,让所有设计新更快地上手图标设计。

本文共为5个部:

  • 图标简介:先图标有个体认识,了解图标共有哪些类型和应用场景。
  • 工图标:最常见的工型图标的相关规范,以及对应的计案例演示。
  • 装饰图标:近年来使用越来越泛的视型图标设计认识,以及对应的讲。
  • 启图标:讲解启图标的相规范,如何效的进行设计。
  • 应用案例:介绍一 UI项目中,应用多少种图标规格,如何设出确的图标。

图标的基本认识

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

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

当下常见的扁平化设风格中,界面的实际视觉组只4种元素,图片、文字、几何图形、图标。

从零开始画图标系列:超全面的基础知识

△ 由图片、文字、几何、图标组的界面

可以说,图片、文、几何图形运用,都用到排版技巧,而图标,是 UI设计除了插画元素以唯需要我们「绘制」、「创作」元素,涉及到这两件事,难度线上升了。

本来往界面丢一些方方圆圆、贴张图、填一些字,就可以把界面做出来了,比如 Clear APP,不仅工作量少,而且还符极简则,为什还要吃力不讨好的计图标?

从零开始画图标系列:超全面的基础知识

△ Clear APP 的截图

就涉及图标用的探讨,为节约篇幅,更快进大家最想看的重点干货,我就不长篇大论从上古时期人类与图形符号的纠葛开始写,就谈对图形界面身,为什么图标有么重要的地位,没它不行?

有两个原因,第一字虽然是一种图形符号,但相对于图标而言,字实在太复杂了,在识别效率上有先天的劣势。再者,同的语言,字的长同,如果换成阿拉伯语或者俄罗斯语,或许一行还有字。图标可一种更效的方式,将我们想要传递的信息进行浓缩,仅易于识别,界面更简洁,利于版,如方案例。

从零开始画图标系列:超全面的基础知识

△ 应字替换了图标的对

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

从零开始画图标系列:超全面的基础知识

△ 设置页图标图标的对比

既然知了图标作用和要性,那么接下来,要进步了解在工作我们要设计哪些图标。

可以先划成三种大类:

  • 工具图标
  • 装饰图标
  • 启动图标

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

工具图标

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

从零开始画图标系列:超全面的基础知识

△ 常见的工图标

虽理来容易,但是它所包含的设计样式却并不少,以把它们归纳成、面两个大类,分别进行细分。

  1. 风格1:线性风格

线性图标,即图形是过线条描边轮廓勾勒出来。多数它样认识第反应应该是使用纯色闭合轮廓,比如上图案例,线性图标创作空看似不多,实上有常多调空。

下面把它罗列出来。

从零开始画图标系列:超全面的基础知识

△ 线性风格的工图标

  2. 风格2:性风格

面性图标,即使用对内区域行色彩填充的图标样式。同样,这类图标中,也不只能应用纯色的方式行填充,还非常多的视觉表类型。

从零开始画图标系列:超全面的基础知识

△ 面性风格的具图标

  3. 风格3:混合风格

当然,设图标类型的时候,也不一非线性面性不可,一些衷创造试的设师,还创作出了混合型的图标,既线性描的轮廓,又色彩填充的区域。常见的样式类型如下:

从零开始画图标系列:超全面的基础知识

△ 混合风格的具图标

装饰图标

具图标比起,装饰图标的视觉性作用多。对于一些比较复杂的应用,过分的简约并不能弥补信息过多的信噪问题,我们通过丰富视觉体验的方法增加内的观赏性,减少一屏内显示内的数。

比如在分类列表里,是可以使用线框和文把大量内容浓缩到屏以内,实浏览效率并不会增加,而并不美观。

从零开始画图标系列:超全面的基础知识

△ 装饰图标在识性上作用

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

从零开始画图标系列:超全面的基础知识

△ 节日活动中的装饰图标

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

  1. 扁风格

扁平风格装饰图标,常可以理解成是用扁平插画画出来图标,除了继承扁平纯色填充特性以,也比普图标有更丰富细节与趣味性。

从零开始画图标系列:超全面的基础知识

△ 扁平风格装饰图标

  2. 拟物风格

拟物风格图标现在出现频率越来越高,在大型运活动,常这些活动会过拟物将头部设计成有故事性场景,所以自然顶部相关图标使用拟物设计形会更贴合。

从零开始画图标系列:超全面的基础知识

△ 拟物风格装饰图标

  3. 2.5D风格

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

从零开始画图标系列:超全面的基础知识

△ 2.5D格的图标

  4. 炫彩渐变

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

使用样图标的区域,通常呈现出一副彩斑斓的象,只有在内容非常富且用户偏向年轻化的产品中以使用,是一种非常难驾驭的设计风。

从零开始画图标系列:超全面的基础知识

△ 炫彩渐变风的装饰图标

  5. 实物贴图

最后,是采用了真实摄影物体设计风格。虽然它不属于完全依靠我们创作和绘制出来,想想是放进来合适。为这图标出现频率常高,有必要在后掌握它做法。

从零开始画图标系列:超全面的基础知识

△ 应用摄影实物装饰图标

启动图标

最后,要说说启动图标了。启动图标设计比前两类型图标说起来更难,为它实上是把「LOGO嵌套进系统图标模版」图标。

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

  1. 文形

使用了文字作图标主体的类型,通常这类应用本身的品牌 LOGO 就使用了文字,所以这里就把字体照搬过。

从零开始画图标系列:超全面的基础知识

△ 文字类的启动图标

  2. 图标形式

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

从零开始画图标系列:超全面的基础知识

△ 图标类的启动图标

  3. 图形图标

图形形看起来和图标形很接近,实上完全不属于类型,所以它不是图标,是为这类图标主体图形是经过高度抽象化标识,传是品性,而不是图形含义。

从零开始画图标系列:超全面的基础知识

△ 图形类启动图标

  4. 插画形式

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

从零开始画图标系列:超全面的基础知识

△ 插画类的启图标

  5. 拟物形式

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

从零开始画图标系列:超全面的基础知识

△ 拟物类的启动图标

当,还有其它的数之不尽的启动图标设计方式,比明星大头照、摄影图、游戏原画等,但理上面类型就够。

前面介绍的种图标,就是今后在进入 UI 行设计的容。虽然图标看起来简单,但可玩的样。除了正确设计图标外,低阶的 UI设计师之间的区别包含图标设计类掌握的多寡。

所以,始学习,不将设图标的目标局限简单的图形绘制,还很多趣的设形式待们去试。

学习图标所需的软件

了解了图标的类型,就始了解出这些图标应该使用哪些软件了。通常,UI 主使用的设软件包含 PS、AI、Sketch、XD四款,理论,它们都包含了图标绘制的功能,如果我直接告诉家去精通这4款软件那么画图标就一点难度都了,这非常不负责任的,所以了对新人友好一点(如果已全部精通了,就直接略过),我会分析一遍这四款软件对于图标设的优劣,以及需掌握的部分。

从零开始画图标系列:超全面的基础知识

  1. Sketch / XD

这款软件是计 UI 界面的主力。但大家一定要记得,它主要的功能是用来完成 UI 界面素的排版,而不是创作和绘图。

虽它们包含路径、钢笔、尔运等功能(Sketch 相对 XD 更完善一点),想要绘一非常基础的或面图标时没有问题,但只要涉及到比复的图形,往往就束手无策。

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

可以,PS  AI 的应用决了我们图标设的限, Sketch  XD 下限,所以,把限拓展得越高越好。

  2. Photoshop

从零开始画图标系列:超全面的基础知识

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

际项目中,我们用 PS 设计一视表现相对复的图标,例启动图标、拟物图标、物图标等等。

绘制图标需要到的 PS 功并太多,需要在前期习这个软件的过程中筛,重点是知识点:

  • 路径创建和整
  • 笔工具和锚点
  • 径图层
  • 布尔运算
  • 图层属性

虽然 PS 在实项目是用来画复杂图标,并不妨碍我们使用 PS 从最基础图标开始画起,为想要熟练掌握上知识,简易工具图标是最好磨刀石,后再学习 AI 操作,可以更快上手。

  3. Illastrator

从零开始画图标系列:超全面的基础知识

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

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

  • 形状生成器
  • 轮廓化描边
  • 路径查器

花几个上,掌握 PS 和 AI 的相关识点以,就为我们续的学习提供技术支持,以进下一阶段。

结尾

是图标系列文章的一篇,信息量不少。所以我们在结尾总结一次,方便大家忆。

  • 知识点一:在 UI 的界面中,图标的主要作用是用来高效地传递息,以及起美化界面的作用。
  • 识点二:UI 涉及的图标类型主要有三种,工具图标、装饰图标、应用图标。
  • 知识点:工具图标,是界面中来传递信息的图形符号,要包含线性、面性、混合种设计格。
  • 知识点四:装饰图标,界面中用提升视觉体验的图形,主包含扁平、拟、2.5D、渐变炫彩设风格。
  • 知识五:应用图标,是用来启动应用图标,主要含文、图标、图形、插画、拟物等设计形。
  • 知识点:学习绘制图标,优先学习 PS、AI 的路径相关功能,而不是 Sketch 和 XD。

欢迎关注作者微信公众号:「电话亭」

从零开始画图标系列:超全面的基础知识

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

编者按:什么是金刚区?意义和功能是什么?金刚区图标的类型和表现手法是什么?有哪些设计要点?本文从4个维度为你一一揭秘。...
ui设计
背景 QQ 游戏中心经过设计改版之后,我们重新设定了整体的世界观——多彩的游戏宇宙。并且对多个模块及内容进行了新的设计升级...
3D图标
最近发现一些能提高图标细节和高级感的小技巧,今天与大家分享下这几种风格的设计思路,以及需要注意的点。 分享大纲: ...
UI图标
编者按:设计原则总是看起来简单抽象不言自明的,但是在细分的设计领域,这些原则其实有着各自不同适用情况,有着「特定的条...
ICON
设计师可能会觉得 B 端设计少有发挥空间。一是产品风格严肃专业,不像 C 端产品风格多种多样,可以调动起用户丰富细腻的情绪...
B端产品
一、图标的定义 1. 什么是图标 图标是具有明确指代含义的计算机图形。从功能分类角度分为启动图标、应用图标、功能图标。 2. ...
ICO
在之前的文章《从零开始画图标系列:线性图标设计实战演示!》中,我们已经讲解了线性图标的绘制方法,在本篇文章,我们就可...
入门
和大家分享一下,杨杨在年前做的一套新年主题图标,整个过程成长很大,也希望能给大家一些启发。 其实一套主题图标对于一个...
图标优化