原作者信息:Tom Koszyk 资深设计师,自由的产品设计师, Pixology 艺术总监 . 音乐爱好者. 游戏爱好者.
原作者Medium地址:Tom Koszy的Medium
原文地址:The Perfect UX/UI design tool.
译者:UI设计爱好者一只,欢迎交流。第一次试译,欢迎指错。
|| Adobe Photoshop, Affinity Designer Sketch 3?—?UI设计三工具
多年之前,不管是做简单的网页,还是做复杂的原生APP,Photoshop曾经是做界面设计时的首要选择。
但是在我试用了近年来多次被拿来与Ps比较的软件—Sketch3和Affinity Designer之后,我才意识到设计师其实可以尝试去用一用新的工具,老的软件有一点过时了。说实话,这可能是我第一次不使用Adobe的工具去做UI设计,我不得不说这种体验让我有很大的意外惊喜。
不同的视角
我尝试了不同的视角去看待设计。Sketch改变了我的工作流程。因为Sketch就是为了UI设计而产生的工具,它的设计初衷就与Ps大相径庭。
尝试像Sketch和Affinity designer这些其他的设计工具,改变了我对传统设计过程的看法。
它们让设计的心思集中在...额…怎么说呢,更集中在产品本身上?对我来说,用它做设计的过程更像开发的过程。它不会让你把设计当做仅仅就和在一张既定的画布上画画一样。
设计工具影响我们的设计进程
我开始进一步思考,我们应该在我们的设计流程中用多少设计工具。
我们正处于一个令人激动的时期,Ps现在已经老了,它开始在配置不那么高的电脑上运行的越来越慢。它的核心代码对于现在来说严重过时了,但毕竟它是作为一个照片编辑器被设计出来的产品,而不是针对UI设计而产生。作为前冠军,它开始慵懒然后越来越臃肿。其实最近针对Ps做的竞争产品越来越多,但是也没有一个是完美的。在UI设计工具Fireworks的市场占有率改变之前,我们这种想法是对的。Adobe现在有两种处境,要么他们重新对旧的设计工具做出改变,要么他们就只能把市场份额拱手让人。
最完美的设计工具?
让我们静下来想一下?—?完美的设计工具应该是什么样子的呢?
它的工作区对设计师更友好?还是说增加了我们的设计效率? 或者让我们的设计工作发生革命性的巨变? 下面是我认为重要的十三个方面。
1. 流畅性
现在Ps最大的问题就是太耗内存了。就像一个怪兽一样无止境吃着你的内存—让电脑运行的越来越慢。我最近发现在我用14年购入的8G内存MBP retina跑Ps的时候,仅仅是做一张单独的网页设计图的时候已经有点困难了。
Ps和Affinity相比,需要多于两倍的内存空间。
设计工具的轻快性是显而易见的需求,不管是Affinity Designer还是Sketch在这点上秒杀掉了Adobe。
2.可靠性
没有人愿意让自己呕心沥血工作了几个小时之后软件崩溃然后一切重来。但是现在这种事情真的常常出现在工作中,我觉得现在这些受大家欢迎的设计软件,没有一个完全解决了这个问题。
Affinity 就跟个熊孩子一样总是闹啊,特别是在用透明度工具的时候。Ps就和铁索桥一样…(晃晃悠悠..)我用有一段时间不用Sketch了,所以我也不知道它现在到底怎么样了,但是我记得之前用的时候有一些让人崩溃的时候......
3. 专注于UI的界面
(译者注:Adobe将在16年推出一款专注UI设计与Sketch定位相同的软件Project Comet,参考Adobe 推出UI设计工具)
Sketch在这一点上胜利了。Ps根本就不是一个UI设计工具,它的核心是一个照片编辑工具(不顾一切的添加各种小工具)。Adobe曾经介绍了一个Ps中用于UI设计的工作区的测试版本,首先,它砍掉了太多的设计功能,其次,它让我觉得看起来更像Winamp中的一款皮肤。我们需要一款真正针对UI设计的设计工具。
Affinity看起来比Ps更好那么一点点,但是它缺少一些测量工具。它不能告诉你对象之间的距离,也不能通过百分比来进行对象的缩放。
Sketch 基本上是完美的,它的工具对UI设计来说足够了,但是它的界面可以设计的更人性化一些便于使用。
4. 基于矢量的工作流程
对我来说,矢量图现如今是必不可少的。我们为多种设备做着设计,各种设备的显示屏大小千奇百怪。我们的设计图必须是易于调整的。软件工程师们也有着和我们一样的想法。
我提到的三个设计工具都可以做矢量图,这里我最喜欢的设计工具是有着非破坏性布尔运算的Affinity。最不舒适的是Sketch,它的功能有一定的局限性。
5.有基本的编辑位图的工具
(Affinity Designer 有很多种工作模式:设计模式,位图编辑模式,切图输出模式)
你在做设计的时候会时不时的对栅格化的图形进行色彩的调整,而且另外开一个工具去处理会比较麻烦。Ps在这点上做的比较好,它的功能比较全。
Affinity Designer最看重的是效率,除此之外,它也有一个姊妹应用,Affinity Photo,他们协同工作的话对设计师十分友好。
不幸的是,Sketch在这一点上实在做的不怎么样。它基本上没有任何位图工作所用到的基础工具。可能你会觉得它这样做是为了让你把一些位图素材放进去之前好好考虑,但是真正做起来的时候你或多或少会需要对素材进行一些小调整。
Sketch在这一点上完完全全是个Loser!
6.图层缩放不会对像素造成破坏
可能这一点Ps存在最大的问题。当你缩放像素层的时候,图像会被压缩并且质量下降。除非你首先把它转换为智能对象。但是智能对象比较大,让工作效率下降。
对我来说,智能对象是有别的用途的。比如,你在做一个按钮的设计的时候,你只用创建一个对象,然后把它复制到任何你需要它的地方。当你改变一个按钮的颜色的时候,所有的按钮的颜色都会改变,这一点真的很棒啊!我觉得把智能对象用在为了让图片的质量不下降这一点上真的很奇怪。
Affinity在这一点上做的很不错,你可以缩放一张图片十次,保持原有的图片质量。这一点十分让人欣喜,我发现这一点的时候整个人都兴奋了。然后我想了想,一张图缩放保持质量不应该是理所当然的吗...顿时感觉之前用Ps就像呆在石器时代一样。
7.即时的预览功能
Affinity中不同的预览模式,分别为矢量图,Retina,Default screen
让我说一个Affinity最好的地方的话,就是它让你的设计保持矢量(形状和字体)
并且让你能够实时预览它在不同像素级的屏幕上的效果。并且它有Retina屏幕预览模式!目前没有任何一个竞争产品做到这一点。
8.预置的网格系统
对我来说,不管多么简单的设计都要基于网格标准。网格是结构化布局的重要组成部分,它可以帮助你平衡所有设计元素之间的关系。除此之外他们可以建立引导作用,使用户体验更加友好,这一点至关重要。
我更希望能有一些小的工具去建立网格。能够根据我的计算和分配快速建立网格,我更爱那种虚线状态的参考网格,但是现在还没有看到实现的。
9.易用的测量工具
只放一下Sketch里面测量工具是怎么工作的,我希望到处都能见到这种测量工具!
10.不错的排版功能
我最近写了一篇关于排版规则的文章。
流行的UI设计工具支持所需要的所有功能,自定义字间距,标点的设定等等。我认为如果CSS能做到这些的话 ,这些工具都应该要能做到这一点的。
11.艺术板
|| 图为Sketch3中的多艺术板显示
艺术板让你能够在一张开放的画布上设计。如果我们分开设计交互性强的网站或者App的每一个页面的时候,我们会想把他们放在一个界面中看一看。艺术板同样允许你在整个文件中使用智能对象。所有的页面在同一个文件中十分的方便!现在只有Affinity Designer不支持者一点了,我希望它快点支持这一点。
12.多种导出选择
每个设计工具进入市场都是会想要去抢占市场份额的。不会每一种设计软件都使用同一种工程文件,不同的团队会有不同的工程文件使用习惯。有的设计师给开发者PSD文件有的会帮开发将素材全部打包。那就意味着一个好的设计工具需要能够支持导出多种格式的文件。
这一点上,我十分偏爱Affinity,它让你能够打开PSD文件(太棒了!)并且也能够把你在Affinity中做的设计文件导出为PSD文件。PSD现在仍然是最常见的格式,并且我觉得PSD可能会持续占有大份额一段时间。
13.直接导出CSS样式
最后一点十分简单,Ps和Sketch都可以在对象上直接使用右键复制它的CSS代码。Affinity目缺失这个功能,但是它即将推出这个功能了!
Apple Music redesign是完全用Affinity Designer设计的。你可以在我的Behance上面看到我的作品,下载源文件。链接
What about you?
尽管前景可观,现在似乎没有一个完美的解决方案。
以上就是我对设计工具选择参考的一些关键点,大家都是怎么选择设计工具的呢?