你好,设计师,欢迎加入翻阅计划 2025 ,和我们一起提升产品和设计思维,成为改变世界的新时代设计师。目标每年至少共读 100 篇文章,接下来,我们一起 开始今天的阅读 。
我们都深知,图形的效果比文字更具说服力(嘘…不要告诉我们的文案,小心被打死)。其中,图标是作为简洁的图形表达。设计得当的图标库是具备跨越语言障碍的独特能力(毕竟,我们的祖先最初是通过图形来传递信息)。
如果你正在阅读(或收听)这篇文章,那么,很可能你已经使用类似 DeepSeek 的 AI 工具上提问过 “图标的设计技巧”、“有没有更简单的方法来创建合适的图标库” 等等之类的问题。也很可能已经看到过大量详细介绍图标网格系统的文章。这些文章确实很有帮助,但是,要如何真正实践应用呢? 如果图标形状和比例各不相同,要如何实现视觉平衡呢?安全区域该怎么用呢?当 2 像素的描边太粗,1 像素的描边又太细的时候,又该怎么办呢?
好吧!构建一套可靠且一致的图标库也是我非常乐意探讨的话题之一(其实,还有一些读者也希望我谈一谈这个)。确实,与其在一场线上直播的时候,突然被 Q 到这个问题,通过匆匆忙忙的谈话方式分享设计秘诀(怎么可能说的完呢!),不如,我直接在这里告诉你(和那些真正热爱设计的未来设计师们)。直觉告诉我,接下来的一些实践总结会很受用。
无论你是接到任务要创建一整套全新的界面图标,还是补充部分空缺(总会有些图标是缺失的,毕竟产品会不断迭代和增加),在技术层面上,这些技巧帮我做出很不错的图标()。
![]()
首先:确定关键线
开启图标设计流程,先搜索界面图标,你会发现图标关键线系统,它用于保持不同形状或图标的视觉重量一致。
![]()
图标关键线系统
注意到网格周围 “隐形” 的白色区域了吗?我们稍后会讲到它。
关键线系统规定了基本形状(圆形、方形或矩形)的理想尺寸。当然,大多数图标所用的形状更为复杂。这一点没什么大不了,为了便于理解,我将以 20×20 像素的图标为例,演示一下我是怎么操作的。
![]()
关键线系统中的基本形状
打造技术上可靠的图标库的 5 个秘诀
秘诀 :从基本形状入手
我建议先从基本形状的图标(圆形、方形、矩形)开始设计,即便你的图标库中不需要(或着没打算用到)。通过设计 3 - 4 个简单形状,你就能初步感受到所选关键线系统的视觉重量。
![]()
基本形状的图标
当图标越来越多,当咖啡的劲开始消退,像素看得你眼花缭乱的时候,你可能会开始怀疑(或感觉)某些形状是否该做大一点或做小一点。这些基础图标将成为你的参照。利用视觉重量标准来衡量更复杂图标形状的比例,并评估你的新图标看起来大小是否合适(你能感觉出来)。
![]()
放大镜图标看起来比单选按钮图标和 “其他资源” 图标小
![]()
所有图标具有相同的视觉重量
秘诀:合理利用安全区域
我们先从图标画布的构成说起。
裁切区域:此区域以外的部分都会被裁切。
有效区域:图标内容应保持在有效区域内,在此区域图像不太可能被遮挡(例如:滚动时侧边栏出现的情况)。
安全区域:可将其视为裁切区域和有效区域之间的间距。
![]()
大多数形状都能很好地置于有效区域内,这会让人觉得似乎不需要安全区域。经验不足的设计师可能会把它完全裁掉。但问题来了:总有一天,你会碰到一个形状,它在图标库中看起来比其他图标小,可却没有空间把它做大。此时,你就只能在两个不太理想的解决方案中做选择:1. 要么重做整个图标库;2. 要么接受较低的视觉重量平衡。这就是我为什么从不去掉安全区域的原因。
![]()
“云” 图标放在有效区域内时,看起来偏小
![]()
当你需要把某个图标放大时,就利用安全区域
在对齐方面,我们通常会试着将图标置于画布中心,两边留出相同的间距。然而,有时候,我们的眼睛会欺骗我们,对吧?网格显示居中的图标,然而,看上去可能并没有居中。
你能看到贯穿图标和标签中心高度的灰色虚线了吗?由于图标形状不对称,并且,突出部分超出了焦点区域,此时,它看起来有下沉感,而且,偏离中心。我们的解决方法很简单,就是微调,只需将图标 “重心” 上移至网格中心。
![]()
与文本相比,垃圾桶图标看起来位置过低
![]()
利用安全区域来修正垂直或水平对齐问题
如何确定形状的正确位置
1. 将新图标放在一个对称图标旁边进行对比。
2. 将新图标置于一个正圆或正方形内。
你马上就能知道是否需要做出调整。而且别忘了合理利用安全区域。
![]()
将复杂形状图标与对称图标对比,找出位置问题
![]()
利用安全区域来调整垂直或水平对齐
![]()
将复杂形状置于正圆或正方形旁,以找出位置问题
![]()
利用安全区域来调整垂直或水平对齐方式
正如你所看到的,最初的垃圾桶图标放在正方形里看着还行。但是,当把它放在对称图标或文本旁边的时候,你会很明显的发现对齐问题。所以,我们为确保万无一失,这两种方法都要用,来找出对齐问题。
秘诀:始终遵循像素网格
为确保图标在所有屏幕,以及在任何格式下都保持高质量,我们必须严格遵循像素网格。每条垂直线或水平线都要与网格规则对齐(绝无例外!)。
![]()
以下示例:我们展示遵循(或忽略)像素网格的情况下,在图标光栅化后,对图表质量的影响。即便在矢量编辑器中,图标近看极其精确,但是,在浏览器中光栅化后,质量仍然会受到损失(没错,即使图标保持 SVG 格式也是如此)。
![]()
描边未适配像素网格
如果做得不精细,技术会直接反映质量。
最终呈现的质量,直接取决于你对像素网格规则的遵循程度。如果处理圆角,要确保像素网格规则适用,并且尽量让圆形与像素网格对齐。
![]()
描边精准适配像素网格
秘诀:1px 和 1.5px 图标可灵活变通规则
我们最常见的例子是 2px 描边图标,对齐效果也很便捷。如果是 1px 图标呢?它们会更细、更精致,风格独特,还能承载更多细节。如果把 1px 线条直接放在画布中心,我们就必须在对称和网格对齐之间做取舍,这并不是非常理想的权衡。
![]()
部分 1px 图标居中时无法适配像素网格
面对这两个选择,我总会选网格对齐。建议将图形向左或向上移动 0.5px,这样能让描边适配像素网格。光栅化后,图标质量会更高,其实,几乎没人会注意到这 0.5px 的位置调整。
![]()
你可以稍微移动图标,使其适配像素网格
无论怎么做,尽量别把这些图标放在小圆圈或小方块里,不然不对称问题会更明显。
![]()
避免将偏移过的图标放在正圆或正方形上
Figma 使用 1px 描边图标,有时,它们会打破像素网格规则。也许他们假定所有用户都用视网膜显示屏!
![]()
Figma 网页界面的图标
![]()
Figma 网页界面的图标
等等,还有一种情况,如果 2px 太粗、1px 又太细怎么办?好在还有 1.5px 的描边,它们遵循相同的准则。虽然图标不会像 1px 或 2px 的那么精准,但只要外边框适配像素网格,图标就足够清晰。
专业提示:对最终图标质量有疑虑?在 Figma 中按 ^p 开启像素预览模式。
![]()
当 1.5px 图标的外边框无法适配像素网格时,图标看起来会模糊
![]()
当 1.5px 图标的外边框适配像素网格时,图标看起来就清晰
秘诀 :给填充图标来点创意
我个人是比较喜欢填充图标。这里面有很大的创新空间,而且还有个好处,就是同样的网格规则也适用。
![]()
填充图标同样遵循这些规则
在 Lightspeed,填充图标是首选图标,它完全是另一回事。接下来,我可能会分享一些我们最重要的图标设计秘诀:如何为你的系列产品打造一套图标库。
![]()
最后,来一份打造下一套图标的简易指南
收藏,运用这些秘诀,打造更出色的图标
1. 从基础形状入手:以圆形、正方形和矩形为起点,这有助于为你的图标集设定标准,并为后续更复杂的形状衡量比例。
2. 巧用安全区域:利用它来增加视觉重量,或修正垂直 / 水平对齐,千万不要裁剪掉它,即便你最初的图标在有效区域内也不行。
3. 始终遵循像素网格:即便你的图标在矢量编辑器中近距离看很棒,光栅化后质量也会受影响。
4. 1px 和 1.5px 图标灵活变通规则:将 1px 线条置于画布中心时,向左或向上移动 0.5px,确保描边适配像素网格。不要把这类图标放在小圆圈或小方块里,否则只会凸显不对称。1.5px 图标遵循同样准则,只要外边框适配像素网格,图标就足够清晰。
5. 给填充图标来点创意:它们遵循同样的网格规则,但创作起来更有趣。
文章转载:三分设,版权归原作者所有
原文链接:https://mp.weixin.qq.com/s/INYMIxat_2Gakvjv77_jcA
版权声明:“IXDC”所推送的文章,除非确实无法确认,我们都会注明作者和来源,本公众号对转载、分享的内容、陈述、观点判断保持中立,不对所包含内容的准确性、可靠性或完善性提供任何明或暗示的保证,仅供读者参考。部分文章推送时未能与原作者取得联系,若涉及内容或作品等版权问题,烦请原作者联系我们,给出内容所在的网址并提供相关证明资料,我们会核查后立即更正或者删除有关内容!本公众号不承担任何责任,并拥有对此声明的最终解释权。
联系微信:18802086168
联系电话:18802086168
编排 | 李亦然
终审 | 苏 菁
点这里,学习更多设计知识!
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.