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

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

现在，移动设备已占据优点地位，谷歌2015年发布的报告中显示，52%的搜索流量和几乎50%的购物流量来自移动设备。所以，具备移动端兼容性的网页设计已从奢谈变成了必需品。2015年4月“Mobilegeddon”转变了众人熟悉的市场营销模式，将适应性设计和移动网站理念放在了首位。

有了谷歌的移动友好算法，你或许觉得当代的全部网页都具有移动兼容性。但实际状况倒是：近50%的市场营销者没有将网页优化使之兼容移动设备，虽然这些网站的搜索流量和排名都在增加。致使这种现象的缘由是什么呢？是由于移动友好算法的影响不足以促进网页从新设计？仍是移动网页并无给这些网站带来用户？

值得重视的是，尽管移动设备的使用率愈来愈高，咱们也不该该忽视电脑端的用户。现现在，用户在电脑网页上的停留时间和浏览页数是移动设备端的三倍，人们更喜欢经过电脑阅读新闻和观看视频。

这些数据对于咱们了解移动用户的行为十分重要，不容小觑。由于移动设备的屏幕较小，而用户一般在忙碌的状况下使用移动设备，因此他们更偏向于完整清晰显示的网站。若是用户没法快速从某个网站上获取所需信息，他们就会转向另外一个网站。这就意味着，网站必须迅速向用户提供他们所查找的信息，一刻也不能耽误。

基于这一点，许多网页设计者在搭建网站时，会遵循移动第一的原则，确保网页加载时间短，图表数量少，或者内容大小适中，不须要用户去放大缩小。若是你的网页还不兼容移动设备，别惊慌，改造网页使其符合响应性设计，或另外设计移动版网页并无你想的那么复杂。如今已经有许多网站搭建平台可供使用，并且他们与旧网站使用的搭建平台相似。

不管你是否已经彻底采用移动策略，仍是仍然在寻找最佳方案，在设计移动网页时，请牢记如下原则：

##1）菜单简洁明了 通常状况下，移动设备或平板电脑用户不会滚动大型的菜单栏或点击数量众多的子菜单，由于屏幕大小有限，没法显示太多内容。菜单中必须包含简练的产品和服务概述，用户才能缩小他们的查找范围，这一点很重要。这样，用户才能从简洁明了的菜单栏中点击某个类别或利用搜索功能进一步筛选。

在理想的菜单栏中，选项数量应该控制在5到6个，而且这些选项能给用户提供足够的信息以方便查找。同时，若是状况容许，主菜单中包含的子菜单不该多于两个。至于菜单样式，“汉堡式”菜单已被普遍采用，所以网页上并不须要标注出“菜单”字样。有些公司在传统的菜单式样中加入了本身的风格，例如意大利烧烤餐厅Carrabba’s的网站。

在这家餐厅的移动网页上，企业标志下方有一个简单的下拉式列表，展开后有5个选项。由于 “菜单”和“位置”按钮已经在页眉显示，因此就不须要再放入列表。这样的菜单栏虽然简单，却在网站前端和中心位置显示了最重要的信息。

当用户访问餐厅的网站时，可能会查看菜单、寻找餐厅位置，或者在线下单。Carrabba’s的网站能让用户迅速快捷地完成以上全部事情，而不至于陷入尽是开胃菜、意大利面以及欢乐时光特惠的子菜单中。

##2）表单简短贴心 当须要在网页上填写联系信息时，用户可不想没完没了地填不少内容。他们每每倾向于台式电脑或笔记本，而不是移动设备来完成此类操做。所以，在设计用户信息表单时，请省略掉没必要要的字段。

若是联系表单只是用来订阅电子报，那么仅需登记用户姓名和邮箱便可。即便是支付表单，也请将字段数减到最少。用户明白在线购物须要填写更多的信息，但网页设计者必须体谅用户的时间，尤为是当网站的移动流量不断增长时。

咱们能够用A/B测试来决定表单的理想字段数，即每次改变或移除表单中的一个字段，而后评估表单的完成比例。好比，用户更愿意填写无需登记电话号码的表格，因此在测试时，比较一下有无该字段以及该字段为可选或必填项时的不一样效果，而后将这些结果与实际得到的投资回报率作对比，决定是否在表单中保留该字段。

万事达卡（MasterCard）在设计联系表单时，就十分周到地考虑到了移动端用户的时间。用户在他们的网站上只需填写姓名、邮箱、主题和评论，就能与卡片的支持团队取得联系。这些信息足以让工做人员查询到用户的帐户信息，而后将用户的需求转给合适的支持部门，整个过程并不须要耗费太多时间。

同时，表格中诸如电话号码、卡片类型和发卡机构是可选项，用户可根据自身状况选择填写。即便用户不提供这些信息，也不影响问题的解决和需求的知足。用户对于本身的财务信息的保护意识很是强，因此请给他们一些空间，不只要知足用户的需求，还要创建起他们对网站的信任。

##3）简化表单字段 除了要考虑到表单的字段数，还须要减小用户输入的字数。表单字段能够采用多种类型，以下拉式、复选框式以及日历式。当用户输入支付信息、物流信息以及预订行程时，这些类型的字段就能派得上用场。

同时，尽可能将表单作得清晰明了，使必填项和可选项一目了然。让回头用户更便捷地应用自动填写功能，缩短购物的过程，并为那些不肯注册帐号的新用户提供访客支付选项。

对于旅游公司而言，利用简洁的表单为潜在客户提供便捷的搜索是关键。全球最大的网络旅游公司Expedia在这方面堪称完美典范——网站上的按钮一目了然，用户搜索时也只需填写不多的字段。

当用户在Expedia的网站上查询航班时，点击“出发城市”或“到达城市”按钮，无需输入完整的城市或机场名称，只需填写城市或机场代码，下拉框中就会出现建议地址以供选择。并且网站上的日历功能也比其它网站便捷许多——用户能够在同一页面上查看日历并选择出发及到达日期。

##4）经过行为召唤组件（CTAs）吸引用户眼球 行为召唤组件对任何网站设计而言都是必要的，在移动网页中尤其重要。和电脑端用户相比，移动端用户访问网站的目的更加明确。因此在设计移动网页时，尽量将行为召唤组件放在最显眼的黄金位置。

理想状况下，将行为召唤组件放置在页眉上方，用突出的颜色或字体显示，在合理的范围内让它们更加醒目，并清晰地表达其内容。后续的操做步骤则须要很是清晰，这样用户就不用花时间去考虑接下来应该作什么。

棒约翰披萨（Papa John’s）将假日促销信息放在网站上最有利的位置，鼓励用户在线订餐时为家人或朋友挑选一份礼物。他们加粗了促销信息的文字部分，使其更加醒目，同时也与网站的总体色调及品牌风格相搭配。最重要的是，用户明白点击行为召唤组件后将看到什么。商家并无用华丽的辞藻和图片来迷惑用户，用户只需迅速登入网站而后登出，就能马上买到他们最爱的披萨。

以上为移动网页设计的前四个原则，欲知后续内容，敬请关注 OneAPM 官方技术博客。

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

本文转自 OneAPM 官方博客

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