如何使网站更适合移动设备？您需要知道的这18个技巧

无论您是刚刚开始创建网站还是正在考虑增强当前的移动端网站，本文都涵盖了您需要了解的所有内容，以便优先考虑您的移动观众。了解什么是移动网站设计、它带来的好处以及如何使网站适合移动设备的一些关键网页设计最佳实践。实施这些技巧应该可以帮助您扩大覆盖范围，尤其是因为大约60% 的用户通过移动设备访问互联网。

移动设备的使用越来越多，随着每年越来越多的人选择移动体验，互联网习惯不断重塑。现在，人们更频繁地在移动设备上访问网站，而不是在桌面上访问网站。像 Google 这样的主要搜索引擎现在采用移动优先的搜索环境，尤其是在新兴市场绕过桌面网站转向移动应用程序的情况下。

什么是移动友好型网站?

适合移动设备的网站易于在智能手机或平板电脑上访问和导航。这些网站针对较小的屏幕进行了简化的设计，使其比在具有更大屏幕的台式电脑或笔记本电脑上更易于访问。它们还旨在快速加载并在较慢的互联网连接上表现良好。

为了实现这一目标，了解响应式设计与自适应设计之间的区别是关键。响应式设计注重灵活性，具有可根据设备屏幕尺寸流畅调整的单一网站格式。另一方面，自适应设计涉及创建一个专用的移动网站。此站点专为移动设备量身定制，可以通过访问特定于移动设备的 URL (如 m.example.com)来访问。

以下是您现在可以实施的 18 个技巧，以构建一个既适用于移动访问者又适用于桌面用户的网站。

1.从移动优先方法开始

2.选择移动响应式模板

3.避免使用 Flash

4.提高网站的速度

5.使用易于阅读的字体

6.优化图像以供移动查看

7.隔开您的链接

8.实现 viewport meta 标记

9.缩短表单并禁用自动更正

10.避免大块文本

11.制定 CTA 按钮策略

12.合并搜索功能

13.整理你的网页设计

14.使网站与两个方向兼容

15.简化导航

16.消除文本拦截广告和弹出窗口

17.提供切换到桌面视图的选项

18.在真实移动设备上测试网站

01. 从移动优先方法开始

移动优先设计侧重于在针对桌面设备进行调整之前为移动设备设计用户体验。通过最初为移动设备定制设计和开发，您可以确保您的网站针对较小的屏幕进行了优化，并在显示尺寸增加时保持响应速度。通过这种方法，您可以优先考虑移动用户的需求，这些用户可能是您的大多数受众。

02. 选择移动响应式模板

响应式布局允许您的网站调整其大小以适应用户的设备。它可以在屏幕大小之间切换，在调整设计的同时显示相关内容 - 就像从计算机上的两列网站布局移动到手机上的单列网站布局一样。如果您使用响应式设计，则在更改为不同屏幕时不应减慢加载时间。

响应式网站可以促进搜索引擎优化 (SEO)，因为 Google 在搜索结果中偏爱适合移动设备的网站。Google 的算法优先考虑移动呈现的网页进行排名，从而提高了对移动友好型网站的赌注。对于那些刚开始网站建设或不懂技术的人， Wix 提供具有 内置移动友好功能的可自定义网站模板。

03. 避免使用 Flash

Flash 通常用于动画，但在移动设备上不受支持，因此最好避免使用它。最好使用 HTML5 和 CSS 来获得响应速度更快且对移动设备友好的网站。HTML5 允许您在没有浏览器插件的情况下执行在线操作、嵌入媒体并创建移动设备支持的动画。

04. 提高网站的速度

网站的页面加载速度是访问者访问该网站时页面完全加载所需的时间。优化加载速度对于改善用户体验至关重要，因为加载时间缓慢会赶走访问者并损害转化率。高速可能会影响排名，因此采取必要的措施来提高您的网站速度非常重要。使用 Google 的 PageSpeed Insights 等免费工具检查您的网站加载时间。如果您注意到它有点慢，这里有一些建议可以帮助您加快速度：

减少重定向次数：点击 URL 通常会导致服务器将您重定向到预期的页面。每个重定向都会延迟页面加载速度，因为浏览器需要为每个重定向请求服务器。为了加快速度，请减少重定向。通过使用 URL 缩短器或直接链接到您想要的页面来简化。

检查您的网络托管计划：托管和服务器的质量会显着影响您网站的性能。选择快速可靠的托管网站，以确保您的网站以最佳速度运行。

05. 使用易于阅读的字体

选择清晰、简单的字体可帮助移动用户轻松消化您的内容，从而提高可读性和与网站的互动。此外，良好的字体选择可以增强您网站的外观，使其更加专业和值得信赖。

查看这些选择最佳网站字体的提示：

坚持使用标准字体：防止访问者浏览器上的字体下载导致延迟，这可能会减慢您的网站加载时间，尤其是在移动设备上。

调整移动设备的字体大小：桌面建议的字体大小至少为 14 像素，可能不足以容纳较小的屏幕。在移动设备上对其进行测试以确保易读性。

选择黑色文本而不是多种颜色：确保可见性，尤其是在不同的背景或户外光线反射的情况下。

有效利用有限的空间：在移动设备上，将文本行加粗或大写以防止合并，因为像在桌面上那样分隔文本和图像可能不可行。

06. 优化图像以供移动查看

与台式机相比，移动设备的带宽有限，因此大型图像文件可能会减慢加载时间。此外，许多移动用户都有数据限制，因此较小的图像尺寸有利于节省数据使用量。使用移动网站时，目标是在不影响质量的情况下保持图像大小尽可能小。以下是一些有用的提示：

调整图像大小：高分辨率图像会占用大量空间，从而导致加载时间变慢。Wix 网站将图像压缩为 webp，这是 Web 性能的最佳类型。 您还可以使用图像调整器来减小文件大小，以便它们加载得更快，而不会对人们在网站上看到的质量产生负面影响。

采用延迟加载：一次加载页面上的所有图像会减慢初始页面加载速度，尤其是在包含大量图像的页面上。Wix 网站仅在图像即将进入视图时才使用延迟加载来加载图像。这意味着，在用户滚动到图像所在的区域之前，不会加载图像。

使用百分比而不是像素：将图像设置为固定像素边距可能会导致在具有不同移动分辨率的小屏幕上出现问题。当图像无法正确缩小时，当图像超出屏幕宽度时，访客可能必须水平滚动。

07. 隔开你的链接

在设计移动网站时，请考虑触摸设备和鼠标单击的工作原理。由于手指比桌面光标粗，因此在移动网站上必须将链接分隔得更远，以防止误点击。当您链接到页面时，请尽量只链接到同样适合移动设备的网页，以获得无缝体验。

08. 实现 viewport meta 标签

如果您的页面在手机小屏幕上的宽度与在桌面上的宽度相同，则观看者将笨拙地从一侧滚动到另一侧以阅读每一行文本并查看页面的不同部分。

通过使用 viewport meta 标记，您可以管理视区的宽度和缩放比例，以确保您的网站在所有设备上都能正确显示。Wix 使用 meta 标记：。在移动设备上访问时，此标签会提示浏览器在 320 像素宽的画布上显示页面。由于大多数移动设备都能很好地显示 320px，因此浏览器不需要进行任何缩放，这有助于页面适合移动设备。

09.缩短表单并禁用自动更正

在移动设备上打字可能很麻烦，因此最好保持您网站上的表单简短明了。限制表单填写所需的字段数量，并利用自动填充选项来获取姓名和电子邮件地址等常见信息。如果您的网站有请求姓名或地址详细信息的表单，则帮助移动用户的一种简单方法是为每个字段禁用自动更正。这避免了可能减慢表单填写过程的令人沮丧的更正。

10. 避免使用大块文本

在移动设备上阅读大块文本可能会让人不知所措，从而导致用户感到沮丧或对内容不感兴趣。为了使您的网站更适合移动设备，请将文本分成易于阅读的小段落，并使用项目符号或编号以便于扫描。添加相关的标题，帮助读者快速发现关键点或部分。使用白色间距突出显示关键点，避免文本混乱，并在单词和后续行之间留出足够的空间。

11. 制定 CTA 按钮策略

按钮是必不可少的网站设计元素，尤其是在提示行动号召 （CTA） 时。选择较大的按钮可帮助移动用户轻松点击屏幕并在您网站的页面之间导航。由于大多数移动用户使用拇指导航，因此按钮应足够大，以便用拇指点击。

在为适合移动设备的网站设计按钮时，请考虑以下准则：

应用对比度：为了增强按钮的可见性，请考虑使用对比鲜明的网站配色方案。例如，为按钮文本选择浅色，为按钮本身选择深色，为周围区域选择对比色。另一种有效的方法是为按钮的边框引入不同的颜色。

优化按钮大小：太小的按钮可能难以按下，而过大的按钮可能会在小屏幕上占用太多空间。将按钮保持在 10 毫米 x 10 毫米左右，确保它们保持可读性，并针对移动用户及其不同的指尖尺寸进行了优化。

最大化按钮位置：大多数人通常使用惯用拇指进行交互式点击。为了使其用户友好，请将按钮放置在拇指触手可及的地方，通常位于屏幕的右下角。

12. 加入搜索功能

由于屏幕空间有限，在移动版本上容纳您网站的所有基本信息可能具有挑战性。通过包含搜索功能，用户可以轻松找到他们正在寻找的内容，而无需浏览多个页面。这也有助于改善用户体验并减少因无休止滚动或点击大量链接而引起的挫败感。

13. 整理你的网页设计

在设计移动网站时，请确保保持简单。包含大量信息的复杂网站在任何屏幕上都可能令人困惑，但对于小屏幕上的访问者来说尤其难以浏览。坚持使用最少的文本和图像，并确保轻松导航。请遵循以下建议来简化您的移动设计：

优先考虑关键功能：仅预先提供基本功能，因为这些是用户积极寻求的。避免在一个页面上使用大量号召性用语的网站过度拥挤。坚持用户会主动搜索的重要功能，例如联系表格。

优化菜单设计：避免菜单中的选项和功能列表很长。相反，请考虑使用汉堡菜单——一个可以打开较长菜单的按钮。这种方法可以节省空间并减少混乱，尤其是在较小的屏幕上。

14. 使网站与两个方向兼容

移动设备的优势之一是能够在纵向和横向之间切换。确保您的网站设计为在两个方向上都能正常运行，这样用户无论如何握持设备都可以舒适地浏览您的网站。

15. 简化导航

当用户拿起智能手机时，他们通常想要一些特定的东西——快速回答、餐厅地址或客户服务号码。在这些情况下，他们希望尽可能快速、轻松地找到所需的信息。考虑您的移动访问者正在寻找什么，并确保在您的移动主页上很容易发现它。使用分析来了解移动访客寻找什么。在 Google Analytics 中，您可以将移动流量添加为 Segment 部分，以便您查看移动访客如何与您的网站互动。

16. 消除文本拦截广告和弹出窗口

移动用户的屏幕空间有限，因此当广告阻止他们试图访问的网页内容时，这会变得令人沮丧。文本拦截广告和弹出窗口也会阻碍导航，使用户难以找到他们来的目的。大多数访问者不会费心搜索小 X 来关闭弹出窗口——他们只会点击另一个站点。相反，在您的移动网站上选择最少的广告或没有广告，以提供更好的用户体验设计。

如果您必须将它们用于促销目的，请有策略地这样做。确保弹出窗口仅在用户滚动到页面底部时显示，而不是在用户登陆时立即显示。此外，请确保关闭按钮足够突出，以便用户轻松找到和单击。或者，考虑使用其他网站元素，例如用于促销的不那么突兀的顶部横幅，以及大小合理的关闭按钮。

17. 提供切换到桌面视图的选项

在某些情况下，移动访客可能更喜欢以传统的桌面布局查看您的网站。为了容纳这些用户，请为他们提供一个选项，以便在需要时切换到标准视图。这可以通过页面底部的简单链接或菜单上的切换按钮来实现。

18. 在真实的移动设备上测试网站

定期测试是发现给访问者带来更糟糕体验的小问题的最佳方法。每隔一段时间，在手机和平板电脑上打开您的网站，花一些时间浏览一下，看看是否有任何难以查看或难以做到的事情。请务必使用 Android 和 iOS 设备进行测试。对于 Wix 网站，使用 Editor 预览移动和桌面视图。您还可以通过 Google Lighthouse 运行该网站，这是一项免费使用的移动友好型测试。