BACK >
用这个流程,大幅提高了开发和设计的协作效率
作者:吾诺瀚卓    浏览次数:296    日期:2017-08-10

Airbnb在近期改版了app的设计界面,也花了大功夫改造全新的设计组织流程及协作工具,让Airbnb在世界各地的个服务据点及分公司都能快速、同步且有效率的进行设计流程。

在今年北京的 IxDC 互动设计大会,Airbnb 设计副总裁 Alex Schleifer 也逐一分享了他们如何利用工具及系统,让工程师和设计师高效率地协作。因此我重新为 Airbnb 的设计组织流程做一个总整理,希望值得作为管理和流程设计者的参考。

 用这个流程,大幅提高了开发和设计的协作效率

DLS(Design Language System)

随著 Airbnb 的规模日益扩大,从原本的3人小团队,到目前(至2017年7月)服务范围已遍及191个国家、使用超过40种语言,设计工程部门更是跨足世界各地,除了设计上的需求有增无减,各部门的协作及统合上的效率也显得更为重要。

Airbnb 在公司急遽扩张时设计组织上所遇到的问题:

1. 设计规范的严谨性——除了让品牌调性要能维持一致,也需要各地各部门能在新增功能或未来管理时维持设计语言统一。

2. 跨国语言上的画面呈现——为了产品本地化,使用当地语言是在所难免的。要怎么让「中文」(方块表意文字)和「罗马文字」(拼音线性文字)在同一种画面上能一样呈现最好的视觉效果和阅读性,也是跨国设计中很重要的一环。

3. 多位设计师和相关成员之间的合作——一个产品通常是由团队共同打造出来的,当越多人加入团队时,人与人之间的合作会更加复杂。而不管今天团队或大或小,每位团员多少都会用自己意识和经验来判断及决策。

4. 不同设备上的呈现——想必这是每个 to C 的软件设计都会遇到的问题,当这个产品可以在 iOS、Android、网站等平台呈现时,不同平台又会有不同屏幕大小和分辨率,单单一个画面可能就必须要有十几种屏幕大小呈现才能完整涵盖不同设备。

5. 软件的维护和延续性 ——当软件作为产品,它就不像一般实体产品一样会有制作上的损耗和替代性,即使有团员更换,同一套程式架构和设计语言可能还会伴随著这个产品数年,因此持续性的软件维护和升级也是产品运营中很大的一部分。

Alex Schleifer 曾说过:“We can’t innovate our product if we don’t innovate how we build it.”(如果我们不进行创新,我们就不能创新我们的产品。)

为了能更有效率管理产品,有更多空间专注在制作细节和创意上,因此他们成立了新的工具团队,重新组织设计架构和语言。

设计规范

 用这个流程,大幅提高了开发和设计的协作效率


在订定新的设计语言初期,他们已经大略将基本的样式规范出来,当做 DLS 的基底,包含字体、顏色、icons、间格距离和资讯架构等。

不同于一般规范设计元件(Component)时单独定义元件裡的各个元素(Element),再用那些元素作不同排列组合, Airbnb 思考他们如何以每个元件为单位,创造出一个有机的设计系统,且每个元件可以各自独立发展,也可以与其他元件相互组合。

一个有系统的设计应不是只规范单独的元素,而是一个创造出一个有机的设计生态系统。

系统化的设计元件

 用这个流程,大幅提高了开发和设计的协作效率

每个元件都会有规定摆放的元素(如标题、内容、icon、图片),有时会包含选择性出现的元素,而这些元素都有被规范在 Sketch 及程序里。他们也同时也规范许多通用细节,像是每个元件下方都要有属于自己的分隔线,而不是另外在元件外加上分隔线。

除了设计元件,他们也整理出 App 里会应用到的主要功能画面,并且将规范完的各个元件套进画面裡,分门别类,让每个画面都有属于自己的类别,有了完整的架构,将来要发展更多流程画面时,就可以依循这套模式前进。

DLS 里的画面功能分类,将来发展可以更为有系统

 用这个流程,大幅提高了开发和设计的协作效率

当他们设计完这些元件时,会统一做成程式码形式上传到资料库,因此他们在之后做设计时,可以直接从资料库里同步抓取需要的元件。

那他们是怎么整合设计元件及程式码的呢?这个在下面介绍他们其他强大工具时会有详细解说。

 用这个流程,大幅提高了开发和设计的协作效率

Airshots

当软件服务跨到多国语言时,通常必须是设计师将同一个画面复制多张,将同一个资讯套用不同语言的文字来预览并调整元件;抑或请工程师跑出不同语言的情境,再与设计师校对资讯,这一来一回之间损耗了许多人力跟时间。

而前段也提到多种设备上画面呈现的问题。市面上移动设备有上百种,每款屏幕大小及分辨率不一,各家软件系统更是持续更新,工程师也必须耗费时间在不同环境下作系统测试,让所有功能及画面在每个使用者手上都能呈现出最完好的效果,也是设计工作流程里非常重要的一个细节。

为了因应这些问题, Airbnb 打造了 Airshots。

AirShots 并不是一个设计绘图软件,你无法在上面画任何一个形状,它更像是一个版本控管的工具。

Airshots让设计师及工程师可以在不同设备下快速地找到相对应的设计画面。

 用这个流程,大幅提高了开发和设计的协作效率

而有了这套工具,设计师和测试人员就可以无时无刻地搜寻任何一个功能或画面在任何语言、任何设备、任何系统版本下呈现出来的样子。

举例来说,你可以立即预览一个「资讯页面」在 Airbnb 一年前的某版本下在俄罗斯 iPhone4 的 iOS7 跑出来的效果,也可以快速的找出最新 beta 版的首页设计在最新发布 Nexus 手机裡的 Android 7.0 Nougat 系统呈现出的样貌。而这些结果不是只是屏幕截图而已,而是真的可以模拟运作的功能。

进行本地化软件服务会遇到的不同语言呈现问题,设计师也可以在AirShots快速地预览效果。

韩文(方块文字)对比德文(线性拼音文字)

 用这个流程,大幅提高了开发和设计的协作效率


如果最初使用中文或日文那种表意方块文字来做设计,翻译到了线性罗马拼音文字时,时常会因留白不够而造成元件破格、或是词宽太长而过度换行的问题。

在 AirShots里,它会直接将设计画面里的文字元素串 Google API 翻成任何语言模拟出来,设计师就不用为了模拟不同语言效果做画面调整而创建几十个画布,有效地节省设计流程时间,产品品质管理上也可以大幅提升效能。

而 Airbnb 近期内也将会开放 AirShots 的资源,让软件产业都可以利用此工具来进行设计版本管理,增加工程师和设计师的协作效率。

Airjet

这次北京 IxDC 大会上 Alex Schleifer 也第一次公开他们公司内部使用的另一个设计整合工具——Airjet。

假如今天公司里的设计师遍布全球各地,要能整合并快速预览每位设计师的设计,也是产品组织流程上会遇到的挑战。

尤其像 Airbnb,所有设计都是由 DLS 里以程式码的方式拉下来制作,制作完也必须都同时存为设计档和程式码档回传到资料库,而 Airjet 就能帮他们解决这样的问题。

Airjet 上可以利用档案名称或设计师名字来搜寻到想要的设计画面。

 用这个流程,大幅提高了开发和设计的协作效率

Airjet 比较是一个云端平台,跟 invision 类似的概念,所有设计师的设计档案上传到云端后都会同步到 Airjet 上,因此如果想要快速搜寻某位设计师的某个设计档案,可以直接在上方的搜寻框输入关键字,筛出符合的档案,点进去后可以预览设计档里的所有画布。

 用这个流程,大幅提高了开发和设计的协作效率