发表于: 2019-05-18 22:17:54

1 558


今天完成的事:任务二调研
明天计划的事:
星期天
遇到的困难:
没有
收获
常见的8种导航栏设计
Tab(标签式)导航栏
底部Tab栏
这是APP最常使用的导航模式,用于一级目录的导航,位于页面底部,无论用户单手还是双手操作都能轻松点击,能告诉用户当前位置及用户切换统一层级之间的不同模块。
底部Tab栏具有很强的包容性,可以形成最基本的信息框架,然后用其他的导航模式来承载具体的功能和内容。展现形式有文字 + icon,也有纯icon形式,大部分是文字+icon,可能是减少用户记忆负担。
底部Tab(今日头条&微信&美团&网易云音乐)
优点:可以在第一时间让用户了解使用频率最高、最重要的功能和信息,同时能够支持用户在不同模块之间的快速切换。
缺点:底部导航栏超过5个就容易引起误点操作,同时在底部会占据一定的屏幕空间。
底部(舵式)拓展栏
为了突出中间的功能,把Tab做的比较突出,鼓励用户更多使用该功能。使用过程中就发现新浪、闲鱼使用了这种导航栏,都是把第三个Tab标签做的更加突出,放进了一些常用的功能。
舵式导航栏(微博&闲鱼)
优点:可以提高导航栏趣味性,让用户贡献更多的内容。
缺点:说到底此类导航也是一种二级导航,既然是重要功能为什么会放在二级导航呢?我觉得这里有一定的矛盾。同时,把功能放在二级界面,会增加用户的记忆负担以及操作负担。
顶部Tab栏
通常用于展示同一模块下不同类别的信息或者筛选不用模块的信息,一般二级导航且支持滑动。
顶部Tab(网易云音乐&今日头条&喜马拉雅FM&微博)
优点:可以很好地扁平化信息层级,让用户可以迅速实现同一模块下不同类别信息之间的切换并且不会迷失方向。
缺点:位于顶部切换起来不是很方便,同时占据空间,导致屏幕可展现区域变少。
顶部Tab栏还有一种情况是动态的,比如微博顶部的“关注”,这种情况属于菜单导航,下面有分享。
侧边(矩式)导航栏
通常针对产品偏沉浸式阅读的情况下使用,主导航模块切换频率低,放入其中的模块使用频率低。
常与底部标签式导航组合使用,将一级页面内的信息再细分,给人以清晰的呈现方式。通过把非核心功能的低频操作都放到一个抽屉里,使得用户获得沉浸式的体验,而且能够集中用户的注意力,让用户去更好地完成核心功能,不被打扰。
侧边栏(QQ)
优点:用户可以将注意力放在首页,减少其他类型的导航带来分散用户注意力的情况,给用户更沉浸式的操作感和阅读感,同时可以最大限度利用屏幕空间。
缺点:侧边导航属于二级导航,用户使用的频率会降低,不利于产品页面流量的最大化,越放在下面的功能点击率越低,如果产品框架比较大,有很多功能需要推广时,一般不用此类导航。
列表式导航栏
通常用来展示某个具体模块内容的信息进行分类,以列表的形式呈现大量的条目。多用于辅助主导航来展现信息甚至更多层次的内容,有时候需要一些提示信息(如ios的健康)。
列表式(QQ邮箱、微信、健康、网易云音乐)
优点:列表式结构具有很强的延展性,调整的弹性高,抗信息冲击力也很强;它的导航效率高,可以引入字母索引;可以很方便的进行分组分类。
缺点:承载的信息种类比较单一,容易引起用户的单调感,很难让用户长时间停留;如果列表中蕴含的信息量比较庞大,往往需要加入搜索功能或者索引,否则用户会遇到寻找信息的困难。
宫格式导航栏
一般作为信息或平台的入口,为产品或项目信息提供聚合的载体,适合承载订阅类产品或众多属性差异非常明显的分类信息,此类导航信息的呈现内容比较少,但是每个项目选取的效率比较高。
宫格(IOS首页、支付宝、美团、天天P图)
优点:可以通过入口来进行流量的分发;具有较强的延展性,可以无限扩展内容;可以划分多个内容、多个模式,由不同团队独立开发每个模块再聚合。
缺点:宫格式结构是信息或平台的入口,所以具体的信息往往隐藏在下一级界面,用户无法第一时间看到信息,会增加用户的认知成本;同时多个入口的情况下用户选择压力大;不同入口之间缺乏联动性,有可能会增加用户的操作。
卡片式导航栏
宫格式导航的一种延展形式,通过增加内容的可视化程度让每个条目呈现更多的信息。它能根据页面内容的变化及时更新图片,适合以图片为主的内容,像新闻、美食、旅行、视频图片等经常使用,常作为二级导航。
卡片式(支付宝&美团&淘宝&网易云音乐)
优点:对运营量的要求比较低,而且单个条目的转化率会相应的提高。
缺点:当运营量较大的时候,这种结构会降低用户寻找信息的效率。
菜单式导航
通常配合在二级导航,用于筛选同一模块下的不同类别的信息,或者是快速启动某些常用的功能模块。
菜单式(支付宝&微博)
特点:能让更多用户在有限的屏幕空间上做更多的动作,让用户查看更多的信息;能将同一模块的信息进行分类,让用户更清晰地了解这个模块都为我们提供哪些信息或分类。
轮播(平铺)式导航
适用于足够扁平化的内容和随意浏览的阅读模式,将所有信息平铺在一个页面,很容易带来高大上的视觉体验。
平铺式(天气&探探)
优点:最大程度的保证了页面的简洁性和内容的完整性,且一般都会结合滑动切换的手势,操作起来也非常方便。
缺点:用户只能切换的相邻页面,很难跳转到非相邻的页面,容易迷失位置。
悬浮icon导航
(Ios&乐视&好奇心日报)
悬浮式icon是一个非常便捷的操作入口,也适应大屏幕时代,增加了快捷入口,但是注意不要遮挡某些页面的操作。



返回列表 返回列表
评论

    分享到