移动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页面，“卡拉壁纸”和“小睡眠”的发现页是宫格式的图示方式，同样配以标题，准确的传达导航信息。

欢迎关注作者的微信公众号：火苗设计