​Uber 设计平台的构建和思考

今天早上,我骑了Jump自行车去我在旧金山的办公室。在我写这篇文章的同时,曼谷的一个Uber司机正在用三蹦子载着一名乘客回家;伯明翰一个忙碌的家庭已经用Uber Eats订了晚餐;在丹佛的通勤者正拿着一张在Uber Transit上买的火车票。同时,你很可能正坐在Uber上阅读这篇文章。

​Uber 设计平台的构建和思考

随着Uber产品规模和我们的业务延伸,我们为之设计的变量和地区的格局也在不断发展。每天有超过1千万次行程,我们该如何确保每个人都获得积极,可靠的体验?

答案就是我们的设计平台。通过创建了一个系统——它认可并利用了Uber转向平台的变革,我们为设计师提供了强大的、统一的基本元素库,同时使他们能够自由探索。

​Uber 设计平台的构建和思考

为设计服务的平台

我们以闪电般的速度介绍了Uber的应用和服务。最初,我们的去中心化系统使我们能够进行创新和试验。这使我们有能力引入创新的设计模式,但同时也分散了我们的用户体验。我们意识到,尽管骑行者,驾驶员和食客的用例可能彼此完全不同,但影响他们交互的体验却共享了一些底层的基础模式。通过关注这些常见的模式,我们可以确保不同产品和地区之间的连贯体验。

如今,Uber已成为一个平台:我们提供的各种服务都可以汇入同一个生态系统,该生态系统的优势在于这些服务保持着良好互联。随着平台的发展,大规模设计的流程也在不断发展。

我们需要能够帮助设计师保持同步的工具,通用的设计库,这些工具可以为他们提供不断发展的学习资源,以及在各种用户体验中识别和应用我们模式的方法。

该系统必须能够欢迎即将到来的创新,并且不会破坏大量用户所熟悉的现有体验。

基础设计系统

通过将设计作为基础,我们构建了一个灵活的系统,使设计师在保证设计一致性和设计质量的核心下,能够自由探索。

​Uber 设计平台的构建和思考

Uber的设计系统:基础(Base)

在2018年,我们创建了一个Web React库并将其作为Base Web开源项目发布给公众。我们之所以将其称为“基础(Base)”,是因为它侧重于诸如印刷,颜色,网格和图标之类的基础知识,以及诸如按钮,列表和控件之类的基本元素。今天,它已成为我们所有产品的UI框架。

设计师不应该根据设计系统检查工作,而应该将其与自然的工作流程集成在一起。

设计系统是第一个难题,它应该有助于在保持高标准和一致性的同时加快设计速度。这就是为什么我们认为“基础(Base)”系统非常简单。它具有四种字体类别,三种主要颜色(白色,黑色和一种强调色)以及基于四像素网格的五种核心尺寸。

​Uber 设计平台的构建和思考

就像玩乐高一样:单块砖可以组成很多建筑物。基本的砖块没有变化,但是建造者使用它来创造,释放其潜力。这些组件虽然是基本组件,但它们也可以通过样式替代进行高度自定义,并且可以通过许多不同方式进行配置。

​Uber 设计平台的构建和思考

我们的Styleguide应用程序使设计师可以测试组件的不同配置

将我们的设计连接到统一系统中,可以使我们超越像素范围进行思考。在Uber做设计,首要且最重要的是认识到虚拟世界和物理世界如何相互作用,以及我们的数字能力如何对用户行为和社会产生广泛影响:这就是我们所谓的“模式设计”。拥有界定清晰的设计系统和支持工具,不仅可以帮助设计人员避免在“推像素”中浪费时间,还可以使他们将精力集中于识别这类模式,并进行设计以在现实世界中产生积极影响。

文件和资产

设计语言的简单性需要扩展到其分发和维护方式。

设计师是习惯的产物。当你需要经常离开手头工作来查找参考文档时,聚精会神的状态被打破的体验真是让人很不爽。

过去,我们创建了设计风格指南的内部网站,但它需要维护,以防它可能会过时,并使得您不得不去另一个地方查找相关信息。今天,我们将文档直接写入工具中。

我们选择Figma作为主要设计软件,因为它具有强大的协作功能。因为这意味着我们的工作文件专门存在于云中,所以我们可以始终保证设计文档是最新版本。我们管理着一个全面的库,我们不仅在其中发布和更新UI组件,还在其中编写支持指南,构建行为准则,展示优秀案例。实时系统的一个主要优点就是我们只需要维护一个文件即可:在这里设计师可以找到他们需要的所有内容。

​Uber 设计平台的构建和思考

文档已被纳入我们的设计工具

历史上,Uber每种产品的图标库和图标样式都不同。最初,考虑到骑行者,驾驶员和食客的情况完全不同,这种方法似乎很有意义。但是我们意识到,一套通用的交通和生活方式的标志可在我们所有产品中适用(同时适用于产品内部和外部)。

现在,我们有了一个统一的图标、插图和设计资源系统。Uber的设计团队可以提出新要求,这些要求可以由一个创意团队来完成。

​Uber 设计平台的构建和思考

我们的设计流程不止于创建:从接收请求到提供访问的整个生产链都经过了深思熟虑。

我们的设计资源已用于各种专业的特定需求,包括产品设计,营销和工程。为了节省资源并优化我们的工作流程,我们在维护系统的同时,创建了不同的访问点来满足这些需求。使用Figma的设计人员可以直接在共享库中访问我们的矢量资源。我们努力用关键字标记每个组件,以使搜索变得容易。

营销专家并不一定熟悉Figma等设计工具。他们大多需要PNG。我们建立了一个超快速的内部网站,该网站直接从Figma文件中提取图像,并通过添加到原始组件中的关键字进行搜索。这样,即使是不熟悉设计软件的人也可以访问他们所需的设计资源。

我们已经实现了差异化的渠道来分发我们的图标和插图。

基于人的平台

组件,设计系统和工具只有在人们熟悉它们之后才有价值。

经过数年尝试了各种方法,我们了解到,创造并保持动力的关键是围绕系统发展的社区。

​Uber 设计平台的构建和思考

我们投资的一个小工具是DesignKit。这是一个简单的Mac OS菜单栏扩展程序,可让设计人员快速访问我们的工具。我们可以动态更新DesignKit的内容,这样它可就以始终显示新内容和相关内容。它最方便的功能之一就是能够发送本机推送通知。电子邮件和新闻通讯并不能真正满足对设计系统进行简短的、简单的更新交流的需求,并且电子邮件的数量可能非常庞大。借助DesignKit,我们可以发送快速更新,而不会因不必要的沟通成本而使设计师工作变得繁重。

毋庸置疑,工具无法完成设计

设计最终是通过协作,讨论,经验和辛勤工作进行的。为了及时了解产品设计师的工作方式,我们谨慎地分配时间用于设计评论,一对一会议,研讨会以及许多其他正式和临时的现场交流场合。

​Uber 设计平台的构建和思考

在开放中进行设计

文化也起着至关重要的作用。在Uber,我们鼓励设计师进行开放式设计,不断共享正在进行的工作并进行协作。本着这种精神,我们的设计系统不是我们通过一系列关卡和控制过程执行的一套规则,而是一个包容各方,不断发展的生态系统,每个人都应邀参与其中。我们参与的越多,系统就越好。

我们设计平台的最终目标是使每个设计师在系统方面都可以更好地思考一切——网格,版式,语言,动效,可访问性等。这样一来,每个人都可以一起设计,从共同的资源中学习,并对整个公司的产品质量有共同的了解。

这是一条简单的规则:随着我们每个人提高工作质量并通过这项工作帮助其他所有人提高工作水平,我们的“手艺”将集体变得更好,我们的产品也会变得更好。

本文由 新媒体之家 作者: 交译所 发表,其版权均为原作者所有,文章内容系作者个人观点,不代表 新媒体之家 对观点赞同或支持,未经许可,请勿转载,题图来自Unsplash,基于CC0协议。
1

发表评论