如果有一天，设计师只需要专注于界面设计，而不再需要做裁剪、标注的工作；如果有一天，工程师只需要专注于功能框架的搭建，而不再需要花太多的时间在标注UI上；没有如果，这一天真的到来了。。。

随着的火爆，国内外很多项目组都逐渐采用了+的开发模式。不过话说回来，它真的有那么好用吗？很多朋友都说自己用PS好几年了，还想让我学个新软件，这我可做不到啊！

其实我刚进公司的时候也是这样的，我之前从来没用过 Mac，更别说 了，完全就是新手，当时差点儿崩溃，但用了之后就真的爱不释手了，再也不想用 PS 了。

在开始之前，我们先回答两个基本问题

1. 支持吗？

A：抱歉，暂时还不行！设计师为了提高工作效率，哪怕吃一两个月的苦也要买一台 Mac。不过，除了安装 Mac 虚拟机，PS 现在还支持插件。只要装上插件，不用 Mac 照样可以告别切割打标。

2. 是否支持？

A：太好了，这个一定要有！前不久还只有 Mac 版本，但团队怎么会放弃这么大的市场呢？这真是个好消息，现在也支持了，开发者们再也不会抱怨网页版了。

打开速度超级慢

好啦，废话不多说，我们直接进入正题。

首先我们来总结一下+的优点：

1、支持多画板，方便同时预览，且占用内存比PS少很多；

2、支持导出，方便制作可交互的动效原型；

3、解放设计师的双手，告别裁剪、划线；

4、减少工程师的沟通成本，提高设计还原度。

那么问题来了，没有 Mac 怎么办？别灰心，PS 现在也支持了。睁大眼睛往下看吧，只需三步，解放双手。

步骤1：

安装软件+插件

Mac 用户：安装；.app；——只需解压并安装插件

用户：安装；.app；-ps 插件和面板

如何安装插件？

通常，启动时插件会自动安装。但是，如果遇到问题，请确保您使用的是最新版本。需要安装两个东西：插件和面板。

安装教程：

1.插件

解压并复制“io..-”到“Adobe CC 2015/Plug-ins/”文件夹并粘贴。

2. 面板：

解压并将“io..-panel”复制到“Adobe CC 2015///CEP/”文件夹并粘贴。现在，当您重新启动计算机时，您将在菜单中看到面板：窗口 > 扩展 >

第2步：

注册迭代账号，邀请项目人员。

打开官方网站：

点击菜单栏中的免费注册，进入注册页面。

首先需要申请三个账号：

一个用于iOS，因为iOS的单位是pt，所以导出的切图是3张；(x,@2x,@3x)

一、因为单位是dp，所以导出的切片是5张图片（mdpi,hdpi,xhdpi,,）

以上两个是供设计师对上传的文件进行迭代管理使用的。

开发一个供 iOS 前端开发人员使用的。

尖端：

建议用团队注册的账号，存档，不建议用个人QQ邮箱，建议结合项目名，方便记忆，当然你想用QQ，邮箱或者个人生日也可以，随心所欲（我曾经用过导师创建的账号，不知不觉就记住了导师的QQ&生日，哈哈）

其次，登录刚刚申请的账号，进入首页点击，选择你要创建的项目，比如iOS；

第三，选择画板的尺寸，建议选择1x（前提是画图也是1x做的，也就是375*667）；如果在PS里做的话，一般选择2x，也就是750*1334）

四、命名项目并邀请项目成员加入

命名建议：项目名+版本号+客户端，例如：VUE-V1.2(iOS)

：刚刚选择的画板尺寸，例如：1x

Web端：复制网址，将账号密码提供给开发者，开发者打开网页即可查看批注，导出剪切图片。

项目成员加入时，建议设计人员使用一个账号，开发人员使用另一个账号，名下有Owner的人员才有上传和修改文件的权限，防止非设计人员误删文件。

尖端：

由于一个账号只能免费创建一个项目，单一项目无法满足快速迭代的需求。

因此，有两种解决方案：

1.只需申请一个账号，登录官网购买，根据需求选择对应服务即可，一般选择（25美元/月，创建8个项目）即可完全满足iOS&C的迭代需求。

2.申请多个账户

我建议每个有能力的人都选择购买支持一下（毕竟它为设计师做出了那么大的贡献）。然而出于各种原因，笔者默默选择了方案2，申请了7个账号（6个设计师，1个开发者）。为了减少沟通成本，减轻开发者的记忆负担，我把每个对应的设计账号都邀请加入了开发账号。最后开发者只需要登录一个账号就可以看到所有迭代版本的设计图，方便多了！

尖端：

建议web单独建一个项目文件，和iOS一起上传sketch标注插件，虽然图片是共享的，有3倍放大，但是web可以支持一键代码导出，这个小技巧告诉前端，可以大大减少前端的工作量，顺便让前端请你吃顿饭，哈哈！

步骤3：

或 PS 中的文件导出到

当你完成了设计稿之后，只需要再进行两次操作，就可以成功标记切图了。

1.在界面中找到需要切片的地方，选择切片工具或者快捷键s，把切片虚拟框和对应的要切片的图层放到一个组中。然后选择切片虚拟框，在右上角的切片属性中设置切片大小并选择group only。这一步很重要，不然导出的切片会有背景。

2、选中切片画板（支持同时选择多个），点击菜单-或者快捷键“⌘+E”，上传成功后屏幕右上角会弹出提醒。

完成这三个步骤之后，你只需要复制一个项目URL给开发者，开发者打开对应的界面，点击需要的项目，点击就可以看到对应的字体属性、边距，以及一键导出代码，相比之前标注+裁剪的工作模式，是不是方便很多呢？

终于可以从枯燥的体力劳动中解脱出来了，再也不用跟开发人员争论，一对一调整界面，想想就很激动，终于可以抽出更多的时间来学习（ba）（mei）。以上就是结合项目迭代的经验分享，使用过程中，欢迎小伙伴们多多交流分享~

关于使用的几个问题：

1. 剪切图片的图标无法点击？

答： 方法一：可以在单个文件下增加较长的一行，增加一些图标点击状态； 方法二：建立一个设计规范，将整个app的图标控件组织起来sketch标注插件，方便开发和统一调用（楼主就是用的这个）。

2、如果我想对设计稿提出意见怎么办？

答案：选中需要注释的图层，然后按“⌘+鼠标左键”，弹出注释浮动层。

3、为什么切片预览图像和实际导出的图像不一样，且大小不一致？

回答：切片必须放在图像上方，且切片名称不能重复。图像的XY轴位置不能有小数点。

4.URL打开网页太慢怎么办？

答：把客户端安装包交给开发者，打开速度提升100%。

如有侵权请联系删除！