打造移动网站友好用户体验的12个技巧

译者:吕东昊 审校:董梁

本文长度为3004字,预估阅读时间5分钟。

我们今天要向大家分享关于打造移动网站友好用户体验的12个技巧

介绍

要知道,一个网站可以在移动设备上浏览并不代表着这个网站在移动设备上浏览的用户体验是友好的。想了解如何让您的移动客户拥有满意的浏览体验,请遵循移动专家、网页设计与开发专业人士的以下建议。

comScore统计显示,截至2013年12月,有1.56亿美国人拥有智能手机,比2013年9月份增长了3%以上。预计这一数字将继续增长。事实上,eMarketer预测到2014年底,全球将有17.5亿人经常使用智能手机。

而且这数百万智能手机用户不仅仅是使用移动设备拨打电话、发送电子邮件和短信。他们还在使用他们的移动设备连接社交网络、上网浏览新闻和信息、购物和下单。因此,如果您的网站或电子商务网站未针对移动端流量进行优化,您可能会失去潜在的客户和销售线索。

为了找出“移动端优化”的真正要领,CIO.com询问了几十名移动网页设计师和移动网页开发专家。 以下是创建移动友好网站的十二个技巧。

1.响应式网站

物业管理软件开发商LandlordStation首席执行官Copley Broer说:“如果要使用响应式的技术框架,目前的确有一些框架可供我们选择,我们使用Bootstrap,这些框架基本上是通过比较简单的方法来布置网格中的元素,然后根据不同的屏幕尺寸调整该网格,使得大型监视器上的元素与iPad(或智能手机)上的元素相同,“Broer 说,“Bootstrap框架是开源代码(且免费),有据可查,且易于实现。”

RITTA(一家广告与营销机构)的 COO Kevin Janosz补充说:“响应式是Web开发的一种更统一的方法,无论用户是通过桌面,平板还是智能手机访问网站,您都可以为用户创建相似的优质浏览体验。

Janosz说:“除了能够在不同设备之间提供更好的用户体验之外,它还整合了您的网站,因此您不需要单独的移动网址,它具有SEO优势,而且管理起来也容易一些。”

2.确保使用一根手指即可完成所有操作

EliteSEM(搜索引擎营销公司)营销总监Marc Weisinger说:“确保您的网站完全可以通过一个手指操作,并且不需要使用缩放动作。”

“用户能够通过单手操作即可完成对整个网站的访问,这是任何移动网站最重要的标准之一,此外,如果您发现必须进行缩放,那么说明您的网站可能文本字号太小或者与浏览设备无法很好的匹配,”Weisinger说。

访问移动网站的大多数用户使用的是触摸屏设备,因此要确保按钮和菜单导航足够大,即使是胖手指操作起来依然是游刃有余,“Hire Space(网站租用空间)CTO Dean Hume说。 “友好体验的移动端网站通常会使用CSS(媒体查询media queries)来调整屏幕大小,而不考虑手指可能会导致的错误点击。”

同样,“在设计移动端界面时,您应该使您的目标范围足够大,以便轻松选择,”Lyons咨询集团执行创意总监Mark Rattin说。 “大多数成年人的平均食指是15到20毫米,对应的是45到57像素,我们的‘经验法则’(双关语)是为选择区域提供至少45个像素的按钮或点击元素,”他说。 “这样可以轻松选择屏幕上的目标,并从用户体验中消除许多意外点击。”

3.保持简约设计

“做一个简约设计和聚焦的版本需要花很多时间,“应用设计和开发公司Caxy Interactive的创始人兼CEO Michael LaVista指出,“记住,您只有几秒钟的时间来向用户展示您是什么样的公司。对于任何网站设计来说都是这样,尤其是在为较小设备进行设计时注意这一点是很重要的。”

太多的通知消息和过多花哨的修饰(如图形、文字、视频)可能会阻碍该网站加载的速度,并分散您要传达的主要信息。 Hume建议:“如果您想在网站中添加图片,尽量提供字节较小的图片,这样可以减少用户在等待页面加载时所用的时间。”

4.保持内容短小精致

“人们有时候常常会着迷于自己所撰写的内容,一不留神就成了长篇大论,网站小编自然也不例外,长篇幅的文章会增加用户的翻页次数,对于移动端的挑战尤甚,” Broer说,因此“我们需要花点功夫来琢磨如何用更精简的语言来表达相同的内容。”

“内容篇幅要有所节制,”电话服务提供商Nextiva的营销副总裁Yaniv Masjedi指出, “智能手机上的屏幕比台式机上的屏幕小得多,所以尽量减少移动网站上的文字数量。移动用户习惯于快速向下滑动浏览,所以只需包含必要的文字,抓住读者的注意力即可。”

5.好的icon图标胜过千言万语

“为了避免您的网站看起来很混乱,请使用常规移动icon图标,而不是通过文字来进行通话咨询、社交联络、寻找菜单等操作。”数字创意机构FiddleflyCEO James Ramsey表示,“使用这些符号可以帮助用户了解该网站是针对移动设备的。”

6.通过为移动设备配置优化过的图像来达到更快的访问速度

网络设计机构New Haircut CEO JayMelone指出:“移动网络比FiOS(光纤服务)和有线电视之类的服务网络要慢得多,特别是美国在LTE速度方面排名倒数第二,平均徘徊在6.5Mbps左右。

“所以一定要把PC端网站上存在的繁重的媒体文件(比如视频)去掉。” Melone说,“使用媒体查询将PC端网站的图像像素重新调整为较低分辨率版本,并考虑使用独立JavaScript替换大型JavaScript库(如jQuery Mobile)。

“移动设备上的分辨率和宽高比变化范围还是比较大的(范围从240 x 320到2560 x 1440及以上不等)。”网络和移动应用的图像管理解决方案Cloudinary CEO Itai Lahan说。

“还要考虑,在3G网络下运行的移动设备在下载速度方面仍然相当落后,而且许多移动用户都支付宽带使用费,所有这些都意味着,调整图像大小,并使其适应具体的设备分辨率和宽高比是至关重要的,“Lahan说。 “这可以节省大量的带宽,大大减少了移动网页的加载时间,同时大大提高了访问者的浏览体验。”

7.不要过度使用Java

Hume说:“尽可能避免在您的移动网站上使用过多的JavaScript代码,因为它在不同的浏览器和设备上运行效果不同。 ”他说,“即使是同一款手机的不同型号,在JavaScript方面也可能会有很大差异。“ “这并不是说您不应该使用JavaScript,而是说应该谨慎对待,并且要记住,它可能会影响到移动端网站的性能和用户体验。”

8.让您的电话号码、地址和联系方式易于查找

Engage(一家全方位服务的设计和开发公司)的创意总监AnthonyOverkamp说:“请记住您的网站在移动设备上的使用环境。

Overkamp表示:“通常情况下,当用户正在寻找商店营业时间,联系人或预订电话号码,或者是某企业距离最近的位置时,用户越容易访问该信息并采取行动,用户体验就越好。

9.视频该加还得加,但需精心布置

Invodo(视频战略和内容提供商)营销副总裁Russ Somers表示:“视频是任何移动网站的绝对必需品。 这是因为使用移动设备的消费者比使用笔记本电脑/台式机的用户观看视频的可能性高三倍。”

也就是说,“使用能够提供完善移动体验的视频技术,您的移动视频播放器应该运行HTML5并确保它可以在大多数移动设备上播放,”Somers建议, “此外,使用轻量级的视频播放器(不消耗付费的带宽和处理资源),这样您就可以显著提高页面加载时间,并为用户提供更好的整体体验。”

10.确保表单是为移动端而设计的

LucidFusion(网站设计和品牌公司)CEO Zubin Mowlavi表示:“要求用户提供最少的必要信息,以便后续与潜在客户联络。”

Mowlavi说:“尽可能地减少表单字段的数量和大小,并利用移动设备内置的技术优化可用性。例如,GPS通常是可以获得用户的城市和邮编的,如果您可以预先填写,就不需要再让用户填写他们所在的城市和邮编了。

11.考虑地理位置

“对移动设备的一些功能如地理定位加以利用。 ” TheLevel (网页设计和开发机构)的创始合伙人兼CEO Michael Read说,“企业可以使用地理定位来引导用户,允许访客查看距离最近的商店中某商品是否有货、提供有针对性的促销活动、以当地货币形式提供在线购买价格,并连接到诸如Yelp等社区。

12.环境兼容性测试,确保您的内容可以在不同的设备、平台和操作系统上正确查看

“不要忘了要通过操作系统测试移动端用户体验,通过可用性测试来提高整体网站的用户体验。” SMITH(数字体验机构)的电子商务战略副总裁Debbie Carkner说,“推荐一些大家普遍使用的移动测试工具包括Solidifyapp,UXRecorder,POP和delight.io。”

原文发布于微信公众号 - 互联网数据官(internetcdo)

原文发表时间:2017-08-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏非著名程序员

Google 到底是不是在抄袭?

众所周知,将在今年的 5 月 8 日到 10 日举行一年一度的 I/O 开发者大会,不出意外就会发布 Android 9.0 系统。自从 Android Iss...

3937
来自专栏葡萄城控件技术团队

Wyn Enterprise 核心功能:易用至极的自助式BI和数据分析工具

作为一款前所未有的商业智能软件,Wyn Enterprise 提供自助式 BI 功能——WynBI,可让最终用户毫无约束的与数据交互,任意探索数据背后的真正原因...

1863
来自专栏程序员宝库

如何在一周之内获得GitHub stars 3500+ —为什么对于程序员这是如此的重要

最近我们发布了一个新的产品-Froala Design Blocks.几天之后我们便跻身于 GitHub流行仓库。一周以后已经拥有超过3500个star,而且两...

38315
来自专栏厦门SEO

2018年做好SEO搜索引擎优化的五大策略!

SEO重点可以浓缩成这5个大方向,听起来很简单,但实际上要去优化到好却是件浩大的工程。但是,只要努力彻底执行这5大方向的优化,你绝对可以把关键字排名做的非常好,...

1889
来自专栏非著名程序员

快应用 VS 小程序,剑指微信?痛苦的到底是谁?

“快应用” 是九大手机厂商基于硬件平台共同推出的新型应用生态,用户无需下载安装,即点即用,享受原生应用的性能体验。“快应用” 使用前端技术栈开发,原生渲染,同时...

1163
来自专栏互联网数据官iCDO

大神赐教 | 如何不依靠内容和外链提高网站排名?

这与谷歌的算法更新无关,我发现,无需制造更多的内容或链接,有些技巧也可以持续地提高网页排名。

1282
来自专栏较真的前端

未来的前端工程师

2716
来自专栏学习有记

Python数据分析相关的社区和会议

在互联网上,有很多Python科学和数据分析相关的社区(Community),用来解决相关的问题通常是非常有帮助的。下面的列表列出了常用的社区:

1462
来自专栏互联网杂技

中枪了没有!聊聊移动应用界面设计7宗罪

则就是用来打破的?这完全取决于规则本身。在移动应用界面设计(后续简称:移动设计)的世界里,大家对美学、手势和动效的看法略有不同。有时一个简单的功能性应用比华丽的...

2696
来自专栏腾讯社交用户体验设计

多端统一,内容至上--微云WEB改版小结

2004

扫码关注云+社区

领取腾讯云代金券