A 君导读：根据国际数据公司（IDC）报告，2016 年度全球智能手机总出货已达 14 亿 7060 万台。随着用手机的人越来越多，让网页在手机上的浏览体验更好，成为产品人越来越重要的课题。

AppSo（微信号 appsolution）分享的这篇文章，将告诉你移动端网页设计的 12 个原则。

手机用户越来越希望能够便捷有效地在移动网页端处理事情。无论是购买商品，查看商品价格或是添加内容到邮件列表，网页操作的用户体验要尽可能地无缝自然。

这篇文章将会根据移动端网页的设计要素和特别的用户需求，来讨论如何设计移动端网页。

一个好的移动网页是怎么设计的？

Google 最近的研究表明，移动设备的用户更乐于再次访问适配了移动设备的网页。这意味着，你的网页在移动端也同样要做到界面友好。但究竟怎样才能使移动端网页有良好的用户体验呢？

实际上，有大量的重要细节需要你在设计移动网页的时候考虑。请看下图：

图片来源：business2community

移动设备用户将会注意到你们这些增强用户体验的设计并会为此感到愉悦的。

如果你希望你的网页更好地适配移动设备，那么你必须解决网页在所有移动设备上的兼容性问题。以下是 12 条改进措施，你可以参照着来确保你的网页能适配移动设备，并给用户带来愉悦的体验。

1. 让你的整个网页都适合在移动端上浏览

相比在移动端上直接操作桌面版网页，经过适配的移动网页会大大方便用户的操作使用。举个例子，下图是手机端  Domino 披萨官网的两个版本，一个是桌面版网页，另一个是已适配手机端的网页。

桌面版网页手机的小屏幕里显得窄而小，并且很难操作。经过对比，手机版的网页主要由方便操作的大按钮组成，显得简洁。

如果你的网页适配了手机，你的网页在手机上将会更加地易用。以下是网页适配手机的 3 个小技巧。

• 只允许垂直滚动。不应该通过水平滑动页面来查看主要内容。你要确保你的网页使用了相对应的宽度与位置值，图片缩放后也能正常显示。你还要把网页的主目录放在显目位置并剔除那些会干扰用户操作的元素。
•  限制横栏按钮的数量——最好是仅有一列的页面布局。

图片来源：Google

• 不要将桌面版的网页与手机版的网页互混。因为这样的网页会比桌面版的更加难用。

2. 将主操作按钮设计得更友好

手机用户很容易忽视手机界面上的元素，所以主操作按钮要放在显要位置。手机页面的主操作按钮（Calls-To-Action Buttons）可能会跟桌面版的有所不同，所以你要从在用户的角度考虑，来决定你要把主操作按钮放在什么位置。（微信号 appsolution 后台回复「按钮」获取 app 按钮设计的指南）

主操作按钮要容易点击，且在页面中不要被其他的元素干扰。图片来源：constantcontact

3. 菜单栏要简短而中肯

桌面版网页里有丰富的菜单栏可能会很方便用户使用，但手机用户不会有耐心滑动长长的选项栏，找他们想要的东西。

你需要考虑如何尽可能地减少菜单栏选项。例如，只留下主要产品的目录。根据「拇指原则」，尽量不要使用超过 7 条不同分类的条目。

简短且区分明显的目录更方便用户操作

还有，你的分类列表应该是符合你用户的需求的：

• 它应该是根据用户的使用频率与给用户带来的价值来排列。
•  它不应该使用晦涩难懂的措辞。菜单栏的设定需要具备商业素养，不然你会混淆菜单栏的类别。如使用文绉绉、比喻性的措辞可能会迷惑用户，致使更多用户离开。