2024 年 11 月 27 日

汉堡菜单的替代品

放弃汉堡菜单以提高参与度!为清晰起见,请使用选项卡、底部导航或行内布局等。使用真实内容进行设计,创建用户友好、直观的导航,增强体验。
Image UXDIvers blog

多年来,汉堡菜单一直是设计师的热门话题。尽管许多应用程序仍然依赖这种模式,但它通常源于不良的信息架构或大量的内容。这种方法可以掩盖复杂性,但要付出代价——降低参与度、减缓探索速度并使用户感到困惑。

如果你的应用程序变得过于复杂,可能是时候重新考虑你的导航策略或考虑在他们自己的独立应用程序(如Facebook和Messager)中拆分功能了

让我们来探索传统汉堡菜单的一些用户友好型替代品:

选项卡(直观且熟悉)

选项卡将内容组织成清晰、可识别的类别。它们的简单性,尤其是与图标和标签搭配使用时,使其成为直观导航的首选。选项卡擅长保持用户的定位和参与度,而不会让他们感到不知所措。

Tabs mobile apps


底部导航(始终触手可及)

底部导航可确保关键操作始终可见,是少数主要选项的理想之选。这种模式对于具有同样重要部分的应用程序特别有用。要节省垂直空间,可以考虑在用户滚动时隐藏导航栏,在向上滚动时显示导航栏。推荐使用带有标签的图标,但如果图标不言自明,则不是强制性的。

Bottom Navigation (Always Within Reach)

显示更多(保持清洁)

对于具有众多选项的应用程序,“显示更多” 功能可以整理界面。此选项可以打开模态、弹出窗口或新页面,从而保持简化的屏幕,同时使用户可以访问其他功能。

Show More (Keep It Clean)

可滚动导航(按需扩展)

当您的应用程序的选项多于屏幕可显示的选项时,可滚动导航是一个很好的解决方案。这通常用于选项卡,如Netflix或Play商店等应用程序所示,允许用户浏览多个类别而不会出现视觉过载的情况。

Scrollable Navigation (Expand on Demand)

行内导航(突出显示热门类别)

对于 Web 或混合应用程序,内联导航允许您在主中心或主页上组织热门类别。将这些群组以具有不同标题的列表形式呈现,并在每个类别下方使用可水平滚动的卡片以轻松访问内容。

Inline Navigation (Highlight Top Categories)

分段控制(简单和直接)

当你只有几个目的地时,分段控制是一个很好的选择。只需轻点一下即可查看和访问所有选项,从而使导航变得简单易用。

Segmented Control (Simple and Direct)

优先搜索(不要隐藏)

搜索通常隐藏在汉堡菜单后面,但如果它是一个关键功能,它应该放在最前面和中心位置。将搜索栏放在屏幕顶部,或包括一个可直接进入搜索模式的可见图标。

Prioritize Search (Don’t Hide It)

Protip: 设计时务必考虑实际内容。占位符文本和 lorem ipsum 通常会导致深思熟虑的导航和冗余的菜单。通过处理真实内容,你将创建有针对性且以用户为中心的布局。


研究表明,依赖汉堡菜单的应用程序的参与度和应用内花费的时间都较低。那些在保持用户参与度方面蓬勃发展的公司已经转向了更明显、更直观的模式。

如果你需要说服客户或经理重新考虑汉堡菜单,请提醒他们,没有合适的家,导航不应该成为所有东西的 “垃圾抽屉”。周到、清晰的导航永远是更好的选择。

外卖

直观且用户友好的导航将永远胜过隐藏的复杂性。挑战现状,考虑使用这些替代方案来提高应用程序的可用性和参与度。

订阅我们的时事通讯以获取最新消息和更新!

Copy link
我们对新项目感到兴奋!

想着一个项目吗?
让我们开始工作吧。

开始一个项目