01图标绘制中的小技巧

我们拿「V」icon以常规绘制步骤为例:

先画一个矩形

然后旋转角度,再复制一个,水平旋转

对齐后给出圆弧

此时发现有点太大,需要调整高度:

问题很明显,调整高度(H)学位结束后,我们必须对齐调整,如果还觉得不够精致,就要重复前面的步骤。

效率不高,特别烦人,就这么简单icon来回调整几分钟。

如果你像我一样做3755@图1倍,图标厚度为1倍.5像素,这种情况下来回对齐真的会考验你的像素眼。

这个问题实际上是我们在绘制之前没有考虑过的,比如图标的适应情况,以及是否会调整大小。

然后子阿来看看橙心是如何防止这种情况发生的:

先画一个矩形

复制一个向上旋转

整体向上旋转,给弧

或者上述问题,必须调整高度:

对比两个步骤,前者是向上放缩,后者是向下放缩。

在后面的操作过程中,除了可以随意调整高度外,还可以随意调整总宽度,自由度会更高。

那已经画完了,如何防止不手动调整对齐操作假设现在高(H)如果出现第一个绘制问题,我们可以水平翻转,垂直翻转。这个时候你调整高度没问题,但是如果你想调整整个宽度,你必须(水)垂)回调的问题就像一个洞,一旦出现,就要想办法补救,所以一开始就要想办法避免。

总结一下,在绘画中icon以前要考虑三个问题:

绘制步骤的顺序

使用场景

是否需要调整高度和总宽?

如何提高效率,就在这些不经意的小细节中。

02对齐

还是375@在1倍图下,经常会遇到0.5px,如下:

figma 尺寸单位为Android 的dp figma 高度_html

点击底部对齐是不确定的,你会不会想到我手动调整对齐,那就有点傻了。

这里只需要把手「对齐像素」关闭,使用快捷键:SC逗号,然后点击底部对齐,更快。

例如,在这种情况下,实际间距为1.5px,但是你看控制面板是显示2px,如果数据上怎么办?手动调整也是不确定的。

figma 尺寸单位为Android 的dp figma 高度_html_02

这里同是把「对齐像素」关闭,然后手动输入一个值进去,再去看看就一样了,比如:0.5px的分隔线。

刚开始没怎么注意,直接画完就在中间,底部对齐。如果不放大仔细看,就找不到没有对齐。

方法也是如此「对齐像素」关闭,然后去底部对齐,你会发现它这次是贴在底部的。

上面提到的图标技巧与这种方法相匹配nice。

如何提高效率意味着每一个细节都不容忽视。

03图标分类命名规范

零件的命名方式就像一个圈子,一个陷阱,也许这里每个人的习惯都不一样,所以命名方式也会不一样。

这里简单分享一下橙心的命名方法。

当我们建立规范时,我们通常有一个习惯,就是先归类、颜色、图标、部件等等,比如腾讯。

figma 尺寸单位为Android 的dp figma 高度_html5_03

让人看起来很实用,干净,规范。

这里拿APP命名使用场景确定大类后,根据图标进行命名使用Tab来分小类,比如语雀的Tab栏:小记,文档,新闻,我的。

这一步的命名,如:小记/搜索、小记/消息继续下去可以分为功能模块和子页面,来延伸,小记/搜索/删除。

看完之后,我发现我不知道如何命名零件,所以记住副标题中的两个字「归来」。

思考一个问题:如果你能如何对零件进行分类,然后为自己提供便利?如果你想理解这个问题,试试看。

不一定说规范要做得多完整,多惊艳,能给你,给团队带来效率才是好的规范。

当然,橙心的方式不一定适合所有人,所有的项目团队,但它能给我带来效率。

如何提高效率,做事要有自己的方法。