15个超赞的移动网站设计(上)
2015-04-10
移动端网页设计越来越多地影响到用户体验与搜索排名。这些国外优秀案例,或许能带给你灵感与启发。

  现如今,企业比以往更专注于创造令人愉悦的移动端体验。因为80%的互联网用户都在使用智能手机上网搜索。

  更重要的是,运营们将迎来一个巨大的变化——谷歌在官方博客表示,他们将从2015年4月21日更新算法,将“移动端友好度”作为搜索排名的一项参考因素。更新后的算法,给谷歌移动搜索结果带来的影响会比熊猫算法和企鹅算法更大。

  换句话说,如果你之前忽视了提高网站的移动体验,现在是时候考虑一下了,否则网站的搜索排名可能会受到影响。

  为了给即将对网站进行设计改造的童鞋们一点启发,这里准备了15家公司的案例,他们在移动网络体验上做的很棒。


1) Shutterfly

  Shutterfly为用户在线创建相册、个性卡片、存储等服务。随着越来越多的人拍照并通过手机访问网站,Shutterfly意识到必须为客户创造一个足够好的移动体验才行,他们做到了。

  Shutterfly已经在移动端网页完成了两个关键目标——①让客户轻更加松获得产品信息;②用好看的图像传达这些信息。

  当你访问他们的移动端网站,会看到菜单项已经升级为醒目的按钮,占据了下半页的屏幕,这样使用者能够快速选择出感兴趣的选项加以了解。

shutterfly shutterfly

  点击了其中一个选项,会展现出许多图片让你轻松了解Shutterfl包含哪些内容。


2) Google Maps(谷歌地图)

  每个人都有自己喜欢的地图app,我最喜欢的是谷歌地图,无论在走路、驾驶、骑行、还是乘坐公共交通我都会选择它。谷歌地图移动端网页最独特的一点是,它跟谷歌地图app几乎没有差别。

  下面的截图来自于谷歌地图的移动版网页,如果你熟悉他们的app,你会发现两者看起来完全一样。不仅是外观相同,移动端网页甚至具备与app相当的速度和功能。

google maps google maps


3) Etsy

  这是一家电子商务网站,你可以在上面购买或出售古董和手工制品。大多数的用户来到Etsy的网站会做两件事情:要么寻找一个特定的物件,要么就在一个感兴趣的类别浏览物品。他们的移动端网站从一开始就满足了这两类人的需求。

  打开移动版首页,首先是个检索栏,可以查找特定物品或店铺。检索栏下面是潮流物品推荐,可以看到Etsy当前流行产品的图片。

etsy etsy

  用户可以选择列表或是图片拼贴布局来浏览这些潮流物品,展示图恰好方便用户轻松点击查看详情。


4) Elf on the Shelf

  “架子上的精灵”是由一本儿童读物延伸而来的相当新的圣诞习俗。这本儿童读物讲的是圣诞老人的侦查精灵,他们会去全世界的家庭里关照小朋友们,并向圣诞老人汇报情况。家长在购买故事书的同时,可以选购一个精灵公仔,放在家里某个孩子看的见的地方。圣诞节前的每个晚上,家长会把精灵公仔放在家里的不同位置,来让孩子们相信侦探精灵是真实的,而且一直在看着他们。

  当你第一次访问Elf on the Shelf的移动首页,你会惊诧地发现有很多种不同的类型的精灵。机智的网页设计师没有使用那种长长的列表——而是采用了从左向右滑动翻阅不同选项的方式,更加适合在移动端浏览。

elf on the shelf

5) BuzzFeed

  BuzzFeed是一个以病毒式传播内容及流行测验见长的新闻网站。它也正是我上下班时最喜欢的娱乐来源之一。你猜我在途中如何浏览BuzzFeed?当然是用手机!

  BuzzFeed知道很多用户都用手机来访问他们的网站,因此他们为移动中的用户精心准备了顺畅的阅读体验。

buzzfeed buzzfeed

  最流行的内容被做成大图推荐,如果你感兴趣某个类别,屏幕左上角有一个包含所有类别的菜单。


6) Evernote

  Evernote很多人都用过,是保存笔记、图片、网上的文章的应用,可以从不同的设备上访问,台式电脑、手机、平板——正因如此,做好移动体验至关重要。

  如果你在台式电脑上浏览Evernote的首页,你会看到它的设计非常简洁。使命简洁到位,图片也恰到好处。Evernote移动版网页,这种风格被完整保留,干净,简单,完全不影响app的价值体现。

evernote evernote


7) Huffington Post(赫芬顿邮报)

  赫芬顿邮报是一家覆盖时事、政治、娱乐等各个方面的新闻媒体。为了方便移动端的用户阅读,新闻的标题做了一些细微调整,这正是它移动端网站的独特之处。

  如果你将PC端的版本与移动端的作对比,会发现移动端上的首页文字更精简一些。标题更短更易理解,非常适合小屏幕阅读。

huffington post huffington post

  以上就是我们喜欢的案例。如果有其他一些移动端网页深受你喜爱,欢迎写邮件到 hi@lingxi360.com 与我们分享哦!

相关阅读:15个超赞的移动网站设计(下)