加载中...
画图标-icon
第1节:软件
第2节:开始学习前要掌握的工具
第3节: 画图标-icon
课文封面

图标设计是UI设计的基本功之一;
通过图标的绘制,可以让你快速的上手工具的运用和属性的设置。
并且对于设计的规范化有一个初步的了解。

1、本课目标

能使用已掌握的功能,绘制一套规范的图标。
未命名

2、关键线

关键线的作用其实就是提前规定好了图标在各种形状下的尺寸,减少设计者在这个环节的试错成本。举个例子:你觉得蓝色和红色的两组矩形和圆形,哪一组是长宽一致的?

未命名

答案是蓝色的。但是从视觉上看,红色这一组更接近大小一致。当中原理,大家可以自行去搜索。我们使用icKeylineMaker插件,先创建一个24×24的关键线。(该插件会自动把关键线放在“frame”中。在本课中“frame”仅扮演画框的角色,他的核心功能我们会在下一节课详细说明。本节课我们只需要保证绘制好的每个图标都在"frame"里就可以了。)
未命名
此时你就可以看到上面例子中矩形和圆形的比例。其实到这里你也发现了吧,对准关键线来画图标。

未命名

3、一致性

  • 用同一种粗细;
  • 同一个圆角的角度;
  • 同样的一种端点;
  • 同一种节点。

不同的粗细,圆角,端点,节点,呈现出不同的风格,以应对不同的产品需求。
未命名

4、绘制

如视频所示大多数图标都可以使用形状工具和布尔运算实现出来。
这里我们需要注意到是描边的属性,外部、居中、和内部、在细节上的差别。

未命名

布尔运算

在figma中布尔运算有以下四种情况,

未命名

“Command/Ctrl+option/alt+C” “Command/Ctrl+option/alt+V” 可以快速复制粘贴一个形状的当前样式。 这是一个使用频率非常高的快捷键

编辑路径

上节课我们提到过形状编辑模式
在编辑模式下按住“Command/Ctrl”点击端点,可以切换锚点的形态。当调节带有手柄的锚点,可以改变路径的弧度。

未命名

插件辅助

有一些比较特殊的形状可以用插件来实现提高效率。

一些拓展

1、更多的选择,一个图标有多种表达方式以应对不同的场景,因此日常要注意积累。积累是整个学习和工作过程中重要的一环,尤其在一些时间比较紧迫没有办法找参考的情况下。就需要设计师拿出自己的存货解决问题。

未命名

2、绘制图标一定要简洁明了的表达清楚意思,切忌过于复杂的样式,增加用户理解的成本。具体的可以参照设计规范。清晰的表达不仅仅局限于图标,UI设计面对的都是素未谋面的用户,所以最大限度的保证你所表达的东西清晰准确。

3、关键线并不需要100%遵守的,以视觉协调为准。事实上大多数情况下都不是对着关键线画完就完事了,很大的精力要花在调整视觉效果上。