总结宫格导航设计 第1篇

标签式导航又叫Tab式导航，是目前移动端市场上最为广泛的导航设计。标签导航通常分为底部，顶部，顶、底混合使用这三种模式。

1）底部导航

采用文字加图标的方式展现。一般有3~5个标签，适合在相关的几类信息中间频繁地切换使用。这类信息优先级较高、用户使用频繁，彼此之间相互独立，通过标签式导航的引导，用户可以迅速地实现页面之间的切换且不会迷失方向，简单而高效。

它的缺点是会占用一定高度的空间，如果用户是小屏幕手机，则视觉体验不太好。

下图应用分别为 微信 、 Facebook ：

2）顶部导航

当内容分类比较多，用户对不同内容的打开率相差不是很大，需要快速切换/调出的时候，经常会采用顶部导航设计模式，常见于工具类APP中，如 Wave Analytics 、 滴滴打车 ：

3）顶部、底部双Tab导航

标签式导航除了设在顶部和底部，另外有些内容比较多的产品会采用顶部、底部混合使用标签式导航，如 简书 、 网易云阅读 ：

总结宫格导航设计 第2篇

没查到明确的命名方法，暂时称为全局导航。这种导航可以把大量内容进行分类，并且让用户迅速了解平台商品的架构，多用于教育、电商等种类丰富的平台。

现有俩种使用方式：固定的一级导航+对应的二级导航；固定的一级导航+二级导航+商品列表。前者的更注重分类，帮助用户快速找到内容；在二级导航内可以承载文字、图片、文字＋图片等不同的形式。 后者则是通过固定的一级导航帮助用户在不同分类之间快速切换。

7、分段式控件导航

分段式控件小巧灵活，可以很好地融合进导航栏中而不占用过多空间。是IOS系统的常用控件，由于数量比较少，不适合做一级导航，常用于二级导航。

参考文献：

术与道：移动应用UI设计必修课 余振华著

移动应用UI设计模式 Theresa Neil著

总结宫格导航设计 第3篇

仪表盘汇总展示了一些关键指标。进入每一种度量方式后，都可以了解更多额外信息。这种主导航模式常用于金融应用程序、分析工具、销售和营销应用程序，如 友盟统计 ：

最佳实践：仪表盘只需要载入被研究确认过的关键数据即可，不需要过多内容。

原文链接：

题图来自 Unsplash，基于 CC0 协议

总结宫格导航设计 第4篇

二级导航用于在页面及模块中进行导航，因此这种应用通常来讲至少有3层信息结构，最常见的就是国内绝大多数APP都有的“我的”功能菜单。

列表式导航作为信息组织框架，是我们在产品设计中必不可少的一个信息承载模式。

列表导航与宫格导航类似，常用于二级页面，不会默认展示任何实质内容，所以通常app不会在首页使用它。这种导航结构清晰，易于用户理解，能够帮助用户快速的定位去到对应的页面。下图应用分别是 微信 和 Strides ：

列表菜单导航的每个列表均指向相应的功能/内容选项，它有许多衍生形态，包括个性化菜单列表、分组菜单列表和增强型菜单列表。增强型菜单列表是指在简单列表的基础上，带有额外的搜索、浏览及过滤功能。

下图应用分别是： QQ 、 有道云笔记 、 Retrica 和 Strides：

最佳实践：列表菜单导航适合长标题或者有副标题说明，使用类表菜单导航应该提供一个从子页面返回类表页面的方式，通常在标题栏添加一个带有菜单字样的按钮作为返回按钮。

底部选项卡现在几乎成了IOS和Android两大系统（黑莓和webOS也比较广泛，但因为已经不是主流系统，因此暂不讨论）阵营中，绝大多数应用的标配。如 Facebook 、 Twitter 、 微信 和 新浪微博 ：

也有非常多的应用，将Tab标签设置再了导航栏下，即顶部导航，有点类似于传统网站导航，如 360云盘 、 扇贝单词、豆瓣 和 Facebook 等。

最佳实践：使用选项卡导航要注意视觉上对已选择和未选择的选项进行有效区分。

图库式界面被分割成用于导航的各个内容区块。内容区通常载有单独的文章、标题、照片、产品和其他能够放置在内容区、网格或幻灯片里展示的内容。如TED、BB_EWS、Bilibili、搜狐视频等。

有时候如果内容区是以分组形式布局，分组的内容应设计得容易被用户浏览到，如使用侧Tab形式（也称抽屉式导航）去管理分组内容，让用户能够在Tab中切换，查看不同分组，下图应用分别是 My Rolls 和 Perisfind ：

最佳实践：图库式界面的设计模式适用于用户想要浏览的、经常更新的内容。

页面旋转常见模式是使用左右滑动手势在页面间快速切换，用户滑动时将显示下一个页面。页面指示器（IOS系统下面的小点）显示一共有多少页可供切换。下图应用分别是 tapas 和 ConnectID ：

页面旋转导航模式有一定的局限性，当页面超过8个时，要考虑使用列表导航。

最佳实践：

图片旋转式的常见形态，是类似于2D旋转木马形式，图片可以左右滑动，且沿任意方向一直滑动可重新回到初始图片处。下图分别来自应用 TED 、 BB_EWS 、 IMOB ：