常见App布局导航

我们常经历到，一款产品从初期构建到后期完善，会经过各种各类样的改版。你可以说是商业模式改变，app不符合新的商业模式，也可以说是产品本身的架构已经不能满足现在的业务需求，等等。作为初期构建产品的人员，我们是很幸运的，越在初期，我们的发挥空间就越大。你或者可以说那不是很好吗，我可以好好的练手了，其实我们设计师和产品经理都是这样一步步的走来，从初级到高级，从高级到资深。但是，我想说的是：你是锻炼好了，你对你的企业                                     

产品在不断的改进，很多情况下可能是由于你自己的局限造成的。尤其是看到架构在不断的改，真是心痛：架构不是你想改，想改就能改。更改一款app的架构，无疑是重新做款app，成本是非常大的。所以，在前期，我们要慎重考虑我们的app框架设计。

那我们就来好好说下常见的app框架设计。在设计app框架时，产品经理和设计师需要着重从范围层（功能规格）、结构层（交互设计）、框架层（界面设计、信息设计）、表现层（感知设计）来分析（当然，战略层主要由老板来想了）。常见的app框架有列表、网格、屏幕轮显、标签导航、tab导航、抽屉导航、卡片、泳道、堆叠组合。

列表

列表（list），常见于功能比较单一的应用场景，是app中最常用的一种方式。列表内容常见形式有：文字列表、图标和文字的混合列表、标签和控件（复选框、按钮）列表、图片和视频缩略图与文字组合列表。遵循由上至下的阅读习惯方式，所以使用起来用户不会觉得困难。合理的应用列表，给自己的app加分。iOS和安卓的列表最小高度是不同的，安卓48dp，iOS的是44pt。

网格

网格（grid）就是把应用图标、缩略图、功能图标等内容根据水平方向和垂直方向划分所构成的辅助线进行布局。在界面设计中，九宫格这种类型的构图更为规范和常用，用户在使用过程中非常的方便，应用功能会显得格外的明确和突出。很明显的例子就是iPhone、安卓、windows phone主界面，均是采用的网格布局设计。

在应用中，网格布局通常用来展示媒体内容，比如照片、视频、音乐专辑等；或者是包含图像、文本、按钮、链接元素的卡片。和列表一样，点击网格时，会进入到下一级内容，展现出另一个网格、内容列表、空间列表、预览页面、详情页面等。也可能会在当前页面弹出模态页面，进行更多操作。

网格也可以进行有限或无限的滚动，通常条目过多的时候会把下面的条目展示部分到页面上，指导用户还有更多内容。

屏幕轮显

屏幕轮显（screen carousels）也是一种常见的交互方式，使用者可以向左或者向右滑动进行快速切换页面，比较适合页面层级较低的交互，几乎不需要进一步的交互（也不需要像“堆叠模式”深入导航）。轮显通常在屏幕下方有一个页标（小圆点）来导航。

轮显的优点就是交互层级低，一般不需要用户更多的点击操作，适合层级简单的应用，一个页面基本就能满足需求。缺点就是不适合交互复杂的app。常见的有ios的天气应用、墨迹天气、常见的app引导页。 

标签导航

标签栏（tab bar）通常以文字、图标、或者文字图标组合进行展示。点击标签，主内容区的页面会跟着切换，展示对应的内容。标签栏在iOS中一般在屏幕下方，经常使用图标，并在图标下方加上对应的文字。在安卓中，标签栏通常在屏幕上方。

由于手机的尺寸有限，通常建议标签栏中的标签数量不要超过5个。如果超过五个，iOS通常用“更多…”来收起更多的标签，点击展开。顶部标签则采用滑动标签方式，展示更多标签。或者采用其他方式，如抽屉。现在比较常见的是app中再嵌入一个app，通常是点击一个标签，直接进入到另外一个框架，展示更多内容。 

抽屉导航

抽屉（drawer）熟称汉堡导航，是把更多标签集合在一起，隐藏在抽屉中，点击抽屉图标，展示出来。和标签栏一样，被选中的项目会高亮展示。抽屉里的栏目样式不限定，常见的是文字列表或者带图标的列表，当然还有其他更多形式。抽屉的样式有两种，一种直接覆盖在原页面上，另一种是将原页面挤过去并排展示。抽屉的图标一般是放在左上角，但也有次要的抽屉放在右上角。

抽屉的使用也一直备受争议，支持者认为，手机屏幕小，隐藏菜单，能展示更多的内容；反对者认为，抽屉将功能隐藏起来，需要多一步操作，很多功能不明显，影响了使用。当然，两方的说法都没有错，只是我们要合理使用。对于常用的功能应用，使用抽屉并没多大影响，用户会很快适应。如果你使用抽屉，建议首次进入时直接打开抽屉，或者采用首次引导。但是，本身应用就很少被用到，建议使用标签导航，主流应用也是以标签导航为主的。 

泳道

泳道（swimlane）是一组垂直排列的轮显，每个轮显能独立水平滚动，互不影响。泳道结合了网格布局的方法，排列比较规整。泳道的交互形式主要是：水平滑动（展示单条泳道里面更多的内容）、垂直滑动（展示更多泳道）、点击（进入泳道的下一层级）

泳道需要注意的是，不能设置为自动滚动。在进行排版时，将泳道内的最后一个内容露出部分，引导用户进行水平滑动，垂直布局上也应该如此，减少用户的迷茫。使用泳道是要谨慎使用的，因为后面被隐藏的内容是不容易被发现的，所以使用泳道的时候要考虑到优先级的问题。 

卡片

卡片（cards）包含一组特定数据集的纸片，数据集含有各种相关信息，例如，关于单一主题的照片，文本，和链接。卡片常见的组织形式是列表，有时候也会以网格、轮显、泳道的形式出现。卡片有这些特点：一清晰直观，二简单易懂，三信息模块化。

显示这些内容时使用卡片布局：

• 作为一个集合，包含多种数据类型，如图像，电影和文本

• 不需要直接比较（用户不直接比较图像或文字）

• 支持高度可变长度的内容，如注释

• 包含交互式内容，例如+1按钮或评论

• 否则将在网格列表中，但需要显示更多的内容来补充图像

堆叠组合

在非游戏类移动应用中，堆叠组合是最多使用的app框架模式。堆叠是常以列表、网格的形式存在，顶端或底端会有一个控制导航或访问功能的条栏。app中一种导航模式基本很难满足业务和使用需求，都是多个形式组合在一块，展示更丰富的内容。

如下图，汽车之家首页采用了轮显、泳道、底部导航、顶部导航；淘宝也采用了轮显、网格、底部导航。