你或许并不熟悉Airbnb的竞争对手们。不，或许应该说，你并不熟悉Airbnb的任何一个竞争对手。当然，这是有原因的——Airbnb在全球民宿租赁、预定市场已经蓬勃发展了10年，但至今仍未找到任何一家能与之抗衡的公司。

 

Airbnb的成功很大程度上得益于它的设计团队：经过他们的不懈努力，成功的使Airbnb在用户体验方面超越了其他提供类似服务的预定平台。

Airbnb’s Landing Page（Airbnb的登陆页）

作为一名设计师，多年来我一直对Airbnb如何应对来自产品设计的挑战，以及如何推出一款能让人皈依的产品感到惊讶。所以在这篇文章中，我会试着找出，是什么让他们的登陆页与众不同，为什么它们的产品设计效果如此出众。

1／视觉清晰&极简主义

“我在设计上努力做到两件事：简洁和清晰。伟大的设计往往源自于此” — Lindon Leader

“Lindon Leader，平面设计师，艺术大师。最著名的作品之一是联邦快递(FedEx)的logo。”

Airbnb在登陆页中使用了颜色对比和阴影效果后，它用户界面基本上被分为两层：上层为卡片层（卡片中包含了说明文字、广告宣传语和按钮），而页面的其余部分被视为背景层。

这样设计的好处是，用户可以轻松将上层（卡片层）识别为可交互区域。整个页面不会有信息过载的情况出现。由于他们提供了一条清晰的交互路径，因此访问该页面的用户不会有过多的认知负担，提供了一条清晰的交互路径。

 

“在面向用户的设计中，减少用户实现其目标所需的认知负担至关重要。”

 

通过预测技术，我们可以很清楚的看到，Airbnb与Booking的登陆页在视觉清晰度方面有明显的差距：

通过VisualEyes插件分别测量Booking和Airbnb登陆页面的视觉清晰度

更高的清晰度有助于用户快速浏览页面信息——视觉复杂性和典型性是度量交互设计界面能否有效的服务于用户的两个必要标准。

 

（界面或产品）越复杂，使用时就需要越多的认知负荷。认知负荷越高，用户参与度就越低，产品的转化率和盈利能力也就越低。

• Part1 小结：Airbnb在登陆页上设置了一个互动焦点。因此，用户可以非常明确他们需要“把眼睛放在”哪里才能搜寻到信息

2／ 双Z模型

Z模型(适用于从左到右阅读的人)

人类先天具有一种自然的“阅读行为模式”，当有视觉刺激时，就会不自主的使用这种阅读模式。这种特定的模式“追寻”用户的眼球运动模式，能够指导设计师在设计页面时，更合理的放置视觉元素。

 

Airbnb在设计中使用了Z模型。而且是两次。

通过利用这种布局，Airbnb的设计师建立了一个简洁的视觉层次。这种布局更有利于传达信息并引起用户注意。下图展示了Airbnb登陆页面的眼动热力图：

使用VisualEyes插件在Figma中生成的眼动热力图

通过上图可以看出，在特定情况下，使用Z模型的区域吸引了用户的最大注意力。通过右上方的图像我们可以看出，卡片区域的受关注程度是背景图片的三倍。而卡片区域右下角“搜索按钮“的受关注程度，几乎是背景图片的十倍。

• Part2 小结：Airbnb通过优秀的设计，预先建立并强化了用户的浏览路径和互动方式，成功的将大部分用户的注意力转移到“搜索按钮”上，进而引导用户“深入”使用他们的产品。

3／ 启动效应

“启动效应“：在无意引导的情况下，一种刺激对后续刺激的反应。” 

换句话说，启动效应是指利用一个人的记忆或心理关联，去影响他对即将发生的事情的预期和行为。

人们在与Airbnb网站互动时看到的第一张图片

几乎所有的网站和产品都会或多或少的使用“启动效应”来刺激他们的用户。上图为Airbnb登陆页中使用的背景图，用户看到图片后会产生联想并且激发启动效应。Airbnb的设计团队很会找图片，他们选择了最符合公司目标群体的图片当作背景，所以他们可以确保用户的情感被激发出来。

当你看到左边的图片时，你会想到哪些词？也许是：舒缓的，平静的，清新的，独特的，无忧无虑的。

• Part3 小结：Airbnb的设计师们使用精心挑选过的图片来激发用户的情感，并通过“启动效应”刺激目标受众。而这些情感可能与公司或产品想要传达给用户的的预期体验息息相关：“你将会在一个很棒的地方度过完美假期”

4／ 简介，有力和有效的语言

Airbnb登陆页面中，文本的存在承担着两个主要目的：

 

验证用户首先访问网站的原因——即 “我应该去什么地方”

引导用户设定目标——“现在我应该搜索我想去的地方”

在进行消息交流时，使用简洁明了的语言在Web设计中至关重要，因为这可以确定用户不会误解你的产品。请记住，交流是双向的：

“我们沟通的结果并不取决于我们说多少，而是取决于我们的理解程度。”— Andrew Grove

 

可以看出，Airbnb在登陆页设计上在避免使用不必要的术语，并选择了目标受众能够轻松理解的词汇。

Part4 小结：经过精心挑选的文字，可以快速透露出产品的具体的信息和价值。

-----------

写在后面：富有洞察力的设计从来都是以人为本，并驱动人的情感和行为。Airbnb的设计团队发现了非常巧妙，甚至可以说是无障碍的设计，成功的引导了用户在其网站上进行操作。用户体验的框架设计的非常细致，它在提升交互效率的同时，也把用户目标牢记于心。

原文：https://uxdesign.cc/refining-a-color-palette-for-dark-mode-1a8bb78e7338

作者：Thanos Dimitriou

译者：大然子