彩色2.0β

在线发布Storybook以更快地收集反馈

加载
多米尼克阮
@domyen

TLDR: 彩色2.0β 现在是可用的! 自动发布您的故事书在线收集反馈从您的团队, 分配利益相关者, 回归测试, 并且更快地结束. 所有这些集成到您现有的CI/CD管道中. 由Storybook维护人员制作.

S制作ui需要一个团队. 开发人员、设计师和产品经理必须一起工作,以创造引人注目的体验. 但是平衡来自队友的反馈是很困难的,因为每个人 是不同的,嗯,已经 意见.

如果你是像我一样的UI开发人员, 您可以花更多的时间管理和响应反馈,而不是实际构建功能.

彩色2.0(现在在 β)缓和了混乱的UI审查过程. 您可以自动在线发布您的故事书,而彩色提供了流线型的收集工作流程, 跟踪, 和批准的反馈. 这可以帮助你的团队以更少的工作量实现更快的迭代.

色彩视觉测试和评价是相辅相成的.

为什么视觉检查?

我最喜欢的用户界面的报价与用户界面无关.

“每个人都有自己的计划,直到被打到嘴里.”
-拳击重量级冠军迈克·泰森

在第一次迭代中,没有UI是完美的. 十博体育备用网址的计划、规格和设计中的缺陷只有在实践中才能暴露出来.

每天,开发人员都要填写缺失的设计细节 最后 签字. 你把截图粘贴到Slack、GitHub评论、Asana和电子邮件中. 然后利益相关者用反馈炮轰你. 然后重复,直到你完成.

它是混乱的. 通过迭代跟踪反馈需要惊人的工作量. 在彩色, 十博体育备用网址将收集反馈的关键工作流自动化, 在实现迭代, 让利益相关者签字.


它是如何工作的

彩色2.0引入了一个新的工作流,称为可视化评审. 这就像代码审查,但是是针对用户界面的. 使用视觉检查和代码检查来细化UI实现和确认外观 & 和团队一起感受.

注意:视觉检查和视觉测试被建立在一起使用. 类似于您如何同时使用代码检查和单元测试.

1. 只要你推送代码,半音出版社就会在线发布你的故事书. 它连接到您的CI/CD管道来记录, 版本, 并索引云中的所有组件.

2. 每次你创建一个拉请求,彩色扫描新的或更新的UI. 它比较来自特性分支和目标分支的组件,以可视化传入UI更新的影响.

3. 彩色检测用户界面的改变自动在PRs. 利益相关者浏览十博体育备用网址的网络应用程序来检查实现. 色彩通过将他们的注意力集中在改变的UI上而节省了他们的时间.

对git checkout、node_modules或来回发送截图说再见吧.

比较分支之间的UI,看看有什么新内容

4. 开始与其他开发人员、设计人员和pm进行讨论,请求更改并提出问题. 讨论与交互式UI一起进行,因此您不必在实时实现和协作工具之间来回切换.

每个讨论都被整合到公关活动动态中. 这有助于每个人跟踪进度,并为你提供过去决策的书面记录. 此外,参与者还会通过电子邮件收到新的评论通知.

PR活动提要在一个地方显示了活跃的UI讨论.

5. 通过在侧边栏中分配队友来请求反馈. 这将确保公关检查保持🌕“Pending”,直到公关被审查.

指派组员来检查你的工作

每个PR都包含一个UI检查表,指导你的团队通过chromenureview过程. 您将获得合并阻碍者的概述,如未决审查者, 未解决的讨论, 和JS错误保持同步.

UI清单会告诉你需要做些什么才能通过chromium的PR检查

6. 完成后,chromebook将在GitHub、Bitbucket都或GitLab中更新PR检查. 这有助于工程团队的其他成员快速跟踪UI实现进度.


问:还有谁使用这个工作流?
可视化评审工作流是基于十博体育备用网址作为Storybook维护者的经验, 研究 领导团队以及来自Shopify、Algolia和更多早期访问用户的宝贵指导(谢谢)!).

问:好吧,那要花多少钱呢?
没有什么. 视觉检查重用您已经为视觉测试所做的相同快照. 这意味着您的团队可以在不收取额外费用的情况下获得节省时间的工作流程.

更重要的是,半色给你无限的合作者. 您可以安全地与队友分享工作,而不必担心与其他合作者的价格上涨.

问:视觉检查和测试有什么区别?
可视化评审帮助开发人员与涉众循环,以更快地收集反馈并合并. 可视化测试是为进行回归测试的开发人员准备的,类似于您如何使用单元测试.

评审和测试是为解决不同的挑战而设计的. 我建议同时使用这两个工作流程以节省最多的时间.


迁移说明1.0 → 2.0β

更新包到storybook chromatic@^3.5.2

在十博体育备用网址开始之前,让十博体育备用网址更新storybook chromatic@^3.5.从大量的bug修复和稳定性改进中获益.

解锁的请求

解锁视觉审查在拉请求导航到拉请求屏幕,并按照说明安装chrome.com的GitHub应用程序或GitLab/Bitbucket都网络钩子.

彩色PRs可以帮助您与涉众优化UI实现. 与代码拉取请求类似,您将看到可以对其进行注释的分支之间的视觉差异.

详细的公关徽章

2色.0,你将获得独立的PR检查,包括发布、审查和测试. 这允许更细粒度地控制如何协调CI工作以及哪些工作是必需的.

  • 📕 发布:将Storybook部署到团队的安全在线工作区
  • 👨‍👩‍👧‍👦 UI评审:获得涉众的批准和反馈
  • UI测试:检查跨浏览器和视图的UI bug

如果您需要检查 在GitHub中打开为彩色, Bitbucket都, 或GitLab, 更新的PR检查可能会导致您的PR失败.

通过在存储库的“分支保护规则”页面中将所需的检查从ci/彩色切换到UI测试来解决此问题. In GitHub you can find it at this path Settings > Branches > Branch protection rules > “Require status checks to pass before merging".

将所需的检查更新到UI Tests后,再次提交以清除旧状态.


中文、日文、韩文支持

最后一件事,彩色2.0增加您的测试覆盖范围,从拉丁字母到中文, 日本, 和韩语字符. 为东亚服务的客户现在可以在十博体育备用网址的云浏览器中本地渲染文本,而不需要导入网络字体.


接下来是什么?

团队合作不应该增加更多的工作. 接下来,十博体育备用网址将专注于通过执行您的反馈来使UI审查更加顺畅.

2点收到电子邮件.0发射

任何人都可以添加彩色2.0β到故事书免费,并立即开始使用它. 通过设置GitHub操作或连接到另一个Git/CI提供商来索引和浏览云中的组件. 2 .注册并收到电子邮件.0正式启动.

这篇文章对你有帮助吗?

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

4402个开发者,还在增加

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

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

视图的工作

受欢迎的文章

彩色2.0 -代码审查,但对UI

十博体育备用网址推出了《十博体育网站》.0,这是Storybook的免费云服务,可以帮助团队一起审查用户界面.
加载
多米尼克阮
通过彩色
面向专业UI开发人员的深入指南和教程,来自Storybook团队
指南
介绍故事书为开发人员设计系统视觉测试手册
关于
订阅
加入墨水时事通讯,以获得免费的教程、指南和通过电子邮件发送给您的资源.
友情链接: 1 2 3 4 5 6 7 8 9 10