本文将详细阐述组件控件结构体系中的导航系统,分别为7类:底部标签式导航、分段控制式导航、列表式导航、下拉菜单式导航、抽屉式导航、宫格式导航和卡片式导航。其中,底部标签式导航定义为用于一级目录的导航,位于页面底部,能告诉用户当前位置及用户切换统一层级之间的不同模块,一般最多不超过五个标签;而顶部导航则用于二级导航(遵循Material Design规范的除外)。

关于控件和组件的区别,通俗的解释说法就是组件为多个元素组合而成,而控件为单一元素组合而成。如果单纯通过组件控件,难以满足功能划分的需求。因此,本文在分类里面不仅仅含有组件和控件,而是将其范围扩大,以便更好地组织内容和功能。

导航类的作用有以下几点:1) 结构化产品内容和功能;2) 突出核心功能;3) 扁平化用户任务路径。其中,底部标签式导航可以将常用的导航放在底部,无论用户单手还是双手操作都能轻松点击,从而实现各功能模块之间的跳转。标签式导航有底部导航和顶部导航两种,底部导航用于全局导航,顶部导航用于二级导航(遵循Material Design规范的除外)。

至于缺点方面,目前还没有提到明显的缺点。当然,在实际应用中可能会出现一些问题或挑战。例如:如何保持导航的清晰度和易用性?如何处理过多或过少的导航选项?如何避免用户在使用过程中产生困惑或迷失方向等。这些问题需要根据具体情况进行分析和解决。

由于尺寸限制,标签式导航的数量上限最好是5个,超过5个就要考虑产品的需求分组是否合适或考虑更换框架。标签栏占用了一定的空间,所以减少了页面的信息承载量。为了更好地展示页面信息,有些产品会使用一种隐藏的标签栏,这种标签栏会在用户上滑阅读时隐藏,下滑返回时再显示。这种做法确实照顾了页面的信息展示,但是也要具体产品慎重看待,因为他可能会让导航失去便捷性从而降低切换效率。

舵式导航是底部标签式导航的变种。为了突出中间的功能,将中间标签图标设计得比较突出,鼓励用户多使用该功能。除去两侧4个标签之外,其他重要的标签都隐藏在舵式导航中或者将那些重要性高、使用相当频繁的功能入口放在里面。但是舵式导航本身存在设计矛盾。在舵式导航中位置应该是重要性和使用频率高的功能,既然如此重要,为什么要隐藏在舵式导航中?这些功能放在二级界面中相当于被埋起来了,会增加用户的记忆负担和操作负荷。

分段控制式导航通常用于展示同意模块下不同类别的信息或者筛选不用模块的信息。一般为二级导航。优点是可以很好地扁平化信息层级并同时提供了进入不容信息分类或模态的入口;用户可以迅速实现同一模块下不同类别信息之间的切换并且不会迷失方向。缺点是位于顶部,切换起来不方便;占据空间导致屏幕可展现区域变少。

列表式导航通常针对具体某个模块内容的信息进行分类,以列表的形式去呈现。优点是将具体的某个模块的结构以列表的形式进行分类展现结构清晰便于用户理解;适用于大量信息分类展现空间利用效率高;可以展示大量条目;具有很强的延展性可以不断地增强信息而且一般来讲她的信息格式都比较一致调整弹性高抗信息冲击力也很强;导航效率高可以引入字母索引;可以很方便地进行分组分类;适合宽而深的信息层级。缺点是功能重于形式承载的信息种类比较单一容易引起用户单调感很难让用户长时间停留;如果列表中蕴含的信息量比较庞大往往需要加入搜索功能或者索引否则用户会遇到寻找信息的困难。

下拉菜单式导航是指用户向下滑动屏幕后出现菜单选项进行选择。

菜单式导航通常用于筛选同一模块下的不同类别的信息或者是快速启动某些常用的功能模块。这种导航形式一般不会用于全局导航,多用于浏览类的APP的二级导航。它能将同一模块的信息做个分类,让用户更清晰地了解这个模块都为我们提供哪些信息或分类。微博国际版和无秘的二级导航都采用菜单式导航的形式。抽屉式导航通常针对产品偏沉浸式阅读的情况下,其他模块切换频率低,可采用此导航形式。它常与底部标签式导航组合使用,将一级页面内的信息再细分,给人以清晰的呈现方式。若该产品追求核心内容的突出,可弱化其他信息的展示时,即可采用此导航形式。

抽屉式导航是把除了核心功能以外的低频操作都放到一个抽屉里,使得用户获得沉浸式的体验,而且能够集中用户的注意力,让用户去更好地完成核心功能,不被打扰。优点包括:1. 用户可以将注意力放在首页,减少其他类型的导航带来分散用户注意力的情况;2. 大限度地利用屏幕空间。缺点包括:1. 浪费流量,其他模块的流量会被遏制;2. 如果产品框架比较大、需要多功能同时推广的话,不适合用该导航。宫格式导航类似于手机桌面各个应用入口的导航方式。每个入口往往是比较独立的信息内容,用户进入一个入口后只处理与此入口相关的内容。如果要跳转至其他入口必须要先回到入口总界面。优点包括:1. 宫格式结构可以作为信息或平台的入口;2. 适合承载订阅类产品或众多属性差异非常明显的分类信息;3. 可以划分多个内容、多个模式由不同团队独立开发每个模块再聚合;4. 在具有较强延展性方面可以无限扩展内容。缺点包括:1. 用户选择压力大。

卡片式导航是一种更加可视化的导航,它能根据页面内容的变化及时更新图片,适合以图片为主的内容,像新闻、美食、旅行、视频图片等经常使用,常作为二级导航。宫格式导航的一种延展形式。每个条目可以呈现更多的信息。

优点:对运营量的要求比较低,而且单个条目的转发率会相应的提高,如果产品的运营量较低或需要较高的条目转化率,可以使用这种设计。

缺点:当运营量较大的时候,这种结构会降低用户寻找信息的效率。