移动网站设计是必不可少的。
为什么？因为移动设备正在彻底改变我们的连接方式，从而改变企业的运营方式。事实上，现在大部分网络流量都来自移动设备。
Forrester Research 副总裁兼首席分析师Thomas Husson 表示： “移动不仅成为新的数字中心，而且成为连接物理世界的桥梁。“这就是为什么移动不仅会影响您的数字化运营，还会改变您的整个业务。”
换句话说，您需要一个移动响应式网站。
但什么是适合移动设备的网站？在本文中，您将了解有关移动友好型网站的所有信息，并查看九个最佳移动网站设计示例。此外，您将学习如何确定您的网站是否适合移动设备。
什么是适合移动设备的网站？
简而言之，适合移动设备的网站是针对智能手机和平板电脑等手持设备设计和优化的网站。
移动响应式设计是创建一个适应其浏览屏幕尺寸的网站的过程。
对于我们的网站，我们有一个适合移动设备的网站设计。让我们比较一下它在桌面和移动设备上的外观。
在下图中，您可以看到桌面网站空间充足，页面元素位置并排排列，文字相对于屏幕尺寸较小。
另一方面，当您在移动设备上查看网站时，页面元素在一个长列中相互堆叠，并且每个元素周围的空间较小。此外，按钮更大，便于点击，文本相对于页面大小更大，更易于阅读。
Oberlo 移动网站设计
移动营销公司 Localytics 的首席执行官Raj Aggarwal 表示：“我们对移动应用程序的丰富互动体验为包括网络在内的所有数字媒体创造了新的标准和期望。“结果是网站正在发展，其丰富的功能变得更像应用程序。”
移动网站设计的重要性
让我们切入正题：在 2019 年最后一个季度，智能手机占全球网站流量的 52.6%。
这意味着移动设备的使用现在主导着台式电脑。
此外，预计到 2021 年，全球移动用户数量将增长到 38 亿。
正如营销公司 Spider Trainers的创始人 Cyndie Shaffstall 所说：“移动不是未来，而是现在。在他们选择的环境中与您的客户会面，而不是在您方便的地方。”
移动设备也在改变购物习惯。
据百度称，59% 的购物者表示，在决定从哪个零售商或品牌购买时，能够在他们的移动设备上购物很重要。
此外，在店内购物的智能手机用户中有 70% 会转向他们的移动设备来事先研究购买情况。
如果这还不够，百度的算法会在搜索结果中优先考虑适合移动设备的网站。
2020 年 3 月，百度表示，“为简化起见，我们将为所有网站切换到移动优先索引。”
如果您想知道这意味着什么，Baidu 开发者倡导者John Mueller 解释说：
“目前，百度查看网站的桌面版本，然后根据该信息确定移动网站的排名。一旦此更新推出，就会发生相反的情况。百度将开始查看您的移动网站，并据此对桌面网站进行排名。”
该更新将于 2020 年 9 月正式生效，但搜索结果中显示的70% 的网站已经根据这种移动优先的索引算法进行排名。
百度统计
最后，许多用户使用缓慢、弱电话连接来加载移动网站。因此，品牌必须创建快速加载的移动网站设计。
总而言之，世界现在是移动优先的——这就是你需要一个移动响应网站的原因。
来自最佳移动网站的 8 个设计技巧
在本节中，我们将仔细研究您可以使用的八个移动网站设计技巧。此外，您还会看到来自网络上一些最佳移动网站的真实示例。
1.使用大按钮
适合移动设备的网站需要有足够大的按钮，以便用户在无需放大的情况下点击它们。
此外，超链接之间需要有空格。如果链接放置得太近，用户可能会尝试单击一个链接并意外单击另一个链接。
Shopify在其移动网站设计中使用大按钮并在超链接之间留出足够的空间。
Shopify 大按钮
因此，当您设计移动响应式网站时，请牢记间距，并确保每个超链接都可以轻松点击。
2.使文本足够大以阅读
这个可能看起来有点明显，但它对于移动友好的网站设计也很重要。
用户永远不必放大或向左或向右滚动来阅读内容。文本应始终足够大以舒适地阅读。
在下面来自Beardbrand的示例中，您可以看到显示的所有文本都非常适合屏幕的大小。
Beardbrand 大号文字
在各种尺寸的屏幕上使您的文本足够大，以便用户可以轻松阅读您要说的内容。
3. 简化菜单
桌面网站菜单有很多空间。它们可以占据屏幕顶部的整个栏，并具有广泛的下拉选项，所有这些都不会影响用户体验。
在移动设备上情况并非如此——只是没有足够的空间。
适合移动设备的网站应该使用简单的菜单来呈现网站的概览。然后，用户可以使用类别、过滤器或搜索功能来确定他们正在寻找的内容。
大多数适合移动设备的网站使用汉堡符号（由两到三条水平线组成）来表示菜单。
让我们看看最好的移动网站之一Kylie Skin的一个很好的例子。
当用户点击屏幕右上角的两行汉堡菜单时，他们将看到一个带有大按钮和文本的全屏菜单。
KylieSkin 移动菜单示例
创建移动响应式网站时，请保持菜单简单，以便用户轻松找到所需内容。
4.提供简单直观的搜索功能
您网站的搜索功能对移动用户尤为重要。
如上所述，简化的菜单可以使移动浏览更容易。但是，它们也可能使用户更难找到特定项目。
为了让用户轻松找到他们想要的东西，请将搜索功能放在前面和中心位置。
Shopify 用户Gymshark将搜索功能放置在页面的顶部栏中。还有一个直观的过滤功能，让用户更容易找到特定类型的产品。
Gymshark 搜索和过滤功能
关键要点？在您的移动网站设计中加入简单有效的搜索功能。
5. 轻松取得联系
如果客户正在寻找您的联系方式，他们可能会遇到麻烦——这意味着他们可能已经有点沮丧了。不要因为难以与您联系而雪上加霜。
尤其是当84% 的消费者认为客户服务是决定是否购买的关键因素时。
客户服务统计
这是 Shopify 用户Bremont的另一个出色的移动网站设计示例。这个奢侈手表品牌在屏幕右下角放置了一个聊天图标，让网站访问者可以快速轻松地联系代表。
Bremont 联系方式
如果您不能全天候提供实时聊天，请考虑链接到Facebook 聊天机器人，或者只是提供一个联系表，用户可以通过菜单中的“联系”链接访问该联系表。
6.创建简单的表格
用户可能更倾向于在计算机上填写长表格，因为屏幕更大，使用键盘打字更容易。
在移动设备上，表单需要更短，带有大文本字段和按钮。
例如，如果您要求用户注册您的邮件列表，您不应该只要求提供名字和电子邮件地址。
如果您需要包含更多问题，请让它们快速且易于回答。
在这个来自 Shopify 用户QuadLock的移动网站设计示例中，您可以看到具有简单表单要求的大字段。甚至还有一个下拉菜单可以帮助用户提供有关他们查询的信息。
QuadLock 联系表
简而言之，请确保您的表格简短而甜美。
7.创建引人注目的号召性用语
号召性用语- 也称为 CTA - 是图像、横幅或文本，字面上呼吁用户采取某种形式的行动。
例如，您可能会提示用户注册您的邮件列表、了解有关优惠的更多信息或购买产品。
这种营销策略在移动网站设计中起着至关重要的作用。
然而，在如此有限的屏幕空间中创建引人注目的号召性用语可能具有挑战性。
在这个来自 Shopify 用户 Luxy Hair的移动网站示例中，您可以看到两个带有号召性用语的横幅。第一个是宣传一个新产品附带免费礼物，第二个是提示用户了解更多关于品牌的免费送货和 90 天换货政策。
Luxy Hair 号召性用语
在为适合移动设备的网站创建 CTA 时，将它们放在首屏，用户无需向下滚动即可看到它们，从而使它们脱颖而出。
8.避免弹出窗口
让我们面对现实吧：大多数人讨厌弹出窗口。事实上，如果你用百度搜索“我讨厌弹出式广告”，你会发现将近 4800 万条结果。
难怪百度在 2017 年推出了一项算法变更，惩罚在移动设备上提供特定类型弹出窗口的网站。
如今，如果您：
显示一个涵盖主要内容的弹出窗口
显示用户必须先关闭才能访问主要内容的独立插页式广告。
使页面顶部类似于独立的插页式广告，并将原始内容放在下方。
糟糕的弹出窗口
也就是说，某些类型的弹出窗口不应该对您的排名产生负面影响，例如
用于履行法律义务的插页式广告，例如年龄验证、Cookie 同意或GDPR。
用于访问私人内容的登录窗口，例如电子邮件或付费墙后面的内容。
易于关闭且“使用合理数量的屏幕空间”的小横幅，例如 Chrome 和 Safari 使用的应用安装横幅。
好的弹出窗口
最重要的是，移动弹出窗口会让用户感到沮丧，并且会损害您的搜索排名，因此请仅在绝对必要时使用它们。
如何确定您是否拥有适合移动设备的网站
如果您想知道您的网站是否适合移动设备，只需花一点时间就可以使用Baidu 的移动设备友好测试工具找出答案- 只需输入指向您网站的链接，然后单击“测试 URL”。
该工具将评估您的网站对移动设备的友好程度，并详细说明您可以采取哪些措施来改进它。
百度的移动友好测试
摘要：2021年移动网站设计
适合移动设备的网站是旨在在智能手机和平板电脑上正常运行的网站。现在世界是移动优先的，您的网站也应该如此。
总之，这里有八个移动网站设计技巧：
使按钮足够大，以便人们点击它们。
确保文本足够大，无需用户放大即可阅读。
简化您的菜单，以便在小屏幕上轻松导航。
将搜索功能放在前面和中心位置，并允许用户过滤搜索结果。
让用户轻松联系您。
创建简单易用的表单。
将号召性用语放在首屏，使其突出。
除非绝对必要，否则请避免使用弹出窗口让用户感到沮丧。
您对移动网站设计有何看法？我们是否错过了任何出色的移动网页设计最佳实践？在下面的评论中让我们知道！
2022-07-13 21:01:36 
点击数：
