移动网页设计9大原则——第2部分

【编者按】本文做者为来自 Mainstreethost 的站内营销专家 Kim Speier，主要介绍移动网页设计的九个原则，每一个原则都配有生动的实例。文章系国内 ITOM 管理平台 OneAPM 编译呈现，点此查看文章的第一部分，如下为第二部分，主要介绍移动网页设计的另5个重要原则。

5）提供用户所需的搜索结果

一些移动用户在访问网页时目的十分明确，他们不多在模糊的菜单或一页又一页的商品间徘徊。搜索功能对于这类用户而言很是重要。而这也是要在搜索结果的第一页就提供精确结果的重要缘由。搜索完成后，请为用户提供一些筛选条件，如价格、相关度、畅销商品等，以便筛选出最适合的结果。

除此以外，为每件商品配上图片、价格及简短介绍也十分重要，这样搜索页面就不至于全是文字，用户也能更容易找到合适的商品。图片应该具备可点击性，而且能够在同一窗口放大，这样用户不须要打开单独的页面，就能更好地观察商品。而当用户找到本身须要的商品时，他们能够点击这件商品，了解更多信息，而后下单购买。

在美国体育运动装备品牌Under Armour的网站上，搜索“帽衫”，页面上将显示371个搜索结果，并提供一些筛选条件来缩小搜索范围。用户在页面顶端能够根据不一样类别进行选择，经过价格、尺码筛选出评价最高或价格最低的商品。

在搜索时，用户但愿有更多的选项，以便更加直接地搜索想要的商品，而且他们只愿意花时间查看与搜索结果最相关的商品。而UnderArmour的搜索页面为用户提供了充足的搜索条件，并且十分简洁，适合移动设备。

6）联系信息一目了然

对任何电子商务网站而言，能让用户快速联系到商家都十分重要。当用户对订单有疑问时，都但愿能尽快获得答复或解决。这就意味着移动页面上须要突出标示“在线呼叫”功能，同时提供联系表格或邮箱，让用户根据自身状况或问题的紧急程度选择适合的联系方式。

“常见问题解答”页面对用户也颇有帮助。用户不须要联系商家，就能自行在网站上查找解决问题的方法。大部分用户表示更愿意本身解决问题。

适合移动网站提供联系信息的另外一种方式，是在网站中嵌入谷歌地图，容许用户点击地图、放大或缩小、查找路线，让用户确信可以找到网站的实体地址。

鞋类零售网站Zappos很是了解让用户快速与他们取得联系，咨询订单、退货及促销信息的重要性，因此他们在网站首页的页眉上方放置了客服电话和在线呼叫功能。当用户须要即时帮助，只要一步便能直接联系到他们，而不用翻遍整个网站找出“联系咱们”的页面了。

7）谨记“拇指”原则

目前为止，对那些不适合移动设备的网站，用户最广泛的投诉是“按钮过小，文字也难以认清”。移动或响应式网页设计的基本原则是：用户不须要将内容或连接放大缩小，就可以阅读或点击。因此在网页设计过程当中，请确保每个按钮大小合适，而且与其它按钮或连接的间隔适中，便于点击。

其次，在设计移动网站中的连接或页面时，确保用户只需将其放大缩小就能点击，而不须要按压屏幕。按照拇指原则，适应拇指点击屏幕的最小面积是44px x 44px。要让网页适合全部智能手机的屏幕尺寸可能比较难，但一般建议在设计网页时尽量以老式手机为模型，由于老式手机的屏幕通常都比较小。这样才能保证网页内容在不一样的移动平台上都能清晰显示。

美国西南航空公司（Southwest Airlines）移动网页上的按钮至关易于点击，而且按钮显示的文本也很清晰。他们的页面几乎能兼容全部尺寸的屏幕，而且为用户提供了数量有限的搜索条件。用户不会由于多余的内容或不断涌现的行为召唤组件而忘记访问网站的最初目的——搜索航班或处理现有订单。

8）缩短（加载）时间

现在的用户已愈来愈没有耐心，而移动用户更甚。许多用户都是在忙碌的状态下打开网站，因此别让他们等候页面加载。页面加载速度需兼容WiFi环境和非WiFi环境，加载时间不超过4秒钟最为理想。

50%以上的移动用户但愿页面在4秒钟或更短期内加载完毕，80%的用户对智能手机现有的网页浏览速度不满意。许多潜在用户因为一些可控的缘由（除信号不佳外）而退出网站。网页设计者必须记住：将整个网页的大小控制在1MB之内，而且理智地使用图片和视频。要知道，网页上多媒体内容越多，它的加载速度就越慢。

用户但愿快速找到所需信息，新闻或出版行业的企业对这一点很是了解。纽约时报（New York Times）的移动网站即便在非WiFi环境下，也能几乎瞬间加载。许多移动用户会在忙碌中抽出仅有的一两分钟在本身喜欢的新闻平台上浏览信息，或者只想知道一天之中世界上发生的事情，而纽约时报网站就能作到迅速加载各类新闻信息。

9) 避免弹出窗口

通常状况下，用户并不热衷于网页上的弹出广告或问卷，就更别提那些使用移动设备的用户了。这些弹出窗口的关闭按钮一般都过小，用户须要将它们放大才能点击，有时候会由于手误打开弹出广告。移动设备用户的时间是很宝贵的，而弹出窗口会耽误他们的时间。

出版行业网站或那些容许用户订阅内容的网站更须要注意这一点。这些网页在设计时，可能会包含弹出窗口，以便于用户注册电邮提醒或订阅电子报，但实际上移动用户并不须要这些。若是移动用户想注册，他们会根据状况自行在网站上找到相似的登记表格。

美国网络新闻媒体BuzzFeed电脑端和移动端的网站都提供新闻和广告，但他们并无使用任何弹出窗口让用户点击或订阅电子报。

在下面的截图中，能够看到该网站上由世界著名朗姆酒品牌摩根船长（Captain Morgan）发布的“15 Tiny Ways to Take Yourself Less Seriously”。点击文章，用户不会受到弹出窗口的干扰。若是用户想点击摩根船长网站的超连接，尽管点击就是了，不会弹出没必要要的窗口。BuzzFeed对订阅电子报的促销也采用相同方式。他们给予用户自由选择的权利，而不是强迫用户阅读本身不喜欢的内容。

你的网页设计适应移动模式吗？

由于移动搜索的突出优点，以及更多的用户试图经过移动客户端下单，网页移动模式已然成为趋势，任何人都没法置身事外。移动用户对于市场影响及购买行为的影响愈来愈大，并且没有放缓的迹象。若是你决定从新设计电脑端网页，就必须经过响应性设计优化网页在不一样客户端上的兼容性，或者另外设计移动版网页。做为市场营销人员，咱们必须秉承移动优先的理念，否则面临的不只是搜索排名的下滑，在消费者心中的地位也会受到影响。

OneAPM Browser Insight 是一个基于真实用户的 Web 前端性能监控平台，能帮助你们定位网站性能瓶颈，实现网站加速效果可视化；支持浏览器、微信、App 浏览 HTML 和 HTML5 页面。想阅读更多技术文章，请访问 OneAPM 官方技术博客。

本文转自 OneAPM 官方博客

原文地址：http://blog.hubspot.com/marketing/9-mobile-web-design-principles