UI 设计师的 Affinity Designer 测评(下)

UI 设计师的 Affinity Designer 测评(下)

1. 高级功能测评

高级功能为我们简化操作,拒绝重复。例如,全局色、符号、文字样式为我们将全局化、组件化设计思维应用到实际操作中,善于利用可以大大提高工作效率。

1.1 全局色



△ AD 全局色

全局色就是颜色可以一处指定,多处使用,统一修改的功能。PS 自身没有全局色功能,通过老牌插件 Ditto 可以实现,但操作繁琐响应慢,体验不佳。

SK 本身没有全局色功能,但是可以通过本身的 symbol 功能实现全局换色。另外,SK 的插件 Miaow 可以查找某个颜色并全局替换。

AI 和 AD 都可以在色板里面可以建立全局色,把颜色赋予给画布上的形状之后,只要在色板里面修改全局色,画布上应用了全局色的形状会一起变化。

结论:AD ≈ AI ≥ SK > PS

1.2 符号

“符号”是 AD 中文版里面的叫法,在不同软件里面可能名称不同,例如在 Flash 中叫做“元件”。和全局色类似,符号是指一处创建,多处使用,修改同步的对象,它由一个或多个图层、形状、曲线、文字等元素组成。



△ AD 符号

AD 的 symbol 内的元素属性可以有选择性的脱离同步,比如上图中的列表中第二项的标题文字,它的颜色脱离了同步,但大小和范围保持同步。

PS 没有符号功能,功能最接近的是智能对象。智能对象需要在新窗口编辑,编辑结果必须保存后才能同步到主文件。因此它无法实时的在全局中看到修改结果。而 AI 中类似的功能是库,它和 PS 智能对象相近。

然而,目前 AD 的符号有奇怪的 bug,在某些情况下,有时候符号同步会失效。尽管 AD 的符号设计非常优秀,由于这个 bug 的存在,让人无法在大的项目中放心使用,非常遗憾。值得欣慰的是,AD 的“嵌入文档”和 PS的 “ 智能对象/嵌入文档”类似,可以作为变通方案。

SK 的符号可以实现和 AD 一样的属性部分同步,更强大的是,SK 的符号还可以跨文件调用。

结论:SK ≥ PS ≈ AD ≈ AI

1.3 文字样式

和全局色和 symbol 类似,文字/段落样式是用来全局控制文本的。PS 有文字样式,可是文字多的时候响应极慢,几乎无法使用。

△ PS 中重度使用文字样式甚至会崩溃

AI 拥有和 PS 类似的文字样式功能,但它不会像 PS 一样卡住。

SK 里可以储存文字的颜色、大小、样式、间距、行距;可以部分修改也可以全部替换修改。

AD 的文字样式功能比 AI 和 PS 多了样式继承的能力,对文字的控制更加高效。

结论:AD ≈ SK ≈ AI > PS

1.4 图层样式

AI 没有图层样式,但有滤镜可以实现一些图层样式才能实现的效果。

SK 的图层样式仅限高斯模糊、投影、描边。(Moon:吐槽一下给中文字体加描边的时候经常出现炸裂现象)。

△ PS 图层样式

PS 有最强大的图层样式,并且同一个图层样式可以添加多次(例如添加两个描边,两个投影),这个特性让 PS 仅用一个图层就能实现复杂的效果。

△ AD 图层样式

AD 图层样式功能,相比 PS 要简单,但不简陋,足以实现一般 UI 设计需要的效果,甚至做复杂的特效也毫无压力。例如,下面是 WaveF 制作并共享的几个样式,可以看出无论是卡通、塑料还是金属风格,AD 都能很好的实现。

结论:PS > AD > AI ≈ SK

1.5 图层混合模式

AI 和 SK 没有图层混合模式。

PS 和 AD 都有图层混合模式,PS 有 27 种、AD 竟然有 30 多种。然而最常使用的就无非是加深、减淡、和加强对比几类,二者都具备。

结论:PS ≈ AD > AI = SK

1.6 调整图层

AI 和 SK 没有调整图层。

△ PS 和 AD 的调整图层菜单截图。

调整图层可以在不破坏原图层的情况下,对图层进行调色。通常包括曲线、色阶、HSL等功能。PS 用户对它们应该非常熟悉。这项功能的重要性不言而喻。

结论:PS ≈ AD > SK > AI

1.7 吸附、智能对齐

现在吸附和智能对齐几乎成为了标配,老牌的 PS、AI 在近几年逐渐支持并且不断增强。后起之秀 SK 和 AD 在这方面自然不会落后,尤其是 SK,它有一个像素对齐的选项,打开后可以保证像素对齐,尺寸和坐标都不出现小数点。AI 的像素对齐最差,用它来做 UI 你会陷入像素斗争当中。

结论:SK > AD ≥ PS > AI

1.8 网格

AI 和 PS 提供基本的网格功能,和 AD 比起来相对简陋。

△ Affinity Designer 的网格

Affinity Designer 除了常规的网格,还有 isometric 、2:1 isometric、Trimetric 等等丰富的网格系统。




△ 借助 Affinity Designer 的网格系统方便的绘制 isometric 图

△ SK 的网格功能

这里得说一句,SK 网格的 offset 是 AD 和 PS 不具备的,有了它,网格才能被自由的控制。

AD > SK > PS ≈ AI

1.9 参考线

目前, AD 的参考线功能还处于初级阶段,和 PS、AI、SK 大同小异,不同的是,AD 提供了一个参考线管理器。

这个管理器通过输入/修改数值的方式来管理参考线,略为难用。 PS 自身的参考线功能也很简陋,但是它有强大的扩展,比如 Guideguide,这是 AD 无法相比的。好消息是 AD 将在 1.7 版本中对参考线功能进行暴力加强,参考线可以像普通元素一样任意编辑和操作,这就和 Guideguide 很接近了,值得期待。

2. AD 缺失的功能

所谓缺失的功能就是,别的软件有,AD 可以有,但是目前却没有的功能(有一些在开发计划中)。

2.1 透视变形、网格变形

透视变形、网格变形是 AI 和 PS 都支持的基本变形工具,但是 AD 却意外的缺失了。没有这个工具在绘制一些图形时确实掣肘。但是 AD 的同门软件 Affinity Photo 却支持这两种变形,并且可以在 Affinity Photo 中应用之后复制到 AD 中并保持可编辑性,但不稳定。为何 AD 一直不提供这两个变形工具,原因不得而知。

2.2 标注功能

如何保证最终产品达到设计图的效果?标注来保驾护航。可惜 AD 自身没有标注功能。目前只能先导出 psd 文件,然后使用 pxcook 进行标注。

2.3 移动端实时预览

目前移动端 APP 设计占据了 UI 设计比重非常大的一部分,因此在移动设备上预览设计稿的功能变得重要。AD 尚未提供这个功能,在移动 UI 设计流程上提供的支持少了一环。

2.4 开放的接口

AD 目前并且在可见的将来都不会开放接口,第三方开发者无法为它开发插件。也就是说,AD 不会像 PS 和 SK 那样拥有丰富而强大的插件出现。

3. 其他

3.1 文件兼容

△ AD 的导出界面

AD 的原生格式是 .afdesign,只能被 AD 打开和编辑。但 AD 对 PS 和 AI 的源文件有较好的支持,可以直接打开和编辑它们。这个特性使得 AD 可以使用网络上丰富的 PS 和 AI 素材。另一方面,AD 支持导出 PS 和 AI 格式,导出的 .psd 文件在 PS 里打开可以达到非常高的还原度。因此,使用 AD 并不意味着你失去了 PS 和 AI 的支持,在必要的时候它们仍然可以帮上忙。

在这里必须说一句,AD 不管是打开还是导出 .psd 文件,文本会被栅格化。另外,使用 AD 有而 PS 没有的东西,如 layer,在导出的 psd 文件中也会被栅格化。因此在和 PS 用户一起工作时,避免使用它们,会让你的文件具备非常好的兼容性。

3.2 平台

AD 目前有 Windows 版和 MacOS 版,二者在功能上没有差异。此外 iPad 版在研发当中,且官方已经放出试玩视频。从已经发布的 Affinity Photo iPad 版的质量来看,AD iPad 版非常值得期待。iPad Pro 在结合 Apple pencil 的情况下,可以说是设计师的完美辅助工具,很多人吐槽这对组合比不上专业的数位板、新帝。但是你只要体验过,应该能承认它的便捷、直接、快速响应以及符合直觉。目前在专业工作上虽不能完全取代数位板,但是它已经可以承担你创意工作中的初步设计阶段。随着技术的进步,将来淘汰数位板也不是没有可能。Affinity 系列软件布局都是 windows、macOS 和 iOS (iPad)三端并行,也许因为笃信这一趋势吧。

就目前来说,同时兼容 Windows 和 macOS 对设计师来说是实实在在的,避免了 SK 仅支持 macOS 的尴尬。

3.3 稳定性和性能

作为一款新软件,AD 有不错的稳定性,正常使用很少崩溃,并且处于快速迭代中,在官方论坛,每个月都会发布多个测试版本修复 bug,值得称赞。我也提交了几个 bug 到论坛,确认后都得到了解决。另外,使用 AD 以来,我尚未碰到文件损坏的情况,这让我很放心。

Dan Danowski 使用 AD 进行 UI 设计

性能方面,得益于 AD 是一款不折不扣的矢量软件,绘制 UI 界面时,一个项目几十个页面放在一个文件里面依然允许你释放当年打星际争霸才用的细腻微操,拖动、缩放画布依然无比跟手。

那么,AD 真的可以打破物理规律,无视硬件性能提供比别的软件更好的流畅度?事实上并非如此,过度使用图层样式、模糊效果会导致 AD 明显变慢,出现卡顿,因为各种特效的显示在 AD 中是实时计算的,每次修改内容、移动或缩放画布必然耗费 CPU/显卡 资源。当一个画面中出现堆积如山的特效时,这时候你会回到现实。然而,大多数情况我们并不需要堆砌这么多特效,即便真的有一天你真的要这么做,也有变通方案。

4. 总结

本质上 AD 是一款新的 AI(矢量软件),而它又具备一些 AI 没有,PS 才有的功能,比如图层样式、调整图层,加上前面尚未提及的 Pixel Persona,这使得它瞬间变成了 AI 和 PS 的合体,拥有了矢量和像素两种武器,和单纯的矢量软件相比,战斗力强大不少。

由于它是一款新的软件,在设计之初就站在了巨人的肩膀上,吸收了前辈优秀的地方,同时也加入了自己的思考。相比符号、全局色、文字样式等现代必备的高级功能支持,我更欣赏它在基础的用户体验上比 AI、PS 的进步。这个优势使得它比更适合来做 UI,因为绘制 UI 的过程中,我们只不过是不断的绘制形状、选择颜色、对齐形状……高频操作优化得越好,我们的加班时间越少。

同样也因为它是一款新的软件,在功能的全面性上又有所欠缺,例如缺少标注工具、移动设备实时预览、交互设计、动画制作等,没有覆盖整个 UI 设计流程。



Sav Scatola 使用 AD 绘制的插画

仅从 UI 设计角度看,最强的工具是为 UI 设计而生的 SK,但为什么选择 AD 呢?1、对各种原因留在 Windows 的设计师来说,它能提供 UI 设计所需的基础功能以及一些高级功能,且体验优秀。2、AD 定位是矢量插画和 UI 设计,UI 设计部分输给 SK,但插画部分则可以完爆 SK。我们的工作不仅仅是绘制界面,宣传活动、闪屏插画、banner设计甚至图片合成工作等也占一定比重,拥有矢量+像素的综合能力 AD 能帮助我们轻松应对。

5. 最后

本文的 SK 部分是在 Moon 的帮助下完成的,特别感谢!

本文将几个软件拿来逐项对比,都是从 UI 设计师的角度进行考虑,目的并非评比软件的高低,而是借助熟悉的 PS、AI、SK 向大家介绍 AD。由于个人知识经验有限,疏漏在所难免,欢迎指正。

编辑于 2018-04-15 06:01