上一篇介绍了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代码。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据