海淀网站制作:设计Airbnb的网站之交互式样机练习

2019.08.17 mf_web

126

当您想到一个好的网站设计时,会想到什么?

对我来说,这是Airbnb。我喜欢它的设计,不仅因为它在首页上有漂亮的调色板或引人注目的视频,而且因为它的构建具有良好的用户体验。

但是,您如何为网站定义良好的用户体验?

首先,它必须易于导航和易于搜索。企业网站基本上为客户和潜在客户提供信息。如果您的客户不了解这些信息或无法找到他们正在寻找的信息,那么您的网站将会失败。

海淀网站制作要设计一个优秀的网站,结构和内容需要协同工作,在适当的时间和地点提供有价值的信息。涉及很多协调,而且经常出现问题。你不能急于求成。您必须构建您的网站以适应从头开始的内容。

你如何开始设计一个伟大的网站?构建一个线框,然后迭代到一个交互式模型。

为何选择线框? 

线框图是快速传达概念和试验任何设计的多次迭代的好方法。

线框不是具有实际视觉设计的完整编码原型。它们只是低保真静态设计,允许您快速测试迭代并获得反馈。最好的线框也是交互式的,可以更加深入地测试设计的实际工作方式。

每个网站都有用。线框可帮助设计人员专注于此目的,并确保所有框架,内容和视觉设计都符合该目的。

为何选择线框?

例如,Airbnb是一个旅游网站。

它的独特之处在于通过寻找值得游览的好地方和理想的住宿地点来帮助人们旅行。这就是他们赚钱的方式。他们网站上的所有内容都针对该目标进行了优化,从标题样式到显示列表的方式。

内容是设计的核心。人们使用产品和访问网站的内容-不是因为他们想要设计。当您使用线框图时,您可以自由地进行实验,失败并改进最重要的设计资产的结构。

永恒的UI设计原则

在我们深入了解线框和模型设计练习之前,让我们首先解构Airbnb的网站是如何运作的。

1.注意令人惊叹的图像

当您想到旅行的地方时,您可能不会考虑您的旅行行程或租车信息。

无论你在想什么,它都可能是视觉的。你将住在哪里的图片。所有酷炫景点的图片都可以看到。如果你想旅行,你会想要看图片。

注意令人惊叹的意象

这正是Airbnb在他们的网站上所做的。每个元素都是高度可视的。

所有内容,即房屋清单和旅行地点的建议,将图像优先于文本。相框占据了大部分空间,留下了几个粗体字和一个按钮,供用户操作。

整个标题是Airbnb旅行者在世界各地体验不同文化和环境的视频。这就是人们希望在旅游网站上看到的内容。他们不想只填写一些纯文本表格并预订房屋。他们想在他们计划旅行时旅行。

有目的的图像总是比单纯的文字更强大。

2.简化您的内容

不幸的是,对于想要旅行的人来说,这个过程通常非常复杂。

您必须侦察您想要访问的地点,决定您的旅行地点,找到居住地点,至少计划一些时间,购买机票或计划行车路线等等。这只是一个很大的麻烦。

任何人想要为他们的旅行经历添加的最后一件事是更复杂。

简化您的内容

Airbnb的网站从其页面中删除所有其他干扰,只留下最相关的部分。有一个简单的栏,可用于非常简单的旅行数据输入,一个主机按钮,以及一个干净,整洁的列表供您浏览。列表的任何一侧都有空白区域,而不是广告或任何其他不必要的信息。

这些字体在背景中脱颖而出,单词和句子是相对简单的语言。每个内容块都是简单的图片和粗体名称,而不是对网站首页上的列表供稿中的每个网站进行无限描述。

3.强调最重要的功能

最重要的是,您希望网站最常用的功能最容易访问。

人们来到您的网站是为了什么?

对于Airbnb来说,人们主要是为旅行寻找住房。这就是为什么网站上最大,最引人注目的号召性用语元素是首页中心的预订详情栏。“搜索”按钮的颜色为粉红色 - 红色以突出显示,并且黑色透明条纹穿过行动呼吁后面的背景以强调号召性用语元素。

强调最重要的功能

该网站的其他部分也是值得注意的。

标题中间的大播放按钮带您进入一个视频,显示人们旅行和探索世界,激励那些前来网站寻找旅行的人。页面右上角的“成为主持人”按钮和标题下方的大内容块显示“您可以获得的收益”,这有助于用户主持Airbnb。

所有这些呼吁行动元素都被强调,以加快用户的目标之旅。

模拟Airbnb的网站:5个明确的步骤

构建线框可识别这些不同的部分,并允许您查看一切如何协同工作。使用我们学到的东西,让我们为Airbnb创建一个静态线框,然后在更高保真度的模型上进行分层。

我正在使用UXPin快速创建我们的设计,但您可以随意使用您最喜欢的任何工具。

基本结构

模拟Airbnb的网站:5个明确的步骤

我喜欢从制作页面上所有内容的一般准系统轮廓开始。

这些框称为内容线框,仅代表页面的不同元素。我们只关注信息和视觉层次。

我们为导航栏,标题和主要内容创建了块。这个镂空结构让我很好地了解了所有东西的放置位置,而没有实际规定任何形式的视觉设计。

创建内容线框后,您可以迭代到更详细的线框或直接潜入高保真模型。

如果您正在处理新设计,则需要迭代到详细的盒子和箭头线框,以便您可以测试完整的内容结构。如果您正在进行小型重新设计,您可以直接进入高保真模型,因为您已拥有核心视觉设计元素。

为了方便起见,我们将直接进入高保真模型。

标题和标题

标题和标题

在下一步中,我形成一个标题和标题。这两个要素都非常重要,不应低估。

在标题中,我正在寻找能够立即引起用户注意的大胆而富有表现力的东西。“在那里生活”不同于“在那里旅行”或“在那里旅行”。Airbnb是一种远离家乡的体验,他们的副本反映了这一点。

然后看看副标题。“在191个国家/地区的当地主机上预订房屋并体验像您一样住在那里的地方。”通过这个声明,我告诉我的用户Airbnb随处可用以及体验是什么样的。

标题图像是用户看到的第一件事。如果它与标题冲突或太分散注意力,那么您就失去了用户。图片胜过千言万语,因此您需要正确的标题图片才能适合您的页面。

在Airbnb的案例中,他们有一段视频,向人们展示了探索世界各地的所有奇妙景点和体验。它鼓舞人心,这就是它为用户所做的。

主要行动呼吁

主要行动呼吁

号召性用语应该是您希望用户做的主要事情以及用户想要做的主要事情。它必须是决定性的。不要使用像“继续”这样模糊的语言。营造一种紧迫感。

对于Airbnb的网站,号召性用语既简洁又具体。它要求“位置”,“日期”和“客人数量”字段中的主要信息,然后以“搜索”按钮结束,突出显示红色 - 粉红色以强调。非常快速,并且在网站的背景下非常相关。

元素本身通常低于标题,但对于Airbnb的网站,将它留在标题的底部更有意义。它仍然非常引人注目,但它仍然允许用户首先通过标题视频吸收价值主张。

主要内容块

主要内容块

接下来,我们在页面上创建一些内容。整个网站都需要永远,所以我们只是在首页上创建第一个主要内容块。它应该足以满足我们的目的。

当创建一个单独的标题不占用整个屏幕的网站时,第一个内容块必须引起用户的注意。它几乎是标题的一部分。

对于Airbnb,一个多边平台,他们有两种主要类型的用户:旅行者和主人。因此,对于第一个内容块,它们完全专用于主机。这就是为什么在街区内还有一个“迷你”号召性用语。

主要内容块

导航栏

导航栏

现在让我们清理顶部的灰色框。

不要让导航栏相对较小的尺寸欺骗你。导航栏充当用户的指南。如果他们正在寻找不会立即出现在页面上的内容,那么导航就是他们的第一站。

请注意,导航栏只有4个项目。首先,酒吧的空间有限。如果您在栏上放置了太多项目,则存在用户遇到“ 决策疲劳 ” 的风险。此外,它看起来很拥挤。只在导航栏上放置最重要的项目,以帮助用户“导航”。

Airbnb导航

对于Airbnb的网站,他们有四个按钮:

  • “成为主持人”按钮,与一半用户相关。

  • “消息”按钮,可以让用户知道任何重要的通知或通知。

  • “帮助”按钮,几乎可以用来寻找其他任何东西。

  • 最后,“帐户”按钮,允许用户管理他们的信息。

让它互动

让它互动

最后,我们将使它具有互动性。用户与产品的互动是用户体验的核心。如果产品无法正常工作,则无法对其进行测试。

网站上有很多不同的互动,但是为了时间的关系,我们只是为页面上最重要的元素添加交互性:号召性用语。在进行原型设计时,始终优先考虑对业务影响最大的页面操作。

Airbnb动画

在为模型添加交互性时,您无需使每个小细节都有效。添加足够的交互和反应,使产品感觉真实。此时,您可以使用至少5个用户测试设计,以获得有用的反馈。

对于Airbnb的网站来说,使其互动的过程相对简单。只需在屏幕上添加下拉菜单,当您单击或将鼠标从按钮上移开时,它们会弹出并消失。每当鼠标悬停在搜索按钮上时,我还会在搜索按钮上添加浅色。那个微小的反应向用户表明该按钮确实是一个按钮,并且它肯定可以被点击。

这样做非常简单。我只是添加了某些元素的交互,比如“目标”字段,然后按下预览按钮,看看它实际上会是什么样子,如上所示。

下一步

这就是每个人!

一个快速内容线框迭代到高保真互动模型。现在您已经学会了如何线框化和模拟网站,通过其他练习将您的技能用于测试。

海淀网站制作

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP