赞助商
立即赞助

想绘制线性图标,这里有 6 个前辈为你踩过的坑

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

我们为 UI 设计师,一开始门接触最的就是图标,而现在很设计师钟爱线性图标,导致很多新手设计师也跟随主流脚步选择线性图标去设计,是线性图标是不是真像我们看起来那么简单呢?

想绘制线性图标,这里有 6 个前辈为你踩过的坑

线性图标的特征

目前面上的线性图标 2px、3px 最为流。为么大分的产会使 2px 和 3px 的线性图标呢?因为图标线条的宽越大,可展示的细节就越,但是图标的表现却够得到极大的升,这是为么面性图标的直观表现一直都线性要好的原因。如图最右面性和线性图标的对图:

想绘制线性图标,这里有 6 个前辈为你踩过的坑

线性图标线条的宽越小,展示的细节就越丰富,同时直观的表现会降低,因为东西太多会产生视觉干扰。如图:

想绘制线性图标,这里有 6 个前辈为你踩过的坑

当然现在有数一些产的线性图标 1px 和 4px,而且在图标上做了减法,有我们会看到一些 1px 的图标整个图形表现很简单,但是因为线条太细,导致整个操作栏的图标视觉表现上偏弱,如图示:

想绘制线性图标,这里有 6 个前辈为你踩过的坑

而 4px 的图标会显得略微厚重,如图示:

想绘制线性图标,这里有 6 个前辈为你踩过的坑

因此线性图标表达最好的是在 2px 和 3px,同时减一些图标细节,够更大的升图标的表达。但是同样的图形,面性的图标直观表现要优于线性图标,因此面性图标更易上手。

描边怎么选?

 sketch 来画图标举例,首先我们需要遵循像素格,点击 sketch 顶右上角,择显示像素,你会发现你的界面从矢量变成了像素,这么做的好处是够保证我们的图标在画的时候看来有没有虚边。

想绘制线性图标,这里有 6 个前辈为你踩过的坑

在画线性图标的时候,我们首先面对的问题就是择的是描边、外描边还是中?

这个时候我们是两情况,你描边像素是偶数时候,比如:2px,4px,居,内描边视觉上看起来都是可以,算是在显示像素网格情况下,也不会发生虚边情况。如下图所示:

想绘制线性图标,这里有 6 个前辈为你踩过的坑

是如描边数值变成奇数时候,比如:1px,3px,5px,这个时候不能用居,应该使用内或者描边,为居描边会模糊掉。如下图所示:

想绘制线性图标,这里有 6 个前辈为你踩过的坑

在做闭合路径线性图标时,常采用内描边齐,为描边矢量图形视觉上其实是比实数值要大,不利于我们控制图标大小。而描边数值定不要出现 2.31 或者 1.68 这样情况。

想绘制线性图标,这里有 6 个前辈为你踩过的坑

如上图,有小数描边样也会出现虚边问题,而这情况经常会出现在图标等比缩放后,此我们在缩放图标后,需要个小细节都确认下。

选择钢笔还是布尔运算?

很多新手开始画图标时候都不知选择钢笔是矢量图形,或者认为用钢笔会简单上手易操作,我般不太议大家用钢笔去画图标。

首先是因为钢笔画的条果不是闭合的状态,就只有居中描边一个选项,就意味着你的图标条必须是偶数才不虚边,而且需要自己手动整参数,因为条很容易面有小数点,严重影响效率。

如果钢笔闭合的状态下,就会矢图形一样,会三种描的选项,但也仅仅只很常的图形下区别,一旦我们的图标稍微复杂一些的时候,就不太好用了。

想绘制线性图标,这里有 6 个前辈为你踩过的坑

举简单的例子,我们一般画插画的时候,应该都先画草图,修修改改会选择到软件里用钢笔始勾初稿,什么呢?因完全草图的时候,用钢笔勾会把握不好度,易失去视觉平衡。

用钢笔画图标是一的道理,除非是临摹,照着别人画好的临摹,用钢笔不会出现大的问题。如果二次创作呢?难道需要先画草图吗?(仅针对线性图标),如下图所示:

想绘制线性图标,这里有 6 个前辈为你踩过的坑

爱心,WiFi,置这些刚开始不知道怎下的图标,第一个想的是不是就是用钢笔画?其实用简的布尔运算就能解决。

想绘制线性图标,这里有 6 个前辈为你踩过的坑

因此能用布尔运算解决的问题,就不要用钢笔来解决,不止描边容易虚边,同还更耗费力和间。

断点图标怎么处理?

相大家都了机上多产品的线性图标,配上断线的方式来让图标变得更俏皮,断线的规则就不多说了,这要说的是根据上面得的结论,要如何理断点图标。

为了图标更有亲和,大分的断点图标都会择将端口变成圆形,如图示:

想绘制线性图标,这里有 6 个前辈为你踩过的坑

因此为了达到这样的效果,就需要将描边改成中,如果择描边或者外描边就会变得复杂很多,因为线中的情况是无法直接设置成断线处弧形的。如果直接设置,会变成图示:

想绘制线性图标,这里有 6 个前辈为你踩过的坑

这无疑增了设计的工作难,为么要将线条端口变成圆形呢,同可参照按钮为么都择圆角矩形作为的道。因为直直的切割线会图标整个变得很生硬,没有亲和,户对界面整体营的氛围产生抵触心。

线性图标的注意事项

1. 为什你的图标不清晰?

上面围绕画线性图标会引起虚边的问题说了那多,大家应该都知道为什画线性图标总是不清晰了。因为如果在画的候没有注虚边的问题,开发实现的候,图标经过倍率缩放就会变模糊,如下图所示:

想绘制线性图标,这里有 6 个前辈为你踩过的坑

如果在 @2x 倍率下绘制的描边为 3px、5px 等不能被 2 整除的数值,那在适配 @1x、@3x ,会因为出现数点导致图标边缘变虚,如下图所示:

想绘制线性图标,这里有 6 个前辈为你踩过的坑

或者如果是偶数居中,在倍率更改后变成奇数边缘还是会变虚,如下图所示:

想绘制线性图标,这里有 6 个前辈为你踩过的坑

这个候需要动修改和校正相应的参数后,才能够确保输出的切图清晰可靠,而这一切都是在备以上的知识之后才能够有识地去完成这些息。

2. 修改了还是虚边怎?

当都备了这些知识候,图标中还是会出现虚边怎呢,如下图所示:

想绘制线性图标,这里有 6 个前辈为你踩过的坑

像圆形,斜的直线等这些都是不可避免会出现虚线的怎呢?这种属于不可避免出现,并且目前也没有术拯救的情况,除非换别的图标,目前来说还没有找别的方法来解决。

3. 新该不该选择线性图标?

并不是建议新计在刚开始触图标设计的时候,采用断点线性图标,首先因处理起比较麻烦,处理端点的变化,还避免虚的问题,线实阶段,切图就一很的作。

其次也要避免使用断点图标,虽然多图标断点之后的确更耐,但是介于产品规范及视觉一致性,整个产品的图标都需要断点,因此在一些简的图标上断点就成了最大的工作难点,如下图界面中经常出现的图标,要怎确定断点呢?

想绘制线性图标,这里有 6 个前辈为你踩过的坑

总结

虽然只小小的线性图标,但都设师需了解的一些很细节的知识,这样设的时候能够规避一些问题,同时也能保证产品线的细节质。

新计在一开始计图标的候不建议使用断点图标,除了要懂得避免虚边,还有动适配不同尺寸的切图,以及解决断点图标的问题。

想绘制线性图标,这里有 6 个前辈为你踩过的坑

这在一定程度上会需要投入更多的力来避免这些问题,而且面性的表现方式优于线性,因此不建议新计一上来就选择线性图标。

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

相关文章

图标设计,即icon设计,在界面设计中占有很重要的位置,一个好的图标,可以让用户「一秒即懂」,如何设计出优秀的图标,这篇...
ICON
编者按:本文高达一万字,从图标的起源、定义到基础的设计方法总结无一不包,还有大量的案例帮你理解布尔运算,是新人设计师...
图标设计
如期而至,这是标签栏控件总结的第二期。这一期真是掏空职业经验,希望对你的工作有所帮助。 这一期我们来聊一聊标签栏中...
UI
UI界面是否设计得足够清晰,各种元素之间是否协调、平衡,用户能否轻松感知到屏幕上的信息,交互是否顺畅舒适,这些因素决定...
Tubik Studio
有时候觉得做的图标有点奇怪,但又不知道哪里奇怪,今天就来分析两个原理,看看有谁中招了! 亲密性 排版有四大原则,其中有...
ui设计
现如今许多游戏已经不单只具有娱乐性,还具备了不错的教育性和学习性。和之前的赛车游戏 UI 界面设计不同,这次我们要设计的...
App设计
@孔雅轩LineVision :引领初中级设计师摆脱「纠结设计」的弯路,通过对层次感的了解可以将有限的技法用在最该用的地方。 ...
ui设计
前不久我在讲标签栏专题的时候,有聊到过一次图标。(前文已提及到部分规范,本文将直接引用,为防止新读者理解脱节,建议先...
UI