命名这件事：一份实用指南

命名很难。我们使用的语言塑造了我们思考事物的方式，也塑造了我们围绕它展开的讨论。这就是为什么我们在颜色、图标、界面组件、功能上会有这么多困惑——也是为什么我们为设计令牌、HTML 类名和变量命名时如此纠结。

有时候，我们选择的名字太笼统，很难理解到底指什么；有时候又太具体，几乎没有留下灵活性和复用的空间。怎么选对名字？哪些命名规范最好用？

如何给事物命名

如果你在给 HTML 类名、CSS 属性或 JavaScript 函数命名时想找些灵感，Classnames 是一个不错的资源，里面塞满了让你跳出固有思路的点子。

这个网站提供按主题分组的词汇列表，非常适合用来命名。你能找到描述不同行为、事物之间的相似性、顺序、分组和关联的词汇，也能找到一些在写代码时不会第一时间想到的主题词汇集合，其中包括来自自然、艺术、戏剧、音乐、建筑、时尚和出版的词。

如何给颜色命名

你会怎么给一个颜色选对名字？幸运的是，David Aerne 维护了一个庞大的颜色名称库，目前收录了 30355 个不重复的颜色名，来源包括各类参考资料和数千条用户贡献。

当然，这个库自带取色器和名称搜索，也整合了许多其他取色工具。这是一项了不起的工作，也是一个值得放在手边的绝佳参考。

如何给图层和分组命名

什么才算好名字？Javier Cuello 总结了一套命名最佳实践，帮助你以一致且可扩展的方式给图层、分组和组件命名。

正如 Javier 所指出的，一个好名字有逻辑结构、简短、有意义、所有人都知道，并且不与视觉属性挂钩。他分享了"该做"和"不该做"的示例来说明如何做到这一点，也深入探讨了命名尺寸、颜色、分组、图层和组件时需要考虑的各种细节。

如何给设计令牌命名

如何构建一套能跨不同产品使用的灵活设计令牌分类体系？这正是 Intuit 团队面临的挑战。这家公司旗下有 Mailchimp、QuickBooks、TurboTax 和 Mint 等产品，他们开发了一套灵活的令牌系统，不止服务于品牌主题，而是作为一系列产品的基础系统。

Nate Baldwin 写了一份案例研究，分享了构建 Intuit 设计令牌分类体系的宝贵见解。它深入探讨了旧分类体系的痛点、他们为新体系定义的标准，以及新体系是如何创建的。对于构建你自己的健壮且灵活的令牌分类体系，有大量可借鉴之处。

界面组件的常见叫法

当你为命名纠结时，看看别人对类似事物怎么称呼，是个很好的起点。还有什么比设计系统更好的来源呢？在你掉进设计系统的兔子洞之前，Iain Bean 已经替你做了调研，创建了 Component Gallery。

这个集合收录了 50 多个界面组件的示例——从手风琴到视觉隐藏组件——同时也列出了这些界面组件的其他叫法。这是一个极好的资源，而且不仅仅在命名方面。

另外还有 Name That UI，一个常见界面组件的视觉词典。

如何给新功能命名

功能常常因为不易被发现而采用率低。功能采用需要时间——首先功能必须被发现，然后被理解，接着被尝试、被学习，最终融入现有工作流。Erin Gannon 写过一份实用指南，讲如何确保这一切发生。

好名字由用户需求和问题驱动。它们应该传达功能的价值或结果（待完成的任务），而且——最重要的是——用用户自己的语言。所以，请人们用自己的话解释一个功能，然后用他们说的词。

如何给变量命名（分类地图）

一个关于复杂多品牌、多主题设计系统命名规范的绝佳示例，来自 Vodafone UK 设计系统团队。他们的变量分类地图把设计令牌的解剖结构和分类拆解成一套编排良好的集合系统。

这张地图展示了支撑系统所需的四个集合，以及令牌之间的连接关系——从品牌和基础层，到语义层和页面。它建立在 Nathan Curtis 关于设计令牌命名的工作之上，让每个人仅凭名字就能了解一个令牌在哪里被使用、代表什么。

如果你想探索更多设计令牌命名的方法，我整理了一份有用的 Figma 套件和资源列表，值得一看。

设计令牌命名指南 + 清单

Romina Kavcic 做了一个用于设计令牌命名的小工具——从学习它们如何工作、如何命名，到用组件、类别、状态和角色配置你自己的命名结构。

另外还有 Design Token Names Inventory 电子表格，结构简单，分四个层级，让你对自己的所有设计令牌一目了然。你可以轻松添加行、主题和模式而不会混乱，还能筛选令牌。

给产品或服务命名

如果你正在为产品或服务寻找合适的名字，Onym 是一个很棒的开源资源库，整理了用于找名字的工具和资源——从头脑风暴、筛选、指南、冲刺、词源，一直到警示故事和命名机构，以及值得一看的实用书籍。

命名的实用书签

一份快速参考清单，把几乎……任何东西的命名工具和指南集中在一处：

• 命名按钮 → NN/g 关于界面文案
• 命名类名 → classnames.paulrobertlloyd.com
• 命名……