文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏

移动设备比预期增长得要快。谷歌董事长长埃里克•施密特(Eric Schmidt)。

在移动设备上良好运行的作为网站建设的重点已被提及很多年了。毫无疑问你很清楚移动友好网站提供的好处。但即使所有严肃的网站已经响应,设计师还为移动设备改进他们的网站时犯错误。

在这篇文章中,我们将列出一个让网站移动化的清单。

响应设计是必须的

随着人们越来越多地在移动设备上使用搜索, 我们要确保他们能找到的内容,不仅是相关的和及时的,而且也很容易阅读和在较小屏幕上交互。谷歌的发言人说到。

第 1 段(可获 1.49 积分)

在2014年移动互联网用户的数量与桌面互联网用户的数量持平。此后,桌面互联网用户数增长放缓而移动用户数量持续攀升。

 

[摩根士丹利(Morgan Stanley)的移动互联网用户与桌面互联网用户增长统计数据。 来源: Gigaom]

作为回应,网站已经能提供更好的移动体验。从实际来看,这意味着网站已经采用了响应设计。

自2015年4月以来,谷歌在搜索结果中一直将移动友好的网站排名更靠前。

第 2 段(可获 1.3 积分)

在一个网站寻找结帐按钮或购物车是多么令人沮丧。 这些网站是令人沮丧,因此谷歌在搜索结果中进行了重新整理。

总之,如果一个网站对移动设备不友好,它的流量会下降,用户量降低,其保留指标将使开发人员郁闷。如果你想让现代智能手机用户访问你的服务,那么你的移动互联网体验必须是流畅和愉悦的。

这里有四个步骤来创建一个漂亮的移动网站。

第 3 段(可获 1.26 积分)

移动友好检查清单

创造力是伟大的,但不要试图成为超级创造性,并使用所有的设计原则。当用户看到太多的对象在微小屏幕上显示不同的颜色和风格,会使他们头晕。换句话说,他们就会离开你的网站。应该重视质量设计。这是明智的,因为它将引导用户访问你的网站。 极简主义是一个伟大的移动网站的关键。

虽然移动设备的屏幕尺寸越来越大, 他们仍然比笔记本电脑或台式机的屏幕更小。重要的是不要挤一个小屏幕。移动网站上的文本和视觉元素的数量越少,导航就越容易。

第 4 段(可获 1.53 积分)

对人来说,这是特别重要的 — 会议的间歇间看看购物一眼。

这图形象地说明了冗余元素和示例中是如何让呈现内容更清晰:

check website is mobile friendly

[来源:Behance.ArtDeco.]

左边的屏幕上我们看到一个拥挤的页面都很小,图标似乎也是重复的。在右边的屏幕上,我们看到一个页面上只有一个大图标代表项目类别。

在右边的屏幕是更好的,因为没有重复的元素误导你。容易找到你需要的东西,没有必要放大和斜眼看产品描述。

第 5 段(可获 1.31 积分)

用户访问你的网站最主要的目的是什么?是购物吗? 或是发表些什么东西吗? 又或是阅读些什么吗? 确保这个动作可以只用一个拇指完成。

为了容纳更多的信息在一个小屏幕上, 一些设计师使用链接和按钮相互使用。 不幸的是,这通常会导致意想不到的按钮按下(误导你的用户!)。

优先考虑,让你最重要的按钮显示足够大,这样用户可以无需缩放就可以使用他们的小指点击它们。

第 6 段(可获 1.23 积分)

手机用户非常关心网站的加载速度。 如果你的网页需要超过几秒钟的时间打开,他们会生气。

在为移动设计的时候,请记住,一些用户可能网络连接速度较慢。虽然LTE的迅速蔓延整个美国,但任然有大量的地方处于网络较差的环境中。为了解决性能不佳的网站问题, 使用特殊的免费页面加载速度的工具,比如: Google’s PageSpeed Insights 或 GTMetrix.。这些工具分析了你的站点负载以及提供了如何优化它的可操作建议。

第 7 段(可获 1.33 积分)

通常一个页面的速度是受数据密集型的图像或视频内容限制。优化你的图片将会大大提高你的页面加载速度。

但是不仅仅是前端性能影响web页面加载时间。

如果你关心用户体验和搜索引擎排名,你应该提高你的网站的前端和后端性能。

  1. 完善你的视觉效果

  2. 去掉多余的内容

  3. 使拇指友好

  4. 加快你的页面访问速度

你已经做到了!

恭喜你! 你的网站现在已经准备好了为移动设备提供最佳访问!当然,如果你得到你的网站的专业意见, 你可以随时来 Ruby Garage车库免费设计评审

第 8 段(可获 1.43 积分)

我们的图表:确保你的网站具有移动友好性

check website is mobile friendly infographic

如果你想咨询一下你的移动网站的可用性和页面加载时间, 只需要划一条线。

第 9 段(可获 0.38 积分)

文章评论