团队如何优化流程，实现高效协作？

6月 16, 2022 发表于: 设计工具. 评论

今天来分享一下工作中非常重要的协作问题。

虽然从鹅厂离职了，但是对于和设计师相关的协作我还算是颇有心得，也因为经常看到有同学在群里吐槽，所以想来聊一下……

其实国内主流的产研协作形式，依然是：

• 设计师：Sketch、XD
• 产品经理：Axure、Principle
• 开发：Zeplin 或者我原单位的 CoDesign

各司其职，合理搭配，这确实是在验证后比较完善的方式，但很多时候，各自工具的专精并不能带来最优的结果，由于不同工具存在诸如文件上传、管理等体验割裂的问题，效率仍有较大提升空间。

而解决这些问题的关键，就是近两年兴起的在线设计协作工具。

像国外的 Figma，国内的「即时设计」，其实也聊过很多次了，这类的优势并不只是在设计上，协作才是他们最大的价值，将原型、设计、开发交付相整合，实现了全新的 All in one 工作模式。

这种模式大大简化了现有的产研协作流程，而且一定是未来必然的发展趋势。

那接下来，我们就一起来看看，假设现在有一个全新的产品需求，要如何通过看起来功能更全面的「即时设计」，来实现一套更加现代化的产研工作流程。

即时设计官网：https://js.design/

01 产品经理

这个新需求由产品发起，在完成需求文档后，其余的绝大多数工作都可通过「即时设计」完成。

1、原型绘制

通过对标 Sketch 的矢量设计能力，产品可以在这里进行基础的低保真原型绘制，同时，借助开源或者团队内部的组件资源，也可以非常方便地完成高保真原型。

2、原型交付

原型绘制完成后，直接将原型稿的「即时设计」链接发送给设计师即可完成交付，待设计稿完成后，进行后续操作。

3、打点评论

我们将设计稿与原型同文件分页面管理，设计师完成 UI 设计后，产品只需打开之前的文件链接即可查看和评审设计稿。

对于不满足需求或有必要调整的部分，可以进入评论模式标记位置或区域并说明，设计师会实时收到反馈后并同步修改；对于需要开发了解的产品其他方面的补充，也可以通过此方式进行备注。

同时，打点评论的操作，通过「即时设计」手机端 App、小程序以及 H5 页面皆可实现，这是其他工具所不具备的特性，非常便利。

4、交互逻辑连线

设计稿基本定版后，产品需要创建页面跳转连线，可切换到「原型」面板后快速完成，并且支持添加常见的交互事件如点击、拖拽、长按、悬停以及返回、打开弹层等等。

5、设计稿预览、演示

产品交互逻辑确认后，设计可进行一些动效设计，然后通过「预览模式」，进行整个产品的操作流程及交互演示，还可添加手机外壳或使用手机端 App 来模拟出更真实的效果。

02 设计师

作为一款设计工具来说，「即时设计」的功能已经足够完善，当原型稿和需求交接到设计师后，其余工作基本都可以在上面完成。

1、矢量 UI 设计

除了图形工具、钢笔、蒙版、布尔运算、响应式调整（约束）、引用组件（Symbol）等常规设计功能，自动布局、变体之类的新功能也都具备。

由于这两项功能逻辑与开发思维的一致性，多在项目中使用不仅可以提效，还能更有效地与开发完成对接。

2、动效设计

「即时设计」支持了可以自定义动画曲线，并且自动补充中间帧的「智能动画」，同时支持在变体内对组件添加交互，这些功能允许我们在设计稿中完成很多实用且复杂的页面过渡、组件变换等交互动效，满足大多数日常动效需求。

3、共享设计库

对于团队项目来说，固定的设计规范是很有必要的，通过共享设计库，我们可以在不同项目中调用同一套组件及样式库，快速完成设计并保证新项目与团队规范一致。

这其实就是我们平时用的团队资源库，在调用共享库之后，团队规范的修改也可以实时同步到所有新项目中，不用手动操作。

4、共享字体

如果你的团队有单独购买某些字体的版权，并且有一定的字体使用规范，那可以利用团队共享字体功能，将字体导入云端，只要明确所有设计师使用团队字体，就能省去培训和字体审核的步骤。

5、添加导出（切图）标记

在我们的设计工作完成后，要先进行完这一步，才能交付给开发，和以往的操作一致，给需要做切图的分组或子画板添加导出（切图）标记，方便后续批量导出切图进行开发。

6、设计稿交付

由于在线工具的协作特性加持，交付时我们就只需要设计师添加好切图标记，不用导出，不用上传到第三方平台，把文件链接发送给开发，后面的工作让开发自己搞定就好了。

而且，开发敲代码的时候，设计师对设计稿进行的修改或补充，开发也可以同步看到并使用，没有任何中间步骤。

03 开发人员

「即时设计」有一个特殊的「研发模式」，形态和第三方交付插件类似，相当于将我们惯用的第三方平台内置到了其中，并且做到实时同步，工具体验相对更完整。

当设计稿交付给开发之后，开发人员可在这里获取开发所需的全部内容，操作很友好，实用性也不低。

1、平台预设及单位换算

比较常用到的平台无外乎 Web、iOS 和 Android。

在「即时设计」里，开发可以直接设定好任一开发平台，然后就能快速查看对应像素单位的参数标注，导出对应尺寸的切图等，同时，也可以按照设计给出的规范自定义单位及倍率。

2、导出切图

设计师已经添加好导出（切图）标记的内容，开发在设定好需要导出的平台后，直接一键批量导出所有切图或自行选择多个切图导出都 OK。

3、手动切图

需要特别提出来的一点是，「即时设计」支持开发临时手动添加切图。

在传统 Sketch 协作流程中，切图是完全由设计师掌控的，在上传到第三方平台之前导出标记已经添加完毕，上传后没办法修改或补充。

而在「即时设计」中，即使一般团队没有给开发开通「可编辑」权限，开发人员遇到特殊情况时也不用绝对依赖设计师，可以在「研发模式」中自行添加切图并导出使用，并且不会影响设计稿。

4、查看标注、代码

根据设定好的单位、倍率，我们直接选中任意元素，查看其位置、尺寸及颜色文本等样式，包括与其他元素的间距，对应平台的基础样式代码等。

5、颜色整合

再就是开发比较头痛的颜色对应问题，我们可以通过「颜色」面板进行统一查看，这里有当前页面的所有颜色和对应，还能一键定位使用某颜色的图层，不用再单独确认每个图层的属性。

6、查看交互逻辑、动效

产品处理的页面逻辑、对应的交互、过渡等，都可以通过「专注模式」查看，开发也可以切换到预览模式来演示交互和动效，方便实现最终效果。

这一部分提到的很多功能，都是 Figma 所不具备的或者支持不完善的，如果想要实现，就需要上传到第三方插件……不过这样就又回到了早期的交付形态，在不同工具间上传依旧无法实时同步，体验也存在割裂。

04 团队文件管理

在以往的交付流程中，文件管理基本是完全处于在协作流程之外的，而在「即时设计」里，已经将文件管理、项目进度管理与产研角色的对接相结合，实现了非常不错的文件整理效果，具体的分享可以看：

不可思议，我的文件整理变化这么大！

总结

从头看到尾，可以说「即时设计」非常好地体现出了它作为一款设计协作工具的优势——

真正的 All-in-one，一站式满足了从产品到设计到开发，加上团队文件管理这四个不同角度的需求，而且从头到尾整个流程的内容都实时同步，没有信息延迟，不用切换多个工具，实际运用到工作中，无论是体验还是效率的提升都会十分明显。

今天的分享就到这里，如果你也对这款设计+协作工具感兴趣，不如试着和团队成员一起感受一下，里面还有很多值得称赞的功能特性，或许会有惊喜~

即时设计官网：https://js.design/

赞助商链接