这篇博客文章基于我们团队——成都长风云的长期经验实践总结。

一、什么是组件，为什么它们很重要？

组件是构成你网站页面的模块化构建块。无论你使用WordPress、Drupal、解耦前端，还是其他完全不同的内容管理系统（CMS），它们都是可重复使用的模式，像横幅、卡片、轮播图、行动呼吁块、特色列表等。这些组件能让内容编辑人员无需从头开始，就能构建出丰富、灵活的布局。

设计良好的组件能让你的网站更新更快、更具一致性，且更易于维护。它们弥合了设计、开发和内容策略之间的差距。然而，当组件失去控制，数量太少或者过于复杂时，它们可能会成为隐藏的复杂性来源，使创建一致的内容变得更加困难，还会导致技术债务增加。

二、常见的组件挑战

组件能否赋能你的团队，还是会给他们带来阻碍，取决于它们的规划和维护情况。

1. 组件过多

当你有太多组件，尤其是那些几乎相同的组件时，编辑人员会面临决策疲劳，并且不一致性会逐渐显现。间距或排版上的微小变化会导致视觉偏差和破碎的用户体验。此外，当你有大量组件需要维护和测试时，更新品牌也会变得更加困难。

2. 相似组件过多

有三个只有细微差别的“卡片”组件版本？这表明你的系统需要进行精简。间距或排版上的微小差异可能会造成很大的视觉差异，但这并不足以成为创建单独组件的理由。

3. 组件不足

从另一个极端来看，选择太少会让编辑人员感到沮丧，导致内容平淡、千篇一律，或者出现杂乱的变通方法（“我可以使用一些内联CSS让背景变成红色吗？”）。

4. 多功能组件过于复杂

还有一些多功能组件试图包揽一切。它们变得难以使用、难以测试且难以维护。当一个单一的组件，如标准的“行动呼吁”或“文本与媒体”组件被用于太多用例时，它往往会被塞进大量的设置和可选字段。结果往往是维护债务的不断增加，给设计和开发团队都带来负担。

如果这些问题听起来很熟悉，可能是时候进行一次组件审计了。

三、进行组件审计

组件审计是你停下来、评估现状并为系统带来清晰性的机会。这是对现有组件进行的系统审查，以识别差距、重叠和改进机会。

以下是如何有效进行审计的方法：

1. 步骤1：定义审计范围和标准

首先选择一个适合你要解决的问题的范围。你是在解决治理问题吗？是编辑工作流程的瓶颈问题吗？还是设计系统的不一致问题？

你的审计可能有一个狭窄的重点，比如评估着陆页上使用的组件，也可能是全面的，检查你的CMS如何支持整个数字生态系统。

设定符合你目标的标准。你可以考虑以下方面：

• 编辑工作流程：组件对编辑人员来说是否易于使用？
• 治理：是否有明确的流程来请求或批准新组件？
• 一致性：组件是否与你的品牌和设计系统保持一致？
• 用户体验和无障碍性：它们是否直观、包容且符合标准？

2. 步骤2：盘点现有组件

接下来，从CMS中整理出一份完整的组件列表。记录它们的用途、行为、变体以及当前的使用位置。你现有的内容编辑文档可以作为一个很好的起点，但一定要补充缺失的细节。

包括以下实用信息：

• 名称和用途
• 使用位置（模板、页面类型）
• 变体和行为
• 使用频率
• 编辑人员和设计师的注释
• 截图示例和链接

你的标准越清晰，审计就越具可操作性。

你可以使用标准的内容或组件清单电子表格来记录这些细节。网上有几个免费的模板可供使用，例如，《这个组件清单模板》为记录用途、变体和使用模式提供了清晰的结构。

3. 步骤3：评估并识别差距或机会

一旦你的清单准备好，就根据你选择的标准评估每个组件。寻找重复、不一致或差距。

关注以下方面：

• 重复：执行相同任务的相似组件
• 差距：编辑人员需要但缺失的构建块
• 标准化机会：变体是否可以合并或规则是否可以明确？
• 自动化可能性：是否有任何模式可以自动生成或模板化？
• 一致性：组件是否与你的品牌、设计系统和无障碍标准保持一致？

4. 步骤4：决定下一步行动

你的审计应该以行动结束：

• 淘汰不再有用的组件。
• 将冗余的组件合并为更简单、更灵活的版本。
• 对需要技术或设计改进的组件进行重构。
• 保留运行良好的组件。
• 这是你为系统带来清晰性和控制权的机会。

四、记录一切

文档能将一次性的清理工作转变为可持续的系统。一旦你对组件进行了合理化处理，文档就变得至关重要。可以将其视为系统的用户手册，它不仅解释每个组件的工作原理，还说明其存在的原因。

良好的文档能让你的网站保持品牌一致性，减少猜测，并确保团队之间的行为一致。它还可以作为系统的测试平台，用于记录预期行为、无障碍性注释、文本长度建议和图像大小指南。

1. 应包含的内容

每个组件的文档应包含：

• 描述和用途
• 预期行为和变体
• 示例用例
• 文本长度和图像/视频尺寸指导
• 无障碍性要求
• 相关变量或分类法的参考

2. 记录方法

没有一种适用于所有情况的工具，这取决于你的团队。选项包括：

• Figma用于以设计为中心的文档
• Storybook供开发人员使用，展示实时代码示例
• 基于网络的组件库或样式指南，面向更广泛的受众

对于一些团队来说，一个简单的库加上内容指南可能就足够了，而另一些团队则需要一个更紧密集成的系统，带有高级插件或开发人员的README文件。例如，四川大学图书馆融媒体系统就是一个很好的例子，它是一个全校范围的设计系统，集中了共享组件、文档和审核流程，使各个学院能够在保持与整体品牌一致的同时对组件进行调整。

无论你选择哪种格式，目标都是拥有一个单一的事实来源，并且要保持更新并让每个人都能访问。

五、设计系统守护者的角色

即使是文档完善的系统也需要积极的管理。这就是设计系统守护者发挥作用的地方：一个人或一个小团队，负责维护组件的愿景和质量控制。

守护者负责：

• 监督新组件的提案和更新
• 执行品牌和无障碍标准
• 管理版本控制和更新日志
• 防止“范围蔓延”或重复

1. 保持可维护性

一旦你的组件库整理并记录完毕，下一个挑战就是随着时间的推移保持其健康状态。维护是一项持续、有计划的工作，能让你的系统具有可扩展性和一致性。

通过以下方式让你的组件库具有前瞻性：

• 为所有组件和文档维护一个单一的事实来源。
• 使用版本控制来跟踪更改，了解哪些组件已更新、淘汰或重构。
• 让更新日志对整个团队可见且可访问。
• 避免对过时的框架或第三方代码产生不必要的依赖，以免日后限制灵活性。

重用现有组件是保持一致性和减少开发工作量的有效方法，但要谨慎对待新的变体。每个额外的变体都会引入复杂性并增加长期维护成本。

在创建新变体之前，问问自己它是否真的满足独特的需求，或者是否可以对现有组件进行调整。当确实需要新变体时，要有计划地构建它们：记录它们的用途，记录更改，并确保它们符合你的整体系统标准。

一个可维护的组件库要在灵活性和控制之间取得平衡。通过深思熟虑的治理、清晰的文档和严格的版本管理，你的系统可以在不失去凝聚力或质量的情况下持续发展。

2. 在现有系统内工作

大多数组织不会凭空构建他们的组件，而是在现有的设计系统和品牌结构内工作。

例如，约克大学艺术、媒体、表演与设计学院（York University’s School of the Arts, Media, Performance & Design）的网站存在于约克大学的多站点架构和既定设计系统中。该团队使用了约克数字体验中心的现有组件，但进行了微妙的创意调整，如特定学院的强调色和大胆的排版，以在保持与母品牌一致的同时展现自己的特色。

一个成功的方法是在尊重现有系统的同时，根据你的特定需求进行深思熟虑的调整。

六、总结要点

从审计开始。这是了解哪些组件有效、哪些冗余以及机会所在的最佳方式。利用这些见解使你的组件与内容策略和设计系统保持一致。

然后，记录一切。让你的组件库透明、易于学习和使用。

最后，要预计到你的组件会不断发展。建立一个能够接受变化但又有明确目标的治理模型。

七、需要帮助吗

我们已经指导过许多团队进行组件审计、设计系统开发和CMS现代化项目。从公共部门、高等教育到医疗保健和企业，我们会根据组织的实际情况提供帮助，并乐于与你的团队合作。

联系我们，聊聊我们如何合作。