用了这款国产软件后，我彻底回不去了！

/ 如果还有一个人不知道这款国产软件，我都会伤心的，OK？/

-----------

让工具回归工具 · 让你成为你。

你每天都在用的各种 APP 和 Web 网页都是怎么设计出来的——

先有个基本想法，再至少掌握一款复杂的设计软件，经过不同工种一二三四五六七八 N 次重复提意见和改稿之后，再用代码从零开始实现。

但现在，好像不用这么麻烦了。

新建一个容器，新建一个形状自己做组件，或者导入其他的成品组件，自由组合，快速布局，一键替换图片，一键设置属性，快速设置交互效果，直接预览操作。

发个链接，任何人都能在手机或电脑上查看，有问题直接圈点、留言，还能一起设计。全部都确定好了之后，代码所见即所得，复制就能用。一切都在一个浏览器中完成，而且完全免费（针对教育用户和个人）。

 001.

/ 界面布局和基本操作。/

这是 MasterGo，一款新型的一站式产品设计协同工具。它用起来有多简单呢？

在浏览器上登录这个网址 https://mastergo.com/ 就能进入主界面。你可以在这里的资源广场找到合适的资源直接使用，也可以在这里导入 Sketch 文件。

点击「新建」，即可直接进入设计面板。

点击顶部的「容器」工具可以画出容器，或者在右侧选择常见容器，包括手机、平板、电脑、演示文档、手表，甚至纸张和社交媒体。你可以在右侧的属性栏中修改它的各项参数。

你可以点击顶部的形状工具添加各种形状，使用钢笔或铅笔工具绘制内容，点击文字工具添加文字，点击小手掌使用移动视图，点击小气泡，标注任何位置，发表你的意见。

比如矩形工具，随意画出矩形，像在大部分的设计工具中一样，摁住 Shift 就可以轻松画出正方形。同样在右边修改它的属性，比如修改颜色，在这里的圆角中设置具体的数值，也可以把光标放在图形上，点击并拖拽弹出的小圆点，嗯，这个图标就能价值一百万（不是）。

如果我们给它设置一个鲜亮的颜色，在右侧的「特效」中添加一个内阴影，设置一个相近的颜色和参数，再操作几遍，就能做出类似毛玻璃的效果……

 002.

/ 制作元素及组件，和团队成员一起协作。/

同样的方式，你可以画出头像、卡片、按钮、输入框等各种元素，并把它们存储为组件。如果你不想自己做，也可以在左上角「资源库」找到合适的图标或者在主页的「资源广场」找到特定的资源，直接复制粘贴。 

当然，你也可以点击这里的分享，拉上你会设计的朋友、你的团队、设计师、工程师、前端……让他们一起参与设计和讨论，建立设计规范、设计好所有的组件，你只需要简单拖拽、组合，就能快速完成界面设计。

一切都只是排列组合。

 003.

/ 图片、文字等内容一键填充。/

选择一个形状，或者摁住 Shift 选择多个形状，即可在左侧的资源库中任意选择一个主题，自动填充图片；当然你也可以在本地图片库中直接复制多张图片，然后选中多个形状，Ctrl+V 一键粘贴；

同样的，选择一个或者多个姓名/时间/数字/电话/邮箱等等文字，也可以在左侧的资源库中，直接点击对应的按钮，自动生成内容，方便查看样式。

对于重复使用的组件，你可以一次更改所有组件中某个元素的属性，一处改，处处改，无需重复操作，也可以根据自己的需要进行单个改动。

 004.

/ 设置交互动作，分享并提交审核。/

当所有的界面设计完成后，你只需要点击顶部的「原型」按钮，选中下方特定的元素，在右侧为它添加特定的交互动作。

一切搞定，点击右上角的运行，看看效果。

如果你觉得没有问题的话，一个链接就能发给其他任何人审核，或者发表意见。有问题直接在当前界面修改再审，不用重复沟通，做无用功。

终稿确定无误后，前端工程师可以直接点击任何元素，一键复制代码，所见即所得。

作为为中国用户专门打造的工具，MasterGo 可以让我们仅在一个浏览器中就能完成整个产品设计，不用来回重复传文件。不管你在设计流程中担任哪种角色，都能最大程度地降低理解和沟通成本，让产品经理回归产品，让工程师回归工程，让设计师回归设计。

而实际上，如果你有一个产品想法，想把它表达出来，或者创作一些独一无二的产品概念图，MasterGo 都是不错的选择。

最后，你可以在这个网址 http://mastergo.com 或者在我们的微信公众号后台回复【产品设计】，直接使用。

＃感谢关注 Topbook

   在避无可避的数字生活中，

   我们塑造工具，工具也塑造我们，

   所以，我们希望，

   让工具回归工具，让你成为你。