建立一个基于新的设计系统的视觉语言
从事软件开发和设计工作,我们往往需要提出一次性的解决方案。但有时我们会受到时间的限制,有时我们只是还没有商定一条明确的设计方向。这些一次性的解决方案本质上并不坏,但是如果他们不是建立在一个坚实的基础之上,我们最终会发现自己不得不偿还债务积累技术和设计。
视觉语言就像任何其他的语言一样。如果不被共享或者不被使用它的每个人理解，那么这种语言在应用中就会出现沟通上的误解。随着产品或整个团队的壮大，这种模式带来的问题也很可能逐渐突出。
设计一直是系统构成的主要部分，它是一种使产品达到可扩展性的和可重复性的方式。从潘通色卡到飞利浦螺钉，这些系统使我们能够管理混乱,创造更好的产品。数码产品可能是应用这些系统最高明的产品,但常常没有被人们意识到。
对创建一个统计的设计系统而言，更好、更快的原则是至关重要的。更好是说一个能够结合用户在现实世界中经验的产品更容易被理解。更快是因为它为我们提供了一个共同的语言来工作。
一、为何我们需要一个设计系统
Airbnb这些年经历了大量的增长。目前我们的设计部门包括近十几个功能和结果团队。我们也越来越意识到我们需要更好的系统的方法用来指导和提升大家的工作效率。在我们意识到这些挑战的同时，我相信对软件行业来说，这无疑是更大的病症。
1、约束太少
相比其他设计学科，软件设计几乎没有物理约束。这就允许了任何一种挑战可能都将有多样的解决方案,但同时会造成用户体验的脱节。因此作为产品所有者或设计师,我们必须创建并遵循自己的约束。
2、设计师和利益相关者多重多样
软件通常由团队来做，甚至有时是很大的团队。这就造成要创造连贯一致的用户体验，其难度会随着越来越多的人加入团队而呈指数增长。另外，无论团队协作多么一致或团队多小,不同的人总会提供新的解决方案和设计风格,导致体验产生分叉。
3、平台多样性
我们需要使我们的产品应用于多种平台和设备。要保持产品功能和设计在多平台间的同步及体验的一致性，通常需要在不同平台上去做很多重复性的工作
4、软件是连贯的
软件的另一个不同之处在于，虽然它可以被认为是一个产品，但他不会像传统的消费品那样真的磨损，甚至被更换。即使公司和其产品本身发生了大变，多年前的代码和设计仍然会存在于产品的许多地方。这就要求不断的维护和升级。
二、迅速开工
为了迅速解决我们前面提到的挑战，我们组建了一个小组的设计师和工程师。我们清理掉自己的日历备忘，留在公司总部之外的一个工作室，专心于设计创建这套设计语言系统（DLS）。
我们为DLS设置的目标是创建一个更美丽和无障碍设计的语言。我们的设计应该统一平台，通过定义好的可重用的组件来驱动更高的效率。为了集中我们的努力,我们减少了系统应用的初始范围，我们优先选定了客户端平台：Android和IOS。
我们开始重新审视和打印出那些我们以往的设计稿。我们将这些设计稿按照顺序依次粘贴在一个板子上，这样我们就能找出哪块的体验遭受了什么样的破坏以及哪块需要作出改变。我们认为,最好的开始方式是直面的处理问题。我们每个人都分别专注于那些需要重新设计的产品页面或是某些块，很快我们就建立起了一套指导原则：
1、统一性
每一块设计都是一个更大整体的一部分,应该对整体的表现有正向的提升作用。不应该有孤立的特性或离群值。
2、通用性
Airbnb在全世界受到广发的应用。我们的产品和视觉语言应该被所有用户认可并理解。
3、形象化
我们同时专注于功能性设计和视觉性设计，我们的产出物应该有自信清晰地引导用户的认知。
4、会话式
我们使用了移动呼吸式的表现手法让用户能够轻易地理解我们的表达。
三、基础的奠定
在开始设计这个系统之前,我们已经创建了一个基本的风格指南,我们称为基础部分。这个基础松散定义了我们的字体、颜色、图标、间距和信息体系结构。它是指导我们沿着统一的方向工作的基本要素,同时允许我们在单独的个人空间内探索多样的创意设计解决方案。这样我们觉得我们都共同努力,朝着同样的想法工作。回顾我们集体工作的每一天,我们开始看到这个系统模式渐渐浮现出来。我们在必要时采取纠偏措施,开始定义标准化的组件。
四、创建组件
传统上,许多风格指南定义组件作为原子组件,然后用于构建更复杂的分子组件。理论上，这种做法能很好的构建连贯灵活的系统。而在实际中，事实多是这些可复用的组件被用在多种方式上，允许创建出各种各样的分子组件。其结果往往是造成了各种杂乱脱节的体验，使系统难以维护。
没有依赖于单个的组件，我们转而开始考虑把组件作为一个活的有机体的元素。它们有功能和特性,是由一组属性定义构成,可以与其他元素共存，也能独立起作用。
一个统一的设计语言不应该仅仅是一组静态规则和单个组件构成;它应该是一个不断发展的生态系统。
例如,我们的用户头像元素可能最初被一个风格指南定义,但在最终使用它的平台上可能承受数以百计的排列,使得它在后续部分很难更新成功。如果我们想要改变这两种东西,我们可以肯定,我们不打破其他屏幕。
每个组件被定义为所需的元素(如标题、文本、图标和图片),和有时可能包含可选的元素。这些元素在Sketch设计稿和代码层都受到定义。不是让分隔线独立于组件起作用,我们要求每个组件有一个分隔线,能够基于视图逻辑上可见或隐藏。
一、构建组件库
我们在创建这些组件的同时，我们把他们收集在一个叫做库的根文件，这种做法贯穿整个设计过程中。一两周后,我们开始看到通过在反复的设计中使用库文件所带来的生产力上巨大飞跃。一天,当最后的原型放在一起时,我们的团队已经能够使用我们的库文件提供的框架在短短几小时内创造近50张屏幕设计稿。
随着库文件的扩张,我们开始组织各个单独的组件到画板（包含类似的元素）。这些画板最后由一系列常规的分类组成：导航，移动文本，图片和特色。
我们创建了一组用于手机的组件(iOS和Android),并适应他们的平板电脑尺寸。在平板电脑上的组件在很大程度上跟手机上的相同的，知识在技术层面上代码要完成两套不同的样式。类似于为网页设计而生的响应式设计方案，这些系统组件在外观和位置上都可能多种多样也能解决。设计师可以先使用常规组件设计一屏，之后可以很容易地适应IOS和Android下的不同屏幕尺寸。
对于平板电脑,我们创建了一个简单的布局概念，如焦点视图，它关注于页面内容，模态窗口和网格布局。
所有的组件和师徒都是用我们自己的技术视图框架构建的，它用来处理这些风格，状态和自适应性。
二、经验教训
我们知道这是一个具有挑战性的项目。这意味着重新设计和重新构建大我们应用程序中的大多数视图。我们设定目标创建一个视觉语言系统并于4月17日发布新应用程序。对于任何其他项目,我们希望我们所做的不同。
1、并不是所有的组件都是平等的
在大多数应用程序中都是有一套组件，经常重复。对我们来讲，这些组件就像表格中的行元素。回顾过去,我真希望我们花了更多的时间来考虑这些组件并产出一套强大的模式和组件库。事实上在最后，我们出现了很多不同类的矛盾现象。
2、Sketch
我们最初试图在Sketch中创建这些组件作为草图符号，但最后导致一片混乱。即使是现在，我们的设计文件有时仍难以维护。下一步，我们能找到更好的办法来维护和创建新组件。
3、文档
这个项目要求我们在限定的时间内完成，导致我们忽视了一些文档记录的过程。文档的缺乏带来了一些本来是可以避免的困惑。像编程一样，创建良好的文档的至关重要的。对我们而言，这则会是一个迟早要做的重要事项，以促使我们在做每个决定时有更清晰的思路和参考。
三、结论
这是一个巨大的里程碑式的任务，虽然我们的许多产品团队付出了许多努力，但我们最终发现创建我们的设计语言系统是非常值得的投入，也是迈向未来的巨大一步。
自从设计语言和代码常常共享以来，我们现在可以在所有客户端平台上大致同时的构建和发布功能。而开发进度也明显更快了,因为产品工程师可以将更多的注意力放在写功能逻辑而不是视图代码上。此外，工程师和设计师现在共享一个共同的设计语言。
设计师们也对这个系统特别兴奋。它使产品人员更加关注实际的概念和设计体验，而不是填充，颜色和类型的选择。这套设计语言为我们提供了一个通用的理解我们视觉风格的语言，对整个团队工作都产生了一个流线型的影响。这个系统还使我们所有人能够更快的实现高保真原型和任何想法的呈现，而成本却更低。
我相信在这套系统的辅助下，我们可以更集中精力在关注实际的用户体验和我们想要传达给用户的概念和想法上。
网友评论