大连公司网站建设：设计Airbnb的网站一个互动的运动模型

当你想到一个 良好的网站设计 ,你的脑海里会出现什么?

对我来说,Airbnb。 我喜欢它的设计,不仅因为它有一个漂亮 调色板 或者一个引人注目的视频在首页,但是,因为它是建立良好的用户体验。

但你如何定义为一个网站用户体验好吗?

首先,它必须是易于浏览和容易搜索。 总的来说,网站为企业提供客户和潜在客户的信息。 如果你的客户不理解信息或不能找到他们正在寻找的信息,那么你的网站将会失败。

大连公司网站建设设计一个伟大的网站结构和内容都需要共同努力,提供有价值的信息在正确的时间和正确的地方。 有很多的协调参与,经常出错。 你不能着急。 你必须建立你的网站以适应内容的。

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

为什么线框?

线框图 是一个伟大的方式来快速沟通与多个迭代的设计概念和实验。

线框图是不成熟的编码与实际视觉设计原型。 他们只是低保真静态设计,允许您快速地测试迭代,得到反馈。 最好的线框也是互动的,允许更深刻的测试的设计实际上是如何运作的。

在线HTML电子邮件模板编辑器

与 明信片 你可以在线创建和编辑电子邮件模板没有任何编程技能! 包括100多个组件来帮助您创建自定义邮件模板的比以往任何时候都要快。 现在试一试 免费!

了解更多其他产品

每一个网站都是一个目的。 线框图帮助设计师专注于这个目的,并确保所有的框架,内容和视觉设计目的对齐。

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

其单一的目的是帮助人们找到好地方参观和伟大的地方。 这是他们如何赚钱。 在他们的网站上的一切都是针对这一目标进行了优化,从他们的头的风格展示他们的清单。

是设计的核心内容。 人们使用产品和访问网站内容 - - - - - - 不是因为他们想要的设计。 当你线框,你允许自己自由实验,失败,和改进的结构设计最重要的资产。

永恒的UI设计原则

在研究这些线框和模型设计练习,让我们首先解构Airbnb的网站是如何运作的。

1. 带来惊人的图像

当你想到一个地方去旅行,你可能不会考虑你的行程或汽车租赁信息。

不管你想什么,很可能视觉。 你会住在哪里的照片。 图像的所有酷的景象。 当你想旅行,你会想要看到照片。

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

所有的内容,这意味着房子上市和建议的地方旅行,优先考虑图像/文本。 相框占用大部分的空间,留下几个大胆的单词和一个按钮用于用户采取行动。

整个头一个视频的Airbnb旅行者体验世界各地不同的文化和环境。 这就是人们想要看到的旅游网站。 他们不想只是填写一些纯文本形式和书。 他们想去旅行,旅行计划。

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

2. 简化你的内容

不幸的是,对于喜欢旅游的人,往往是非常复杂的过程。

你去寻找你想要的地方去,决定在你的旅行中(s)的位置,找到一个住的地方,至少一些你的时间计划,购买机票或计划行驶路线,等等。 它只是一个大麻烦。

最后有人想增加他们的旅行经验是更多的并发症。

Airbnb的网站排除所有其他干扰从他们的页面,只留下最相关的部分完好无损。 有一个简单的酒吧非常简单的数据输入,主机按钮,和一个干净的,而是清单列表供您浏览。 有空白的清单,不是广告或其他不必要的信息。

坚决反对他们的背景和字体的单词和句子是相对简单的语言。 而不是无休止的描述每个站点提要的列表在网站的首页,每一个内容块是一个简单的图片和一个大胆的名字。

3. 强调最重要的功能

最重要的是,你想要你的网站最常用的功能是最方便的。

人们来到你的网站?

Airbnb,人们主要是来寻找旅游房地产。 这就是为什么最大的,最明显的行动呼吁元素在网站上预订的详细信息栏中心的首页。 “搜索”按钮是酒色呈彩色的脱颖而出,和一个黑色的透明杆穿过行动呼吁背后的背景强调行动呼吁元素。

网站的其他部分也引人注目。

大播放按钮中心的头带你去一个视频显示人们旅行和探索世界,激励那些来到这个网站寻找旅行。 “成为一个主机”按钮在页面右边的角落和大内容块下面标题显示“你可以赚”举办一个Airbnb帮助用户感兴趣。

大连公司网站建设所有这些行动呼吁元素强调加快他们的目标用户的旅程。

模拟Airbnb的网站:5清晰的步骤

构建一个线框识别这些不同的部分和允许你看到一切工作在一起。 使用我们学到了什么,让我们创建一个静态Airbnb线框,然后在更高的保真度模型层。

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

的基本结构

我喜欢先制作的一般贫乏的概述页面上的所有内容。

被称为 线框的内容 ,这些箱子只是代表页面的不同元素。 我们只专注于信息和视觉层次。

我们开拓块导航栏,标题,和主要内容。 这个场大病结构给了我一个好主意的一切都会放置不开任何形式的视觉设计。

一旦你创建内容线框,你可以直接迭代更详细的线框或潜水高保真模型。

如果你工作在一个新的设计,你想重复一个详细的方框和箭头线框,以便您可以测试完整的内容结构。 如果你工作在一个小的设计,可以直奔高保真模型既然你已经有了核心视觉设计元素。

为了私利,我们将直接高保真模型。

标题和标题

在下一步中,我形成了一个标题和标题。 这两个元素是非常重要的,不应该被低估。

的标题我寻找一些大胆而富有表现力,将立即抓住用户的眼球。 “活”不同于“旅游”或“访问”。 Airbnb是离家的经历,和他们的副本反映了这一点。

然后看看副标题。 “书191年房屋从本地主机+国家和经历这样的地方你住在那里。 ”这句话,我都告诉我的用户Airbnb是无处不在的,经验是什么样子。

标题图片是用户看到的第一件事。 如果它与标题相冲突或过于分散,那么你就失去用户。 照片是值得一千字,所以你需要正确的头部图像,以适应您的页面。

Airbnb的情况下,他们有一个视频,展示了人们探索所有的奇妙的世界各地的风景和经历。 这是鼓舞人心的,这就是它的用户。

主要的行动呼吁

文字-动作应该是最主要的你想让你的用户和主要用户想做的东西。 它必须是决定性的。 使用模糊的语言不像“继续”。 创建一种紧迫感。

Airbnb的网站的文字-动作既简洁又具体。 要求提供的主要信息的“位置”,“日期”,和“客人数量”字段,然后用“搜索”按钮结束,重点强调了红粉。 很快,而且很平易的上下文中的网站。

元素本身一般符合以下标题,但对于Airbnb的网站,更有意义让它底部的头。 它仍然是非常明显的,但它仍然允许用户通过头视频首先吸收价值主张。

主要内容块

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

当创建一个网站的标题本身并不需要全屏,第一块的内容必须吸引用户的眼球。 这几乎是头的一部分。

Airbnb,具有多重平台,他们有两个主要类型的用户:旅客和主机。 所以,第一块内容,它完全致力于他们的主机。 这就是为什么还有一个“迷你”块内的文字-动作。

导航栏

现在让我们来清理,灰色盒子顶部。

不要让导航栏的规模相对较小,愚弄你。 导航栏为用户作为指导。 如果他们寻找的东西不能马上出现在页面,导航是他们的第一站。

注意,导航栏只有4项。 首先,酒吧空间有限。 如果你把太多的物品栏,用户遇到的风险”决定疲劳 ”。 此外,视觉上看起来拥挤。 只把最重要的项目将帮助用户的导航栏“导航”。

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

· 

“成为主机”按钮,这是有关他们的用户的一半。

· 

· 

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

· 

· 

“帮助”按钮,这是几乎任何他们可能会寻找。

· 

· 

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

· 

这使得互动

最后,我们将使它互动。 用户交互和你的产品是用户体验的核心。 你不能测试你的产品如果没有实际工作。

在网站上有很多不同的交互,但为了时间,我们就最重要的元素在页面上添加交互性:文字-动作。 原型时,总是优先考虑页面操作,大多数业务的影响。

当添加交互模型,你不需要让每一个小细节的工作。 添加足够的交互和反应使产品感觉真实。 在这一点上,您可以测试设计用最少的5用户有用的反馈。

Airbnb的网站,使其互动的过程相对简单。 只需添加下拉菜单在屏幕上,让他们弹出和消失当你点击或移动你的鼠标按钮。 我还添加了一个光色素搜索按钮,当鼠标悬停在它。 分钟的反应表明用户按钮的确是一个按钮,它绝对可以点击。

它很简单。 我只是添加某些元素相互作用,如“目的地”字段,点击预览按钮,看到它会是什么样子,正如你所看到的。

下一个步骤

这就是每个人!

一个快速内容线框叠成一个高保真互动模型。 现在您已经了解了如何线框和模拟了一个网站,试探你的技能与其他练习。