18年接触Abstract时,中文资料并不多,为了深入学习,只能在外网看一些英文教程和官方文档。因为它确实能给工作带来很大的帮助,所以我觉得有必要写一个详细教程,除了分享以外,也留作以后方便对团队进行推广。
在一次紧张的项目设计中,需要在很短的时间内交付完所有的设计稿,临时抽调了不少其他项目的设计师一起参与。为了将作业效率产出最大化,作为主设的我推行使用Abstract,作为这个临时小组的协作管理工具。冒着前期占用本来就不多的交付时间进行培训的风险,最终,在设计师甚少加班的情况下,不但按时完成交付,质量也没有因时间紧迫而打折扣,团队也因此开始接受认可这一工具,我也重新认识到Abstract对于团队协作管理的价值。
此文内容概括:
1.设计师团队中常见痛点
1.1 问题背景
1.2 解决问题的办法有什么
2.项目实例:如何使用Abstract
2.1 定义和概念
2.1.1 理解什么是版本控制
2.1.2 了解Abstract的关键词
2.2 六步学习使用Abstract
2.3 其他闪光功能
3.总结
3.1 优点:为什么使用Abstract
3.2 缺点
3.3 结语和展望
1. 设计师团队中常见痛点
1.1 问题背景
设计的同学们都知道在作业的过程中,方案不可能一步到位,经常是边改边做,除了自己本身会有设计思路的变化,你还需要接受客户的反馈来修改设计方案,期间会不断地复制文档和画板,即使你是一个连图层命名都有洁癖的人,或者团队有成规矩的命名规范及协作方法,对于你来说,无非是分阶段复制设计稿,然后改个直白的名字,如此反复力求做到可以快速回溯到某个版本。
这已经是理想情况了,相信我,一个月过后,你也拿不准这个版本里面到底有啥内容,随着时间推移和设计师增加,几百个副本躺在你电脑文件夹里是小事,协作时各版本文件在设计师电脑之间漫天飞才是要命的。
常见的三个问题:
1.迭代过程中,版本众多、同步不够及时、经常找不到最新的设计版本,需要耗费时间对齐;
2.多人修改同一部分设计内容时,很难找回需要回溯的历史版本;
3.协作时自己本地就有好多个副本,随着时间推移,很难确定具体版本里的内容;
1.2 解决问题的办法有什么
有经验的设计团队负责人,可以通过制定合理的设计协作规则,反复的会议沟通来解决以上问题,能不能很好解决是次要的,这无疑已经大大降低团队的效率。
对于设计师来说,效率低,就用工具解决。随着Sketch的发展,它已经有版本管理功能了(其实是macOS的Time Machine功能),打开自动保存后,它会保存你每一个历史版本,你也可以随时访问那个历史版本。
但仍旧满足不了我们设计管理协作的全部需求:
1.不能自己控制,对那些重要的记录点进行记录;
2.每次记录无法查看备注的文字提示内容;
3.虽然可以通过Sketch Cloud对文件进行同步,但多人协作方面支持不够好。
除了期待Sketch For Team的功能,还有没有能解决以上问题的工具?当然不是,很早以前我通过Dropbox和Git方式来解决以上问题,但是,除了不能同时操作同一个文档外,它还需要很高的学习成本,团队推行难度高。
放弃使用门槛较高的Git,我们还有业界两大救赎设计师的工具:Abstract和Figma。如果你愿意放弃sketch进行设计,并且项目是从零开始,建议你直接上Figma,一步到位。但大多现实情况是,我们有好多项目历史文件,且都基于sketch进行工作,我们更需要在sketch基础之上的解决方案,那么,Abstract就是我们的最终选择了。
2 项目实例:如何使用Abstract
2.1 定义和概念
2.1.1 理解什么是版本控制
版本控制(Version Control)系统会记录对项目源文件的改动,并存为一系列历史快照。当你需要查看一个之前的快照时,版本控制系统可以显示当前版本与上一个版本之间的区别。Abstract 就是设计文件的版本控制工具,它能记录对每个页面的细节更改。
2.1.2 了解Abstract的关键词
使用Abstract之前,我们有几个概念需要理解。
1. 主文件 master:
设计源文件,single source of truth(唯一的真相来源)。可以有多个主文件,设计交付都以主文件为基础;
2. 分支 branch:
从主文件完整独立复制的一个版本,你可以在此修改、创建、迭代,不会影响到主文件,是我们进行设计协作的作业版本;
3. 提交 commit:
提交就是把变更的设计内容从本地保存版本中写入到分支中;
4. 合并 merge:
合并就是把分支确定修改的内容提交到主库,提交成功后分支随即删除;
2.2 六步学习使用Abstract
了解完原理和概念,我们就可以快速简单的上手Abstract了。
我们可以总结为6步:
第1步:创建项目&邀请成员
打开Abstract,在标题栏选择所处的项目,然后点击「New Project」创建新项目。如果你看到该创建按钮置灰,说明你的角色权限不够。
作为创建者,如果是一个团队项目,你可以邀请其他团队成员进入项目来进行协作,点击「People」,然后点击右上角的「INVITE PEOPLE」即可邀请其他成员。
成员类型分贡献者「Contributors」和查看者「Viwers」两种角色,贡献者可以创建分支、编辑文件、提交修改和更新/合并分支,查看者只能审核、评论、标注、导出文件和无追踪打开文件(Open Untracked)。
第2步:导入或创建新的Sketch 文件
创建项目后,通过「IMPORT SKETCH FILE」你可以直接导入或拖入本地的 Sketch 文件,也可以通过「CREATE SKETCH FILE」直接创建一个空的 Sketch 文件。无论导入还是直接创建,在面板勾选「Use as Library」可以把文件当做 Library 使用,这个功能结合sketch的Symbol非常好用。
第3步:创建新分支(branch)
当你或者团队成员需要对导入的sketch文件进行修改时,需要建立一个新的分支(branch),新分支会从主文件(master)完整独立复制的一个版本,你可以修改、创建、迭代,可以建立多个分支,也可以从分支下创建一个版本作为新分支,在这安全空间里,不用担心对主文件(master)造成影响。
第4步:编辑文件后提交同步(commit)
创建分支后,我们就可以在Abstract打开sketch文件编辑,这里要注意的是,确保做设计时总是从 Abstract 中打开 sketch 文件,这样所有的更改才会被Abstract记录下来。
保存完修改后的sketch文件后,sketch界面底部的「No Saved Changes」会变成「Commit Changes」,点击该按钮即可进行提交至Abstract的同步操作,建议每次提交都写上简短的内容描述,方便团队其他成员查看你提交的历史记录,并了解设计文件所做的更改及原因。
若提交后发现内容有误,你可以通过在Abstract上恢复到上一个同步点,来撤销本次提交同步操作。
第5步:指定成员评审(review)
每次提交同步后,可以很方便地指定团队成员对提交的内容进行审核,当然其他非审核人也可以在这个分支下评论。经过评审后再合并提交到主文件,这个流程在设计协作管理中必不可少。
第6步:将分支(branch)合并到主文件(master)
分支里根据评审意见可以进行多轮设计修改,直至达到团队的交付标准,此时分支可以合并(merge)到主文件进行归档。
一切准备就绪便可点击「MERGE BRANCH」进行合并,在弹出的对话框中输入分支更改内容和其他必要描述便可。
注意提交合并(merge)成功之后,该分支随即会被删除,所有的更改会更新到主文件(master),该项目的团队成员都会收到master更新提醒,并且在他们合并自己分支到master之前,要求他们先下载master的更新内容到本地分支。
这里建议所有的合并操作都需要进行审核,尽可能保证主文件(master)不出问题。
经过以上步骤,你就可以邀请小伙伴们一起通过Abstract进行设计协作啦
2.3 其他闪光功能
设计规范组件化利器
上面提到在导入或者直接创建时,可以把文件当做 Library 使用,要知道平时使用sketch时,如果不将Library文件上传至cloud,symbol是跟随单个sketch 文件进行耦合的。放心,只要对Library文件进行链接,通过Abstract同样可以对组件库进行设计协作,做到Library文件更新,其他设计文件也同步更新,巨好用。
你可以通过在主文件和分支的「Files」页签下,点击「ADD FILE」,通过「Import File..」选择将 Sketch 文件作为 Library 导入,或通过「Create New File..」新建Library 文件。
评论注释
使用过蓝湖和Zeplin的同学们应该知道,他们可以对彼此提交的设计稿进行评论注释,在页面上选择任意区域进行评论,这样做可以方便团队成员互相启发和交流意见。
Abstract同样也可以。
告别自己的文件目录
当我们将工作完全融入Abstract时,可以暂时告别Finder,告别自己满屏的设计文件夹了。当然,前提是你并不会因为将设计文件放在云端,而感到没有安全感。除了可以在项目层级上管理,还可以下沉到某个设计文件的某个页面进行收藏,非常方便我们自己对设计资产进行管理、展示、分享。
3. 总结
3.1 优点:为什么使用Abstract
通过上面的功能讲解,大家应该已经清楚Abstract的优点了。从2017年开始,Git for Designer、DesignOps等字眼频繁出现在业界,开始有一些大厂和设计团体,发现并归纳设计师在网页开发中遇到的问题,通过工具来规范组织运作和协作方式,简单来说这些工具着重解决两点:
1.版本控制与多人协作;
2.可跨部门沟通和即时回馈。
第一点在于加速设计流程中的交付生产效率,让设计团队更专注在做设计上。
第二点则是降低沟通成本,并让设计团队的反馈机制有固定的通道。
版本控制如Plantpp、 Trunk、 Kactus专注于设计文件的版本控制,协作工具如Zeplin、蓝湖则在第二点做得很好,除了Figma,在Sketch的设计生态里,没有一个工具的完整性像Abstract同时解决两个重点。
3.2 缺点
1.卡顿
从Abstract打开sketch文件进行编辑时,如果打开自动保存功能,编辑时会变得很卡,大文件尤甚,特别是手动保存时。
2.网络延迟
不知道是不是因为Abstract的主要市场在国外,除了没汉化以外,大陆访问Ab客户端加载项目巨慢,更别说同步文件了,进度条基本不动。我是通过挂梯子使用的,这无疑提高了门槛。
3.系统和设计文件支持匮乏
仅限于MacOs系统使用,以前只支持Sketch文件,现在测试版也可以支持Adobe Xd了,但还是少的可怜。
3.3 结语和展望
其实稍微了解编程知识的设计师可以看出来,Abstract 是想做设计师的 Github。我对它的期望亦是如此,但目前差距还是蛮大的,除了期待更细致的版本管理功能,和能够像Github一样,成为设计师进行设计项目分享交流的地方。
作为中国设计师,还期望尽早落地中国市场,让大家无障碍地用上这么一款优秀的设计协作管理工具,避免深陷其中花费过多时间精力,带来生产力解放。设计工具日新月异,在Figma和Abstract竞争之时,Sketch For Team也已推出,一浪打一浪,在研究用户体验的设计师群体面前,只有很好地解决所有痛点的工具,才能获得认可。
参考资料:
Abstract
https://www.abstract.com/blog/open-source-modern-design-workflow