Netlify 如何在短短 6 周内完成应用品牌重塑

Netlify 作为一个领先的 Web 开发平台已超过 9 年。如今，超过一百万的开发者使用他们的服务来部署应用和网站。

今年早些时候，Netlify 对其所有资产进行了品牌重塑，包括营销页面、文档站点和应用内 UI。考虑到所有移动部件、利益相关者和时区，这类工作通常需要六个月或更长时间。

以下是 Netlify 如何使用 Storybook 和 Chromatic 在短短六周内完成这项工作的。

抢先体验：通过 Storybook 全新的 Chromatic Visual Test 插件，将 Chromatic 和 Storybook 整合到一个界面中。立即获取抢先体验 ≫

Netlify 的 UI 技术栈

Netlify 的开发者使用 React 和 Tailwind CSS 创建 UI 组件。他们使用 Storybook 将所有组件及其变体组织在一个地方。

Storybook 是 UI 的单一事实来源，所有团队成员（从开发人员和设计师到产品负责人）都会引用它。点击此处了解更多关于 Netlify 团队如何使用 Storybook 的信息。

Netlify 使用 Chromatic（Storybook 的姊妹工具，由 Storybook 的核心维护者创建）自动化此工作流程。它使他们能够自动进行故事的可视化测试，并发布他们的 Storybook 以供他人参考。QA 通常感觉像是世界上最长的“找不同”游戏。Chromatic 为每个人消除了这些麻烦。

Storybook 和 Chromatic 在 Netlify 的应用品牌重塑中发挥了关键作用，覆盖了大约 2,500 个不同的故事。让我们看看 Netlify 面临的挑战。

全新的配色方案

Netlify 品牌重塑的第一阶段集中在实施新的配色方案。主要功能之一是更新了 Netlify 品牌青色，该颜色用于整个应用的字体和组件。他们还引入了新的绿色调色板用于成功状态。

首先，团队更新了全局颜色令牌，然后使用 Chromatic 跟踪由此产生的变化，因为这些变化波及整个应用，并验证新颜色是否正确显示。在此过程中，Netlify 了解到他们在一段时间内一直错误地使用了他们的品牌颜色。

主要的品牌青色仅用于品牌元素。然而，Chromatic 识别出它被意外地用作应用中的操作颜色和成功颜色。这不仅混淆了他们的品牌，也混淆了应用的 UX。

在以前未知的组件上浮现可视化差异，帮助 Netlify 改进了 UX 并正确实施了他们的品牌指南。

为了在工作时更轻松地进行可视化比较，Netlify 还构建了一个自定义 Storybook 插件。它允许他们在新旧品牌颜色范围之间切换。

这些本地的、自动化的可视化测试很快将直接在 Storybook 中提供。这将作为新的 Chromatic Visual Tests 插件的一部分推出。它已开放抢先体验，立即注册！

“我确信应用的每个角落和缝隙都得到了覆盖！这提供了一种极大的安心感。”
Kristy Marcinova，Netlify 的 Staff 产品设计师

全新的 Logo

没有新的 Logo，品牌重塑是不完整的。这个过程听起来可能像是一个相当简单的查找和替换。然而，Netlify 很快了解到旧的 Logo 出现在大量令人惊讶的地方——包括插图和吉祥物。手动追踪所有这些将是一项巨大的手动侦查工作。

相反，Netlify 使用了 Storybook 和 Chromatic。在 Storybook 中更新了 Logo SVG 文件并提交更改后，Chromatic 自动浮现了旧 Logo 出现的每一个地方，供团队审查。

大规模更新设计

Netlify 需要将数百个组件变体更新为新设计。使用 Storybook 使这个过程变得轻而易举。Netlify 将 Figma 中的所有设计链接到 Storybook 中等效的实现，这使得轻松发现任何需要更新的组件成为可能。

完成此操作后，Netlify 使用 Chromatic 验证这些更改。每次提交后，都会拍摄更改的组件的新快照，然后与之前的基线进行比较以检测更改。

使用 Chromatic 进行可视化测试——即将通过 Chromatic Visual Test 插件在 Storybook 中推出——让团队中的设计师可以在不破坏生产环境的情况下提交代码。这是因为 Chromatic 在合并之前捕获了任何意外错误。这意味着对最终细节的调整，例如将青色更改为绿色，可以由设计师独立在代码中完成，而无需占用开发人员的时间。

“知道我们没有忘记任何只有深入代码才能发现的东西，这真是一种巨大的安慰。”
Prabhav Khandelwal，Netlify 的产品设计师

与非技术利益相关者签字确认

在 Storybook 中开发组件是收集 UI 到一个地方供利益相关者审查的自然方式。Netlify 使用 Chromatic 的协作工具，允许团队成员在交付之前对每个故事进行明确的签字确认。利益相关者可以在一个地方留下实施反馈并讨论 UI 更改。

重塑完成

在一个拥有众多优先级和技术知识不同的团队成员的项目中，将每个人聚集在一起可能很困难。

借助 Storybook 和 Chromatic，Netlify 以一种简单的方式完成了一个复杂的项目。他们能够彻底更新每个 UI 状态，防止错误，并在创纪录的时间内完成品牌重塑。

感谢 Kaelig Deloumeau-Prigent、Kristy Marcinova、Prabhav Khandelwal 和整个 Netlify 团队与我们合作撰写这篇文章！

有兴趣效仿 Netlify 的例子，在 Storybook 中实现可视化测试自动化吗？立即注册抢先体验 Chromatic Visual Tests 插件！

今年，@Netlify 使用 Storybook + @chromaui 在短短 6 周内完全重塑了他们的应用 UI 🤯

以下是他们如何做到的 👉

🎨 更新配色方案
🎞️ 超过 2,000 个故事的自动化测试
🤝 @figma 集成
🙌 非技术 UI 审查https://#/MiYFegvv7w

— Storybook (@storybookjs) 2023 年 10 月 26 日