APP常见页面布局

这是我两周之前整理好的，在公司还给大家进行了汇报，从我作为一名UI设计师的角度出发，进行了整理。也有参考其它前辈的整理思路；后来，发现优设网也有分享帖，请参考https://www.uisdc.com/app-structure-guide-home-related-2。

文章重点梳理：

· 前言 

· APP分类 

· 信息架构 

· 常见导航 （标签式导航 、抽屉式导航 、 卡片式/宫格导航、悬浮式导航 、组合导航）

一、 前言

假如我们去超市购买商品，那么想要买什么就是 需求；

进入超市，按照超市指示去寻找我们要购买的商品，这个路径就是的 导航

超市的物品是有序分类摆放的，超市的货架承载的是 内容

最后我们需要到收银台购买我们选中的商品，这就是完成的 任务

用户在使用产品时，既要获取 内容，又要完成 任务，

完成任务的过程中需要 信息的提示，寻找信息又是为了完成任务，这就需要  导航。

二、 APP分类 

APP种类繁多，按照产品特性（干什么的），分为社交 网购 生活 娱乐 旅游  阅读 新闻 财务等等；按照前言中我们所说：“超市的货架承载”是“内容”，“到收银台购买商品”是“任务”，我将app分为：任务型，内容型，内容+任务结合型：

任务型产品

给用户提供指示，引导用户进行人机交互，目标明确去完成某一项具体任务，比如摩拜，OFO，嘀嘀打车，百度地图等。

内容型产品

纯内容型产品，信息量大，产品为用户展示并提供大量信息内容，比如新闻类产品。

内容和任务结合型产品

APP中主流产品类型，产品不仅可以给用户提供大量信息，还可以使用户参与信息发布，形成人机互动。如购物网站；知乎，微博，小红书，简书等：用户不仅可以阅读大量信息，还可以将自己观点及所见所闻，发布成贴；

三、 信息架构

产品经理确定了产品的 具体功能需求，我们要将需求转化为更具体的 产品框架结构—信息架构；

信息架构的完善可以给用户更好的体验并确保产品的完整流通，信息架构可以让我们明确指向我们所在位置，所寻信息。因此，不能单纯将信息堆积罗列在一起，还需要将信息进行分类整理、架构，信息架构显得尤为重要。

四、 常见导航

前面讲到：产品经理确定了功能需求后，我们需要将其进行信息架构，那么，如何将信息以最优的形式展现出来呢？这就涉及到了APP的导航应用方式。作为UI设计师的我，通过研究市面主流app，归纳总结出以下几种：标签式导航、抽屉式导航、卡片式/宫格导航、悬浮式导航、组合导航。

4.1 标签式导航

目前应用最广泛、最常见的导航形式。可分为  顶部标签式导航、底部标签式、舵式导航（底部扩展式导航）。

4.1.1 顶部标签式导航

顾名思义，存在于页面的顶部。多应用于Android平台，因其平台特性，底部含有虚拟的物理按键，如图华为手机存在手机屏幕内的物理按键。

下图是首页导航模式，采用了顶部标签式导航。这样设计是为了更多展示标签下的内容，还有一点是支持快捷操作。方便展示/点击下方快捷区域的内容和按钮（当前曲目、歌手、播放/暂停），这两款app均属于在安卓手机上的展示：

4.1.2 底部标签式导航

底部标签式导航是最常用的导航形式，一般存在于页面底端，不超过5个模块。如图微信app界面设计图:

4.1.3  舵式导航（底部扩展式导航）

舵式导航是底部导航的一种扩展形式，因为它的样式很像轮船上用来指挥的船舵，两侧是其他操作按钮。当页面有处于同一层级的几大部分内容，同时又需要一个非常重要且频繁操作的入口，就可以采用这种导航模式。中间项标签不仅操作最频繁，最重要，且需要引人注意，方便寻找。

4.1.4 顶部导航+底部导航（双导航模式）

如图，“今日头条”，“知乎”，“即刻”，这三款app内容、分类较多，运用顶部和底部双tab导航，切换频率最高的tab放在顶部，这是为什么呢？因为“新闻（话题/热点）”在每个tab都是沉浸式阅读，最常用的操作是在一个tab中不断地下滑阅读内容，将常用的tab放在顶部，向左或向右滑动切换tab的手势操作，能带来更好地阅读体验。

标签式导航小结：

实际上，底部Tab模式导航在iOS和Android上一直是最安全的一种导航模式，他不怎么出彩，但是绝对不会犯错。在大屏幕时代，底部Tab模式的导航更能适应，也更好设计。

适用于：入口分类数目不多，可以控制在5个以内，且用户需要在入口间频繁切换来执行多个任务

注意：结构太过复杂而且不稳定的应用不适合标签式导航。

4.2 抽屉式导航

抽屉式导航模式一般将导航隐藏在app侧边，以一个按钮呼出导航，使用完成后将导航隐藏起来。一拉一缩，形象上与抽屉类似，因此称之为抽屉式导航。如下图，QQ的app首页，点击左上角用户头像，侧拉展开。

抽屉式导航，隐藏非核心的操作与功能，让用户更专注于核心的功能操作，适用于产品信息层级非常多的时候。

抽屉式导航小结：

在大屏时代使用抽屉栏，手势操作显得尤为重要，从屏幕边缘唤出抽屉栏是个不错的选择

适用于：产品功能比较多且信息互不重合，把一些辅助功能放在抽屉栏里，不仅让用户更专注于核心功能操作。而且可以使主页面看上去干净美观。

注意：需要用户有一定参与度和交互程度的信息层级，最好不好放置在抽屉栏

4.3 卡片导航/宫格导航

卡片式导航/宫格导航，是一种类似于手机桌面各个应用入口的导航方式。应用信息独立分类，各自有独立入口，内容间基本并列。用户进入到一个入口之后，只处理与此入口相关的内容，如果要跳转至其他入口，必须回到入口汇总界面。如图：

卡片式导航/宫格导航小结：

这种导航方式在工具类app中比较适用，每个工具都有一套独立的体系。带来的问题是用户需要更多的操作路径。

适用于：适合入口相互独立，分类清晰，且不需要交叉使用的信息归类

注意：不适合在交叉任务中使用。

4.4 悬浮icon导航（聚焦于一处）

悬浮icon导航，是将导航页面分层，无论你到达APP的哪个页面，悬浮icon永远悬浮在上面，你依靠悬浮层随时可以去想要去的地方。悬浮式icon会遮挡某些页面的操作，一般滑动页面时会消失，所以不用担心。

4.5 组合式导航

前面几种导航的合体，比如一级标签导航+二级宫格导航（如下左图），或一级标签导航+列表导航（如下中图）；以及前面4.1.4中的顶部导航+底部导航（双导航模式）（如下右图）都属于组合导航的一种；组合式导航是集合各种导航的优势于一体，将信息架构，信息交互发挥到最大；

总 结

标签式导航：最常用、最不易出错，请第一时间考虑它；

抽屉式导航：如果你的信息层级繁多，可以考虑将辅助类内容放在抽屉中；

卡片式/宫格导航：工具类app常使用，不建议在APP中作为主导航使用，若非使用不可，请增加跳转关联性；

悬浮式导航：单独作为导航较少使用，但作为辅助配合其它导航常使用；

组合式导航：集合各种导航的优势，将信息交互发挥到最大；最常用于多层次导航。

首次以文字总结形式发帖，希望再接再厉！