MasterGo | 左子祯

产品介绍

MasterGo 是什么

MasterGo 是下一代产品设计协作平台，强调协同和多场景化，致力于满足团队在不同场景下的产品设计需求。

我的角色

我负责做什么

我是 MasterGo 的一号员工，作为产品设计负责人，在两年中我从零到一领导了所有的品牌定义、产品规划、项目管理、界面设计和设计系统搭建等工作。

时间

做了多长时间

2019年10月至今，大概两年多

目标

从零到一定义和打造产品

我们的目标是希望能打造出一款优秀的在线协同设计工具，同时有着极致用户体验和设计影响力，以完成公司的战略目标。

研究

分析市场、竞争对手和用户的需求

竞品分析

竞品分析主要帮助我们了解我们的竞争对手是如何做的，帮助我们来研究其共同性和使用问题。我们的主要竞争对手是 Figma、Sketch 和 Adobe XD，当然还有一些国内的其他竞品。

经过不断的研究分析后，我们会输出很多竞品分析报告，有关于个别功能的，也有关于整个产品的：

这非常有助于我们在产品规划和方向上做出判断。

用户调研

对一款新产品来说，用户调研是非常重要的，我们花了大量精力去访谈用户，以深入了解用户对于设计工具的想法和反馈。

在这个过程中我们得到了很多第一手宝贵的反馈意见，也更深入的了解到了一线用户的真实痛点，比如关于中文和网络问题，就是我们听到的最多意见。

定位

产品的定位和差异化优势

优势分析

通过对竞争对手的分析和对用户的访谈，我们清楚的了解到了用户需要什么，以及用户为什么需要这款产品：

Sketch 正在失去市场：是继 PS 之后出现的专为数字产品设计而生的工具，由于诞生时并没有有力竞品，所以目前占领了大部分国内份额，但比起后起之秀 Figma 同样在运行效率和团队协作上失去了很大优势，而且在线工具和服务是未来的趋势，Sketch 作为原生应用前景必然会受局限；
协同和设计系统是未来趋势：目前国内设计团队对设计系统和团队协作的需求开始增加，但 Sketch 因为本身组件的设计不合理，加上团队协作的体验并不好，所以并不能很好的满足这部分需求；
Figma 在国内使用不稳定：是国外的一款在线设计工具，在设计理念上比较适合搭建大型的复杂设计系统，但由于墙的原因在国内使用并不稳定，推广受限；
国企对信息安全有很高要求：国内大公司和国企对私有化部署要求很高，目前 Figma 不支持私有化部署；
设计工具仍然有很多场景未被挖掘：目前设计工具形态依然没有完全化数字化，依然有很大的潜力和功能的挖掘空间；

所以，对于 MasterGo 来说，我们也很清楚他的定位：

MasterGo 是下一代产品设计协作平台，强调协同和多场景化，致力于满足团队在不同场景下的产品设计需求。

另一方面我们也认为，国内的环境对工具来说更趋向与整合。所以如图所示，我们也希望能够让这款工具覆盖到产品设计中的更多流程当中：

市场现状分析

1. 关于面向的用户群体：

Sketch： 目前使用 人数最多 的工具，目前可分为两类：
- （1）稳定者：大多为水平经验较浅或对于设计没有太多热情的设计师。他们不会主动改变现有的使用习惯，因为现有的工作流已经能满足他们的需求，所以也不会主动去研究如何提升生产力和探索新的工具。此类用户比例上应该是占多数的，但 极难直接去影响其更换工具，更多需要外部因素来被动的推动。
- （2）摇摆者：大多为经验较丰富的设计师，目前正在处于准备向 Figma 迁移的阶段，但因为公司或者一些推动阻碍还正在迁移过程中。他们能够认识到优秀的工具对生产力和效率的提升，通过对 Figma的了解和使用也很容易明白其优点，所以这些是我们相对容易去直接影响的一批人。
Figma： 目前使用人数增长最快的工具，也可分为两类：
- （3）推动者：因为 Figma 并没有针对国内市场做推广和针对优化，所以国内用户的早期增长更多是靠推动者的推动。他们是对新事物感兴趣，喜欢研究，设计热情较高的一批人，也是头部公司转移到 Figma 的主要影响力，影响此类用户需要产品在完全打平 Figma 的基础上，还有额外的众多功能亮点甚至杀手级功能，否则没有任何动力使其迁移。
- （4）受影响者：受影响者并不一定是经验水平较低的，只是对新事物没有那么热衷，但是在被推动者影响后，少部分会成为新的推动者，大部分成为了 Figma 的忠实用户。他们对工具要求没有那么苛刻，也会对中文环境和针对国内的一些优化更重视，相对容易影响，但也需要至少和 Figma 完全打平才有希望。
PS、XD 和其它：占比相对较少，不作为我们主动触达的目标客户
- PS 使用场景更多集中在修图，并不在我们的触达范围内，使用其做 UI 的人数较少，没有必要单独分析
- XD 使用者大多是因为没有 Mac 所以无法使用 Sketch，但现在均在转向 Figma，且人数相对较少，同样没有必要单独分析

所以我们可以得出结论，从人的角度来看：

我们的目标用户为：Sketch 和 Figma 的使用者
影响顺序应该为：Sketch 摇摆者（2） -> Figma 受影响者（4） -> Figma 推动者（3） -> Sketch 稳定者（1）

2. 关于面向的组织：

学校 & 培训机构：
- 举例：各高校设计专业、像素范等
- 特点：通过合作或工作坊的形式推广是没有问题的，此时学生还未培养起工作习惯，对工具接受能力强，极容易受影响，但真正在工作中使用的决定权不在于他们。
中小公司：
- 举例：中教云、心得宝贝等
- 特点：设计团队规模在 10 人以下的公司，摇摆在 Sketch 和 Figma 之间，对于工具的选择更多决定权在于 Leader 的意见（资深到专家）。
头部公司：
- 举例：字节跳动、腾讯等
- 特点：设计团队规模在 100 以上的公司，大部分已经在深度使用 Figma，对于工具的选择决定权大多在于一级或二级部门 Leader 或关键人物的意见。由于业务不能停滞，同时推动和迁移成本非常高，如果没有质的提升，一般不会轻易更换。另一方面对于稳定性和扩展性要求极高，几乎都会自己开发插件来满足各种需求。最后一点是大公司一般不会做先锋，一定是等到市面上已经有其它先锋公司已经在工作中稳定使用后才会考虑使用。
重视信息安全的公司：
- 举例：华为、银行、政企等
- 特点：对于信息安全的重视大于对工具本身的要求，需要私有化部署，同时对于国外服务有顾虑，所以无特殊情况不会使用 Figma，对于工具的选择取决于 大客户销售推动。

所以我们可以得出结论，从组织的角度来看：

我们的目标用户为：中小公司、头部公司、重视信息安全的公司
影响顺序应该为：中小公司（Leader） -> 重视信息安全的公司（大客户销售） -> 头部公司（Leader 及关键人物）

这就是对于市场和用户群体的分析，最终我们可以很清楚的看到我们的目标群体的特点以及应该以什么样的顺序去影响他们。

探索

开始探索具体的设计风格和方案

确定功能架构图

通过对竞品、市场和用户群体的分析，我们最终定义了产品的大致功能架构图：

早期的风格探索

之后我便开始了早期的视觉风格探索，在定下了暗色的基调之后，尝试了大量不同的布局方式和细节风格：

原型

在早期的视觉风格大概确定之后，我接着会去设计其余的关键页面，以反复校准一些规范和样式是否适用于大多数页面，在基本完成其余关键页面设计后，我会生成原型来进行初步的用户测试，以深入了解用户是如何理解界面和如何交互的，以及对产品有任何积极或消极的体验。

用户测试

通过简单用户测试，会了解到很多关于产品需要改进的地方，这些都能够帮助产品成长和成熟。例如在早起我们界面的导航栏是放在下面的，但用户测试的结果发现大多数人在使用过程中会产生很大的不熟悉感从而降低了使用效率，最终我们将导航栏移回了顶部：

左为早起原型，右为目前线上版本

解决方案

具体的功能和细节的设计展示

注册和登录

在注册登录部分，我们初期支持的是邮箱和微信两种方式。另外在这里我们做了一点思考，我们希望将用户和我们联系的更加紧密，所以我们在注册登录也会将征集的用户作品放在左侧，然后能让更多的人看到：

布局上的熟悉度和一致性

对于我们的用户来说，大家很熟悉之前使用的界面和布局方式。我们会尽量遵循用户已有的使用习惯，这样有助于减少用户学习新的功能和布局所需的时间。

新手引导

我们认为，新手引导应该是有趣的且易于理解的，所以我们为 MasterGo 的每步新手引导都绘制了对应的插画：

另外，我们也希望对用户是无干扰的，不会阻碍哟用户正常的使用体验，所以我们的新手引导一方面对步数做了精简，另一方面，也会以固定位置显示而不阻碍用户的正常操作：

文件浏览页

文件浏览页是用户看到的第一个页面，也是用来管理文件、团队、和项目的地方：

左侧栏顶部是不同的筛选分类，显示的文件会有些细微的差别，我们在设计图中都一一做了体现和说明：

特别一说的是，我们通过早期对用户的拜访研究中，找到了一个真实的痛点，因为在 Figma 的“最进打开“中，会将外部文件和内部文件混在一起，导致有时寻找特定文件时会很难找到，所以我们针对外部文件做了单独的分类和特殊标识处理，这样用户会很容易区分和找到来自外部的文件：

对于空页面，我们也为不同的类别绘制了不同的插画：

团队管理

在创建团队时，我们希望能体现团队在级别和范围上的“大”，并不希望用户把团队当作文件夹来用，所以没有使用正常的弹窗，而是做了单独的处理，其实在一定角度上也是一种心理暗示：

团队管理界面我们希望在设计上是一致和统一的：

导入和通知

早期我们会支持 Sketch 导入：

在这里你会收到被邀请的通知或者评论的通知：

画布中的细节定义

因为在画布中所进行的操作是非常精确的，所以我们会非常细致的定义触发区域，例如，光标的触发区域：

图层边界框、矢量图形路径、操作控制杆的触发区域：

另外，我们也会细致的定义在不同操作下对应的光标类型：

我们还需要去定义画布中不同图层的边界框、操纵杆、裁剪框，等等：

很多情况下，我们需要对于一些操作有数学化的定义，例如下方的 Shift 移动方向判断：

编辑界面

整个编辑界面是工具的核心，我们会将界面拆分为不同的模块，然后将每个模块来统一的定义和规划，这也符合我们设计原则中的模块化，下面是导航栏，展示了在不同的情况下的效果：

左侧面板包含了很多功能，下面展示了图层栏、组件库、资源库等等众多的功能：

右侧面板会在某些特定的模式下发生变化，比如像下面展示的一样，在正常编辑模式下，我们会展示图层的属性，而切换到路径编辑时，便会变为路径编辑面板。切到标注模式，右侧便会变成标注信息面板，当然还有切图面板、样式面板等等。

弹窗和菜单

在整个设计中，我们一直贯穿的是模块化的设计思路，所以我们将菜单弹窗都做了横向的总结，比如右键菜单：

属性控制弹窗：

文字选择器和组件样式选择弹窗：

因为我们有云端文字和本地文字之分，我认为用很明显上面写着“云端”二字的标签来告诉用户哪些文字是云端的，是一种不优雅的做法，因为大量的文字标签对已经知道的用户是一种视觉干扰，所以我采用了绿点的方式来暗示用户这个是在线的文字，和左上角断网重连后的绿点是一样的，都是用颜色来给用户暗示，将干扰降到最低，同时如果你 Hover 绿点也会出现对应的说明提示，这是一种克制的处理方式。

其它