CH02-线性图标设计

本章目标

了解线性图标的相关知识
掌握线性图标的绘制
掌握图标设计规范相关知识
掌握矢量图层操控

课题导入

在UI设计领域，有非常多设计内容，但有一个是UI设计师入门必须要学习的——图标设计。

最常见的图标设计就是线性图标，我们在很多APP中都能看到一些简洁的线条类型图标。

老师准备了一组设计案例参考图，都是比较常见并且简单的。

如图1

（图1 线性图标设计案例）

离线缓存

首先，还是先“新建画框”，快捷键“F”，随后单击页面中空白处，即可创建一个100*100px的画框了，如图2。

其次，我们可以将画框名字更改为“缓存”，只需双击画框名称处即可更改了。

再次，在设计图标之前，我们需要先考虑图标的设计过程，在参考中可以看到，可以拆分成一根直线，一个直角，一个半开的矩形。

最后，我们在思考好了图标的设计过程之后，即可着手图标的设计了，直线、直角以及矩形都可以使用“矩形”设计，快捷键“R”，我们创建好了矩形之后，并不是能够直接使用的，这时就需要双击图形，进入到figma的”编辑模式“，在此模式下我们可以进行增加或者删除锚点等操作，而且还需要配合”填充“、”描边“等相关操作完成图标的绘制。

（图2 新建画框）

浏览记录

首先，还是要先“新建画框”，快捷键为“F”，随后单击页面中空白位置，就可以创建一个100*100px的画框了。

其次，我们可以将画框名字更改为“记录”，只需双击画框名称处就可以更改了。

再次，我们在设计图标之前，需要先考虑图标的设计过程，在参考图中可以看到，可以拆分成一个圆，一个直角。

最后，我们在思考好了图标的设计过程后，即可着手开始图标的设计了，直角可以使用“矩形”设计，快捷键“R”，圆可以使用“椭圆”设计，快捷键“O”，在选择好椭圆工具后，我们只需要单击页面空白处即可创建好圆形了，但是图形的大小尺寸需要根据画面进行调整，如图3。

（图3 椭圆工具）

我的收藏

首先，还是先“新建画框”，快捷键“F”，随后单击页面中空白处，即可创建一个100*100px的画框了。

其次，我们可以将画框名字更改为“收藏”，只需双击画框名称处即可更改了。

再次，在设计图标之前，我们需要先考虑图标的设计过程，在参考中可以看到，可以拆分成一个五角星。

最后，我们在思考好了图标的设计过程之后，即可着手图标的设计了，五角星可以使用“星形”设计，在选择好星形之后，我们只需要单击页面空白处即可创建五角星了，在创建完之后，我们可以调整图形的几个圆点对其进行设计，如图4。

（图4 星形）

我的关注

首先，还是先“新建画框”，快捷键“F”，随后单击页面中空白处，即可创建一个100*100px的画框了。

其次，我们可以将画框名字更改为“关注”，只需双击画框名称处即可更改了。

再次，在设计图标之前，我们需要先考虑图标的设计过程，在参考中可以看到，可以拆分成两个具有圆角的矩形。

最后，我们在思考好了图标的设计过程之后，即可着手图标的设计了，矩形可以使用“矩形”设计，快捷键“R”，不过我们需要两个相同的圆角矩形来设计爱心的形状，在调整好矩形的大小之后，我们就可以将两个矩形进行对齐并翻转，调整成爱心的大致样式，随后再将矩形的端点进行圆角处理，不过在调整的过程中不要将底部的尖角进行圆角处理，即可得到我们需要的爱心形状，再选中两个圆角矩形，对其进行“布尔运算”处理，选择“连集所选项”，再进行“拼合所选项”，快捷键“ctrl”+“E”，如图5。