MTD 图标

背景与问题

2024 年，设计部要求统一美团 B 端（MTD）和 C 端（美团 App）的图标风格。而正好借此契机，把 MTD 的图标组件库进行升级，解决以下这几个过去存在的问题：

1. 图标不好被组件调用，更不好被业务使用，设计师画 UI 时，要么去历史设计稿里「偷」，要么自己重画，效率极低，久而久之风格也随之失控；
2. 图标过多，几乎无法通过搜索关键词，找到想要的图表；
3. 不好扩展，业务特色的图标无法和基础图表替换使用。

解法

绘制规范是基本功，和大多数图标库一样：我们当然也会在最开始定下严格的设计规范，定好网格、线条粗细、圆角规则等、以此来保证成百上千个图标画出来的风格能够保持一致。

这个项目真正不同的是后面三件事。要知道过往问题的本质不是「缺图标」，而是图标没有成为「方便调用的资产」。

独立团队库，全业务可引用

旧图标库的问题是无法被组件调用。设计师取用图标依赖每个设计团队有人能把图标的原始文件转移到自己团队，然后再从副本文件复制粘贴，或者从美团内部 iconfont 网站下载 svg。

独立组件库

我们采取和组件相同的团队库策略，并且更进一步图标库本身成为独立的「基础设施」。

MTD 图标库不被任何业务绑定，甚至也不被 MTD 组件库绑定（多数图标库会选择把图标放进设计系统的组件库一起维护）。无论 MTD、美团 C 等任何业务团队库都可以引用它，图标像乐高积木一样被组装到各种组件里，轻松替换。

分类 + 多关键词命名，解决「找不到」

图标的找寻曾经是一个灾难，从几百个图标中依赖图形来寻找，效率很低。于是，我们在分类和命名上进行了深入的探索。

12 类基础分类+业务分类

图标分类后，先定位大类，再缩小范围，每次只需要按类别在几十个图标中按图形进行寻找就好找得多。

图标分类依据：参考 SF Symbol，Material icon 分类，并结合美团业务使用实际图标数量。

多关键词命名

但图标扩展到几百个之后，依据图形去找依然不是便捷的方式。这个时候可以依赖关键词搜索。相关规则

优先以该图标最常用的表意作为命名，多个表意的图标可以同时出现；

若图标为复合图标，请将主体名称放在最前，次要元素用于后缀；

若图标存在禁用/关闭表意，使用后缀：_禁用；

若图标存在方向，使用后缀：_上，_下，_左，_右；

建立业务图标回收机制

通用图标库不可能覆盖所有业务场景。我建立了「业务图标库」——各业务团队可以提交自己高频使用的图标，审核通过后进入业务库；使用频率足够高的，再吸纳进通用库。图标库因此可以持续生长，而不是一成不变。

画图标是一件枯燥的基本功，管理图标是很少人愿意做的脏活累活，但可能由于个性的原因，在做这类事情时会有一种强迫症被满足的愉悦。