上一篇介绍了PC上使用PhotoShop高效设计UI的工具。熟练使用各种工具,可以让你腾出更多时间来思考。这一篇就说一下Mac上的UI设计工具,Mac作为卓越的生产力工具,可以使用的工具也要比PC上简洁易用很多。先讲以PhotoShop为基础的设计工具,再讲UI设计神器Sketch及交互设计软件Principle。
Mac平台的工具从易用性上来说,是远远好于PC的,之前介绍腾讯的PSPlay,是抄袭SkalaView。腾讯的智图,是抄袭的TinyPNG。阿里的iconfont…跑题了,正文开始:
1:Photoshop实时预览工具SkalaView
SkalaView的使用跟PSPlay差不多。SkalaView了以手动加载图片来预览外,还可以通过WiFi者USB,与Photoshop进行远连接,实时的呈现设计稿。SkalaView支持iPhone、iPad、Android,但电脑端只支持Mac。实时预览的图片,可以切换显示黑白调、红绿色盲、蓝黄色盲等不同视觉,
设计的目的是为了解决问题,而不仅仅是好看,或者满足部分人的个人喜好。
2:PhotoShop快速切图神器Slicy
客户端UI设计和手机UI计最麻烦的不是设计界面和设计图标,而是切图。Slicy就是来解救讨厌切图的设计师们。
上一篇的第二部分,我们对PS的图层命名进行了规范。而规范的基础,就是基于Slicy的。
软件操作十分简单,只要将已经命名好图层的PSD拖进去Slicy的窗口,就能自动生成jpg和.png等格式的切图文件,瞬间减少了很多工作量,(前提是你真的按照之前的规范进行了命名。)
只要在PS中,按照规则设定好图层名字。拖拽一下到Slicy窗口中,所有的切图瞬间搞定。Slicy同时支持@1X和@2X互相转换,无论设计稿使用何种形式,都可以方便的搞定。
目前售价29$,但为你节省的时间可不止200块。
3:UI设计神器Sketch
Sketch作为一个为UI设计而生的工貝,全矢量、轻量级、像素级精准,非常适合做移动端应用类的界面设计和简单的扁平图标设计,要说哪款软件是UI设计师必备软件,一定是Sketch了。
之前我们介绍的Skalaview、Pstosvg、Laycraft到了这里都不再需要了。
Sketch自带的SketchMirror基本等于Skalaview,虽然如此,仍然建议你自己尝试和对比不同,比如针对特殊人群的功能是没有的。
Sketch可以同时可以一次性导出@1X、@2X、@3X的png、jpg、svg、pdf等格式。
Sketch还有一个优势,功能优秀易于安装的插件。比如Sketch并没有尺寸标注功能,但是通过插件可以很容易的实现,而实现的方式也很“恐怖”——无需手动标注,点按直接导出,生成Html文件,还能自由切换单位,对于WEB开发还可以直接复制CSS代码。
想了想,干脆再开一篇讲Sketch好了。