Pixso、即时设计和 MasterGo，三款都是国内新一代协同设计工具，刚好我前阵子体验了一下 Pixso，这里重点介绍一下 Pixso。
Pixso，是由国内的万兴科技推出的主打设计协作的工具，可完成涉及多人协作的 UI 设计、原型设计、交互设计、标注切图等工作，用一款工具打通产设研工作流，解决原先需要用到多款软件进行交接的麻烦。
Pixso 本质上是一款矢量软件，如果你之前用过 Sketch、XD、Ai 等矢量软件，应该不会对 Pixso 的工作方式感到陌生。
对比前面提到的几款矢量软件，Pixso 最显著的区别在于，它主要基于网页进行工作，浏览器打开即用，支持 Windows、macOS 和 Linux 系统，不局限于单个平台或系统，保证使用不同设备的人可以无缝协作。
Pixso 帮助文档
对于许多刚接触一款新软件的人来说，如果在入门阶段能看到相关的说明文档或使用指南，应该可以大大减少上手过程的挫败感。
Pixso 在这方面也考虑得比较周到，点击右下角的「帮助」按钮，在弹出的「学习和探索」面板，可以看到 Pixso 提供的新手视频教程、教程文档，以不同形式的内容为新手提供指引，降低软件的上手门槛。
Pixso 工作台
Pixso 基于浏览器进行工作，首次使用需要创建一个 Pixso 账号，登录后会进入 Pixso 工作台，如下图所示。
点击最近打开文件下方的「新建文件」，可以创建新的空白 Pixso 文件，在 Pixso 中创建的文件，会保存在自己的 Pixso 云端账号中。
这样即便你换了一台新的电脑，只要登录同一个账号，就能看到之前创建的所有文件，方便你在新电脑上继续编辑文件。
快速创建画板
打开新创建的空白 Pixso 文件，需要创建一个画板来承载之后添加的各种元素，页面下方提供了 3 种画板预设——手机、网页、平板，点击图标即可快速创建相应的画板。
如果前面提供的 3 种画板预设不能满足你的需求，可以点击左上角的「画板」工具（快捷键为 F），查看右侧「设计」面板列出的所有画板预设，这里提供了不同设备或载体的预设，包含手机、平板、电脑、网页、智能手表等，每种设备还细分出了多种尺寸。
实时自动保存，无限查看历史记录
Pixso 是基于网页的在线设计工具，拥有和许多在线文档产品一样的「实时自动保存」特性，在设计文档中进行的每一步操作，Pixso 会自动保存到云端。
点击顶部设计文档名称右侧的小三角 ▼ ，选择「查看历史版本」，右侧的「版本历史」会显示文档自动保存的所有历史版本，最上面的记录为最新一次的版本。
点击版本名称右侧的三个小点点，选择「还原此版本」，就可以将当前最新的版本回溯到早期自动保存的版本。
Pixso 虽然支持实时自动保存，但它不会将每一步的编辑操作都保存为一个单独的版本，而是每隔一段时间才会增加一条自动保存的记录。
对于比较重要的设计节点，我们可以使用 Pixso 的手动保存功能，将重要的节点及时保存下来，方便后期回溯。
点击版本历史右上角的加号 + ，在弹出的窗口，给拟保存的历史版本添加一个「标题」，之后在右侧的版本历史就能看到刚刚手动保存的记录。
自动布局，提升 UI 设计效率
UI 设计是 Pixso 的核心能力，在这方面，Pixso 提供了多个提升 UI 设计效率的功能，其中不得不提「自动布局」。
关于自动布局，Pixso 官方的帮助文档给出的定义是：根据内容自动响应的动态画板。
单纯看定义还是有些难理解，我们来看一些例子吧~
下图是一个添加了自动布局(快捷键为 Shift + A)的文本，文本默认位于文本框的左上角，点击右侧的「对齐」，可以快速更改文本在文本框中的位置。
我们把文本置于文本框的中央，接着拖拽文本框的右下角放大文本框，因为文本之前添加了自动布局，当文本框变大时，文本会随着文本框产生自适应变化——其位置依旧会保持在中央而不会发生错乱。
另外一个自动布局的例子：对于添加了自动布局的多张图片，当我们拖拽改变其中任意一张图片的位置，上下两张图片会自动调换位置，而不会打乱原有的排版。
这在你不确定采用哪种排版方式比较好的情况下，可以通过拖拽图片快速预览不同的版式，对比之后或许就能找到找到答案了。
可交互组件，高度还原交互动效
Pixso 支持创建交互式组件，可以在交互设计阶段，模拟真实场景中的用户点击、切换开关、鼠标悬停等行为触发的效果。
下图是在 Pixso 中使用交互式组件的一个例子，当我们点击开关按钮时，可以在「开启」与「关闭」之间来回切换，真实还原现实中的用户交互行为。
看到这个逼真的交互效果，如果你也想制作同款的切换开关交互动效，可以按照下面的步骤：
在 Pixso 中创建一个项目，点击左侧的「资源」选项卡，打开「WeUI浅色组件库」
WeUI 组件库提供了两个处于不同状态的按钮，分别将它们从左侧拖拽添加到编辑界面。
鼠标框选两个按钮，点击顶部工具栏「组件」右侧的下拉小三角，选择「创建多个组件」，将两个按钮转换为组件。
按钮图标转化为组件之后，在同时选中两个组件的状态下，点击右侧的「创建组件变体」，将两个组件放到一个组件集中。
点击右侧的「原型」选项卡，接下来我们要给两个组件添加交互事件，把鼠标移动到组件的右侧，会出现一个隐藏的控点。
长按鼠标，从控点拖拽出一条线段，将其连接到下面的组件，这样就在两个组件之间快速添加了一个「单击触发变体切换」的交互动效。
单向添加一个交互事件，并不能实现最终点击按钮来回切换的效果，因此也要给下面的组件添加同样的交互事件，从组件右侧拖拽出线段连接到上面的组件。
添加完交互动效，从左侧的组件面板，拖拽添加一个按钮组件到画板中，点击右上角的「演示」进入演示视图，点击按钮就能实现切换开关的交互动效了。
兼容性强，支持导入多种设计文件
在格式兼容方面，Pixso 拥有良好的表现，支持导入多种主流的设计文件格式，包含 figma(.fig)、sketch、svg、xd 和 axure(.rp)。
这意味着，你可以很方便地将之前在其他软件中创建的设计文件，迁移到 Pixso 中，借助 Pixso 的云端协作功能，与团队成员在线编辑和沟通，提高跨部门的协作沟通效率。
自带标注切图，无需使用第三方工具
Pixso 自带标注切图功能，可以在设计稿中直接查看标注信息，无需将文件导出到本地，再上传到 Zeplin 等第三方工具获取标注信息。
打开右侧栏的「代码」面板，选中任意元素，就能看到相应的属性和 CSS 代码，另外按住 Alt/Option 键，也可以快速获取元素距离容器的相对位置。
前端工程师如果想要复制相应的代码，将鼠标移动到 CSS 代码上方，顶部就会弹出隐藏的「复制」按钮。
导出切图方面，点击右侧面板的「设计」选项卡，在面板底部可以看到「导出」的选项，支持导出不同的倍数。
如果同时选中多个元素，再点击右侧的「导出已选项」按钮，就可以批量导出多张切图。
此外，基于 Pixso 云端实时更新的特点，后续设计文件发生修改，对应的标注信息也会随之自动更新，整个过程是静默完成的，完全无需手动操作。
以上，希望有帮助。
码字不易，如果对你有帮助，别忘了给文章点赞、收藏，或是关注我的账号，这会对我有很大的帮助。
效率工具指南：致力成为国内优质的工具测评媒体。
