如何提升Mac上的UI设计效率

上一篇介绍了PC上使用PhotoShop高效设计UI的工具。熟练使用各种工具，可以让你腾出更多时间来思考。这一篇就说一下Mac上的UI设计工具，Mac作为卓越的生产力工具，可以使用的工具也要比PC上简洁易用很多。先讲以PhotoShop为基础的设计工具，再讲UI设计神器Sketch及交互设计软件Principle。

Mac平台的工具从易用性上来说，是远远好于PC的，之前介绍腾讯的PSPlay，是抄袭SkalaView。腾讯的智图，是抄袭的TinyPNG。阿里的iconfont…跑题了，正文开始：

1：Photoshop实时预览工具SkalaView

SkalaView官网：https://bjango.com/mac/skalapreview/

SkalaView的使用跟PSPlay差不多。SkalaView了以手动加载图片来预览外，还可以通过WiFi者USB，与Photoshop进行远连接，实时的呈现设计稿。SkalaView支持iPhone、iPad、Android，但电脑端只支持Mac。实时预览的图片，可以切换显示黑白调、红绿色盲、蓝黄色盲等不同视觉，

设计的目的是为了解决问题，而不仅仅是好看，或者满足部分人的个人喜好。

2：PhotoShop快速切图神器Slicy

客户端UI设计和手机UI计最麻烦的不是设计界面和设计图标，而是切图。Slicy就是来解救讨厌切图的设计师们。

上一篇的第二部分，我们对PS的图层命名进行了规范。而规范的基础，就是基于Slicy的。

软件操作十分简单，只要将已经命名好图层的PSD拖进去Slicy的窗口，就能自动生成jpg和.png等格式的切图文件，瞬间减少了很多工作量，（前提是你真的按照之前的规范进行了命名。）

官网地址：https://bjango.com/mac/skalapreview/

只要在PS中，按照规则设定好图层名字。拖拽一下到Slicy窗口中，所有的切图瞬间搞定。Slicy同时支持@1X和@2X互相转换，无论设计稿使用何种形式，都可以方便的搞定。

目前售价29$，但为你节省的时间可不止200块。

3：UI设计神器Sketch

Sketch作为一个为UI设计而生的工貝，全矢量、轻量级、像素级精准，非常适合做移动端应用类的界面设计和简单的扁平图标设计，要说哪款软件是UI设计师必备软件，一定是Sketch了。

释放你的想象力

之前我们介绍的Skalaview、Pstosvg、Laycraft到了这里都不再需要了。

Sketch自带的SketchMirror基本等于Skalaview，虽然如此，仍然建议你自己尝试和对比不同，比如针对特殊人群的功能是没有的。

Sketch Mirror 手机实时预览工具

Sketch可以同时可以一次性导出@1X、@2X、@3X的png、jpg、svg、pdf等格式。

Sketch的导出功能

Sketch还有一个优势，功能优秀易于安装的插件。比如Sketch并没有尺寸标注功能，但是通过插件可以很容易的实现，而实现的方式也很“恐怖”——无需手动标注，点按直接导出，生成Html文件，还能自由切换单位，对于WEB开发还可以直接复制CSS代码。

想了想，干脆再开一篇讲Sketch好了。