这款让团队效率提升 200% 的设计工具,一定要试一试!

菜心设计铺

共 3174字,需浏览 7分钟

 ·

2022-03-05 09:10


菜心的第385篇原创

2022年的第16篇

距离2022年小目标160篇原创还剩144篇


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

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

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

  • 设计师: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/


有迷茫想快点进步的看这里:



浏览 78
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报