构建一个可视化设计语言：Airbnb全新设计系统背后的故事，公司越大越要提高效率

本文作者：考利木·萨里宁（KARRI SAARINEN），Airbnb首席体验设计师，他在Designer News论坛上开设了“Ask Me Anything”专栏，你可以问他任何关于设计语言系统的问题。

在软件开发和设计行业里工作的设计师们，经常会被要求提供一次性解决方案。有些时候，我们会受到时间约束，不得不在deadline前赶紧完成工作；还有些时候，我们只是还没有确定一条能够继续前行的道路，只好退而求其次选择这种方式而已。这些一次性解决方案本质上并不坏，但如果它们不是建立在一个坚实的基础上，到最后，我们就会发现自己不得不去还那些欠给技术和设计的债。

可视化语言就像其他任何一种语言一样，如果语言不能让大家使用，也无法分享和被理解，那么误解就会增多。当一款产品受到用户欢迎，或是一支团队逐渐成长，各种问题也会随之出现。

设计往往依赖于系统，设计的重点，其实就是如何用一种可扩展和可重复的方法去创造产品。从潘通色卡到菲氏螺钉，这些系统让我们能够管理各种混乱的设计，继而创造出更出色的产品。数字化产品，可以说是应用这些设计系统的一块沃土，但目前来说，似乎还没有得到人们的重视。

一个统一的设计系统能够让开发设计变得更好、更快。更好，是因为它能带来一个有粘着力的体验，让我们的用户能够轻松理解；更快，是因为它给了我们一个能够协同工作的共同语言。

为什么我们需要设计系统

在过去的几年时间里，Airbnb的业务得到了飞速增长。目前我们的设计部门由十几个功能和产出团队组成。显然，我们需要更加系统的方法来引导、应用大家的集体努力。当我们在公司内部认识到一些问题，我忽然发现，这些问题可能也是整个软件行业里存在的普遍问题：

一、太少的约束

相比于其他设计设计规则，软件设计的实际约束很少，这导致了当我们遇到某个问题或挑战时，都能找到很多不同的解决方案，假设没有较好的约束，那么很容易会造成 用户体验 脱节。作为产品主管和设计师，我们必须要创建属于自己的约束条件，并严格执行。

二、太多设计师和利益关系人

软件通常是由团队员工开发的，有时开发团队的规模会相当大，设计团队会希望保持用户体验的连贯性，但随着团队人员数量变得越来越多，这个问题就会变得愈发棘手。因为随着时间的推移，无论一开始的体验是多么的连贯，也不管团队规模是否足够小，不同的人总会带来不同的解决方案和设计风格，继而导致产品体验被分散化。

三、太多的平台

我们的产品需要支持不同的设备和不同的平台。确保功能和设计保持同步需要花很大功夫，也意味着同一个设计工作，需要在各种不同的平台上重复测试很多次。

四、软件连续性

关于软件，另一个稀罕的事情就是，虽然它经常被看做是一款产品，但其实并不会向传统消费品那样有磨损，更不会轻易被替换。即便是一家历经数次产品转型的公司，多年之前编写的代码和设计，如今依然会在很多地方存在。这意味着你需要有持续的软件维护和升级。

准备开工

要解决上面提到的这些问题，同时保持我们Airbnb快速的决策过程，我们建立了一个由设计师和工程师组成的小团队【注2】。我们明确了日程表，预留了一个外部工作室（就在Airbnb总部外面），准备全身心投入设计、开发这套设计语言系统（DLS）

我们为这套设计语言系统设定了目标，就是要开发一个更加美观，且易于访问的“无障碍”设计语言。通过定义明确和可重复利用的组件，我们的设计将会统一支持各种平台，继而驱动更高效率。为了专注于我们的工作，我们减少一些初始工作，把支持系统首先定位到了两个最主流的原生平台上——iOS和安卓操作系统。

我们这样开始工作的，首先我们把之前许多设计审核了一遍，然后打印出来，不管是老设计还是新设计。我们把所有这些设计，按照顺序平铺在一块面板上，因此就能看到哪些体验在什么地方，以及为什么会出问题，同时也更清楚地看到需要在哪些地方做出改变。我们认为，启动工作的最好方式，就是首先追踪眼前的问题。我们每一个人都专注于重新设计屏幕或产品领域，并且创建了一些指导原则，在我们独立设计的同时，确保协作方向一致：

统一性： 每一块设计，都是更大整体中的一部分，因此必须站在更大范围的角度上，给予系统积极正面的贡献。设计功能不应该是孤立的，也不能是离群的。

普遍性： Airbnb在全世界使用，用户更是一个全球性的社区。我们的产品和可视化语言应该受到用户欢迎，同时也要易于访问。

标志性： 我们专注于设计和功能，因此在这两方面，我们要即大胆又清晰。

对话性： 呼吸对生命如此重要，我们要把同样的设计理念融入到产品里面，通过更容易理解的方式与我们的用户进行交流、沟通。

打好基础

实际上，在基于打好基础这一设计精神之前，我们已经创建了一个基本风格指引——我们称之为基础。有了这个基础，可以粗略地定义我们的排版，色彩，图标，间距和信息架构。可以说，这个基础是指导我们工作不可缺少的东西，它让我们有了一个统一的方向，也让我们各自有足够的空间独立探索一些创造性设计解决方案。这种打好设计基础的方法，让我们觉得每一个人都是在同一理念下一起工作。我们在每天工作结束的时候，会复核协作完成的工作任务，从中发现很多创新设计类型。必要的时候，我们会纠正一下设计方向，再启动定义我们标准化组件。

创建组件

传统上，许多设计风格指导，会把设计组件看作是原子组件，之后用它来构建更复杂的分子。理论上，这种设计方法适用于连贯且弹性系统设计开发，然而在实际中，我们经常发现那些可以重复使用的所谓“原子组件”会以很多不同方式被使用，继而创造出很多不同的“分子”。我想再次提醒的是，这种组件设计方式就像是门洞大开，创建出各种杂乱无章的用户体验，导致系统更难维护。

我们并没有创建这种独立的“原子组件”，一开始，我们就把组件看作是一个生命体元素，他们有自己的功能和个性，是由一组属性所定义，可以与其他模块共存，也可以独立发展。一个统一的设计语言，不应该只由一组静态规则和独立“原子组件”组成，而应该是一个不断进化的生态系统。

举个例子，我们的用户头像元素一开始是根据一个样式指南来设计的，但最终应用到平台上的时候，会发现有数百个头像排列，这样会造成每次更新头像的时候都非常困难。“我们如果想要解决这个问题，必须确保更新之后不会影响其他页面功能。”

每一个组件都是由必要的元素来定义，比如标题，文本，图标和图片，有时组件还会包含可选元素。这些元素都是在Sketch文档和代码中定义的，我们要求每一个组件都有一个分频器，而不允许分线器，然后在试图逻辑中将所有元素设置为可见或隐藏。

编译组件库

在创建这些设计组件时，我们收集了很多组件并汇总到一个称为组件库的主文件中，在整个设计过程中，我们都会引用这个组件库。此后一到两周时间里，我们发现在设计迭代过程中，通过使用组件库能让我们生产力产生巨大的飞跃。直到有一天，我们在设计一款紧急原型产品的时候，忽然发现只用了几个小时就做出了近50个页面设计，如此高的效率完全得益于我们领先的设计框架和组件库。

随着组件库里内容越来越多，我们开始把有类似元素的独立组件进行组织归纳进“artboard（画板）”，这些画板之后会根据不同类型进行再分类，包括：导航，移动标签，内容，图片和专业。

我们还专门为手机操作系统（iOS和安卓）创建了一套组件，并使之适应平板电脑规格。平板电脑组件和移动手机的基本相同，而在技术层面上，代码基本上是以两种不同的风格出现一次而已。这些系统组件还可以在外观和定位配置上变化，有些像是网页的响应式设计。设计师可以使用一个共同组件来设计某款设备，然后轻松应用到不同的设备屏幕上，不管是iOS还是安卓设备。

对于平板电脑，我们创建了一些简单布局的概念，比如Focus Views（聚焦查看），它可将内容聚焦到页面、内容模型、和两列网格布局上。

所有组件和视图都是用我们Airbnb自己的技术视图框架构建的，该框架可以处理这些风格、状态、以及适应度。【注2】

经验教训

我们知道，构建可视化设计语言是个极具挑战的项目，它意味着我们应用程序中很多视图需要重新设计和重新开发。但是我们依然努力实现了设计系统创建，并在4月17日发布了全新的App应用。正如其他任何项目一样，我们希望有些事情做的与众不同。

不是所有组件都是对等创建的。在绝大多数App应用里，总有一些组件使用的频率较高，也因此会重复出现。对我们Airbnb来说，这些组件是App里的网格行（或是单元格）。回想起来，我希望我们可以花更多时间去思考如何设计网格行，并设计出更强大的样式集合和组件。最后，我们会用不同类型的设计方法去解决一些矛盾。

Sketch：我们期初尝试在Sketch里创建这些组件作为符号，但最终导致了混乱。甚至到现在，我们的Sketch文件有时依然很难维护。如果未来有机会，我们希望可以找到更好的方式去维护和创建新组件。【注3】

文档系统：由于这个项目要求我们在很短时间里完成，结果导致了我们忽略了一些文档处理流程。由于缺少文档，设计过程会无可避免地产生一些迷惑。就像编程一样，他们创建的文档系统是开发过程中最重要的一个环节。或早或晚，文档系统都要去做，重要的是，创建文档的过程，也会帮助我们在做决策的时候更加顺畅。

归纳总结

创建一个可视化设计语言是个无比艰巨的任务，需要我们产品团队付出巨大努力才能完成。但是我们发现，开发我们自己的设计语言系统是非常有价值的，它值得我们投入，因为会给整个产品，甚至整个公司带来巨大飞跃。

由于设计语言和代码通常是可以被共享的，我们现在几乎可以同时在所有原生平台上构建并发布产品功能，极大地提高了效率，开发工作因此也变得更快。我们的产品工程师，现在可以专注与产品的功能逻辑，再也不用为编写视图代码而费心思了。不仅如此，如今Airbnb公司的工程师和设计师可以分享共同语言。

设计师们也对我们的系统感到非常兴奋，它能让产品审核人员专注于设计的实际概念和体验，而不是抓一些边角料的东西，比如填充，颜色和类型选择，等等。Airbnb设计语言系统让我们对产品的视觉风格有了共同的礼节，并简化了对单一系统的贡献。这个设计语言系统也让我们所有人能以更快的速度和更低的成本开发产品原型或对产品想法进行验证。

我相信，在这些系统的帮助下，未来我们可以更专注于实际用户体验，并且开发出我们想要的概念。

注脚：

[1]:许多伟大的项目都是团队努力的结果，我在此处想要感谢太多人，但我想特别鸣谢一些人，毕竟少了他们，我的这个项目就无法完成，他们是： Bek Stone,?Adam Michela,Amber Cartwright,Alex Schleifer,Michael Bachand, Paul Kompfner, Sean Abraham,Salih Abdul-Karim,Michael Sui，以及设计和工程团队的其他同事。

[2]:我会让Airbnb的一位工程师详细编写更多关于设计语言系统技术方面的内容描述。

[3]:在我们的例子里，我们想要人们可以改变符号的大小（例如，你需要在一个标题里添加更多内容）。如果你需要调整或是碰巧要调整某些东西，Sketch（<3.5）会自动调整每一个符号实例的大小。这不仅会让你多花上一定时间，同时也会永久性地打乱你的文件（有时甚至undo操作都不起作用）。我们最终把组件放到了Layer Groups里，让用户可以复制粘贴。

在文件更新过程中，我们也使用了git/github开源库。我们手工创建和添加新组件到主库的Sketch文件，然后提交“pull request（合并请求，开源库Github的一个代码合并功能）”，此时会有变更日志并产生文档变化的png输出。完成之后，Sketch文件最后会进入到一个可被分享的Box文件夹，该文件夹和Sketch模板关联，这样每个人都可以立刻访问新组件了。（翻译：Tino，编辑：picar）

本文由创业邦（微信公众号：ichuangyebang）发布，转载请注明来源，违者必究。