导航是任何应用程序的支柱。其目的是让用户以尽可能少的摩擦到达他们想去的地方。
移动导航必须是可发现的、可访问的并且占用很少的屏幕空间。您的网站或应用程序的最佳导航类型将取决于您用户的需求。
所有移动导航模式都会在内容优先级和可访问性之间进行协商。例如，汉堡菜单为内容提供了更多空间，但更难发现。考虑用户的目标，以在内容和导航之间取得适当的平衡。
顶部导航栏
顶部导航栏从 桌面设计来到移动端。这是一个在屏幕顶部列出主要导航选项的栏。它通常不包含超过五个链接——除非它是一个可滚动的轮播。
顶部导航栏通常与其他导航方式（例如选项卡或底部导航）结合使用。顶部栏向用户传达它包含的链接是必不可少的——尤其是当用户向下滚动时它们仍然可见。
但是，顶部导航栏有其缺点：
• 只有在导航选项相对较少的情况下才能正常工作，
• 它占据了折叠上方的宝贵空间，
• 用户需要改变他们的手柄才能访问它。
底部导航栏
底部导航栏与顶部导航栏具有 相同的主链接，但位于屏幕底部。它的位置允许用户在不改变手柄的情况下用拇指轻敲链接，从而提高了整个产品的可用性。
就像顶部栏一样，底部导航栏也有 3-5 个目的地以便快速访问。Apple 的人机界面指南建议标签栏出现在屏幕底部。
标签
术语“标签”和“导航栏”之间有很多重叠之处。选项卡可以同时出现在屏幕的顶部和底部这一事实只会增加混乱。
大多数专家都同意选项卡只能用于将内容分成多个部分，而不能用于操作。其他区别则更加矛盾。
一些人认为标签总是在屏幕上可见，而导航栏在用户向下滚动时会消失。另一个想法是导航栏包含不相关的选项，而选项卡有一个主题。
无论如何，这两种导航模式非常相似。它们都适用于导航选项很少的网站和应用程序，因为很难在屏幕上水平放置超过 5 个选项并且仍然保持最佳触摸目标大小。
在 Android 上，标签通常出现在顶部，而 iOS 应用程序将它们放在页面底部。
汉堡菜单
汉堡菜单 是指任何隐藏在图标后面的主要导航选项的菜单。最常用的图标是汉堡图标（3 条小水平线）和菜单标签。
汉堡菜单有几个优点。它们可以在很小的空间中包含许多选项，并且可以轻松支持子菜单。
一个显着的缺点是这样的菜单不太容易被发现。虽然移动用户对汉堡菜单很熟悉，但许多人仍然无法直观地打开它们。
汉堡菜单最适合内容繁重的浏览网站和应用程序，在这些网站和应用程序中，用户不太关心导航到特定网站部分，而大多只是浏览呈现给他们的内容。
如果您决定使用汉堡菜单，请考虑以其他方式支持导航。例如，您可以使IA结构通过增加横截面链接，您的网站更容易被发现。
其他列表导航模式不仅可以隐藏主要选项，还可以隐藏次要选项，包括：个人资料、帮助、设置、书签等元素。
卡片
UI 卡 看起来像物理卡，通常具有物理边界和方形或圆形边缘。它们有各种形状和大小。
一张卡片通常由背景、图像和一些容器组成。这些容器包含图像、CTA 按钮、标题或副标题等项目。
卡片 UI 设计有很多优点。它们直观、直接，并使内容更易于扫描。卡片可以轻松个性化并适应不同的屏幕尺寸——使其成为响应式应用程序的绝佳选择。
基于手势的导航
基于手势的导航 依赖于手势：滑动、触摸、拖动（水平和垂直）以及放大和缩小。
这种类型的导航已被 Tinder 等应用程序推广。在应用程序中，用户可以向右滑动以喜欢某人，向左滑动以拒绝他们。
基于手势的导航创建了交互式和动态的用户体验。如果做得好，手势感觉很直观，即使是没有经验的用户也能很快做出正确的手势。
确保基于手势的导航不是唯一的导航选项。
3D 触控
3D 触控是基于压力感应的 Apple 技术。用户在触摸屏上施加一定的压力水平，触发导航快捷方式。然后系统会显示所选应用程序的关键操作。此功能通常适用于本机应用程序，很少适用于 Web 应用程序。
3D 触控的另一个常见用途是内容预览。在处理内容选项列表时，例如电子邮件收件箱或文章列表，这可能是为用户提供预览的好方法。
确保 3D 触摸不是访问中心功能的唯一方式。用户应该能够在不发现 3D 触摸选项的情况下找到主要功能。
导航中心
导航中心 是一个页面，通常是主页，列出了所有的导航选项。 要导航到新位置，用户必须首先返回中心，然后使用其中列出的选项之一。
这种类型的导航在基于任务的网站和应用程序中运行良好。一个常见的用例是航空公司网站。移动主页可能会提供购买机票、检查航班或阅读相关信息等选项。用户不太可能需要在单个会话中检查和购买机票，因此他们不需要经常返回主页。
圆形菜单
圆形菜单类似于汉堡菜单——选项列表隐藏在独立的可操作按钮后面。不同之处在于，在圆形菜单中，它通常位于屏幕底部，并且它显示的选项是圆形的。
画报式菜单是表达公司品牌标识并给用户留下持久印象的好方法。你可以在旧版 Tumblr 应用程序中看到此类菜单的示例。它在底部栏中显示了主要功能，蓝色铅笔操作按钮从其他按键中脱颖而出，使其直观。
考虑手的位置
在设计移动应用程序时，考虑人们的手和手指的大小及其位置至关重要 。
使链接和按钮足够大，以便大多数人能够在第一次尝试时成功点击它们。一般的经验法则是为所有按钮提供至少 10 毫米的尺寸。
元素之间的间距与触摸目标同样重要。添加足够的空间，以便用户不会点击他们实际目标附近的随机元素。
选择导航时考虑用户需求
在决定导航选项时， 请考虑用户访问您的网站或应用的原因。
当人们来获取内容时——阅读新闻、查看股票数据或观看有趣的猫视频——他们希望立即获得信息。在这种情况下，像汉堡菜单这样侵入性较小的导航效果最好。
其他 Web 体验受益于其主页上的导航中心。该中心适用于基于任务的产品，用户需要在这些产品中预订航班、查找健身计划或注册课程。
考虑用户的需求将帮助您在内容和导航可访问性之间取得最佳平衡。
以上内容为转载
网友评论