故事书5见面.0的新设计

引入故事书5的新鲜外观和感觉.0

加载
多米尼克阮
@domyen

故事书 现在支持每个主要的视图层,无数的案例,以及前端开发人员. 尽管在功能上有了巨大的飞跃,但核心用户体验自2016年以来并没有改变.

如果你像我一样以制作ui为生,你每天都会花几个小时在故事书上. 你往往会注意到那些让你慢下来的矛盾. 在故事书5.0十博体育备用网址引入了一个优化的新的开发体验,可以帮助您比以往更快地交付组件.

故事书不会挡你的路

别搞错了,故事书5.0没有重新设计轮子. 该项目的流行是当前工作流的一个证明. 维修工不会做任何事情来破坏它.

相反,5.0解决 积累的社区反馈,并引入新的定制选项. 作为终端用户,您会注意到在熟悉的工作流之上有一个经过优化的新外观和感觉.

迈克尔Shilman的官方 5.0发布帖在这里


画布工具栏

画布将组件可视化. 新的画布工具栏包括一些工具,可以帮助您对设计实现进行压力测试.

  • 🔍 缩放: 通过放大你的UI来检查最微小的细节
  • 📐 网格:验证对齐与方便的网格线
  • 🎨 Background:通过调整背景来检查对比度(通过插件)
  • 🖼 视窗:通过切换视口宽度来测试响应性(通过插件)
  • 🖥 全屏:通过隐藏故事书 UI来关注你的组件

这还不是全部. 就像插件面板一样 工具栏是 可扩展的. 这意味着无畏的插件创建者可以创建强大的工具来影响在画布中渲染的内容.

这个版本还显著改进了侧边栏的可预测性和布局.

  • 🗂 图标: 目录、组件和故事的区别一目了然.
  • 📏 布局: 间距调整使浏览文章列表变得更容易(信息密度保持不变)!)
  • ⚙️ 菜单: 访问常见的功能,如UI切换、导航和更新通知.

插件面板

插件允许开发者扩展核心的故事书工作流. 重新设计的插件面板为插件提供了更多的空间,包括方便的按钮来切换可见性和改变方向.

键盘快捷键

快捷键可以帮助你用更少的按键做更多的事情. 这个版本提供了更直观的默认快捷键-不再盲目地混合键,因为你忘记了cmd + ctrl +选项的组合.

更重要的是,捷径是 可编辑的. 当你改变一个快捷方式,它将被保存在你的浏览器缓存. Shoutout来 杰西卡汤姆 感谢他们的杰出贡献.

主题 & 黑暗的模式

故事书附带了一个新的用户界面, 但它无法解释个人品味或品牌需求. 5.0主题化API使调整美学变得比以往任何时候都容易.

重构的速度

不仅故事书看起来很新 感觉 新. 重构5.0的前端 诺伯特 与4相比,性能提升高达300%.0. 此外,对于首次贡献者来说,阅读和理解代码比以往任何时候都更容易.


升级到故事书5.0

故事书5.0是最重要的更新. 幸运的是,它也是最容易迁移的地方之一. 读了 5.0升级指南. 如果你数到3.x,结帐 4.0升级指南.


参与

故事书由一个蓬勃发展的开源社区维护,并由顶级维护者指导委员会指导.

欢迎来自新开发人员和经验丰富的开发人员的贡献. 如果你对设计和组件库感兴趣,这里有一些我个人很感兴趣的项目:

  • 生成格式指南: 从现有的故事自动生成文档
  • 插件工具: 一个帮助开发人员构建他们自己的插件的工具包
  • 设计系统: 十博体育备用网址正在编纂故事书的官方UI组件库

你可以在里面找到我 故事书的Discord聊天#设计.

这篇文章对你有帮助吗?

获得免费的UI开发指南和教程,就像这个电子邮件给你.

4,428 开发人员和计数

十博体育备用网址正在招聘!

加入故事书和彩色后面的团队. 构建被成千上万的开发人员用于生产的工具. Remote-first.

视图的工作

受欢迎的文章

Diff探测器2.0

更快更容易地评审可视化测试
加载
多米尼克阮
通过彩色
面向专业UI开发人员的深度指南和教程,来自故事书团队
指南
介绍故事书为开发人员设计系统视觉测试手册
关于
订阅
加入墨水通讯,可以获得免费的教程、指南和通过电子邮件发给您的资源.
友情链接: 1 2 3 4 5 6 7 8 9 10