移动App之二级导航模式
上一篇文章中介绍了移动App中常见的主导航模式,今天这篇文章我们一起来了解下App中的二级导航。
之前一起了解了移动App常见的5种主导航设计模式:标签式、桌面式(宫格式)、菜单式、点聚式、抽屉式。移动App里除了主导航外还会有二级导航的存在,常见的二级导航模式有:分段选项卡、列表、走马灯、宫格、图示。
1、分段选项卡
移动App中运用的比较频繁的一种二级导航模式,它是对主导航内容的二次分类,一般放置在顶部导航栏的下方,有时也会直接放在顶部导航栏中,对于当前所在的部分会做视觉上的突出。分段的数量一般会控制在2-4个,如果有更多的分段,可以配合手势滑动界面展示更多。
“TapTap”通知页面有4个分段选项,“时间胶囊”首页有“时间流”、“时间格”2个分段。“潮汐”的分段选项卡放在了顶部导航栏位置,数量控制在4个,“Wild Journey”分段选项卡同样放在了顶部导航栏位置,数量是5个。
还有一种形式的分段选项卡在购物类App中颇受欢迎,即分段放在左侧,右侧盛放对应的内容。用户可以上下滑动查看超出屏幕的分段内容。“京东”和“造作”在产品的分类上就采用了左右式的分段选项卡,便于扩展更多内容。
2、列表
列表式导航简单点的只有标题,结合图标、标题或其他信息等视觉形式可以变得更加丰富。在用户个人信息界面、设置、消息以及需承载大量数据信息的界面一般都能看到列表的影子。列表导航的优点是很容易扩展。为了让列表信息更加有条理和更有层次,分组或者二级列表是常用的形式。
如“TapTap”社区、“嗨呀星球”消息页、“网易新闻”首页新闻列表和设置页、“小睡眠”的个人页面、“寺库”的设置页面都是列表形式的导航。“TapTap”社区、“网易新闻”设置页、“小睡眠”的个人页面、“寺库”的设置页面进行了分组,让列表信息条理分明,层次感加强。
3、走马灯
整块内容或者图片需要并列展示时,会采用走马灯的导航方式,通过手势左右滑动来查看内容。一般情况下,走马灯的数量在5-7个左右,但有的App使用时会超过7个。控制在7个以内的目的是防止用户视觉疲劳。为了让用户有清晰的方向感、明确数量,会显示下一张的部分内容,或添加分页指示器。
“Lake”、“喜马拉雅睡眠”、“时尚芭莎”、“优酷”都有走马灯的设计形式,而且不止一处。各自的视觉形式表现不一,各有特色。
4、宫格(桌面式导航)
宫格既可以用作主导航设计又可以作为二级导航模式。作为二级导航,是对主导航内容的再次分类。它的优点是非常容易扩展。缺点是想要操作其他的内容时必须先返回到宫格导航界面,才可以进行,效率不高。
如“Mori手账”、“ZAKER新闻”、“白噪音”、“网易蜗牛读书”都是宫格导航的形式。
5、图示
图示导航其实和宫格导航有一定的交集。宫格经过一定的处理,就变为了图示导航,但图示导航包含的表现形式比宫格导航更广泛。
图示导航是一种比较有吸引力的导航方式,可视化更强,及时更新图片就可以适应页面内容的变化。图片对用户的吸引力更强,容易让用户有新鲜感。图片配上固定的标题或栏目,使得信息传达更加明确,用户不容易迷惑。
“Wild Journey”的Experiences页面,“每日故宫”的专题,“面包旅行”的首页是卡片式的图示,图片配上相应的标题,告知用户更加具体的内容。“Wild Journey”的Collections页面,“卡拉壁纸”和“小睡眠”的发现页是宫格式的图示方式,同样配以标题,准确的传达导航信息。
欢迎关注作者的微信公众号:火苗设计