手机界面导航设计详解之抽屉式导航

年正如精良的设计一样，优秀的导航也大象无形。不管是浏览好友信息，还是租赁汽车，完美的导航设计能让用户根据直觉使用应用程序，也能让用户非常容易地完成所有任务。

导航的设计是 App 设计发展过程中很值得玩味的地方，由于移动设备特别是智能手机的屏幕尺寸有限，设计者们通常会将屏幕空间尽量留给主体内容，为了在手机屏幕给定的范围内展示出更多内容，优秀的导航栏设计将起到关键性作用，对于不同的操作也当因地制宜地选则不同的设计方案。

如网站设计中，我们会把导航分为一级导航、二级导航等等，其实移动应用和网站设计一样，也具有自己的信息架构。这里我们主要依据市场上面已有的产品对移动应用导航大体分为以下两类：主要导航模式与次级导航模式。

图1-2  次级导航模式

首先看看以下7种主要导航模式：

主要导航模式—— 第一种：跳板式

跳板式导航对操作系统并没有特殊要求，在各种设备上都有良好表现。它有时也被称为“快速启动板”（Launchpad）。跳板式导航的特征是，登录界面中的菜单选项就是进入各个应用的起点。在国内市场上跳板式设计应用很用，如下图的第一个“百度手机卫士”（图1-3）它主要通过功能来展示菜单选项，这种网格布局清晰的把各个功能区域进行划分，能让用户快速找到入口并点击操作。(图1-4)的云图TV，它是一个免流量的手机电视，他的模块相对百度手机卫士来说较简单，主要通过电视台来区分模块名称。比如：中央电视台CCTV、卫士、体育甚至海外频道等等。而美图秀秀（图1-5），更是我们比较熟知的一种，它的主界面用2X3的网格布局把常用的功能入口都直观的表现在上面。

什么是2X3的网格布局了？

2X3网格布局是一种布局形式，常见的布局形式有：3X3、2X3、2X2、1X2（图1-6）。但不一定非拘泥于网格布局，根据需求的功能来定义，可以成比例放大某些选项，以彰显其重要性。

XiiaLive，一款功能无比强大的网络电台，兼具简洁而清新的 UI 设计。这款应用具有不容忽视的导航，设计师用3X3的网格布局把菜单的6个菜单项目布局在屏幕中间，使每个格子都扮演着功能性的作用（图1-7）。

Tripper是一款日本的本地导游应用，他用扁平的设计图标把应用的功能用2X3的网格布局罗列在整个界面中，使得用户能够相当轻松顺手地浏览这款APP（图1-8）.

跳板式菜单也可以说是网格式菜单，它类似于metro UI的堆砌色块，优点简约而不简陋，导航清晰、明显，并能提高操作效率。但设计时切记不分青红皂白的去使用色彩哦，这可能会让用户不知所措和产生疲倦感。

ASM采用的是不规则网格的跳板式导航，以突出内容的优先级（图1-9）。

最近经典的游戏：“别踩白块儿”（图1-10）也是跳板式模块的经典体现。

它把各种游戏模式用网格区分开，仅用黑白两色就能清晰的让用户理解并操作。正如前面所说，在网格布局的设计中，不一定必须遵循几乘几的网格形式，甚至可以成比例的放大或者缩小某些选项，用以彰显他的功能特色，举一反三，设计师还可以合并他的多种网格形式，使得功能之间的逻辑流程更准确。比如别踩白块儿中的每个游戏选项，点击的二级菜单也用跳板式或者列表式展现了更多的功能选择。

个性化的跳板式导航可在显示菜单选项的同时显示用户个人资料。通常会提供自定义功能，允许用户改变跳板导航的布局，如优酷界面。

通过以上的案列分析，我们可以整理如下几点：

1.为同等重要的内容项使用网格布局。

2.为相比之下更为重要的内容项使用不规则布局。

3.视情况使用个性化设置和自定义选项。

主要导航模式——第二种：列表菜单式

列表菜单式导航与跳板式导航其实是有共同点的，他们的共同点在于，每个菜单项都是进入应用各项功能的入口点。

但是不同点在于列表菜单式导航有很多种变化形式，包括个性化列表菜单，体现分组列表和增强列表等。

案列分析：

个性化列表的方式：在photo sticker中首页就采用了个性化列表菜单的方式。而IOS系统设计则采用了分组列表菜单式。

印象笔记的IOS版本它把列表式导航与跳板式导航设计相结合。下厨房即是增强列表导航，何为增强列表导航呢？即就是在简单的列表菜单之上增加搜索、浏览或过滤之类的功能后形成的。

其实列表菜单式导航，这个从网站到手机APP上都很常用的，遵循由上至下的阅读习惯方式，所以使用起来用户不会觉得困难。

通过例举的四个案列，以及列表菜单式导航与跳板式导航的对比，列表菜单，更适合用来显示较长或拥有次级文字内容的标题。

主要导航模式——第三种：选项卡式

选项卡式导航，在不同的操作系统有不同的表现和规则。所以在设计时需要为不同的操作系统专门定义选项卡的位置。

Ios、webOS和Blackberry（黑莓）系列都把选项卡放在了屏幕底端，这样用户就可以用拇指进行操作。

选项卡的导航设计方式，一般为四个导航按钮最为普遍，最方便操作的是第二和第三个按。受制于屏幕宽度的限制，其栏目的个数是有限的，不能超过5个。过多的话明显不利于用户的切换。从界面布局来看，也降低体验友好度。

目前也有部分APP在选项卡的基础上，衍生出了一种交互比较好的弹出导航菜单。突出选项卡上展示的那些核心功能的按钮，方便用户快捷操作。

选项卡至于低端的应用市场上面有很多，这里列举几个比较常见的APP：

屏幕底部水平滚动的选项卡是个非常不错的设计，如的Waterlogue应用，它是一款水彩风格照片处理工具，下面的水平翻动选项卡可以让用户选择多种水彩风格

Android（安卓）、Symbian(塞班）和Windows系统都把选项卡定位在屏幕顶端，它模仿了网址导航模式。

Horner包含了可隐藏菜单，不过它能很妙地从顶部出现，由于明亮的颜色和有关联性的巨大图标，它与整个界面内容形成了鲜明对比。Bettertec设计的气流计算APP，巧妙地运用了占据顶部的标签页。

顶部菜单和底部意义差不多，把菜单放在顶部，可以遵循从上至下的阅读习惯，但也有缺点，即不适用与单手操作。

单手操作用户是所示的这两种姿势（左手用户相反）。绿色代表容易点击区域，黄色为拇指伸展可到点击区域，红色区域超出单手可点击范围。

所以不管是在导航设计中，还是在移动应用的其它设计中，我们应该尽可能的考虑用户的手势操作习惯，给用户更好更便捷的体验。

单手操作手指滑动区域图片

网易新闻则采用了顶部可滑动的导航形式，屏幕顶端可滚动的选项卡:用户移动选项卡后能看到更多的菜单选项。

爱奇艺应用同样也采用了顶部滑动导航的模式。但是这里更值得一提的是，为已选择的菜单项设置使用易于识别或带有标签的图标等不同的视觉效果，用户就能清晰的知道自己选择了哪一项。

主要导航模式——第四种：陈列馆式

陈列馆式的设计通常在平面上显示各个内容项来实现导航。 主要用来显示一些文章、菜谱、照片、产品等，可以布局成轮盘、网格或幻灯片演示。

陈列馆式导航能够很好地应用与用户需要经常浏览，频繁更新的内容，如下图的超级相册和便签本。

相册是我们在日常生活中时常运用到的一个功能，使用频率高，图片数量多，所以采用陈列馆的形式是再合适不过了。

而便签本也不陌生，下图中的便签本可以上下左右拉伸不断创建新的收纳空间，一个个方方正正的分类视图，颜色各异却能达到一种养眼的和谐美。没有花哨的功能，主界面上只简洁地显示收纳盒名称与其中的项目数量。

最美应用:是一款通过互联网平台，每天为用户发送一款赏心悦目的移动互联网应用。它通过类似幻灯片的形式来导航，用户通过查看每个应用来划屏切换屏幕内容，而它下面的进度条也会互动性的跟随着用户的切换而进行图标的动态变化。

主要导航模式——第5种  仪表式

仪表式导航提供了一种度量关键绩效指标是否达到要求的方法。

过设计以后，每一项量度都可以显示出额外的信息。这种主要的导航模式对于商业应用、分析工具以及销售和市场应用非常有用。

Timi时光记账—精美独特的时间轴记账:Timi 时光记账采用了时下非常流行的时光轴的形式，帮你整理账目，简洁明了，界面精美，在方便好用的同时，还满足了视觉享受的需求~。

乐动力：通过数据来查看自己每天活动状态。下滑还有很多功能，都可以点击查看。

主要导航模式——第6种  隐喻式

隐喻式导航的特点是用页面模仿应用的隐喻对象。

这种导航主要用于游戏，但在帮助人们组织事物（如日记、书籍、红酒等），并对其进行分类的应用中也能看到。

途书笔记，用牌照记录数据的笔记。它把导航界面菜单做成了一本一本的书，有一本书的形式，隐喻的表达了书的概念。自定义标题，分类进行查阅。

找你妹的游戏中，导航就用闯关的进度来显示，直观且具有趣味性。

主要导航模式——第7种：超级菜单式

移动设备上的超级菜单式导航与网站所用的超级菜单导航类似，它在一个较大的覆盖面板上分组显示已定义好格式的菜单选项。

这种导航模式在现在的app设计中使用的比较少，而且一般会用做分类检索de 次级导航使用。在手机网站的导航设计中比较常见。

美团中就采用了超级菜单式导航做为次级导航使用。

以上均是主要导航模式：那么接下来针对次级导航模式进行案列赏析。

次要导航模式：

这里我们值得注意的是在导航的设计中，所有的主要导航模式都可以用作次级导航。我们经常能够看到选项卡下再用选项卡导航、导航卡下用列表导航、选项卡下采用仪表式导航、跳板式导航下采用陈列馆式导航灯情况。

而次级导航模式是否可以用作主导航，答案不是确定的，因为事物都是贯穿融合的，主要你运用得当，一切均有可能。现在我把这三种归纳为次级导航是针对现有市场产品进行分析得出，并不一定是绝对。

次级导航模式——第8种： 页面轮盘式。

通过这种导航模式，操作者可利用“滑动”操作快速浏览一系列离散的页面。

疯狂来找钱就采用页面轮盘式，页面指示器（iOS中的术语，指用来表示页面数量的小点）可以显示出导航中的页面数量；执行“滑动”操作可以显示下一页。

次级导航模式——第9种：图片轮盘式

图片轮盘式导航类似于一个二维轮盘，图片轮盘式导航更多的应用于播放器和需要多图片展示应用中。

香蕉相机，作为一个相机应用，该有的功能相对还是挺齐全的。拍照、添加相册图片、添加文字等等，都木有问题，还有很文艺的滤镜和相框~

图片轮盘式导航可以查看更多的香蕉图标，相加几个来几个~~~~

次级导航模式——第10种：扩展列表式

扩展列表式导航通过左/右/上/下拉屏幕或者点击按键显示更多的信息。

在网易新闻，TIMI记账和畅读等应用设计当中，通过点击屏幕左上角的按钮唤出切换项，有些也可以通过向右或者向左，滑动手指来完成。所以当我们觉得菜单比较占用位置的时候，可以尝试用这种方式来隐藏菜单，需要注意的是设计展开菜单按钮大部设计在左或右上角这些显眼的位置。

一个简单的滑动动画，就像拉出一个抽屉，「抽屉式导航」这个名称应该就是来源于此。抽屉式导航突破了数量的限制，更大程度上释放了主体空间，也因此提高了操作成本。

此处就个人意见，如果能将主要功能项组织在 4 到 5 项，选项卡导航的设计方式可能会更好，否则，就应该优先考虑抽屉式导航了。抽屉式导航通过纵向排列切换项解决了具有过多的切换项这一问题。不过这也意味着导航不能和主体内容同时出现在屏幕上

导航设计的目的就是需要突出产品的核心，扁平化用户的任务路径。让用户能够顺利的在产品中畅行，让用户时刻清楚自己在应用中所处的位置，及如何前往目的页面。

产品的导航系统，是产品的信息结构在用户界面上的展现方式。移动端产品导航的设计没有最好之说，只有最合适，根据你的产品采取最合适的导航设计。

纵观应用市场上的APP，导航设计的模式总是几种的组合使用。下面我们来看一下常见的几种导航设计模式。

描述：

1、当产品的整个体验流中是以几个常用功能模块（一般不超过5个）贯穿的，意味着用户需要在多个标签入口之间来回切换；为了保证切换的效率，将贯穿产品整个体验的流的模块平铺在Tab Bar位置，保证了用户任务路径的扁平。

2、iOS原装App Podcast，5Tab。

优点：

1、可见性好，位置明显，易于发现，它能让用户直观了解到APP的核心功能；

2、操作性好，用户很方便就能触及到这个区域，并可在几个标签中快速切换且不会迷失方向，简单而高效；

3、符合习惯、ios原生控件，开发简单；

4、优先级较高、用户使用频繁，彼此之间相互独立。

缺点：

1、容纳个数有限，一般最多五个（不然需要结合其他方式，运用层级和收放）。

2、占据高度空间略大，一般都是文字+图标的形式。

描述：

顶部Tab是谷歌提出来的，为了区分与iOS的区别的一种导航模式，由于在顶部，手指难以触及，所以谷歌对应地提出了手势操作的解决方法：通过在屏幕左右滑动来切换标签。

实际项目中，顶部与底部配合使用的挺多。其实就是holo条。

优点：

扩展性好： 标签的个数没有上限，不过太多的话，越是后面的页面渗透率会越低；

占据空间小： 相比于底部Tab，顶部Tab一般占据的空间更小（因为不需要考虑手指点击，所以可以把区域缩小，只选用图标或者文字即可），可以把更多的空间安排给内容展示。

手势操作非常方便。

缺点：

可见性略逊：这是空间占据的区域变小之后的后果。

描述：

1、点聚式它将多个核心功能聚汇到主界面中显示，方便用户呼出使用。会搭载其他导航样式出现（如标签式）成为舵式导航。

2、与标签导航类似，就点聚工导航与标签导航的结合体，其中一个导航标签蕴含更多的操作选项，也可以理解为标签中蕴含更多二级导航标签。当页面有处于同一层级的几大部分内容，同时又需要一个非常重要且频繁操作的入口，就可以采用这种APP导航模式。

优点：

1、把类似生产内容的主功能按钮放在中间，标签更加突出醒目；

2、同时该主功能标签做了功能扩展，也因此给设计增加了一些个性化的亮点。

缺点：

1、占据高度空间略大，一般都是文字+图标的形式。

描述：

当你的应用信息足够扁平，可以尝试轮播导航；

优点：

能够最大程度的保证应用的页面简洁性，操作也是最方便；

缺点：

不能够快速的定位对应的分页内容；

描述：

1、宫格式导航被广泛应用于各平台系统的中心页面；

2、用在二级页作为内容列表的一种图形化形式呈现，或作为一系列工具入口的聚合；

3、用户频繁切换的概率是比较低；

4、在不同的文章中可能被称作：跳板（图标卡片式）、磁贴式。

优点：

1、扩展性非常好，便于组合不同的信息类型（运营位、广告位、内容块、设置等）；

2、视野范围内可以展示的功能入口多，能够让用户整体上了解APP提供的服务，从而选择自己所需要的那个服务；

3、静态、动态结合可以展示出丰富的信息，同时保持视觉统一；

4、跨平台不受平台限制。

缺点：

1、每个宫格相互独立，它们的信息间也没有任何交集，无法跳转互通；

2、当排布过多的时候，用户容易眼花缭乱，选择压力较大；

描述：

1、宫格导航的变式吧，可用来呈现实时内容，比如新闻、菜谱、文章或照片，可以采用网格布局（比如一直播和ins）或轮盘布局（比如格瓦拉电影），还可以采用幻灯片模式进行展示。

2、陈列馆式设计模式最适合呈现经常更新的、视觉效果直观、彼此独立的内容。

优点：

1、相较于列表导航、宫格式导航的不同在于，陈列馆式导航有更丰富的表现形式、更加随意的组合效果（瀑布流等）以及丰富的动态效果（轮盘、幻灯片形式）；

2、直观展现各项内容。

缺点：

1、不适合展现顶层入口框架；

2、容易形成界面内容过多，显得杂乱；

3、设计效果容易呆板。

描述：

1、抽屉式也是谷歌提出来的一种导航模式，由于虚拟按键的存在，所以在安卓上使用底部Tab会造成双底栏，视觉观感不佳；

2、一般用来放置对用户而言不太常用或者对于产品而言不太核心的功能，或者不那么需要频繁切换内容的应用，例如对设置、关于、个人信息等内容的隐藏；

3、更多的被应用于信息流产品设计中，这类产品注重核心内容的展示，用户的任务路径较为单一，几乎都是用于浏览产品的核心内容；至于其他比较低频的模块入口则会隐藏在当前界面后方，避免冗余的模块抢夺用户的眼球；

4、在不同的地方可能被称为：扩展菜单、侧边导航、汉堡导航；

5、“2/8”法则告诉我们，80%的用户只用那些20%功能，这20%功能就是信息流里面的核心功能；如果那80%不常用的功能也占用着最重要的位置，那么用户就会被打扰，产生臃肿感，甚至会放弃使用产品。

优点：

1、节省页面展示空间，让用户将更多的注意力聚焦到当前页面；

2、由于导航界面是隐藏在屏幕之外，展开之后整一页面都是导航菜单内容，所以可扩展和个性化的空间很大；

3、扩展性好，导航的个数没上限。

缺点：

1、用户不易发现，使用次功能需要二次点击，给用户在切换功能带来了操作成本；

2、可见性太差，用户还没能把汉堡菜单按钮和侧边栏联系起来，所以，侧边栏的渗透率很低；

3、不直观、不适用于主导航、如遇频繁操作的功能，用户不断开关抽屉体验不好。

描述：

1、与抽屉式导航的目的相同，都是为了突出内容。一般位于产品顶部，通过点击呼出导航菜单；

2、通常用来筛选同一信息模块下不同类别的信息，或者快速启动某些常用的功能模块，而不需要频繁的页面跳转 ；

3、Android中对应的控件为spinner控件，但该控件用于同一类别下不同视图之间的切换，而不是跳转至完全不同的视图。iOS中下拉菜单为自定义控件，可以实现不同类别之间的切换；

4、下拉导航还有一种变式，就是下来菜单中展示两级甚至多级，一般在电商产品中比较常见，因为品类和筛选条件众多。

优点：

1、菜单与界面的连贯性比抽屉式要好，容易让用户感知当前位置；

缺点：

2、位于屏幕上方，相对隐蔽且不能结合手势操作，不适合于频繁的切换功能使用；

3、考虑到导航菜单的可用面积较小，所以一般采用列表的形式展示菜单内容。

描述：

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

2、适合用来显示较长或拥有次级文字内容的标题，每行可以融入较多信息。

3、与宫格导航类似，常用于二级页面，不会默认展示任何实质内容，所以通常app不会在首页使用它；

4、无论ios开发和android 都有现成的列表布局插件和模板。

优点：

1、由上至下查看符合习惯；

5、结构清晰，易于理解，冷静高效，能够帮助用户快速的定位去到对应的页面。

缺点：

1、条目太多或分布不合理会导致用户查找困难；

2、不适合需要频繁切换任务的情况。

希望该文章能够给你带来帮助

1、明确用户角色和任务流程

2、搭建清晰合理的信息架构

3、灵活运用导航模式

4、利用推荐算法来简化、关注拇指操作热区来创新

1、明确了用户群体和核心任务之后,就可以解构功能流程、通过信息架构来搭建app的骨骼

2、合理的信息架构

从用户认知出发 :卡片分类法、让用户自己的认知来组织功能点,具体分为封闭式分类和开放式分类

封闭式分类由产品自身特点设立部分分类

开放式分类完全由用户自行分类

划分优先级:明确哪些是最重要的、次要及不重要的.

可以从三个维度来评估需求强弱、使用频率、任务数量、辅助一决策工具、获取最优解.

1、可达性：

移动应用的导航功能可以说是所有页面最重要的组成部分，因此一定要保证其可达性，并把最关键的要素尽量突出，同时不要影响到内容本身。

2、目的性 ：

确保导航中的每个按钮要素简单明了，有明确的引导用户点击的目的性。让用户一看就知道是什么意思以及操作结果是什么。但是不要弄得太过花哨，这样会迷糊用户，起到发作用。

3、易于理解：

如果想设计比较高端的导航功能（例如链接图片、允许滑动或其他手势导航，或者访问隐藏菜单），务必在设计过程中前后保持一致，以便用户熟悉你所使用的模式，同时还加入一些额外的信息（例如小箭头、文字或改变颜色或高亮等）来吸引用户的注意力，并以微妙的方式对用户进行引导。不要给用户呈现“看得见摸不着的导航功能”。

4、通用性：

导航功能应当以一定的形式显示与移动应用的各个界面。各个导航模式不一定要完全相同，但其基本结构应当在应用内保持一致，可以根据背景进行小幅度调整。

1、多个高频需求

2、单个高频若干个低频

3、单个高频无低频需求

1、平面导航 : 最常见的标签时导航、可上方、下方但一般都是在下方

2、分层导航 : 是展现功能架构的父子级,每个页面都有一个子级、直到抵达终点. 要去往另一个终回到父级,从头选择另一个子级.

3、内容驱动导航 : 多见游戏化娱乐型产品,这类具备丰富的多样性

4、抽屉式导航 : 隐藏、收起非核心的操作与功能

跳板式/桌面式:

宫格式导航也叫跳板式导航与快速启动版，是一种类似于手机桌面各个应用入口的导航方式。每个入口的信息都是比较独立的，用户进入一个入口后，只处理于此入口相关的内容，如果要处理其他入口内容，必须要先回到入口总界面。将主要入口全部聚合在页面，让用户做出选择。采用这种导航的应用已经越来越少，往往是用在二级页作为内容列表的一种图形化形式呈现，或是作为一系列工具入口的聚合。可以做一级导航以及二级导航也可称为数据入口。

优点：功能扩展性性强可以增加多个入口。

缺点：单项承载信息能力弱，层级深不合适频繁的任务切换。信息互斥，无法给互相通达。只能给用户带来更多的操作步骤。无法让用户在第一时间看到内容，选择压力较大。

宫格式导航适合入口独立互斥，且不需要交叉使用的信息归类。

标签式 :

标签式导航，也就是Tab式导航，是IOS平台上公认的最经典的导航模式，市场上80%的应用都在使用，标签式导航关注的是平行空间的展示。

标签栏中可以变形，但不能做导航来使用，而是一个行为召唤按钮，行为召唤按钮是强调某项重要功能的快捷实用，该功能需要是应用最核心且最常用的功能，优先级很高。

优点：适用于多个内容体系，且重要程度相似平级关系，能频繁在不同页面切换，且切换成本              低，只需要一次点击即可。

缺点：占用一定高度空间，且标签数量有限最多5个标签。

选项卡式:

导航在android平台上与ios平台上有不同的规范，规范就不多说了。主要说ios上选项卡的表现，选项卡导航的本质是实现容器内不同视图或内容的切换。目前市场上主要3种形式的选项卡：可分为分段式、固定式、滑动选项卡。

分段选项卡是由两个或两个以上宽度相同的分段组成，正常情况下不会超过4个。在视觉上会有一个很明显的描边按钮。分段选项卡经常作为二级导航，对主导航内容再次分类，即可在顶部导航的下方，也可在顶部导航栏上。

分段导航的缺点是标签之间相互关联，只能点击切换，操作效率较低。

固定选项卡于滑动选项卡，两者都可以直接点击或左右滑动切换选项，且一级和二级导航都能使用。他俩的区别就是滑动选项卡可以有更多选项，直接通过手指滑动导航找分类，适用于相关类别多的应用。

列表式导航:

结构清晰、易于理解、冷静高效、能够帮助用户快速的定位去到对应的界面。这种导航也是一种十分常见的导航模式，纯粹的列表时导航很少见，一般都是搭配着其它的导航来一起使用，大部分都是依附于标签导航之上的，在二次层级上，它们还会将列表分模块进行展示。列表中可以放置图片、标题或者详情文字来展示信息，列表本身是一个传达信息效率很高的载体，因此使用列表的时候要注意每个列表所占的屏幕空间，以及每屏能够显示多少条列表等。

有几种常见的形式列表

分组模式：有多个列表层级组合而成的导航。能很好的解决次要功能非常多的问题。             

标题式列表：一般只显示一行文字有的显示一行文字加一张图片。                                         

内容式列表：主要以内容为主，所以在列表中就会体现出部分内容信息，点击进去就是详情。

抽屉式:

目的：是带给用户更为沉浸的体验。

特点：阅读为王，点击切换少，专注于主题信息本身。

表现形态：抽屉式导航很符合产品的二八法则，产品中只有20%的功能常用，所以要凸显剩下的80%不常用，因此要隐  藏，隐藏非核心的操作与功能，让用户更专注于核心的功能操作上去。

优点：它不像标签导航一样强调平级关系切换，而是突出重要核心的功能。侧边导航收纳的标              签可以是5个以上，节省屏幕空间。

缺点：无法快速完成导航切换，操作成本高，可见性低。

何种情况下适合使用抽屉式导航：如果应用的功能和内容都在一个页面里边。只是一些低频操  作内容需要显示在其他页面里边，为了让主页面看上去干净美观，可以选择把这些辅助            功能放在抽屉栏里。

注： 需要用户有一定参与的信息层级，最好不要放置在抽屉栏中。

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

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

抽屉式导航在android平台上比ios更常使用，由于ios上，抽屉导航没有专门的设计规范，所以使用上比较随意，表现形式也不受拘泥。

主要风格分为三种：1.浮层，导航抽屉处于主页上层。2.叠加式，导航抽屉处于底部。3.嵌入层，导航和主页处于同一层。详细见下图

下拉菜单式:

下拉菜单式导航并不常用。下拉菜单和抽屉导航类似，是以突出内容为主的导航模式，一班位于产品顶部。一般情况下，下拉菜单很容易被滑动选项卡取代，且滑动选项卡可以结合手势操作，使用的效率更高，要做下拉菜单式导航要有很明显的优先级区分。

优点：节省屏幕空间

缺点：不适合结合手势，操作负荷大，不能频繁却换功能。

下拉菜单式常用的有两种一种是由顶部滑出，一种是由底部滑出

点聚式

是将导航页面分层，无论你达到APP的那个页面，悬浮ICON都是永远悬浮在上面，你依靠悬浮层随时可以去想要去的地方。

注：悬浮icon会遮挡某些页面的操作，在设计的时候应该要考虑进去，无论在那个页面永远为悬浮icon留有位置。它更适应大屏的导航模式，注意不要让它遮挡住某些页面的操作。