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

介绍故事书5的新外观和感觉.0

加载
多米尼克阮
@domyen

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

如果您像我一样为生计而构建ui,那么您每天都要在故事书上花费数小时. 你会注意到那些让你慢下来的矛盾. 在故事书5.十博体育备用网址将介绍一种全新的开发人员体验,帮助您更快地交付组件.

故事书不挡你的路

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

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

迈克尔Shilman的官方 5.此处0发布帖子


画布工具栏

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

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

这还不是全部. 就像插件面板一样 工具栏是 可扩展的. 这意味着勇敢的插件创作者可以创建强大的工具,影响在画布上呈现的内容.

该版本还显著改进了侧栏的可预见性和布局.

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

插件面板

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

键盘快捷键

快捷键可以帮助你在更少的按键下完成更多的工作. 这个版本提供了更直观的默认快捷键-没有更多的盲目的混合键,因为你忘记了哪个组合cmd + ctrl +选项按下.

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

主题 & 黑暗的模式

故事书提供了一个新的用户界面, 但没有考虑个人品味或品牌要求. 5.主题化API使得调整外观变得比以往更容易.

重构的速度

不仅是故事书看起来新的它也 感觉 新. 重构5.0的前端 诺伯特 提供了高达300%的性能提升比4.0. 此外,对于第一次编写代码的人来说,阅读和理解代码比以往任何时候都更容易.


升级到故事书5.0

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


参与

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

欢迎新开发人员和经验丰富的老手提供贡献. 如果你对设计和组件库感兴趣,下面是我个人感兴趣的即将到来的项目:

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

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

这篇文章对你有帮助吗?

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

4402个开发者,还在增加

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

加入故事书和彩色的团队. 构建成千上万开发人员在生产环境中使用的工具. Remote-first.

视图的工作

受欢迎的文章

Diff探测器2.0

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