Airbnb的设计之道：明晰与优雅的设计语言

想要说服成千上万的人们允许陌生人住进自己家中，这可不是件容易的事，想要创造一个充满活力的全球旅行者社区，就更加困难了。Airbnb 在开始设计自己的应用时，就希望给用户创造一个温馨好客的环境，就像是见到一位和蔼的房主一样。通过使用 Material Design，Airbnb 以直截了当的方式进行沟通，创造出了一种清晰易懂的视觉语言，让充满多样性的用户群体都能普遍接受。这种对话式界面为 Airbnb 赢得了超过 8 万 4 千个五星级评价，以及 2016 Material Design 聚焦高效奖项。

统一各平台 UI

△ Android 和 iOS 系统统一使用底部导航栏，为不同的平台提供相同的舒适体验。频繁使用的功能，如 “已保存的项目” 、“已完成的旅行” 、“消息” 等，将总是显示在底部导航栏上。

Airbnb 首先定义了一套核心特质，用以指导设计工作。为了吸引来自不同地区和不同语言背景的旅行者和房东，应用必须让人感觉是统一的、通用的、对话式的以及形象化的。这意味着，基本任务的执行效率需要提升，还需要确保每个设计元素都能融入系统全局之中。Airbnb 在 Android 系统中，放弃了左侧的导航栏，使用了 iOS 与 Android 通用的底部导航栏，从而更好地统一跨平台使用体验。Airbnb 首席设计师 Karri Saarinen 向我们解释，这种转变是如何强化公司的愿景的：

“让 Airbnb 在任何平台上都具有鲜明识别特征是至关重要的。在设计上，我们希望在跨平台使用时能有归属感，并尽可能在导航、系统图标、上下文操作和互动等重要元素上遵循各个平台的惯例。” —— Airbnb 首席设计师 Karri Saarinen

用文字和动效让沟通更清晰流畅

△ 在进行点击后，照片会动画化并放大，让客人在浏览时可以获得更好的观感。

无论用户身处何地，使用何种语言，简洁的系统图标、按钮和布局都会给人带来 “好客而易用” 的观感。“我们应用很大程度上依赖着文字和排版。” Saarinen 说道。设计团队更倾向于通过文本和翻译来促进房东和住客之间的沟通，而非完全依赖那些可能会引起歧义的图标。用户可使用 27 种语言来进行沟通，这使得对文字内容的强调将带来清晰明确的使用体验，在整个布局使用不同的文字大小能够帮助用户快速的辨别内容的层级关系。而非衬线字体 Circular 的使用，则传达出了一种友好而温馨的气氛。

△  “预订” 是 Airbnb 应用的主要功能之一。使用浮起的按钮来进行这一操作，在视觉上强调了它的重要性，也为整个布局增添了新的维度。

动效传达了交互行为本身的调性，同时也是一种促进与用户沟通、让产品活跃的方式。通过在快速响应的提示中添加动效，可以强化主 - 客双方的互动，同时为用户提供视觉反馈以便于他们在搜索中完成自己的目的。

△ 子母式界面切换（Parent-to-child navigational transition）

比如通过使用子母式界面切换，这种通过动效形象地传达出从高层级到细节视图的切换过程的模式，就能创造出更为连贯的用户体验。

△ 共享元素的 UI 切换（Shared element transition ）

Airbnb 还利用了共享元素的 UI 切换，将图片动画化，并对用户的关注焦点进行引导。在进行点击后，照片会动画化并放大，为每条列表锚定清晰的居住空间视图。Saarinen 将这种过程比作浏览精美的旅游宣传册。

“Material Design 的动效指南对我们来说极为重要，它可以帮助我们了解如何才能做出更优美准确的动效。 —— Airbnb 高级设计师兼动画师 Salih Abdul-Karim

使用图片创造独特个性

△ 通过对照片的强调和充分的留白，人们可以更好地专注于关键信息。

由房东提供的照片是 Airbnb 体验的关键组成部分。无论是大沙漠中的乡村小屋，还是城市里的阁楼居所，丰富的图片都会为用户打开一扇通往目的地的窗户。图片为先，意味着让 UI 拥有鲜明而齐整的外观，让用户可以轻松舒适地在不同的界面之间切换。

独特的设计魅力使其屡获殊荣

Airbnb 拥有来自全球的忠实用户，他们无不赞赏这一应用的简洁和易用特质。Airbnb 拥有 4.3 星的评级，超过 13 万 8 千条点评，曾被 Google Play Store 选为 “编辑推荐” 与 “顶级开发者” 应用，更荣获 2016 Material Design 聚焦高效奖项。Airbnb 的设计师们使用 Material Design 作为框架来清晰地表达自己的品牌特质，创造出了一个氛围友好、功能专注的应用，赢得了全球各地旅行者和房东的广泛赞誉。

想要打造像 Airbnb 般具有独特设计魅力的应用，不妨点击 “阅读原文” 再好好复习一下 Material Design 的使用方法，相信您也可以做到的！

推荐阅读：