Storybook 7.0 设计预览

每天早上，数千名开发人员会启动 Storybook 来开始一天的工作。Storybook 是 Netflix、Adobe 和欧盟前端工作流的基石。

但随着使用量的增加，用户界面（UX）的边缘案例和不一致性也随之暴露。在过去三年里，我们一直致力于可用性研究并收集用户体验反馈。

我很高兴能分享 Storybook 7.0 的设计预览。它将更新核心 UI 模式，以便您能用更少的点击、更短的鼠标移动距离和更少的等待来完成更多工作。

• 📐 布局扩展以增加可用空间
• 🛠 工具栏重新组织以便于发现
• ✍️ 图标集重绘，视觉更轻盈
• 🔢 表单控件优化
• ⚡️ 性能全面升级

为什么现在？

在开始之前，值得一提的是，7.0 并没有重新发明轮子。Storybook 的流行证明了其当前经过实战检验的开发者体验。团队不会做任何可能破坏这一点的事情。

Storybook 的设计上次在 2019 年由我和Norbert de Langen进行了重新设计。当时，它还只是一个用于独立构建 UI 组件的工具。随着社区的蓬勃发展，Storybook 在 UI 文档和测试方面的能力也随之增强。

如今，Microsoft、Shopify 和 Monday.com 等无数团队都依赖 Storybook 向全球发布健壮的 UI。

但随着 Storybook 功能的扩展，社区不可避免地会遇到一些视觉不一致和细微的 bug。7.0 的设计解决了这些累积的反馈，并为 Storybook 的未来奠定了基础 UI 模式。

作为用户，您将在熟悉的工作流之上获得全新的、精美的用户体验。

认识 7.0 的新外观

7.0 为 Canvas（用于独立开发组件的 iframe）分配了更多的屏幕空间。Canvas 尺寸增加了 3.5%，为您提供了更大的自由度来表达 UI 的所有维度。

当您像我一样在 Storybook 中花费大量时间时，分配给开发的像素越多，您的工作效率就越高。

Canvas 工具栏包含帮助您快速检查 UI 实现的工具。这些工具现在被组织起来，将类似的操作分组，从而减少了您移动鼠标（或键盘用户的 tab）的次数。

我们还添加了一个“刷新”工具，用于重新加载当前选定的 story。当您想在不刷新整个浏览器的情况下重新加载组件时，这非常有用。

Storybook 7.0 同时提供浅色和深色主题。我们的主题 API 保持不变，因此从 6.X 版本对主题变量的任何调整都可以移植到 7.0。

为您量身打造，便于复用

定制性是 Storybook 广受欢迎的主要原因之一。社区中有超过 400 个插件。在 7.0 中，集成商将能够更多地访问我们用来开发 Storybook 本身的设计模式。

7.0 包含 196 个图标供您在自己的项目中复用。每个图标都经过了从头开始的重绘，以提高清晰度和可识别性。该集合还增加了 20 个图标，以捕捉社区中新兴的功能。整个图标集轻了 46%。

像 Toggle 和 Slider 这样的表单组件遵循了更新的设计语言。您会在 Controls 插件中对此感受最深。通过从 @storybook/components 导入，可以在您自己的插件中复用这些组件。

性能驱动设计

Storybook 7.0 不仅仅是外观新，感受也新。加速开发工作流最有效的方法是强化 Storybook 本身。

7.0 预打包了 Storybook，让您能够即时启动，并避免依赖冲突。每个依赖项都经过审核，以进一步减小包的大小。

结合 6.X 版本中的性能改进（见下文），7.0 启动速度快且保持快速——即使团队编写了数千个 story 也是如此。

• 7.0 即时启动：预打包管理器 & 优化依赖项
• 6.5 更快的模块热重载：Webpack 5 懒惰编译 & 官方 Vite 构建器
• 6.4 更快的加载时间：已发布 Storybook 的代码分割
• 6.3 面向未来：ESM 支持和 Webpack 5 稳定版
• 6.2 可扩展性：重构 Storybook 以支持现代构建器，如 Webpack 5 和 Vite
• 6.1 更快的启动速度：放弃 Webpack DLL，开始预构建 & 缓存管理器

注册提前体验

7.0 的设计正在积极开发中——这里预览的内容只是最初的草稿。我们需要您在早期体验阶段的帮助和反馈，以将设计变为现实。请在下方注册 Storybook 的邮件列表，以获取项目更新通知。

对 Storybook 的用户界面有什么想法？加入我们的 Storybook Discord 频道 #design。我们欢迎新老开发者的贡献。

7.0 的设计由Michael Arestad和Dominic Nguyen（我！）共同开发，并获得了整个 Storybook 社区的反馈。