通用导航栏设计

APP开发


浏览:1259 次

导航系统相当于APP的骨架,支撑着内容和功能的血肉。导航系统的作用是组织内容和功能,根据产品的信息架构图将它们连接起来,并将它们呈现给用户。导航将分散的内容和功能组织成一个完整的结构化系统。建立合理的导航系统,设计流畅的任务路径,让用户可以在各个模块之间快速切换。良好的导航可以使用户的任务路径平坦化,降低用户的操作成本,从而改善用户体验。

常用导航栏设计:

1.底部选项卡栏

这是APP最常用的导航模式。它用于导航第一级目录。它位于页面底部,无论用户是单手操作还是双手操作,都可以轻松点击。它可以告诉用户当前位置和统一级别之间的不同模块。

底部标签栏具有高度的包容性,可以形成最基本的信息框架,然后使用其他导航模式来承载特定的功能和内容。演示形式包括文本+图标和纯图标。其中大多数是文本+图标,这可能会减轻用户的内存负担。它可以让用户第一时间了解最常用和最重要的功能和信息,并支持用户在不同模块之间快速切换。

2.底部(方向舵)延伸杆

为了突出中间功能,请使Tab更加突出,并鼓励用户更多地使用此功能。在使用过程中,我发现新浪和闲鱼使用了这个导航栏来突出显示第三个选项卡选项卡,并将一些常见功能放入其中。它可以使导航栏更有趣,并让用户贡献更多内容。

3.顶部选项卡栏

通常用于显示同一模块下不同类别的信息或过滤不同模块的信息。它通常用于辅助导航并支持滑动。信息层次结构可以很好地扁平化,这样用户可以在同一模块下快速切换不同类型的信息,而不会迷失方向。

4.侧边(矩形)导航栏

通常在产品沉浸在阅读中时使用。主导航模块的开关频率较低,并且放入其中的模块的使用频率较低。它通常与底部标记导航结合使用,以细分第一级页面中的信息,从而提供清晰的演示。通过将非核心功能的低频操作放在抽屉中,用户可以获得身临其境的体验并集中注意力,从而在不受干扰的情况下更好地完成核心功能。用户可以将注意力集中在主页上,减少其他类型的导航引起的分心,给用户更沉浸式的操作和阅读感,并最大限度地利用屏幕空间。

5.列表导航栏

通常用于显示特定模块内容的信息被分类,大量项目以列表的形式呈现。它主要用于辅助主导航显示信息或甚至更多级别的内容,有时还需要一些提示信息(例如ios的健康状况)。板状结构延性强,调节弹性高,抗信息冲击能力强;其导航效率高,可引入字母索引;便于分组和分类。

6.宫殿导航栏

它通常用作信息或平台的入口,为产品或项目信息提供聚合载体。适合携带订阅产品或大量属性差异明显的分类信息。这样的导航信息的呈现内容相对较少,但每个项目选择的效率相对较高。交通可通过入口分布;它具有很强的可扩展性,可以无限扩展内容;它可以分为多个内容和模式,每个模块可以由不同的团队独立开发,然后聚合。导航app生产

7.卡片导航栏

宫殿导航的一种扩展形式,通过增加内容的可见性,使每个项目都能显示更多信息。它可以根据页面内容的变化及时更新图片。它适用于基于图片的内容,如新闻、美食、旅行、视频图片等。它通常用作辅助导航。对运营量的要求相对较低,单个项目的转化率将相应提高。

8.基于菜单的导航

它通常用于辅助导航,以过滤同一模块下的不同类型的信息,或快速启动一些c