借助设计B端产品导航的机会,我对导航进行了一次彻底的分析( 三 )


优点:可以在第一时间让用户了解使用频率最高、最重要的功能和信息 , 同时能够支持用户在不同模块之间的快速切换 。
缺点:底部导航栏超过5个就容易引起误点操作 , 同时在底部会占据一定的屏幕空间 。
借助设计B端产品导航的机会,我对导航进行了一次彻底的分析
文章图片
3.2.3底部(舵式)拓展栏
为了突出中间的功能 , 把Tab做的比较突出 , 鼓励用户更多使用该功能 。 常见的APP如某鱼、某乎等使用了这种导航栏 , 把第三个Tab标签做的更加突出 , 放进了一些常用的功能 。
优点:可以提高导航栏趣味性 , 让用户贡献更多的内容 。
缺点:此类导航也是一种二级导航 , 既然是重要功能为什么会放在二级导航呢?把重要功能放在二级界面 , 会增加用户的记忆负担以及操作负担 。
借助设计B端产品导航的机会,我对导航进行了一次彻底的分析
文章图片
3.2.4顶部Tab栏
用于展示同一模块下不同类别的信息或者筛选不用模块的信息 , 一般二级导航且支持左右滑动 。
优点:可以很好地扁平化信息层级 , 让用户可以迅速实现同一模块下不同类别信息之间的切换并且不会迷失方向 。
缺点:位于顶部切换起来不是很方便 , 同时占据空间 , 导致屏幕可展现区域变少 。
借助设计B端产品导航的机会,我对导航进行了一次彻底的分析
文章图片
3.2.5侧边(矩式)导航栏
通常针对产品偏沉浸式阅读的情况下使用 , 主导航模块切换频率低 , 放入其中的模块使用频率低 。 常与底部标签式导航组合使用 , 将一级页面内的信息再细分 , 给人以清晰的呈现方式 。 通过把非核心功能的低频操作都放到一个抽屉里 , 使得用户获得沉浸式的体验 , 而且能够集中用户的注意力 , 让用户去更好地完成核心功能 , 不被打扰 。
优点:用户可以将注意力放在首页 , 减少其他类型的导航带来分散用户注意力的情况 , 给用户更沉浸式的操作感和阅读感 , 同时可以最大限度利用屏幕空间 。
缺点:侧边导航属于二级导航 , 用户使用的频率会降低 , 不利于产品页面流量的最大化 , 越放在下面的功能点击率越低 , 如果产品框架比较大 , 有很多功能需要推广时 , 一般不用此类导航 。
借助设计B端产品导航的机会,我对导航进行了一次彻底的分析
文章图片
3.2.6列表式导航栏
通常用来展示某个具体模块内容的信息进行分类 , 以列表的形式呈现大量的条目 。 多用于辅助主导航来展现信息甚至更多层次的内容 , 有时候需要一些提示信息 。
优点:
列表式结构具有很强的延展性 , 调整的弹性高 , 菜单的排序更符合人的阅读习惯 , 它的导航效率高;可以引入字母索引 , 在菜单很多时对菜单进行二次分类 。缺点:承载的信息种类比较单一 , 容易引起用户的单调感 , 很难让用户长时间停留 , 如果列表中蕴含的信息量比较庞大 , 往往需要加入搜索功能或者索引 , 否则用户会遇到寻找信息的困难 。
借助设计B端产品导航的机会,我对导航进行了一次彻底的分析
文章图片
3.2.7宫格式导航栏
一般作为信息或平台的入口 , 为产品或项目信息提供聚合的载体 , 适合承载订阅类产品或众多属性差异非常明显的分类信息 , 此类导航信息的呈现内容比较少 , 但是每个项目选取的效率比较高 。
优点:
可以通过入口来进行流量的分发 , 具有较强的延展性 , 可以无限扩展内容;可以划分多个内容、多个模式 , 由不同团队独立开发每个模块再聚合 。缺点: