现在，越来越多的人在手机上进行搜索，人们浏览网络的方式已经发生了巨大变化。全球估计有38亿智能手机用户，这意味着针对移动用户优化您的网站变得尤为重要。但是问题是，您如何正确优化您的网站呢？本文介绍手机网站设计秘诀——7个关键原则打造优质移动网站，希望对您有帮助。

什么是移动网页设计？

移动Web设计是为移动用户优化Web体验的过程。此过程包括创建：

移动优先的设计。传统上，网站是针对电脑用户进行了优化，但是随着浏览习惯的发展，设计人员倾向于在设计中遵循移动优先的方法，为尽可能小的屏幕优化设计，然后切换到更大的屏幕尺寸，例如平板电脑或台式机。

快速响应的设计。响应式布局是根据用户设备的大小而变化的一种布局。通常，用户拥有的屏幕空间越多，他们看到的内容就越多。

搜索引擎友好的设计。如果访问者无法在搜索结果中找到您的网站，则即使您网站上最引人注目的内容或功能也没有什么用。

如何建立移动网站？

通常，创建移动网站的过程始于用户和市场研究。产品团队收集有关目标受众（他们的需求和需要）的信息，对其进行分析，然后使用它来创建解决方案。创建移动UI的过程始于原型制作，通常包括创建低保真和高保真原型。首先，产品团队创建一个低保真原型，以在各个页面上显示信息的组织。此后，他们通过添加真实内容和图像以使真实用户验证设计，从而将低保真原型转换为高保真原型。一旦高保真原型创建完成，他们便可以使用Bootstrap等网站框架将其转变为成熟的网站。

打造优质移动网站的秘诀：7个关键原则

良好的用户体验是产品设计不可或缺的一部分，网站也不例外。

1.建立坚实的信息层次结构

移动用户非常注重目标。当他们访问网站时，他们希望尽快找到所需的内容。人们很少逐字阅读网页，而是扫描页面。这就是为什么良好的可扫描性是移动网站设计的重要属性。访问者应该可以轻松快速地在您的网站上找到所需的信息。

设计手机网站时，请记住以下几点：

1.对要显示的信息保持选择性。仅提供用户所需的信息。

2.将重要信息和关键号召性用语按钮放在前面和中间。理想情况下，用户登陆到您的首页后应该找到他们想要的东西。

3.从视觉上将导航与内容分开。网站导航设计应帮助用户识别菜单。使用空白可以在视觉上分隔内容和导航选项。

2.使用简单的页面布局

用户注意力是一种宝贵的资源，应该相应地分配。设计移动网站页面时，您需要优先考虑简单性，因为简单版式在小屏幕上效果更好。这是实现此目标的方法：

1.坚持一栏式布局。在优化台式机的Web设计时，通常需要使用多列Web设计网格来构造信息。但是，对于移动设备，最好采用单列布局，因为多列可能会引起更多干扰，并使用户更难以理解信息。

2.不要使用水平滚动条。水平滚动不仅会导致UX效果不佳（因为水平滚动并不直观）。

3.整理布局。移动用户不应立即被大量信息所淹没，因为这可能会造成混乱，使他们难以找到所需的信息。遵循极简主义的方法来创建干净的布局使用简洁的复制和摆脱纯粹的装饰元素，让您的用户可以享受干净和高度集中的移动体验。请记住，您使用的每一个文字或图像都应该为访问者带来价值。

3.使文本可读并使用较大的触摸目标

1.可读性，或读者易于理解书面文本的内容，是Web设计的基本属性，因为要传达的许多信息都是通过文本传递的。在设计时要牢记可读性，这里是要考虑的属性：

字体。选择一种可以很好缩放的字体，并且在任何屏幕尺寸下都看起来很棒。微软雅黑是不错的选择。

字体大小。移动字体大小默认为16像素。

颜色对比。力争WCAG 2.0级别AA，以使读者可以阅读文本。

小触摸目标是移动用户的另一个问题。在移动设备上，用户用手指点击屏幕上的项目，而较小的触摸目标却可以增加用户击中错误物体的机会。手指易于操作的大按钮将使最终用户更轻松地与您的网站进行交互。触摸屏对象的建议目标大小为7-10mm。

4.尽量减少用户输入数据的工作量

填写表单并不是Web体验中最令人兴奋的部分，但是设计高效的表单至关重要，这样您的访问者就不必花费太多时间输入数据。设计表单时，请注意以下几点：

1.要求提供最低限度的信息。通过仅询问基本信息，您可以在填写表格时最大程度地减少用户的工作量。 

2.为收货地址或发票邮寄地址等字段提供自动填充功能。您可以根据用户的GEO位置自动填写他们的地址。

3.使用内联验证来实时验证用户输入。用户将在键入信息后立即看到错误提示，而不是点击“提交”按钮时才提示。

5.优化页面速度的设计

用户关心交互设计的速度。网站加载内容所需的时间越长，用户放弃它的机会就越大。因此，建议测量性能并删除所有会增加加载时间的对象。高分辨率图像，视频和精美的动画都会影响页面加载时间。有关优化Web性能的实用技巧，请阅读《前端性能清单2021》。

6.手机和台式机之间的视觉和功能一致性

许多数字产品既可以用作移动应用程序，也可以用作WEB网站。如果您的产品在这两种产品上均能运行，则需要使应用程序的移动用户界面与网站保持一致。理想情况下，电脑端Web体验应该与您的移动应用程序没有区别，因为它将允许用户在应用程序和网站之间自由切换。

7.允许用户在其他设备上完成旅程

访问者在手机上开始一项任务，但在电脑WEB上完成它是很常见的。例如：网购，访问者喜欢在手机上浏览，但在填写收件信息时候，他们希望切换到电脑上操作，因为这样更方便。提供“共享”功能，以便访问者操作。

始终与用户一起验证您的设计

上面提到的原理将帮助您创建出色的移动Web设计，但是与真实用户验证您的设计很重要。当您将其投入现实世界时，即使是研究最深入的设计最终也会包含一些无法预料的缺陷。测试将帮助您在设计过程中及早发现缺陷，修复缺陷，并最终获得出色的用户体验。