Affinity Designer 怎么样

从 2015 年开始用 Affinity Designer(以下 Affinity Designer 简称为 AD),安装包不到 300M、运行速度流畅、源文件极小,一上手就替代了 AI。AD 现已是我日常工作的核心工具。

简单介绍一下我的工作场景:「 UI 用 Sketch,矢量插图用 Affinity Designer 。」

后来 AD 上了 Windows 版,有不少 PC 用户开始用 AD 做 UI。后面我也会邀请把 AD 作为 UI 生产力的小伙伴分享使用 AD 画 UI 时的经验。所以专栏教程内容主要以矢量图形和 UI 两个方向,主要源于实际工作中的使用经验

作为第一篇我还是先系统介绍一下 Affinity 以及 Affinity Designer。

- Affinity

在早期官方提供的 iBook 里了解到 Affinity 的母公司是英国的 Serif,有着 20 年以上的 Windows 软件开发经验。从官方介绍可以看到 Affinity 的规划,这里顺带提一下预计今年上 beta 版的 Affinity Publisher,我非常期待!因为出版物这一块已经太久没有出彩的专业软件出现了,而 InDesign 的使用界面现在用起来真的不太友好了。


Affinity Designer 怎么样

Adobe 现在给我印象是臃肿、复杂、运行速度慢、功能更新慢以及价格高的全家桶。虽然 AD 现在有很多瑕疵,但版本才 1.5.5 完整度已相当高,足以让我对他们的产品充满期待。

- Affinity Designer

[ 背景介绍 ]
AD 经过了四年的打磨于 2014 年 10 月 2 日上线 App Store,拿下 App of the Year 2014 Runner-Up。后来 2015 年 6 月拿了 Apple Design Awards。我现在都还记得第一次看 AD 的官方介绍视频的震撼,那个时候主打的还是矢量插画,后来 1.5 上了 Symbols(符号)、Constrains(限制)、Assets(资产)等功能,可以看出 AD 在 UI 领域的野心。

[ 部分界面介绍 ]
Persona,AD 提供了三种方式:矢量模式、像素模式、切图模式(图一)。吸引我的点:跟AI相比,处理简单的肌理时不需要再开一个软件,直接在像素模式里完成。AD 可以使用矢量笔刷和像素两类笔刷(图二)。图二出处

Affinity Designer 怎么样
Affinity Designer 怎么样

Stroke Panel,吸引我的点:矢量画笔压感效果,可以便捷的处理细节(图三);矢量画笔等比缩放,意味着转曲的几率大大降低了,可以保持图形的编辑性。

Affinity Designer 怎么样

[ 部分核心功能 ]
Layers,吸引我的点:方便的图层关系,每一个图层都可以是 mask;(gif 动图请戳这里)

Affinity Designer 怎么样

可编辑性的布尔运算。(gif 动图请戳这里)

Affinity Designer 怎么样

Snapping,针对不同工作模式下的吸附功能,不过目前还是很难避免出现小数点,这也是很多小伙伴头疼的地方,因为有小数点切图时会多一像素,所以一定要仔细检查坐标。

Grids and Guides,多重选择、还可以自定义,方便画立体图。

Affinity Designer 怎么样

Symbols,吸引我的点:编辑可以实时预览。(gif动图请戳这里)

Affinity Designer 怎么样

可以利用来画矢量对称图,非常棒!(gif动图请戳这里)

Affinity Designer 怎么样

AD 其他的功能我就不一一介绍了,最新最详尽的介绍请戳官网,现已有试用版可下载。接下来的实用小教程我也在酝酿。分享一个系统的教程链接 Quick Reference,AD 最新的进展以及 Bug 反馈欢迎去官方论坛。

最后,祝大家都能找到适合自己的工具:)

P.S @知乎小管家 专栏什么时候可以放 gif 呢?还有专栏编辑器非常不稳定,写了一整天的草稿箱说没就没了呢。

1.5,1.5.1版更新:

  • Constraints 约束
Affinity Designer 怎么样

在1.5版本的时候添加的约束功能,类似 Xcode 里面的约束功能:

Affinity Designer 怎么样

这样的设计易用性和通用性是可以保证的,Sketch 的 Resizing 就小儿科了。尤其在元素奇多的情况下,约束功能可以很好的保证定位和布局能够最快设置起来。

  • Snapping 更强大的吸附功能:
Affinity Designer 怎么样

加入了吸附候选:

Affinity Designer 怎么样

吸附的策略很灵活。可以指定吸附对象。而且还能指定吸附对象,这个对象是根据你绘制的对象 Index 来计算,如果你输入6,则吸附前六个创建的对象,但是此时你改为10,则你绘制时还是吸附之前6个对象,只有你继续绘制4个对象, 满了10以后,它的策略才得以实现。

  • Symbol 符号

AD 终于有符号功能了,不过它没有 Sketch 的 Overrides 功能。

Affinity Designer 怎么样
  • Assets 库
Affinity Designer 怎么样

其实可以理解为跨文档的符号集合,不过也可以把整个 Artboard 作为 Asset 哦。

  • 从图片创建色板
Affinity Designer 怎么样

不得不说,中文版 AD 的翻译确实有待提高啊。

你现在可以从图片中直接创建色板了:

Affinity Designer 怎么样

新功能还有很多,比如更强的切片和导出功能。Mockups……不过中文排版问题还是没有解决。[摊手]。

———————————————————————————————————————————

以下为原内容:———————————————————————————————————————————

Affinity Designer 给我的第一感觉相当好,我担心的是与 PS,AI (以下简称 P&A)等原始工具操作上的差异。但第一次打开 Affinity Designer (以下简称 AD),发现大多数快捷键与 P&A一样。界面风格有分离模式和一体模式。类似 P&A 的 Application Frame。

Affinity Designer 怎么样
Affinity Designer 怎么样

AD 分为三种形象模式(Persona):Draw Persona, Pixel Persona, Export Persona.

Affinity Designer 怎么样

Draw Persona 模式中,所有图形元素均为矢量模式,最大可放大到 378333344.0%,最小缩小到 0.1%。在这个模式中左侧工具栏为矢量图形工具。

Affinity Designer 怎么样

Pixel Persona 模式中,可以对已栅格化的图形进行处理。如果你直接切换到这个模式在画布上操作矢量图形,该图形/图层会自动转换为栅格图层。

Affinity Designer 怎么样

图层分为普通图层(矢量)和像素图层:

Affinity Designer 怎么样

Export Persona 模式中,可以直接对图形元素切片导出。

Affinity Designer 怎么样
Affinity Designer 怎么样

可以选择要导出的图像倍数。

Affinity Designer 怎么样

导出设置也很全面。

Affinity Designer 怎么样

类似 AI 的像素预览,AD 里面还提供了三种预览模式:实际像素预览模式、Retina 像素预览模式,线框预览模式。

Affinity Designer 怎么样

自定义图形非常多,每种图形都可以单独进行调整,十分便利:

Affinity Designer 怎么样

所有图形/图层顺序、水平垂直水平翻转(P&A 的翻转都在变换菜单中)、顺逆时针翻转,对齐都放到了顶部工具栏。

Affinity Designer 怎么样

智能对齐模式设置也非常详尽,而且真的非常好用。

Affinity Designer 怎么样

图形分割和图形插入顺序:

Affinity Designer 怎么样

路径功能很全面,AI 有的一并有。贝塞尔手柄操作也提供了 AI 没有的一些动作:

Affinity Designer 怎么样

描边提供了压感曲线,非常实用。

Affinity Designer 怎么样

色板基本上和 P&A 一样。可以存储和导出

Affinity Designer 怎么样

大部分人非常重视的实时蒙版,AD 也做得相当好。直接把对象作为蒙版对象的子层即可。比 AI 甚至 PS 要方便得多(AI 的蒙版相当麻烦)。

Affinity Designer 怎么样

图层样式,PS 有的 AD 也有,

Affinity Designer 怎么样

3D Effect 是特有的一种样式,可以添加多个光源。实时高斯模糊性能也很高。在高斯模糊对象基础上添加多个图层样式效果都非常流畅。

(持续更新中……)

除开官网 Video 中介绍的特性让人期待,我更担心 AD 这个工具某些细节会做得不好,比如蒙版(AI 的蒙版用出了阴影),路径功能,对齐和图形分割,网格,色板……etc。但试用后真的是让我打消了顾虑,并没有让我觉得潦草或粗糙,完成度相当高!一个才1.1.0版本(2014-10-14)就做到这个地步,非常了不起。对于经常使用 P&A 的设计师来说,操作上的兼容性和用户体验 AD 也做得不错.

我觉得 AD 这个工具会逐步的成为部分设计师的主力工具(我已开始在项目中使用),我个人认为它有这个潜力和实力,328元的价格也相当值。

--- 以下内容于 2016-04-11 添加 ---

Affinity Designer 怎么样

去年12月的时候,AD 迎来了一次比较大的更新 1.4,现在也已经迭代到了 1.4.1 版本。不知道大家有没有持续地使用 AD 进行设计。我个人基本上是什么都用。因为每个工具都有各自长处,关键是看大家如何调配自己对功能的需要了。

截至到今天 Sketch 更新到了3.6.1版本。作为从 1.0 就开始使用的老用户,Sketch 现在可以说是非常健全的工具了,但是有些老问题还是没有得到很好的解决,比如智能间隙和对齐的权重混乱:

Affinity Designer 怎么样

这真是非常让人头痛,因为你没办法对它的对齐吸附进行相关设置。个人认为 Keynote 的吸附到间隙是做得最好的。不过这个功能在 AD 中还没有开放(

How to enable that "Snap to gaps and sizes" option?

完全搞不清楚不开放为什么还要显示出来)。现在大家在 AD 中仍然只能像 AI 中一样 使用对齐的间隔工具;在这一点上至少 Sketch 还能勉强使用了,也算是满足。

好多人吐槽 Sketch 的文字工具太难用了。是的,到 3.6.1 仍然没有 Baseline 没有 Leading Override ,没有 SuperScript 没有 SubScript……连大小写转换都没有,难用到爆炸啊!

AD 一开始就把 Text 工具向 PS 看齐。到现在也有 Sketch 的最近使用字体了,而且也可以同步系统字体册字体集。

Affinity Designer 怎么样

现在 AD 也有 PANTONE® 色板了。色板功能较1.1.0也有非常大的提升。到目前还添加了旋转画布,性能依然非常棒。

AD 里还有非常强大的 Grid And Snapping Axis 管理器:

Affinity Designer 怎么样

你可以打出很特殊的三角网格和轴侧网格, So sweet……

基本上 Photoshop ,Illustrator , Affinity Designer, Sketch各有各的长处,你基本上不可能在一个工具中看到所有你想要的功能。Affinity Designer 对我来说最有吸引力的就是它的图形性能,我曾打开将近3000个图层的 PSD 文件,PS 打开这个文件吃我10GB 的硬盘空间:(,移动起来也是非常不流畅,但 AD 除了能够兼容打开而且处理起来也非常顺畅。简直是爽翻(不过兼容性还是有些小问题),但是相对于 1.1.0版本,兼容性已经有了质的飞跃。这个开发团队应该非常猛,因为他们每次版本更新 New Features 总比 Bug Fixed 多(Sketch 说你呢……)。

对了,AD 即将开放 Windows 版本。希望它有长足的发展,越来越好用……

--- 以下内容于 2016-04-13 添加 ---

有朋友跟我吐槽 AD 难用的地方。就是 AD 的混排实在是让人无语:

Affinity Designer 怎么样

同样都是设置全部对齐,但是 AD 基本上没法使用。所以就目前版本来看,大家可能需要避开大量排版的使用场景(已在他们的 forum 反馈)。

还有朋友跟我吐槽 AD 的吸管。实在是让人头疼。大家去试用下就知道,吸管不是作为单独工具存在的。而且吸取了颜色还要再点一下吸管旁边的色块储存器才会上色(WTF)。

不过瑕不掩瑜,就图形上,AD 还是比较好用的。