赞助商
立即赞助

超实用的扁平图标绘制终极指南!

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

一、使用栅格

界面上的 icon 一般都能近似成一个基本形式,比如各个方向的长方形、圆、三角形、正方形。如果你把他们进行模糊化处理,你会发现他们都是差不多大的一小团黑色,也就是说其「视觉重量」是基本一致的。

超实用的扁平图标绘制终极指南!

把 icon 根据不同的形状放入栅格框架里面。举个例子,方形的 icon 就比三角和细长 icon 显得更紧密。

超实用的扁平图标绘制终极指南!

超实用的扁平图标绘制终极指南!

一个 icon 越紧密,它需要的空间就越少。一个 icon 的细节越多,我们在栅格框架中就应该给他更多的空间。

超实用的扁平图标绘制终极指南!

超实用的扁平图标绘制终极指南!

注栅创, icon 效,突破栅。

二、注意像素对齐

 retina 屏,icon 条紧贴素,数; icon 议宽 2px。

超实用的扁平图标绘制终极指南!

超实用的扁平图标绘制终极指南!

如果你使用 1px,那线条只能在内部或外部,不能使用中心对齐。

超实用的扁平图标绘制终极指南!

超实用的扁平图标绘制终极指南!

使用居中的 1px 边框,使得图标会在100%的比例时模糊,不过如果你放大的话,它看起来很清晰。

超实用的扁平图标绘制终极指南!

超实用的扁平图标绘制终极指南!

依照格子来确定斜线的角度。尽量使用45°、30°、60°等常见角度,他们会比13.7°或者81°这样不常见的角度更清晰。

超实用的扁平图标绘制终极指南!

三、把握细节程度

组 icon ,先从复始。控图标细节程,证 icon 视相。

超实用的扁平图标绘制终极指南!

 icon 细节程各相,细节 icon 吸引户注,「」。

超实用的扁平图标绘制终极指南!

四、控制最小间隔尺寸

在整套 icon 中,每个 icon 内部相邻元素之间的距离不应该太小。最好定义一个最小间隔尺寸,避免 icon 风格不统一。

超实用的扁平图标绘制终极指南!

超实用的扁平图标绘制终极指南!

对于线型 icon 来说,一个简单方法就是最小间隔大小与线宽保持一致。同时线条要清楚地分开或者相连,一定不要用那种似连非连的样式。

超实用的扁平图标绘制终极指南!

超实用的扁平图标绘制终极指南!

五、去除重复的部分

在一套 icon 里,你可能设计出很多重复的细节。但一定要舍弃这些重复的部分,突出每个图标中特色的点。这就像数学中的分数一样,视觉杂质越少,用户理解的就越清楚。

超实用的扁平图标绘制终极指南!

如果用户已经知道他们正在用什么样的软件,那就不需要一再重复地告诉他们。比如说在邮箱 app 里,icon 即使去掉「邮件」这个元素,用户依然知道自己是在收发邮件。

超实用的扁平图标绘制终极指南!

这个规则对于其他装饰性元素也适用,比如一些围绕在icon周围的框架、背景等。这些装饰可能没有帮助用户理解 icon,甚至在妨碍理解 icon。

六、制定并保持一个明确的风格

不要在一套图标里混合多种风格。风格的一致会帮助用户理解 icon 意义,找出重要程度相似的 icon。

超实用的扁平图标绘制终极指南!

超实用的扁平图标绘制终极指南!

或者填充 icon 则。把 icon 混,户认 icon 表程或者状。,除。举例,填充 icon 表键指令,则指令。

超实用的扁平图标绘制终极指南!

超实用的扁平图标绘制终极指南!

在页面中有两种类型的 icon 也是可以的,线型 icon 用来标识不可用或者默认状态,填充型 icon 代表已选状态。

超实用的扁平图标绘制终极指南!

七、使用icon的标准设计尺寸系统

8pix 栅格和12列栅格是目前最灵活的设计尺寸系统。12可以被2、3、4、6整除,所以24*24pix 和48*48pix 是目前的标准 icon 尺寸。如果需要更大尺寸的 icon 可以直接放大使用。

超实用的扁平图标绘制终极指南!

八、保持轮廓的干净和准确

完美本身并不是目标。没人会为了一条像素清晰的点去一个一个检查像素。但 icon 清晰度会影响最终产品给用户的感受,所以时刻提醒自己 icon 中是不是有多余的锚点?以及 icon 中的锚点是不是准确的点在像素点上?

超实用的扁平图标绘制终极指南!

不知道你是否遇到过「8.999px」和「100.001px」这种烦人的尺寸。如果绘制过程中,锚点点的非常准确,那么 icon 的线条就会很「锋利」,平滑,你也不会遇到各种稀奇古怪的问题。

超实用的扁平图标绘制终极指南!

九、规范化的SVGs格式输出

许多设计工具比如 Sketch,在生成 SVGs 文件是会产生许多不必要的东西,多余的图层、纯颜色层、蒙版等等。看这个例子:在 Sketch 里,看起来没什么问题。

超实用的扁平图标绘制终极指南!

但是在其他编辑器( AI 之类)里打开这个 SVG 文件。你会看到许多空图层、不知道哪来的分组、蒙版等等。这些多余的东西在开发人员使用 SVG 的时候就会导致许多问题。

超实用的扁平图标绘制终极指南!

你可以删掉这些没用的东西,然后再保存。

超实用的扁平图标绘制终极指南!

你可以看到,之前从 Sketch 导出的 SVG 和清理过的 SVG 在你的电脑里看起来是不一样的。

超实用的扁平图标绘制终极指南!

如果你想到其他的建议请直接留言,我们可以一起完善这份指南。但如果上述中有些规则会影响到你重要的设计理念,那么不要被这些规则完全束缚,发挥创意吧。

原文链接:《Hopefully, the Ultimate Guide to a Flat Icon Set》 Slava Shestopalov

欢迎关注译者微信公众号:「熊猫设计院」

超实用的扁平图标绘制终极指南!

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

相关文章

@菜心设计铺 :图标——界面设计最重要的元素之一。 菜心经常写关于图标的教程和感悟,可见图标设计在我日常工作中占了很大比...
图标设计
UI 在拿到产品原型时该如何思考?如何着手设计界面?最近跟一些设计师朋友交流 UI 设计方案,总结了一下在方案优化的思考过程...
UI设计师
很多平台的设计风格都是偏可爱类型的,尤其是用户年龄段比较低的,比如动漫类的,校园类的等等。 就在前不久,我刚刚悟出了...
可爱图标
本文我们开始讲解最后一种类型的图标 ── 启动图标。在第一章我们已经对启动图标有了基础的认识,所以下图再简单回顾一遍。 ...
入门
编者按:设计原则总是看起来简单抽象不言自明的,但是在细分的设计领域,这些原则其实有着各自不同适用情况,有着「特定的条...
ICON
我们作为 UI 设计师,一开始入门接触最多的就是图标,而现在很多设计师都钟爱线性图标,导致很多新手设计师也跟随主流的脚步...
图标设计
想想图标的绘制也是有历史的,从刚开始 ps 用面切法运用布尔运算去切,有时候线条也是用面切面得到。随着线性图标的火爆和普...
ICON
在 C 端设计中,不管是给车载客户端、手机客户端、电脑客户端设计界面,都有比较具体的规范需要我们学习和遵守。 而唯独 B ...
B端产品