现在,企业比以往任何时候都更关注于创建令人愉快的移动网站体验。

毕竟,谷歌自2015年以来一直非常青睐手机友好型网站更新了排名算法在2015年4月,然后开始索引手机网站2018年3月。

这一点至关重要,因为智能手机上谷歌搜索查询的数量超过了台式电脑和平板电脑已经有一年多了

展望未来,谷歌只会继续提高它认为的移动友好的标准(包括页面加载时间),并在算法更新中反映这一点。所以如果你没有集中精力改善手机体验,你最好现在就把它排好优先级,否则你的搜索排名可能真的会受到影响。此外,HubSpot Research发现一半的美国消费者更多的是通过手机上网,而不是电脑或平板电脑 点击这里下载一个免费的5部分工具包,以帮助您扩大您的移动受众。

为了帮助激励任何移动网站设计更改,您将成为21家真正钉在移动网络体验的21家公司列表。

1.Shutterfly

Shutterfly是一个在线服务,允许用户创建照片书籍,个性化卡和静止等。因为越来越多的人正在拍照,然后使用智能手机访问它们,所以关闭了,识别需要为客户创造一个很好的移动体验 - 而且他们交付。

Shutterfly在他们的手机网站上实现了两个关键目标:

  • 用户很容易就能找到关于他们产品的信息。
  • 他们通过美丽的图像来出售信息。

当你登陆他们的手机网站时,你会看到Shutterfly最新的促销活动,以及一个用于返回用户的大手指大小的登录按钮——这两种功能都无法取代用户体验。

Shutterfly-Mobile网站

向下滚动,用户将看到大按钮,使用户能够轻松地选择他们感兴趣的产品类型。一旦用户单击其中一个选项,他们会用大照片展示闪直蝇有哪些便于浏览。

Shutterfly-Mobile  - 网站-2

2.谷歌地图

每个人都有自己最喜欢的地图或方向应用程序。我的地图是谷歌Maps,无论我是走路、开车、骑自行车还是乘坐公共交通工具,我都会使用它。其手机网站的特别之处在于,它与可下载的手机应用几乎没有区别。

下面的屏幕截图是采取的,他们的移动网站,但如果您熟悉该应用程序,您会注意到他们看起来完全相同的。外观不仅相同,但移动网站具有应用程序的速度和功能。

谷歌地图-移动网站- 1. png

Google-maps-mobile-site-2.png

3.Typeform

Typeform是一家位于巴塞罗那的科技公司,它的使命很简单:“让表单raybet电子竞技变得很棒。”他们的桌面网站设计非常漂亮,通过简洁的复制、高清视频、相关动画和其他更复杂的设计组件来欢迎访问者。

但对于移动用户来说,他们认识到视频和动画等复杂的设计组件可以显著影响页面加载时间以及其他困难。这就是为什么他们实际上删除了许多——这使网站变得更加整洁,并简化了整体的移动体验。手机网站是他们的桌面网站的简化版,设计仍然很漂亮。

typeform-mobile-website

注意它们菜单页上的大按钮——非常适合用手指在手机屏幕上点击。

typeform-mobile-website-2

4.etsy.

Etsy是一个电子商务网站,人们可以在这里买卖古董或手工制品。大多数访问Etsy网站的买家都是为了做以下两件事中的一件:要么是搜索特定的商品,要么是浏览自己感兴趣的商品类别。

移动网站从一开始就迎合两种类型的访客。当您第一次转到移动网站时,您就会选择搜索特定项目,商店或类别的选项。

etsy -移动-网站- 1. - png

在搜索栏下面,在搜索栏之下是展示卷入物品的缩略图,展示您可以在Etsy上购买的一些最受欢迎的东西。移动用户可以以拼贴格式查看这些趋势项目,并且图像足够大,以便它们轻松地用手指轻松点击。

etsy -移动-网站- 2. - png

5.Adrian Zumbrunnen

这是Adrian Zumbrunnen,UX设计师,作家和扬声器的个人网站。当您访问他的网站时,您会立即注意到它的一些非常独特的东西:这是一个会话的网站。

它看起来就像你通常用手机发的短信对话——包括表示他在“打字”的省略号。用户在每次交流结束时都有两个回答选项,所以这有点像“选择你自己的冒险”体验。

虽然手机和桌面网站的体验非常相似,但桌面网站给人的感觉是它主要是为移动平台设计的——这可能是网站未来的发展方向。

adrian-zumbrunnen.gif

如果你不想参与这种对话式的交流,你可以简单地向下滚动查看细节。

zumbrunnen-mobile-site.jpg

6.伊尔特在架子上

相对而言,《书架上的精灵》是一个基于儿童书籍的全新圣诞传统。如果你不熟悉这本书,它的基本前提是这样的:这本书讲述了圣诞老人的童子军精灵的故事,他们被圣诞老人派去照看世界各地的孩子,并向圣诞老人报告。

除了这本书,父母还可以买一个精灵小雕像,他们会巧妙地把它放在家里的某个地方,让孩子们可以看到。在圣诞节前的每一个晚上,父母都会把小精灵搬到房子周围不同的地方,向孩子们“证明”,这些小精灵是真实存在的,总是在照看着他们。

当你第一次到达Elf on the Shelf的网站时,你会看到实际上有很多种类的Elf on the Shelf产品你可以购买。但与强迫用户单独浏览每个产品不同,网页设计师将每个产品包装成一个大的、有吸引力的瓷砖,描述每个买家的旅行目标,并在前面显示特色商品。

你不是在买你自己的小精灵或小狗,你是采用它。在这么小的屏幕上,这是一种真正强大的体验。

elf-on-shelf-mobile  - 网站

7.Buzzfeed

Buzzfeed是一家为您的raybetapp病毒内容而raybet电子竞技闻名的新闻公司和流行的测验。在通勤期间,它也恰好是我最喜欢的娱乐来源之一。

那你觉得我上下班的时候会在哪儿查看BuzzFeed呢?你猜对了:在我的手机上。BuzzFeed知道他们的很多访问者都是通过手机访问他们的网站,所以他们非常小心地为他们的移动读者创造一个流畅的体验。

当你进入BuzzFeed的移动网站时,你首先看到的是一些最受欢迎的内容,它们以简单的拼贴式格式显示,使用大图片,用手指轻轻点击即可。

buzzfeed -移动-网站- 1. - png

对于对特定类别感兴趣的用户,在屏幕的左上角有一个可点击的菜单,列出了所有的文章类别。

buzzfeed -移动-网站- 2. - png

8.Evernote

Evernote是一个允许您存储笔记,图像和Web文章的应用程序,然后在所有设备上访问它们。因为用户倾向于下载应用程序或访问网站,包括桌面计算机,智能手机和平板电脑,包括桌面计算机,智能手机和平板电脑,因此Evernote获得移动体验是必不可少的。

如果你在台式电脑上浏览Evernote的主页,你会注意到它的设计有多干净。这些价值陈述简短而切中要害,图片有助于品牌定位,但不会使页面混乱。

evernote-mobile-website-2

当你浏览Evernote的手机网站时,你会发现它们的色彩和整体品牌风格完全保持不变。该公司的raybet电子竞技手机网站干净、简单,而且丝毫没有降低应用的价值。Evernote的转换路径很明显,它的中心口号是:“免费注册。”

evernote-mobile-website

9。Pixelgrade

Pixelgrade的桩主题允许您正确展示您的服务和以前的工作,并不会牺牲移动设计。主题针对移动设备进行了优化,同时同时在内容的预期消息和美学上进行了优化。

pixelgrade-mobile-website-design

10.赫芬顿邮报

《赫芬顿邮报》是一家著名的新闻媒体,报道的内容从政治、时事到娱乐和科技无raybetapp所不包。他们手机网站的独特之处在于,他们为手机用户稍微改变了标题,这样他们的内容更容易被浏览。

如果你比较桌面网站和手机网站,你会发现手机网站首页上的文字更少。标题更短,更易于理解——非常适合在小屏幕上略读或阅读的人。

huffington-post-mobile-website

和BuzzFeed一样,你会在屏幕的左上角找到一个可点击的菜单,列出所有的文章类别。

huffington-post-mobile-website-2

11.表达

快车是一家迎合年轻男女顾客的服装店。因为他们的用户通常会访问他们的网站来浏览服装,所以他们的网站必须包含服装的大而清晰的图像——尤其是在移动设备上,当用户需要用手指点击屏幕上的商品来点击购买信息时。

Express的移动体验比大多数在线零售网站都更进一步。如果你用手指从左向右滑动一幅显示衣服的图片,图片就会改变,这样你就可以从不同的角度看到衣服。换句话说,用户不需要加载另一个页面才能看到同一件衣服的多张照片。

在以下两个图像中查看右上角的图像,以查看当您向一侧滑动时如何更改:

express-mobile-website-design快递 - 移动网站设计-2

12.全国保险

全国保险公司提供保险和金融服务。你可能会认为一个金融公司会有一个非常复杂的网站,但在移动raybet电子竞技领域,全国保险公司(Nationwide Insurance)的用户体验非常简单。

当你登陆Nationwide的手机网站时,你会在顶部看到两个标签,让你可以立即识别为两种类型的用户之一来定制你的体验:个人用户或商务用户。或者,你也可以“找代理”或“找财务顾问”来了解更多关于他们服务的信息。

虽然只有这两个选项,排除了Nationwide更深入的功能,但对于使用小屏幕的访问者来说,这是一个更容易的体验。这是一项伟大的技术,可以引导潜在客户走向正确的方向,如果他们还不是帐户持有人,并且是第一次访问网站。

nationwide-mobile-website

13.Squaredot.

Squaredot.是一家总部位于爱尔兰都柏林的代理机构,帮助营销人员建立他们的入境营销策略。他们的手机网站色彩丰富,简单,易于导航。

最让我印象深刻的是他们主页上令人赏心悦目的颜色组合和三维纹理,以及在每个区域中心的大点,你可以滚动到。

squaredot-mobile-website

这些点是动画的呼叫动作按钮,攻丝下面的屏幕下方将产生一个弹出页面,了解Squaredot对营销方法的更多信息。

squaredot-mobile-website-2

14.Zappos

Zappos是一家网上鞋类和服装供应商,以其一流的客户服务而闻名。他们在手机上的首要任务是帮助用户轻松搜索他们在网站上寻找的物品,所以他们在手机网站的顶部和底部都放了一个很大的搜索栏,让用户非常容易地搜索。

这是他们的手机网站顶部的样子:

zappos -移动-网站- 1. - png

15.美国广播公司

ABC是一家电视广播公司,以《单身女郎》、《新人》和《综合医院》等raybet电子竞技热门节目而闻名。访问ABC桌面网站的用户会看到这些选项和更多选项。查看电视网的电视时间表,查看最新的艾美奖得主,观看一些你最喜欢的电视节目,甚至看看与这些节目相关的娱乐新闻。raybetapp

但由于如今几乎每个家庭都是多屏幕家庭,ABC知道它在移动设备上的体验应该既简单又方便观看。

当你在移动设备上访问ABC网站时,你会看到一个黑色的背景,这是一种类似剧院的体验,每一个你可能想要流媒体的节目都有瓷砖。用户可以浏览这些选项,并根据类型、字母顺序、热门节目以及你在电视流媒体平台上也能找到的类似类别点击任何他们想要的节目。

abc-mobile-website

16.精益实验室

精益实验室是一个营销机构,创造吸引人的,响应,高转化率的网络解决方案。(他们也ABC的HIT电视剧鲨鱼坦克)。他们在为手机用户提供流畅的体验方面做得很好,特别是在设计技术方面,他们强调“10倍公式”——这在用户登陆手机网站的几秒钟内就能看出来。

请注意,精益实验室的移动网站如何使用比例,对比度和字体来区分其页面的某些元素。您甚至可以看到山上的微妙照片,设置为网站的背景,引出高度你的品牌可以接触到精益实验室的客户。

lean-labs-mobile-website

如上所述,他们的核心“10x”公式清晰可见,并被分解成简单的步骤,便于手机用户浏览主页,与相关的图标匹配

精益实验室移动网站与循环CTA学习约10x公式

17.SAP

SAP是一家管理业务运营和客户关系的企业软雷竞技苹果下载官方版件公司。raybet电子竞技该公司通过压缩信息(特别是一个重要的视频案例研究,可在移动设备的主页上播放)来增强其移动体验。

SAP-Mobile-网站

SAP还将他们的一些行动号召组合到滑块中,而他们的桌面网站将这些cta横向布局。这有助于简化操作,这样手机用户就不会一下子被大量信息淹没,同时也确保所有的cta都不会太小而无法阅读。

SAP移动网站与呼叫行动滑块

18.只有

Kissmetrics为企业提供分析软件。雷竞技苹果下载官方版在他们的主页上,有很多信息解释了软件与推荐相同的信息。雷竞技苹果下载官方版

但是,他们的移动网站显示了一些不同的方式:在移动设备上,他们网站上的信息显示在具有替代黑暗和灯模块的列表中。这使得用户可以轻松浏览该页面而不会丢失文本。

kissmetrics-mobile-website-2

他们还让表单中的文本和字段变得更大,更容易阅读:

KISSmetrics移动网站,有供用户登录的大表单字段

19.idig营销

IDIG营销是一个发展和通信提供商。他们的移动网站与他们的桌面网站类似,但我特别喜欢他们如何将互动心脏图标纳入他们的博客帖子,因此用户可以“喜欢”他们的帖子。

这是模仿Instagram和Twitter上的“Like”心形图标,熟悉这些平台的手机用户很容易识别。

iDig-Marketing-Mobile-site-2.jpg

20.IndiaMART

IndiaMART是印度最大的在线B2B市场,其简单的基于分类的手机商店使其成为我们在电子商务行业见过的最好的手机网站之一。

该公司的raybet电子竞技手机主页将搜索栏放在了最上方,所以如果你的浏览器无法找到你想要的东西,你可以随时返回到自定义搜索。

但是,Indiamart通过项目类型排序每个项目,可以轻松地仔细阅读其数字过道,然后子类型在每个项目类型中——这是一个聪明的设计举措,鼓励用户进一步探索您的网站。例如,在“服装和服装”下,你可以很容易地点击瓷砖,查看更具体的服装类别,如男装、女装,甚至西装、纱丽和类似的印度本土服装。

IndiamArt-Mobile-网站

在IndiaMART的浏览瓷砖下面,该公司有自己的raybet电子竞技趋势部分特别是人们最关注的商品——类似于社交媒体平台上的趋势新闻列表。raybetapp每个趋势类别都有一个移动友好的呼叫行动按钮,允许用户获取他们感兴趣的产品的价格报价。

indiamart-mobile-website-2

21.Melyssa格里芬

Melyssa Griffin是博客和企业家的内容营销顾问。她的网站,建立使用WP引擎从一个登陆页面开始,该页面会根据访问者作为企业所有者的具体需求定制其体验。

Melyssa鲜艳的黄色背景还能让页面上的每一项都显得突出,帮助用户了解他们可以(也应该)一眼就点击的地方。

melyssa-griffin-mobile-website-design

想要更多关于如何优化您的业务与a创意的移动网页设计?下载免费的移动营销工具包如下。

手机营销指南
新的文字-动作

最初发布2018年10月16日星期五晚上8:15:00,2019年8月07日更新

主题:

响应设计