命名 UI 组件的实用指南

摘要： 命名是沟通的基石。本文提供了一套从代码类名到设计令牌的命名实操指南，推荐了灵感库与色卡工具，并解析了大型企业的命名规范案例。

命名看似简单，实则是一门艺术，也是一门科学。语言不仅塑造了我们思考事物的方式，也决定了我们在团队中讨论事物的深度。在 UI 设计和前端开发中，我们常面临命名困境：是选择过于通用的名称导致歧义，还是选择过于具体的名称导致缺乏扩展性？

为了解决这些痛点，我们需要一套系统的命名策略和工具辅助。以下是为开发者和设计师整理的实用指南。

1. 给代码起名：Classnames 的灵感库

在编写 HTML 类名、CSS 属性或 JavaScript 函数时，开发者往往容易陷入“默认值”的思维定势，导致代码缺乏创意和可读性。

Classnames 是一个绝佳的资源库，它提供了按主题分类的词汇列表，能帮助开发者跳出代码思维，寻找更有表现力的命名方式。除了常见的描述行为、顺序和关联性的词汇外，该网站还收录了来自自然、艺术、戏剧、音乐、建筑、时尚和出版领域的主题词汇。

• 实用解读： 当你为按钮或导航栏命名时，不要局限于 btn-primary，可以尝试使用更具象或隐喻的词汇，如 btn-rose 或 btn-jazz，这有助于提升代码的语义化和视觉联想度。

2. 给颜色命名：Color Parrot 的色库

颜色名称的模糊性是设计系统的一大难题。如何为特定的 HEX 值找到一个精准且富有美感的名称？

Color Parrot 提供了一个包含超过 30,000 种唯一颜色名称的庞大数据库。这些名称源自各种参考标准和数千名用户的贡献。该工具不仅能为颜色命名，还集成了颜色选择器和名称搜索功能。

• 实用解读： 在设计系统中，使用具体的颜色名称（如 Coral 或 Moss）比使用通用色相（如 Red 或 Green）更能保持界面的一致性和专业性。Color Parrot 可以作为你的命名参考书，随时查阅。

3. 图层与组件：Javier Cuello 的命名原则

在 Figma 或 Sketch 等设计工具中，如何命名图层和组件才能保证可扩展性？

Javier Cuello 总结了一套行之有效的命名原则。一个优秀的名称应当具备以下特征：

• 逻辑结构： 具有清晰的层级和顺序。

• 简短精炼： 避免冗长的描述，提高效率。

• 通用性： 团队成员都能理解其含义。

• 非视觉属性： 命名应描述“是什么”或“做什么”，而不是描述“长什么样”（例如，用 header-nav 而非 header-dark-blue）。

• 实用解读： 在大型项目中，过于具体的名称（如 hero-banner-3）很快会变得难以维护。遵循上述原则，可以让你的设计文件在未来几年内依然易于协作和修改。

4. 设计令牌：Intuit 的跨产品实践

对于拥有多个产品线的大型企业（如 Mailchimp, QuickBooks, TurboTax），如何建立一套通用的设计令牌系统是巨大的挑战。

Intuit 团队开发了一套灵活的令牌系统，超越了单纯的品牌主题，成为了众多产品的基石。Nate Baldwin 分享的案例研究深入探讨了痛点、新系统的定义标准以及构建过程。

• 实用解读： 设计令牌不应局限于视觉样式，更应包含间距、字体、动画等交互属性。通过参考 Intuit 的经验，开发者可以学习如何构建一个既能满足品牌统一性，又能适应不同产品需求的语义化令牌系统。

5. 借鉴设计系统

当自己难以命名时，最好的方法就是参考现有的成熟设计系统。

• 实用解读： 查看主流设计系统（如 Material Design, Ant Design, Apple Human Interface Guidelines）中组件的命名逻辑，可以为你提供最直接、最经过验证的参考模板。

总结

良好的命名规范是高效开发和协作的润滑剂。无论是通过 Classnames 寻找创意，还是遵循 Javier Cuello 的原则，亦或是学习 Intuit 的系统架构，掌握这些方法都能显著提升你的工作产出质量。