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 的核心维护者创建）自动化此工作流程。它可以自动对 stories 进行视觉测试，并发布其 Storybook 供他人参考。QA 通常感觉像是世界上最漫长的“找不同”游戏。Chromatic 为所有人消除了这些烦恼。

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

新的配色方案

Netlify 品牌重塑的第一阶段集中在新配色方案的实施。主要特性之一是更新了用于应用字体和组件的 Netlify 品牌蓝绿色。他们还引入了一系列新的绿色调用于成功状态。

首先，团队更新了全局颜色 token，然后使用 Chromatic 跟踪新颜色在应用中扩散产生的变化，并验证新颜色是否正确显示。在此过程中，Netlify 发现他们不知情地一段时间以来一直在误用其品牌颜色。

主要的品牌蓝绿色仅用于品牌元素。然而，Chromatic 发现它在应用中意外地被用作动作色和成功色。这不仅模糊了他们的品牌，也损害了应用的 UX。

对以前未知组件的视觉差异进行呈现，帮助 Netlify 改进了 UX 并正确实施了其品牌指南。

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

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

"我确信应用的每个角落和缝隙都得到了覆盖！这给了我极大的安心感。"
Kristy Marcinova，Netlify 资深产品设计师

新的标志

没有新标志的品牌重塑是不完整的。这个过程听起来可能只是一个相当简单的查找替换。然而，Netlify 很快发现旧标志出现在许多令人意想不到的地方——包括插图和吉祥物。手动追踪所有这些将是一项巨大的体力活。

相反，Netlify 使用了 Storybook 和 Chromatic。在 Storybook 中更新标志的 SVG 文件并提交更改后，Chromatic 自动呈现了旧标志出现的所有位置，供团队审查。

大规模更新设计

Netlify 需要将数百个组件变体更新为新设计。使用 Storybook 让这个过程变得轻而易举。Netlify 将 Figma 中的所有设计链接到 Storybook 中对应的实现，这使得发现任何需要更新的组件变得简单直观。

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

使用 Chromatic 进行视觉测试——很快将在 Storybook 的 Chromatic Visual Test 插件中推出——让团队中的设计师可以直接提交代码而不会破坏生产环境。这是因为 Chromatic 在合并之前就捕获了任何意外错误。这意味着设计师可以独立地在代码中进行诸如将蓝绿色改为绿色等最终细节的调整，无需占用开发者的时间。

"知道我们没有遗漏任何只能通过深挖代码才能发现的东西，这真是如释重负。"
Prabhav Khandelwal，Netlify 产品设计师

获得非技术利益相关者的批准

在 Storybook 中开发组件是一种将 UI 集中到一处供利益相关者审查的自然方式。Netlify 使用 Chromatic 的协作工具让团队成员在发布前对每个 story 进行明确的批准。利益相关者可以在一处留下实现反馈并讨论 UI 更改。

重新设计完成

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

有了 Storybook 和 Chromatic，Netlify 以一种不复杂的方式完成了一个复杂的项目。他们能够彻底更新每个 UI 状态，防止 Bug，并在创纪录的时间内推出新的品牌形象。

感谢 Kaelig Deloumeau-Prigent、Kristy Marcinova、Prabhav Khandelwal 以及整个 Netlify 团队与我们合作完成本文！

有兴趣效仿 Netlify 的做法，在 Storybook 中自动化视觉测试吗？立即注册以优先体验 Chromatic Visual Tests 插件！

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

他们是这样做的 👉

🎨 更新配色方案
🎞️ 对 2000 多个 stories 进行自动化测试
🤝 @figma 集成
🙌 非技术 UI 审查https://#/MiYFegvv7w

— Storybook (@storybookjs) October 26, 2023