APP界面框架设计中常用的10大模式详解

在线学习好工作/ APP界面框架设计中常用的10大模式详解

随着移动互联网的发展，移动app已经成为了每个互联网公司的标配了，那作为产品经理，我们如何设计出更加符合用户体验的app产品呢？今天和大家分享的就是10中最常见的app界面光甲设计模式，一起来看看吧。

1.标签导航

标签导航是十大界面框架设计里最常用的界面框架设计，也是被业界之内公认的一种普遍使用的页面框架设计。那么这种页面框架设计在作业方面对一个用户来说也是最常见的一种页面框架设计，比如说微博、微信、手机百度、支付宝、淘宝，这些我们所谓的超级APP都是运用的标签导航，无一例外。从这个角度也可以看出来，优秀的产品用标签导航这种页面框架设计是非常普及的。

标签导航位于页面底部，标签的分类最好可以控制在5个之内。

优点

1）标签导航能够让用户清楚当前所在的入口位置。比如对于微信来说，无论用户在“发现”还是“对话框”里面，用户都能通过底部的高亮区域来划分当前所处的这个产品结构的区域。无论是当前位置的判断，还是要找这个入口，都比较方便，比如对于微信来说，很容易都过标签导航找到“朋友圈”。

2）轻松在各入口间频繁跳转且不会迷失方向。比如对于微信来说，微信团队不仅希望我们拿微信来聊天，还希望我们拿微信来逛朋友圈、购物、支付、滴滴打车等等，那么如果能够让用户在不同的入口间实现频繁的跳转，那这时用标签导航是最合适不过的。

3）直接展现最重要入口的内容信息。这有两层意思，第一层就是它能展示出来最重要的入口，比如拿微信来说有那么多的重要入口，显然“微信对话框”

最重要，那么他们默认的把微信对话框作为主入口。同样微博最重要的是首页，所以默认把微博首页作为最主要的入口。其次，入口不仅可以展示，入口里面的信息也可以展示。

缺点：功能入口过多时，该模式显得笨重不实用。怎么理解“功能模块过多”，比如说现在标签导航，一般情况下功能入口控制在5个以内，我们也会遇到6

个的情况，但那种产品一般来说比较复杂，最少会是3个，最多5到6个。如果过多的话，标签导航会弹不开，那这种模式就失效了。过多不行，过少也不太方便，如果说就一个Tab、两个Tab，那么标签导航下面就会显得特别的空，也不

太好看，所以这个时候我们就会知道标签导航的适用范围最好在3至5 个之间，并且这几个功能希望用户能够频繁的去操作。

如果说你的产品比较保守，那么就可以采用这种标签导航。

2.舵式导航

目前流行一种标签导航的变体，称为“舵式导航”，因为它的样式很像轮船上用来指挥的船舵，两侧是其他操作按钮。

优点：需要突出重要且频繁操作的入口。

缺点：同标签导航。

比如微博的导航是一种标签导航的变体，它在标签导航的基础上中间加了一个导航操作项，这个导航操作项特别像轮船的舵盘，称为舵式导航。这种舵盘很容易区分开旁边的导航模式，能够让用户知道中间这个标志是它主要的导航操作项。但主要的操作项未必是最重要的，比如对于微博来说，最重要的是“首页”，而之所以对中间的标志做一个加量，是因为中间标志不仅是一种导航而且是一种操作，它把一些主要的操作选项做成了一个集合，表面上是一个导航实际上是一种功能上的集合。点击这个“+”号是发微博，发长篇的文章或者发点评，这些其实是种重要的操作，把核心的操作作为一种重要的入口搁在这个导航里面能够区别出来其他的真导航，而且能够传递给用户这个功能操作项是很重要的。就微博而言，最重要的功能是通过“首页”看微博，但对于微博的团队来说核心用户是原创者，所以微博团队很重视鼓励用户去发微博。所以优点很突出，把希望突出的功能和频繁操作的功能作为一个入口嵌到标签式的导航里面。缺点是继承了标签式导航的缺点，再有往往用在奇数个导航里面。

3.抽屉导航

抽屉导航和标签导航属于同一时代的导航，当时几乎是同时兴起的，当时也是风靡一时，但现在用这种抽屉导航越来越少，几乎快销声匿迹了。解释一下抽屉式导航，抽屉导航是将菜单隐藏在当前页面后，点击入口即可像拉抽屉一样拉出菜单。

优点

1）节省页面展示空间。和标签式导航相比，抽屉导航底部没有标签式导航，那么底部区域就被节省出来了，它是被隐藏在抽屉里面的。尤其对于一些小屏幕来说，节省空间是非常重要的。

2）让用户注意力聚焦到当前页面。一旦有了底部的标签导航，它必然会吸引一部分用户注意力，又看顶部导航又看底部导航，那么就会分散用户看当前页面的注意力，如果把底部的导航去掉，隐藏在抽屉里面，那用户会把主视觉完全聚焦在当前主页面里面，所以它能让用户最大程度的关注主页面。

3）扩展性好。这个和标签导航相比就有比较明显的优势，刚在也提到标签导航最好在5个以内，不超过6个，但如果说我的功能特别多并且都很重要，希望用户去看到，这时候7、8个用标签导航就完全失效了，这时就要用抽屉式导航，在抽屉里面去展示，也有比较大的空间。

缺点

不适合频繁切换的应用。抽屉式导航现在用的越来越少，因为抽屉式导航有一些无法回避的缺点。首先说现在APP的功能越来越多，也希望用户去不停的探索，里面也涉及一些商业化的考虑。比如拿微信来说，既希望用户去聊天也希望用户去看朋友圈、滴滴打车、买电影票等，这时需要频繁切换的话，若是用抽屉式导航就会非常不利于切换。抽屉式导航会把这些入口隐藏掉，用户会把主要的注意力用在主页面上，他们不会想到点击这个抽屉，那用户想去切换的意图就

会降低，那其他入口的曝光度也会明显的降低。正是这种原因抽屉式导航用的越来越少，但如果你的主要功能非常的突出，次要功能可以隐藏的话，可以用这种抽屉式导航，如facebook、豆瓣小组。

4.宫格导航

宫格导航和之前所讲的两种界面框架设计不太一样，宫格导航是将主要入口全部聚合在页面，让用户进入界面之后第一步的反应就是做出选择。比如下图美图秀秀，它把所有的功能一开始就罗列在一级页面里面，让用户自己选择。

优点

1）直观展现各项内容。

2）方便浏览经常更新的内容。比如美图秀秀吸进新推的一个功能“万能相机”，它就在里面加了一个“hot”,能够让用户非常方便的浏览到更新的功能。

缺点

1）无法入口间跳转。比如进入到美图秀秀中美化图片的功能里面，一旦进入之后就无法通过一次性的操作直接的跳到拼图的功能里面，它与标签导航最明显的区别就在于无法直接进行相同入口之间的切换。

2）不能直接展现入口内容。比如刚讲的微博、微信，它们都能在导航首页看到它所展示的内容，如微信里面主要的就是对话框列表。而这种宫格式导航，主要是宫格入口，主要展示了宫格入口而没有展示入口里面的内容，比如说“拼图”，它不能在这个页面里面直接展示拼图有哪几种拼法，美化图片也不知道究竟是怎样美化。

3）不能显示太多入口次级内容。它只能展示一级入口，比如“美化照片”里面有没有其他的功能，如“滤镜”这些二级的入口在这里面是无法体现的。而对于标签式导航，就能够在一级页面里面看到次级界面入口，如在微信的“发现”里面能看到“朋友圈”、“摇一摇”、“扫一扫”这样的二级功能的入口。