Ratio 在线协作设计工具

Ratio 是基于网络的在线协作 UX 设计工具,由字节跳动设计和开发。我们想要把它打造成一款更安全高效、更符合办公生态、更适用于日常工作的设计工具。

角色

产品设计师

时间

2021 - 2022

产品

字节跳动内部创业项目

我的职责

在该内部创业项目中,设计师的职能不仅包括 [产品设计],还需要进行 [迭代规划][功能测试][用户运营]等。

文件管理

与飞书协同

文本工具

连接工具

矢量工具

评论

为什么要开发一款对标 Figma 的设计工具?

数据安全

由于 Figma 是基于 web 的平台,

且服务器都部署在国外,数据安全不受控制

友好体验

Figma 对于中文的本地支持不够友好;
本质还是一个平面工具,未能跟随市场发展趋势(短视频、VR)

做了什么设计?

在立项之初,我们发现国内外市场上出现了大量设计工具。与竞品相比,Ratio 最大的特点与优势:

赋能更多角色

除了设计师,Ratio 将项目经理、开发人员、UX Writer 等作为目标用户。

高效的工作流

Ratio 与飞书等各类办公工具协同工作,共享信息

我学到了什么?

同时为不同角色设计功能

在设计 toB 的工具时,往往需要同时考虑管理者与一线员工的诉求。

管理者

提供更安全的权限系统

Ratio:父级无法继承子集权限,子级可继承父级权限

设计师

提供更精确的权限控制

文件管理者可以控制不同权限的用户所拥有的权限:查看、编辑、复制、创建副本、重命名等

通过洞察细节找到创新点

支持

关联到对象

的评论

在调研 UX Writer 过程时,发现受访者不会在翻译设计稿过程中不会直接通过多语言平台进行翻译,而是会先在设计稿中通过评论功能进行翻译。

从技术角度调研创新方案

字体下拉列表

样式预览

字体样式预览并不是一个创新功能,但困难的是Ratio 是一个 web 工具,不能实时获取到本地的字体包,因此作为PM 和设计师,我需要帮助研发想到如何在 web 端实现这个效果。

从技术角度调研创新方案

将文本

CSS属性

转换为功能

文本自动截断是一个创新功能,想法来源于我们在不同场景使用按钮组件时,经常要根据按钮的宽度对按钮文本增删,然后再手动加上省略号。

从技术思维描述设计方案

综合搜索

我们为用户提供了高效地综合搜索。用户可以通过关键词搜索文件、项目、团队、社区资源、协作者等。

我们还通过对用户搜索时所在页面位置、与不同用户的协作频率、对不同文件的贡献度,对搜索结果的权重进行了排序。

结论

从 2020 年 9 月到 2022 年 4 月,相比较于 Figma 的功能完善度,Ratio 已经达到了:

核心编辑器

80%

智能布局 & 批量

100%

设计系统

100%

文件管理

120%

社区

50%

性能

60%

在这个项目中,我积累了几点认知

如何制定 MVP 版本的功能范围及深度:功能范围能够支持用户完成目标场景下的完整流程;功能深度不必过度追求完善,体验可以留有迭代的优化空间。

如何推广产品:向不同角色群体进行推广时,可以考虑他们在工作流中的上下游关系,从而让产品在工作流中有一定的自传播;从用户可接受的弱感知方式来逐渐培养用户的使用习惯:比如在 Doc 中插入 Ratio 的轻量版本来代替原来的流程绘制工具,同时也帮助他们以低成本的方式迁移数据。

如何设计 0-1 的产品:前期一定要做好充足的调研,了解不同竞品的实现方式及背后原因,能够极大避免后期迭代过程中踩坑,减少推倒重来的概率。

更多项目