本文适合APP产品的视觉设计师、开发工程师、项目经理及Sketch爱好者阅读。

一、缘由

　　APP设计中最苦恼的一个问题可能就是要为iOS和Android平台（WP同学已哭晕在厕所）设计两套大部分相似又局部不同的视觉稿，进而又需要两份标注稿，别忘记还有两套图片资源。可是大量的人力与时间成本可能花在这种近似重复的工作上，而项目工期逼人，于是我们会很自然地想：

为什么不能只设计一套视觉稿就可以用在两个平台呢？

为什么我们以前没有这样做？

先来看一下，以前我们是这样的，传统上，我们是用Photoshop来设计APP，作为一个伟大的软件，它却在阻止我们上面的想法：

1. PS只允许一个文件一个画布，导致用它来设计APP只能采用一个界面一个PSD的形式，文件管理相当低效且无法快速地在界面间跳转查看。此外还附带一个PS的通病——文件巨大不环保，谁让它是基于位图的工具呢，一个APP几十上百个界面做下来文件得有多大，想想也是醉了；
2. PS没办法把APP中通用的组件“公共化”。APP设计中很多模块是多个界面都用到，属于完成一样的，比如一个搜索按钮；也有的模块是样式都一个，只是局部有不同，比如APP Bar的背景，每个界面都是相同的风格，只是上面的文字有变化。当我们做完一套界面后，发现某个模块需要修改调整时，得逐个逐个界面地去修改，这当然不科学；
3. PS资源输出方式太落后。老版的PS不用说，只能画多大就输出多大，根本无法解决移动端一个图片要输出多达8种尺寸的需求。新的CC 2014版增加了“资源抽取”功能，但只能说聊胜于无，它要求人工预先用复杂的规则来重命名图层，简直是反人类，而且要将APP内需要的全部资源输出，其实还是一个重体力活。

(本文写于CC 2015发布前，2015版已经改进支持了多画布)

现在的答案是当然可以！因为有了Sketch!

现在我们借助Sketch，可以完美解决PS这几个弊端：

• Sketch文档采用Page（可理解为画布组）和Artboard（相当于画布）两极结构，一个Artboard中放一个独立的界面，按功能模块将其下的所有界面放在一个page内，这样所有模块的page组合起来，就是一个完整的APP了，轻松一个文档搞定。而且因为Sketch是矢量工具，文件很小，跑起来速度杠杠地；

• Sketch有灵活的Symbol、Layer Style和Text Style。Symbol可以理解为共享符号，Layer Style类似PS中的图层样式，Text Style是文字样式，Layer Style、Text Style和Symbol一样可以共享的。你可以任意新建Symbol和图层样式、文字样式并灵活组合应用，极大方便了快速调整设计，比如一次将APP内所有按钮由空心描边改为实心，一秒钟不到，Duang一下就完成了。

• Sketch是矢量的，并内置可视化的多尺寸输出功能。实际上，还有更加好用的插件让你一键输出全部图片资源到所有平台所有尺寸。

　　所以，在PS时代不是我们不想用一套视觉稿来完成多平台的需求，而是PS本身无法满足APP设计需要的灵活、快速、多变的需要，毕竟它是一个面向平面、网页、摄影等多个行业的巨无霸软件，它的定位决定它不是从UI设计这一个方面来考虑功能。实际上我们做APP设计中，大部分PS的功能是冗余的，而Sketch是应UI设计特别是移动端UI设计而生。

　　在最近的项目中，我们已经尝试了使用Sketch设计一份视觉稿，同时满足两个平台的开发需要。在与产品、开发充分沟通后，我们商定出了认为可行的流程和规范，并在实际应用过程中不断修正，最后还算顺利地走完了整个项目开发。从设计模式（原本两个平台各配一个视觉设计师做两份稿，改为一个设计师完成一份稿）、设计响应速度（灵活快速地对整个APP进行修改）、开发资源输出（一键、易维护）这三个方面，成功缩短了工期，降低了项目成本。

　　下面就介绍一下我们的实施过程，因没有现成经验，完全属于在摸索中前行，欢迎斧正，特别是有经验的团队不吝指教。

二、准备（技术框架）

设计：Mac + Sketch + Sketch Plugins

Sketch只有Mac版本，所以你还需要配备Mac系统的电脑，另外为了高效工作需要安装几款Sketch插件，具体插件后面将提到。

开发：单位换算函数 + svn

iOS开发需要一个简单的将基于720px宽分辨率下的标注数值转换到@1x下值的换算函数；为了在视觉和开发团队之间方便的同步切图资源，最好能搭建一个SVN服务器。

三、实施

基本思路：以Android xhdpi 720x1280尺寸为设计稿基准，两个平台只设计一份视觉稿。将平台特性部分抽离（如Tab bar、Nav bar）为独立部分单独设计，主体区域共用同一份视觉稿和标注稿。iOS开发根据标注中的数值转换后使用。

1. 独立部分

将符合平台特性的部分单独拿出来定义它们的视觉规范，比如APP Bar、按钮、输入框等，可以集中起来为它们单独输出一份视觉与标注稿，供两个平台的开发查阅。

上图：Android平台视觉规范（局部）示例

注意只需要将全局性的模块抽离独立出来，而以后要输出资源图标，如分享图标，可以在切图环节处理。

2. 视觉稿输出

这个环节不用多说，注意所有元素的尺寸必须为偶数。在我们的项目中，尽量采用了Material Design以8dp为最小单位的栅格法则，即设计稿中为16px的偶数。

额外提一下Sketch很好用的演示模式（快捷键commond + .）,可方便地在电脑上演示设计稿。

3. 标注

标注终于可以在软件内直接完成了，只需要安装一个插件：Sketch Measure。不用再在MarkMan之类的第三方软件之间来回切换，而且更高效好用。

开发如何使用标注稿：

Android开发：直接将标注数值除以2即为DP值；

iOS开发：需要将标注数值除以2.25后取整，则为1x下的值。建议写一个小换算函数，这样开发可以直接填写标注稿上的数值。

4. 切图输出

Sketch本身提供方便的图片输出功能，支持PNGJGPTIFFPDFSVGEPS多种格式，以及自定尺寸、文件名。

但为了更方便地集中管理全部图片资源，以及有的时候需要按平台设计不同图标，我们使用了更强大好用的插件来输出。我们用的是Sketch Better Android Export和Sketch Export Assets这两个插件分别用于Android和iOS两个平台的切图输出。

在实际项目中，我们单独建立了iOS Assets和Android Assets两个page中作为这两 个平台的UI库，在page下再按切图分类建立一个个Artboard，APP需要用到的切图会集中放在这个page中。再把切图转换为Symbol（共享符号）后，才放置到需要用到的某一界面中。

当然有的时候这个过程是相反的，先在界面中画好，再转为Symbol放到UI库中。

这样做的好处是便于管理整个APP内的切图，一是更好把握整体图标风格，二是修改维护方便，在UI库中调整一个图标，实时就同步到用到它的所有界面了。

输出时在UI库全选，再按下插件快捷键就搞定了。

要点：

• UI库中切图命名注意与开发协商好，尽量两个平台使用同一套命名规范；
• 先做好Android的UI库，复制并用Scale工具缩小一份@1x的iOS库后，再针对不同修改部分图标会比较取巧省力；
• Sketch Better Android Export用于Android切图的输出，因为我们的设计稿是基于720x1280，所以输出时要选择“@2x base”；
• Sketch Export Assets用于iOS切图的输出，选择只输出iOS“Export iOS Assets”。

四、相关工具

1. Sketch Mirror

移动稿一定要在移动设备上检验效果。Sketch Mirror是Sketch配套的一个手机端预览APP，作用与Ps Play之于PS相同，但不用设置，还可以在手机APP中切换查看所有界面，APP Store售价4.99刀。

2. SVN

用来与开发同步切图资源，SVN工具选择很多，mac下推荐Cornerstone。要注意修改过的图片提交时做好备注说明以便于开发的同学理解。

3. 有道云协作

http://note.youdao.com/groupintro.html

网易开发的一个全平台团队协作工具，我们项目在这个平台上对一些文档包括视觉稿进行讨论、管理和共享。

五、旧设计稿如何从PS迁移到Sketch

Sketch现在并不支持PSD格式，所以迁移还是有一定成本。如果你原有项目是在PS上做的设计，中途想要迁移的话，首先完整界面需要在Sketch中重绘，但PSD中的矢量图形是有办法转移过来的（位图就没招了）：

在PS中画的形状，放狗搜索“photoshop export svg”可以找到几钟方法将形状导出为SVG，虽然繁琐一点但是可以实现；

如果原来是用AI画的图标就比较省事了，可以在AI中直接导出为SVG。

拷贝SVG然后在Sketch中粘贴就可以导入进来。

六、FAQ

1、为什么是Android xhdpi 720x1280？

都说要一稿走天下了，iOS或Android无所谓了吧，任性选。非要理由的话我可以说Android机占有率高一点吗？还有一点，720除以320（iOS的@1x）等于2.25，但如果是640（iOS的@2x）除以720等于0.8888888...除不尽啊！

1、为什么是720x1280？

对Android开发来说，720x1280下可以简单地将标注中的数值以2px=1dp来换算，而没有选用更小或更大的尺寸，只是因为这个大小更接近我们设计师自己手机的分辨率，更适合设计师在手机上预览真实效果。

2、为什么图片资源不用SVG或PDF格式？

确实还有一种方案是直接提供给开发SVG或PDF这种矢量格式的资源,但这种方式要 额外消耗手机的计算资源,特别是在界面跳转时有转场动效果的情况下，所以被我们 的开发否决了。

3、为什么要用两种不同的切图输出插件?

为了方便管理。在我的项目中对iOS和Android绘制了不同的图标，如果你的设计中图 标没有区分两个平台，用Sketch Export Assets同时输出两个平台的图就行了。

4、在哪里下载你提到的这些插件?

下载这个第三方的插件管理器SketchToolbox，可以查找、安装所有插件。