恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
从很棒的设计中学习:安飞士租车服务
0.0°
2014-12-25 自译外文 经验/观点 原作者: Tom Kenny 举报 2331 22 12 0

首先欢迎每月一系列很棒的网页设计分析,在这里我剖析了一个好的网站,并会告诉你,是什么让这个网站看上去很棒的。

上次去冰岛旅游,我们从英国安飞士租车网站租了一辆车,那是一个梦幻般的体验。他们的网站是目前为止我用过预订租车
最棒的网站。

设计是美丽的,如果有了可用的经验,它会以更好的方式变的更棒。所以事实上,它有助于经验。视觉设计是设计过程的一
个重要组成部分,而不是仅有的一部分。

 

安飞士租车服务网站 http://www.avis.co.uk/

 

 

目前与我的妻子在环球旅行。下个月我们将在新西兰,我会通过该网站租在奥克兰的车。

虽然我不知道这个网站做设计决策的原因,但我会去解剖它,并展示给你为什么我喜欢它。

主页

打开网站你立刻会看到美丽的群山道路,和写着“解锁世界”的文字以强调其作为世界品牌的地位,或向您介绍这个
没有意识到的事实。

在我们继续之前,让我来解释这个文字更多一些意义。这段文字非常短,它没说如“租一辆车”类似这种平淡的口号。
它邀请你去探索世界,安飞士能帮你做到这一点。这是一个聪明的用字“解锁”,它有2个意思:1.指解锁你的车;2.指你的
道路通往世界各地。

覆盖在辽阔的世界风景图片上面的是一个突出的搜索栏,是呼吁采取行动。在这里你要做什么呢?租一辆车!
安飞士已得到这个聚焦,我喜欢它。

搜索栏在此页面上是一个突出的元素。但它不能分散太多的注意力,因为还有下面的内容,从整个视觉上来说搜索栏是次要的。
很明显,用户至上。

它有亲近感,是我见过的最完美的全方位的网页设计。为什么这么说呢,让我们继续......

选择位置

正如你从上面的动画中看到,奥克兰有多个位置,我们可以租车。关于这件事,作为动画显示,选择不同的地方会导致地图
之间位置移动。这个细节是能区分好设计和一流设计之间的差异。立刻我看到彼此间的位置在哪里,不用让我做额外的事情。

如果没有选择的动画,我将不得不浏览地图或其他资料查看自己相对于其他的位置。

我们将飞到奥克兰,从机场拿车。

 

选择日期和时间

只要你选了你的位置,将会友好的出现以下日期画面:

 

 选择任意日期

这是一个很棒的选择任意日期的页面。网页的整个宽度都是它,它显示了三个月。旅游需要几周或数月,我们需要一辆车。
这个日历至少覆盖大部分时间。简单而有效。

同样值得指出的是,区域旁边的位置显示了日期和时间。拿车和放车的时间日期,你也可以任意选择和改变它。我唯一的
抱怨是页面的可点击不明显。

选择一个取车时间

 

 选择时间也得到了同样的对待。安飞士能很方便地显示您所选择位置的开始时间,这是一个很棒的使用情境。我不必四处
搜索开始时间。

当与我的一个客户合作时,我们发现,拆分登记表为多个步骤,能提高转化率。这点并不完全一样,在预订汽车的过程中
需要多个步骤,但安飞士比传统汽车预订网站有更多拆分选择步骤。

选择一个日期的过程中,减少干扰和提高可用性。也提高了转化率。

你能看到这个过程中它是如何使用帮助的。那就是它拆分成易于管理的数据块。租一辆车都有一些必要的规定,安飞士的
这种方式能很轻松地引导您完成整个过程。

选择汽车

新车上市 

该车的列表页是一个漂亮的页面。你可以看到:

除了看到以上很棒的页面,它的使用也是奇妙的。正如之前所说,这是一个很好的例子将可视化转为可用性的设计。

怎么看汽车的显示方式。它们都具有一致的风格和外观,所以你可以滚动列出内容,轻松地进行比较。显然,一些工作
的目的是用一定的方式拍摄每个车,或在图像编辑时有同样的风格。但无论哪种方式展示,目的是让每个车看起来都不错。

试想一下,如果所有的车都有角度或不同的照明。这肯定会分散用户的注意力。让他们都朝向同一个方向,就减少了页面的
视觉复杂度。同时还要注意如何指向关于这款车的信息。这个设计流程最好是从左至右的结果,以引导用户在正确的方向。

 

排版和视觉层次

网页设计被认为95%的是排版,令人印象深刻的是通过创建漂亮的版式达到视觉层次。

页面使用Avenir Next字体使整个网站的排版看上去不错。正如你看到的,标题使用了大的字体及副标题完全大写,这一切
看起来不错,很好用。

使用的排版也很容易比较各个列表属性。例如,您可以迅速地滚动列表,注意每辆车的尺寸:小,中型,大型,等等。
同样价格也是,浏览价格列表也是很舒服的。

 

Colour颜色

我个人很欣赏安飞士网站所用的颜色。一个简单的例子,当鼠标从标签上移开,颜色会发生变化:

 

当滚动页面去搜索要选择的车,你可以看到号召行动的色彩。
如按钮,这种号召行动的色彩不能有太多,太多会导致分心,这是显而易见的。一旦你点击选择了一辆车,就进入了下一步。

一个奇怪的交互

本页面唯一奇怪的是,当你点击汽车图像时,它滑到右侧并隐藏信息。这看上去似乎没有意义,
但它不是一个你必须使用的交互,所以你可以不理会它。

车的详细信息

点击车的详细信息的链接为您提供有关汽车的更多信息,在整个页面全屏加载。它没有加载其他页面作为立即回击,
而是带你回到车的列表视图。

这款车的详细信息带给你更多的信息,关于汽车租赁,它看上去并不是一个美丽的全屏布局。你可能会认为,在号召性的
行动中红色地板太分心。但这是通过一些测试确定的,所以看起来不错,这点可以肯定。

超越汽车的选择

我要停在这里,因为这是网站的核心体验。当然,结帐的步骤很重要。

 

移动端

正如现在你也知道,手机是网页设计的一个极其重要的组成部分。最近看到手机端的使用反超pc端。而且超过300万
的注册用户大多都通过移动设备购物。

上图为Avis.co.uk在iPhone上的展示

在安飞士重新设计上,不会令人失望。正如你所期望的,它明智地按比例缩小移动屏幕尺寸。

在移动端,该车的详细信息页面上,保持后退按钮始终可见,当你滚动页面时,就方便返回。

竞争对手

我没有花太多时间在安飞士的主要竞争对手上,我将简要地谈谈他们,因为它会进一步证明为什么安飞士网站是如此
精心设计。

1. Hertz网站

似乎Hertz网站感兴趣的是,尽可能的促使你到达。想象自己走进商店,马上有人上来给告诉你他们所能提供的,尽可能在你刚进门的那一刻。在真实的世界里,它是没有店铺的,为什么在汽车租赁网站中它算不错的?似乎还不是。

 

Hertz网站主页

该车列表页面不显示同一类型的车。他们试图将更多信息转化为更小的空间。当你有足够的空间呼吸时,那么,
就等于给了用户应有的尊重,这句话反着说也是同样是对的。

 

2. Europcar网站

Europcar公司的网站与安飞士网站最接近的是:聚焦点在搜索栏上,但他们太热衷于推动东西给你。


Europcar公司主页

他们知道你访问网站时,很可能想要一辆车,但网站的显示远远超出了这个阶段,为什么是显示澳大利亚?这是没有意义的。
如果他们想去澳大利亚,他们会选择澳大利亚,然后再向他们展示推广。在这一点上,你知道他们是去澳洲,现在他们是
接受澳洲的推广,所以更明智的展示了澳大利亚。

整体的体验是几乎没有重点。

3.Enterprise网站

是的,这确实是Enterprise的网站,甚至超越了沉闷的视觉设计和800px的宽。有人提醒我这是哪一年,似乎时光倒转了。

Enterprise主页

首先,你必须从下拉列表中选择一个国家,当你选择其中之一时,页面刷新并不快,甚至在快速的与互联网连接。

 

看看当我选择了英国伦敦,发生了什么。

Enterprise的可怕位置列表

对竞争对手的判决

对不起我看看别处的安飞士。我感到羞愧,请不要告诉任何人。

其他注意事项

目前,至少据我所知,英国的网站在重新设计。美国网站在文案方面没有新的设计。他们在推出全球网站前先在英国网站测试。

我没有做任何的用户测试,也不知道什么会影响新设计的安飞士网站的性能。我已经联系他们,看他们是否愿意分享性能数据,
但还没有收到答复。如果我从安飞士得到回应,我会更新的。

放弃

我没有与安飞士的隶属关系。我用的仅是他们的租车服务网站,为我们节日去冰岛,印象非常深刻。

更加努力

安飞士网站简化汽车租赁过程中的每一个可能性,使用户在快乐的使用。简化是很难做到的,但话又说回来,安飞士
的口号是“我们更加努力”。

翻译的不好,请大家多多见谅。

更新:2014-12-25

收藏

22人已收藏

viewworld909

越努力,越幸运。

  • 31

    作品

  • 307

    粉丝

  • 48

    关注

  • #每周临摹#ps制作文字长阴影
  • 在Photoshop里设计一个圣诞节的电子邮件通讯
  • 如何在ps里创建扁平图标
  • 5个思路来设计网站上看到的大块横幅

    猜你喜欢

      2014-12-25 自译外文 经验/观点 原作者: Tom Kenny 举报 2331 22 12 0

      从很棒的设计中学习:安飞士租车服务

      0.0°

      你确定要举报从很棒的设计中学习:安飞士租车服务

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年12月25日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      12
      22
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录