故事书中的视觉评论

如何同步开发和设计与视觉审查

加载
多米尼克阮
@domyen

如果你是一个有经验的开发人员, 您可能依赖于代码评审来确保对代码库的贡献达到了团队的标准. 不审查就提交代码会导致错误和不一致. 最终的结果是一个脆弱的代码基础.

你的用户界面呢?

每次实现一个设计时,都会在过程中做出一系列小的设计决策. 没有一个设计是“完整的”,所以开发人员最终只能对“UI代码库”做出可视化的贡献,以填补缺少的设计细节. 是否应该提交这些UI更改而不进行审查?

UI开发结合了代码和图形. 让十博体育备用网址看看如何使可视化检查成为UI开发工作流中更明确的一部分. 十博体育备用网址将探索前沿团队如何将视觉检查集成到他们的流程中.


设计切换vs视觉审查

设计切换描述设计师静态图像的文字切换, 原型, 以及对开发人员的规范. 但这是一个有损的过程.

在实施过程中,细节会丢失——尤其是在期限很紧的情况下. 切换工具,如Zeplin, Abstract, InVision等旨在确保这些细节实现生产. 但即使使用最好的设计切换工具, 在开发过程中,不可避免的问题和边缘情况会影响设计.

前端开发很自然地清除了在设计过程中被忽略的细节. 视觉审查是一个协作的过程 后发展. 它帮助开发人员完成三个任务:

  1. 确保UI实现符合设计规范
  2. 解决需要更改设计的技术障碍
  3. 确认在开发过程中引入的新状态

为什么是现在?

现代UI由分布在分布式团队中的无数涉众构建的无数UI排列. 随着团队的成长,构建越来越复杂的ui,保持每个人同步所需的通信开销也越来越大. 因此,研究表明开发者的平均花费也就不足为奇了 每天72分钟 合作.

建立一个可视化的评审工作流有助于简化UI协作,以防止烦人的返工, 误解, 圆形的讨论, 和没完没了的会议.

ui有数千个必须创建的状态, 维护, 并被比以往更多的利益相关者审查.

如何设置视觉审查

团队通过将git驱动的自动化与以人为中心的工作流相结合,在UI实现上达成共识. 之前,我写了一篇深入的文章 指南article Squarespace的人, 美国职业足球大联盟, 阿波罗GraphQL, 以及更多为数百万人提供用户界面. 这是一个总结.

使用独立于应用程序的组件构建UI

今天的应用中有连续的离散用例. 反应, Vue, Angular通过将UI复杂性分解为组件来帮助解释这些用例. 团队使用 故事书 来独立于应用程序创建、维护和测试UI组件. 这消除了像不完整的业务逻辑和松散的api这样令人心烦的干扰.

使用故事书,您可以自然地将突出的用例记录为“故事”,以便您可以在视觉检查期间和稍后的QA期间重新访问UI状态.

为UI实现建立一个共享工作区

共享工作区是一个在线的地方,涉众可以在自己的浏览器中验证实时UI实现. 工作空间在每次提交时都会用最新的UI代码更新,以确保涉众在评审时引用完全相同的工件.

在过去, 团队将不得不维护本地开发环境来验证UI实现——或者更糟, 传送截图. 现在,您可以将您的团队链接到实时UI,以便立即获得反馈.

学习如何建立一个共享的工作空间与这些教程: 将故事书导出为静态站点, 部署故事书在线评审设计系统.

将反馈整合到任务跟踪器中

一旦每个人都将预期的用例记录为“故事”,并审查最新的进行中的工作, 现在是请求涉众审查的时候了.

错误是应用开发中不可避免的一部分. 大多数错误是由于沟通不畅而不是技术缺陷造成的. 可视化评审工作流应该为建设性的反馈和故障排除创造空间.

一种常见的做法是在任务跟踪器中分配一个问题,该问题具有指向活动UI实现的链接. 这样可以集中讨论以简化对复杂变更请求的跟踪. 更重要的是,它创造了一个数字文件追踪如何作出决定.

1. 在线发布故事书 当你将代码推送到网络主机时. 这为你的团队提供了一个最新的UI参考点,而不需要纠结于本地开发环境.

使用Netlify等网络主机中常见的“部署预览”功能来设置, 现在, Heroku, 和增加. 或者,您可以配置CI提供者(e.g., CircleCI, TravisCI)部署到一个静态网络主机(e.g., Amazon S3,谷歌云平台).

2. 在任务管理器中请求反馈. 导航到您的故事书在线,并注意到您希望得到反馈的故事的url. 然后创建一个任务,并粘贴这些url与任何额外的上下文,你想要添加-你也可以背上一个现有的任务. 接下来指派或提及相关的pm、设计师和QA.

下面是一个团队使用GitHub的pull request页面来分配评审员和收集反馈的例子.

3. 迭代UI来处理反馈. 现在您已经从前面的步骤获得了反馈, 现在是时候修改UI代码来解决问题了. 当您更新UI代码并提交时,系统将自动在线发布更新后的故事书(步骤1). 然后,重复反馈过程(步骤2)以解决任何剩余的问题.

结论

可视化审查是一个面向开发人员的过程,用于收集关于UI实现的反馈. 本文将最佳实践综合到解决人体工程学问题的工作流中, 自动化, 实用主义——让它成为你跨学科团队的起点.

在浓度, 十博体育备用网址非常确信使用故事书进行可视化评审的好处,因此十博体育备用网址创建了一个专用工具,使您的团队更容易、更自然地执行上述工作流. 检查一下.

这篇文章对你有帮助吗?

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

4402个开发者,还在增加

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

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

视图的工作

受欢迎的文章

故事书设计

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