APP界面架构设计

做为PM，信息架构和页面流的设计想必烂熟于心，当肯定好产品战略层和范围层即为什么种目标用户提供何种服务后，就要着手搭建功能架构，将目标功能经过良好的用户体验传递给用户，目的是高效解决用户痛点，从而实现价值为公司带来流量，让商业变现成为可能。

趁五一假期有空，总结常见的信息架构导航设计和页面布局设计

文章内容架构以下：

 

 

 

 

1.标签式导航（选项卡式）

标签式导航，也就是常说的Tab导航。是目前应用最普遍、最多见的导航形式。通常做为主导航，也会做为辅助导航，若是其余导航和标签式导航搭配使用时通常都会用做次级导航。

标签式导航有以下几种拓展形式：

顶部标签导航、底部标签导航、顶部导航+底部导航（双导航模式）、舵式导航、滚动式标签导航

根据操做系统不一样，标签位置也不相同。ios的标签推荐在底部 ，Android的则推荐是在顶部。可是当前全面屏手机逐渐成为主流，支持全面屏手势，Android和ios的设计差别逐渐减少，主要仍是根据产品功能进行设计。

1.1 底部标签导航

底部标签式导航是最经常使用的导航形式，通常存在于页面底端，

采用文字加图标的方式展示。通常有3~5个标签，适合在相关的几类核心信息中间频繁的切换使用。这类信息优先级较高，须要围绕产品战略层范围层进行归类，用户使用频繁，彼此之间相互独立，经过标签式引导，用户能够迅速的实现页面之间的切换且不会迷失方向，

使用场景：若是app有多个核心模块，而且它们之间的切换比较频繁，这个时候很是适合使用标签式导航。

 

拉钩-微信

优势：

1.入口扁平化，直接展示最重要的入口信息，用户在各入口频繁跳转不会迷失方向；

2.导航控件占据面积大，可以轻松进行点击操做，进行功能间的快速切换。

缺点：

1.会占用显示面积，不超过5个模块，不然容易分散注意力增长用户选择难度，不利于沉浸式体验，例如在微博发现标签中，下滑浏览时会隐藏底部标签；知乎app中，首页、通知、个人三个模块在下滑浏览时，也会隐藏底部标签导航，向上滑动才触发显示。

 

微博-发现标签

1.2 顶部标签导航

当内容分类比较多，用户对不一样内容的打开率相差不是很大，须要快速切换/调出的时候，常常会采用顶部导航设计模式，常见于工具类APP中如滴滴打车，这样设计有一部分目的是为了避免与安卓端底部虚拟按钮组合在一块儿产生信息堆叠和误操做，能更多展现标签下的内容，还有一部分是支持快捷操做，例如安卓版音乐类app，方便操做下方区域的内容和按钮（播放/暂停和下一曲）。

 

 

网易云音乐-滴滴打车

若是多于5个就采用滚动式标签导航，下面会有介绍。

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

若是产品分类的内容和维度较多，则采用顶部和底部结合的导航形式。

相似腾讯新闻和网易新闻这种新闻类APP，采用了顶部导航+底部导航结构，且加入手势切换的操做，方便用户在高频的标签中快速切换，能带来更好地阅读体验，当栏目频道较多时，可再结合超级菜单式导航准肯定位类目。

使用场景：能够和超级菜单式导航相结合，滚动式标签导航的特色是显示数目有限，可是可以实现快速的切换，超级菜单式导航能快速定位入，可以显示足够多的条目，可是切换起来比较麻烦，二者结合，正好进行优点互补。

 

哔哩哔哩-网易新闻-喜马拉雅

1.4 滚动式标签导航

前面介绍顶部标签导航时，任务切换若是超过5个，这时候应该使用滚动式标签导航。使用该导航须要给用户提示，告诉用户页面以外还有一些标签存在。例如会露出界面外的一部分文案，表示界面以外还有内容，例如Lofter

 

 

 

1.5 舵式导航

当页面有处于同一层级的几大部份内容，同时又须要一个很是重要且频繁操做的入口，那就能够采用这种舵式导航。中间项标签不紧操做最频繁，最重要，且须要引人注意，方便寻找。

舵式导航能够看为底部标签式导航的一种变体。它在后者的基础上，突出强调了一个高频核心功能，而且放在中间。

使用场景：若是app有几个重要的功能，而且须要频繁切换，其中一个做为app的核心功能或者是高频操做，这个时候能够选择舵式导航。案例：soul、随手记、薄荷健康

 

Soul-随手记-薄荷健康

2 宫格导航

宫格式导航适合入口相互独立，且不须要交叉使用的信息归类，宫格导航将主要入口所有聚合在页面，让用户总体了解app的服务，各个入口之间相互独立，没有太多的交集，没法跳转互通。

采用这种导航的应用已经愈来愈少，做为教科书式使用宫格导航做为主导航的美图秀秀，如今也转变成了舵式导航，目前大多数app会把宫格导航做为页面的辅助导航，或是做为一系列工具入口的聚合。例如支付宝首页

 

美图秀秀

优势：

1.类目清晰、可容纳多种类目

2.清晰展示各入口，方便快速查找

缺点：

1.信息独立，没法相互通达

2.不能直接展示入口内容，只能点击进去才能获知

3.容易造成更深的路径

4.选择压力较大

3 列表式导航

做为信息梳理条目，通常会做为次级导航，也有做为主导航的应用，例如QQ邮箱、系统自带的信息、联系人。

能够经过间距将列表分模块进行展现，好比微信的设置页面，用留白的方式来区份内容的不一样，“新消息通知、隐私、通用”是一组，“帮助与反馈、关于微信”又是一组。即便不仔细观察也能经过间距感觉出微信团队已经对其进行归类。只要善用这个细节，能够更好的加以区分次要功能，并提高用户体验度。

 

联系人-QQ邮箱

用做为次级导航

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

内容式列表：主要之内容为主，因此在列表中就会体现出部份内容信息，点击进去就是详情。例如薄荷健康的首页，头部是仪表盘式布局，结合内容式列表展现信息内容。

拓展式列表：相似QQ联系人的页面，造成分组产生明显的主次级关系。

嵌入式列表：嵌入式其实就是由多个列表层级组合而成的导航。

 

标题式列表-内容式列表-嵌入式列表

优势：

1.层次展现清晰，利于理解，快速定位

2.可展现内容较长的标题

3.可展现标题的次级内容

缺点：

1.内容过多时，用户浏览容易产生疲劳

2.排版灵活性不是很高

3.只能经过排列顺序、颜色来区分各入口重要程度

2.目的个数与条目的详细程度成反比。

例如美团外卖须要每一个列表足够详细，用户直接看列表就能够知道想要的信息。通信录用户要寻找联系人，这时候就要展现足够多的条目，列表信息详细程度反而没那么重要。

4 抽屉式导航

抽屉式导航经常使用搭配主导航用做于次级导航，由于抽屉式导航的核心就是“藏”，隐藏低频操做的功能，如设置、关于、会员等功能，使用频率少，让核心功能更加突出。抽屉式菜单隐藏在当前页面后，只要侧面滑动或者点击入口就能将拉出来，减小了主界面中导航控件的数量，让主界面更加干净利落。例如QQ个人页面，滴滴出行，网易云音乐。

 

滴滴-网易云音乐

优势：

节省页面空间，扩展性好。

缺点：

1.次功能入口比较隐藏，用户不容易发现，同时次功能须要二次点击，增长用户操做成本。

2.在大屏手机上，左上角的导按钮存在于单手拇指操做热区难以到达的位置，致使导航按钮难以触达；

 

5 陈列馆式导航

也有人会叫作卡片式布局，可是卡片式布局会更加明显，下面会有介绍。陈列馆式导航设计通常用做辅助导航，最适合呈现常常更新的，视觉效果直观，彼此独立的内容，例如用来展现丰富的图片文字信息，常见于购物类、照片、新闻，能够布局成网格或瀑布流式进行展现。

特色：

布局比较灵活，设计师能够平均分布这些网络，也可根据内容的重要性不规则分布，更具备流动性，曝布流就属于其中一种。

 

小红书-豆瓣

优势：

1.样式多种，能直观展示各项内容

2.方便浏览常常更新的内容

缺点：

1.适合做为主导航

2.如设计很差，容易致使界面内容过多，显得杂乱

 

6 超级菜单式导航（下拉导航）

也有叫做下拉导航，有些app是点击控件下拉式，有些会新打开一个新页面。

使用场景：通常做为辅助导航，和滚动式导航相结合，滚动式导航的特色是显示数目有限，可是可以实现快速的切换，而超级菜单式导航的特色是可以显示足够多的条目，可是切换起来比较麻烦，二者结合，正好进行优点互补。

优势：

1.层次展现清晰

2.能容纳不少分类

3.可快速切换定位到另外一个分类中

缺点：

一、菜单之间的跳转要回到初始点

二、同级内容过多时，用户浏览容易产生疲劳

三、排版灵活性不是很高

 

 

7 轮播式导航

使用场景：应用信息足够扁平,想突出沉浸式体验,适用于一些小而美的应用,能够尝试轮播导航，例如天气app。

优势：

1.单页面简洁，总体性强

2.线性的浏览方式有顺畅感、方向感

缺点：

1.不适合展现过多页面，容易视觉疲劳

2.不能快速定位到对应的分页内容，只能按顺序查看相邻的页面

3.因为各页面内容结构类似，容易忽略后面的内容

 

墨迹天气

其中，全部的主要导航均可以作为次级导航，但次级导航不太适合用做主要导航 。其余一些零散的如隐喻式导航(游戏），点聚式导航，如苹果的悬浮按钮。

8 仪表盘式布局

仪表盘式布局能够展现一功能中关键数据便可，通常用做辅助导航，结合主导航展现数据信息，这种导航模式经常使用于金融应用程序、记录分析工具、销售和营销应用程序，如薄荷健康和Timi记帐

 

薄荷健康-Timi记帐

 

9 多面板布局

在电商模块中，用户须要选品定位时会碰见这类布局，其特色是能同时呈现比较多的分类及对应的内容，适合分类多及其内容同时展现的页面。

优势：

1.减小界面跳转的层级

2.对分类有总体性的了解

3.分类位置固定

4.清楚当前所在的入口位置

缺点：

一、界面比较拥挤

 

京东-必要

10 卡片式布局

卡片式导航模仿生活中扑克牌，翻牌等动做来切换内容，经常使用做辅助导航，像探探，最美有物，其中最美有物首页画报使用卡片式内容展示，让人第一次使用以为很惊艳，固然长时间使用这种形式获取信任容易疲劳。

优势：

特定内容上展现效果明显，并且单个条目的点击率会相应的提升。

缺点：

当运营量较大的时候，这种结构会下降用户寻找信息的效率。

 

最美有物

到此总结结束，大部分app都是基于功能组合搭配，知足功能状况下，选择最优的展现方式便可。

小礼物走一走，来简书关

做者：Richard_L连接：https://www.jianshu.com/p/07647d3d65ef来源：简书简书著做权归做者全部，任何形式的转载都请联系做者得到受权并注明出处。