移动导航设计的基本要素

time

无论您是想构建一个在桌面和移动设备上看起来都很棒的网站，还是打算加入 48% 拥有自己应用程序的小型企业，为用户提供轻松的移动浏览体验都保证为您的品牌带来新的机会。

移动导航是指用户可以在任何移动设备上浏览网站或应用程序并与之交互的方式。在制作这些资产时，有效的移动导航对于提供无缝的 UX 设计至关重要，并且可以影响它们的整体成功。

在本文中，我们将讨论移动导航的含义，并探索当今流行的移动导航模式，以及如何使它们变得用户友好。

什么是移动导航？

在移动设备上浏览时，网站导航是用户体验的核心。移动导航是通知和引导访客浏览应用程序或移动网站的功能，包括痕迹导航（和痕迹导航）和锚链接等功能。与桌面导航相比，由于空间限制，移动导航往往面临更多挑战。

自从移动使用量增加以来，UX 和 UI 设计师多年来通过进行 UX 研究和测试不同的移动模式，将移动导航变成了一种艺术形式。移动网站导航和移动应用程序导航都是此对话的一部分，调查用户使用移动设备的行为方式，以更好地了解在较小规模上交付内容的最有效方法。

良好的移动导航不仅仅是为用户找到从 A 点到 B 点的最快方式。它有助于实现合乎逻辑的用户旅程，防止用户感到沮丧，并允许他们通过您的移动网站或应用程序发现有关您的品牌和产品的更多信息。

5种基本的移动导航模式

了解最常用的移动导航模式和网站菜单是制作让用户满意的应用程序或移动网站的重要第一步。

最适合移动网站和大型应用程序：汉堡菜单

到目前为止，构成经典汉堡菜单的三条水平线  在移动网站设计领域无处不在。小图标会隐藏菜单，直到用户单击它，汉堡菜单在移动网页设计中比在移动应用程序中更常见。”

由于汉堡图标在主页上隐藏了菜单，因此设计人员可以提供更多菜单项或使标题更长，而不会使页面拥挤。如果您选择底部导航，您将被限制为五个项目，因为它真的很小，需要更加专注。

最适合简化用户旅程：Tab 栏

“标签栏是当今移动应用程序中最常见的导航模式，它位于屏幕底部，是一种更注重设计的导航模式，很容易被发现。通常，选项卡栏包含提供直接访问导航项的图标。它的交互性质和在 Thumb 区域中的位置使其成为一种特别舒适的导航模式。

与汉堡菜单相比，选项卡栏在您可以显示的项目数量方面存在更多限制。由于操作系统指南允许您一次最多包含五个项目，因此作为所有者，您需要选择要在主导航上显示的最重要的内容。

最适合文本密集型应用程序和移动网站：基于网格的导航

基于网格的导航是一种全屏移动模式，它直接在移动应用程序的主屏幕上包含大多数菜单项。与汉堡菜单类似，您可以使用基于网格的导航来容纳任意数量的项目，因此它用途广泛，在设计方面有很多选择。

类似于 iPhone 和 Android 的移动导航模式，它是我们许多人都熟悉的用户界面。但正如 Gertman 指出的那样，它正变得越来越过时，需要这种布局的用户类型是浏览教育或社区应用程序以及包含大量阅读内容的网站。

最适合辅助导航功能：抽屉式导航

顾名思义，抽屉式导航是一种移动导航模式，其中大部分导航内容都包含在选项卡或侧边栏菜单后面。使用与汉堡菜单类似的概念，抽屉式导航栏可以隐藏许多菜单项。虽然菜单项是隐藏的，但如果没有明确的组织，导航系统将无法正常运行。“如果你有很多内容想包含在抽屉里，你需要确保它被组织起来并分为几类，这样用户就可以在众多选项中找到他们正在寻找的内容。”

最适合优化空间利用率：下拉菜单

下拉菜单提供了另一种通用的移动导航方法。只需轻轻一按，用户就可以展开选项列表，从而轻松发现更多选项，而不会使界面变得混乱。下拉列表对于表单或当您需要提供一系列选择而不会让用户不知所措时特别有用。请记住，将您的下拉选项设置得足够大，以便在移动屏幕上轻松点击，从而确保用户友好的体验。

最佳 Web 设计实践

以下是设计移动导航时要记住的一些最佳实践：

确保您的内容清晰易读

由于移动屏幕较小，确保用户可以轻松阅读您的内容非常重要。注意字体大小和样式，当它们被打包到小屏幕上时可能会让人不知所措，并尽可能减少书面内容的数量。

在导航菜单中包含基本项目

如果您使用的移动导航模式限制了您可以包含的菜单项的数量，请从战略上考虑只包含对用户最重要的页面。尽管基于网格和汉堡菜单移动导航允许更多选项，但您仍然应该意识到它们是否过载。

使用基于手势的导航来吸引查看者

基于手势的导航是指使用手势来控制和导航移动网站或应用程序的用户界面。您可以使用它来增强导航模式，允许用户在其设备上执行操作，例如向左或向右滑动、在屏幕之间移动或捏合和展开手指以放大和缩小。通常，手势交互提供了一种更自然、更直观的与电子设备交互的方式。

使用浮动操作按钮

浮动操作按钮 （FAB） 是显示在用户界面顶部的圆形按钮，按下该按钮时会触发主要操作。设计师通常将其放置在屏幕的角落并使其突出以吸引用户的注意力。FAB 提供对导航抽屉等基本功能的快速轻松访问。

应用单手导航原则

单手导航使用户只需用一只手即可在移动设备上执行常见任务。以下是单手导航的几个关键原则：

将最常用的元素保持在 Thumb 区域内

使用滑动等手势而不是按钮

提供视觉提示以指导用户的手

使用户能够根据自己的喜好自定义布局

相关阅读：网站设计制作