APP导航交互设计解析

小编：APP的导航样式多种多样，但主要的是你得找到一种适合你的APP模式的导航交互。今天分享了25学堂总结的8个APP导航的交互方式，并有分析如何漂亮的应用它们。

首先，我们来看一下一个叫做原始导航的导航。

原始导航是一个最最粗糙的导航，通过纯文字的链接入口来导航。如下图：

一、标签导航(选项卡导航)

有了原始导航，你可能会说，原始导航这种入口的摆放方式太占空间了，就五个入口就占据了整个界面。有没有一种更加省空间的导航模式呢?当然有。

首先，我们将五个入口放到界面的下方，就会形成常见的底部标签导航。

通常，底部标签导航有4～5标签，一般不会超过5个，有更多的选项操作时可将最后一项设置为更多，将一些次要功能放置在更多里。这是一种非常常见的导航模式。如果你的应用需要用户频繁的在不同分页切换，可以采用这种导航。虽然它还是会占用一定的界面空间，但比起原始导航来说好多了。

现在很多APP(包括ios和android)都在用这种模式。也是目前很多移动APP设计大牛和产品经理所推崇的app导航方式。

当然，如果你在五个标签中，有一个标签是最重要或最频繁使用的，想要重点突出，可以使用下面变形的底部标签导航。

其次，我们将标签放到界面的上方，就会形成常见的顶部标签导航。

作为一个二级导航，顶部标签导航应用于多种情境下，可以固定数量，展示有限的几个标签。也可以扩大一定的数量，变成向左滑动展现更多标签。甚至可以像网易新闻那样，衍生出订阅功能。顶部标签导航也是一种非常常见的导航模式。

二、抽屉导航

说完标签导航，你可能会说，我是有六七个导航，但其中只有一个导航是主要的，别的虽然有用，但用户非常非常少用。这种情况下能不能只显示主要的内容，其它导航隐藏起来呢?这样还可以更近一步地节省页面空间。

当然可以。在这种情况下你可以使用抽屉导航。但是不建议用抽屉导航。至于为什么可以阅读《看完《方寸之间》之后，对APP导航设计的读后感》

这种导航的优点是：节省页面展示空间，让用户将更多的注意力聚焦到当前页面。比较适合于不那么需要频繁切换内容的应用，例如对设置、关于等内容的隐藏。

缺点是：对于那些需要经常在不同导航间切换或者核心功能有一堆入口的app不适用。抽屉导航设计需要注意的是一定要提供菜单画出的过渡动画。

三：下拉导航

讲完抽屉导航后，还有另外一种类似的导航模式同样可以节省页面空间，并且隐藏次要入口，这就是下拉导航。

下拉导航有一种比较常见的变式，就是下来菜单中展示两级甚至多级(一般就是两级，没见过更多的)，很多人称其为超级菜单导航。如下：

四、宫格导航

我在原始导航里设定了5个入口。可是，如果有7、8个甚至10多个入口呢?而且这些入口你也不好说到底哪个对用户是最重要的，重要性差不多，怎么办?OK，宫格导航可以解决这个问题。

目前来说，这种导航模式越来越少用在一级导航了。不过，作为二级导航，作为一系列工具入口的聚合，或作为内容列表的一种图形化呈现形式，还是存在在各种APP里。如：zakeer的核心页面就是宫格导航，但其与订阅功能结合，没有让所有宫格斗展示出了。各种手机界面打开后的app展示页面基本上都是宫格模式的。

由于受到卡片式设计的影响，宫格模式的变形也非常多。接下来简单说一下这些变形。

首先，可以将宫格的卡片变大，宫格与宫格时间不留空白，如下图：

上面这种展现方式所能展现的卡片数量有限。如果我们将其稍做调整，增加纵向滚动功能，就可以增加卡片数量的展现，可以说是无限的。如下图：

如果更进一步，是不是可以对上面这种无限的展示宫格进行分类呢?当然可以。然后我们就有了下面这种导航模式：

这时，如果我们想要在分类下，展示更多的内容，但又想多展示分类，怎么办?可以在以上的导航模式中再进一步变形，如图：

宫格导航还有没有别的变式呢?当然有。比如：

可以通过变化宫格导航中卡片的大小，来凸显宫格中内容的不同重要性。

可以将宫格导航和订阅功能结合，形成独特的订阅导航。

……

变化形式根据不同的需要很可能有很多种。一般来讲，常见的这些导航模式就够了。

五、列表导航

列表式APP导航是我们在APP设计种必不可少的一个信息承载模式。当然作为一个APP的导航也是非常方便的。这种导航模式从原始导航中很好转换，只要将列表左对齐，增加向右箭头表明是否还有下级即可。如图：

自然，如果你想要对列表进行分类也是可以的。这样逻辑上会更加清晰。如下：

对于列表导航来说，还有一种常见的变式：将列表下内容中的核心内容展示出来，常见的是核心数据展现。如下：

六、轮播导航

如果我们将原始导航中的5个入口共处一个页面变成每个页面仅限一个入口可以吗?或者说，我们将宫格导航变成一宫格呢?会有一种新的导航模式吗?

按照上面的假设，我们会有一种常见的导航模式：轮播导航。如下：

当然，只有应用信息足够扁平，可以尝试轮播导航。轮播导航如果应用得当，能够给人耳目一新的体验。轮播导航能够最大程度的保证应用的页面简洁性，操作也是最方便的，只需要手指左右滑动。缺点也很明显：承载入口的数量有限，超过10个可能就优点多了。这种导航常见于查看图片，也经常与其他导航模式结合，作为banner广告呈现。

七、点聚导航

如果一个界面，因为内容或功能展示的需求，需要极端简化其入口，应该如何做?点聚导航是一种选择。

八、隐喻导航

如果原始导航中的五个入口，变成游戏界面中的五个关卡，只是简单地将其按照上下顺序列出来就会不太适用。游戏对导航的要求不仅要可用，更要和整个游戏的风格等匹配。因此，有了隐喻导航这种模式，用页面模仿应用的隐喻对象。这种导航主要用于游戏，但在帮助导航 人们组织事物(如日记、书籍等)，并对其进行分类的应用中也能看到。

文章来源：25学堂

~

落地价18万左右最值得买的3款汽车
答：搭载的12.3英寸液晶触摸屏以及中控三块10.25+9.2+3.5英寸组成的四联屏的布局,配合IMS座舱交互系统透明底盘等配置,营造出科技豪华的内饰氛围。配置方面,搭载540°高清全景影像系统、AR增强实景仪表导航、集成全速域自适应巡航系统、并线辅助、前后方碰撞预警、车道偏离预警系统、车道保持系统、道路交通标识识别、疲劳驾驶提示...

急!!C语言程序设计!! 学生成绩管理系统
答：4. 进行简单界面设计,能够实现友好的交互;5. 具有清晰的程序流程图和数据结构的详细定义;6. 使用文件方式存储数据,系统以菜单方式工作7.要求写出总体设计...head=pp; pp->next=NULL; } else { p1=head; while((strcmp(pp->number,p1->number)>0)&&(p1->next!=NULL)) { p2=p1; p1=p1->next; }...

口袋怪兽火红攻略
答：要用相克的属性招数来对付,战胜后他会送给主角类似于前作口袋导航仪的装置,主要用于和重要人物、馆主...在第一层调查一个超梦的石像,启动开关后右边的铁门会交互的开放,在三楼的一个桌子上发现关于口袋妖怪...一定要注意保存体力和pp值,这里要用怪力把石头推倒白色机关上边才可以消除阻挡的墙壁,在三楼的一处把...

SAP R/3诞生于哪年?
答：国际适用:R/3支持多种语言,而且是为跨国界操作而设计的。R/3可以灵活的使用各国的货币及税务要求。 服务:R/3系统实施过程中,用户将得到SAP技术专家的全面支持与服务,包括组织结构方面与技术方面的咨询,项目计划与实施方面的协助,以及培训课程。 主要模块简介 ①R/3 PP生产计划系统 R/3 PP生产计划系统是一个综合...

手机能看电视直播的电视app
答：可以用电视猫，下载“电视猫”apk，然后安装到电视里，可以看凤凰卫视等各种卫视、各种地方台、各种央视台直播。电视安装APP的步骤：1、通过智能电视自带的应用商店安装；就目前而言，使用最多的方式还是从智能电视中内置的官方应用商店中下载，也是被很多初学者用户所认可的。2、使用U盘、SD卡、移动硬盘等...

我是安卓手机,能下载PP助手吗?
答：您好，欢迎关注PP助手！很高兴为您解答：【PP助手安卓版】：支持所有安卓系统设备的管理工具，提供软件、游戏、壁纸、铃声资源的下载安装。与同类软件相比，它具有绿色官方资源、资源有效管理、界面交互独到、操作流畅、下载省流量有速度、资源海量等优势。【支持设备】：Android 2.2或以上安卓系统设备【支持...

电脑用语/网络用语
答：out 登入 登录 login 导览列 导航条 navigation bar 新闻讨论区 新闻组 newsgroup 协定 协议 protocol 代理伺服器 代理服务器 proxy server 伺服器 服务器 server 桌面 壁纸 desktop 萤幕保护 屏幕保护 screen saver 免费邮件 免费邮箱 Free email 免费个人网页 免费个人主页 Free HomePage 登陆 输入 ...

提问:文件后缀名的意义.
答：P3 Primavera Project Planner(工程设计器)文件 ]Hzi P10 Tektronix Plot 10 绘图文件 E7C-8 P65 ...SHP 3D Studio(DOS)形状文件;被一些应用程序用于多部分交互三角形模型的3D建模 rws| SHS Shell scrap...FAV:Microsoft Outlook导航条 FAX:传真类型图像 FCD:虚拟CD-ROM FDF:Adobe Acrobat表单文档文件 FLA:...

开发协作-切图类别与规范
答：切图标注作为连接UI设计到技术开发两者的工作模块，缺其不可。合格的、严谨的切图可以大大减少技术人员开发返工率。一个互联网产品从构思到落地，大致分为以下环节：发现商机 – 市场调研 – 头脑风暴 – 产品策划/功能设计 – 原型绘制 – 交互设计 – 项目立项 – 流向图绘制 – UI设计 –切图标注...

关于手机的一些专业术语
答：以诺基亚7650为例:用户只需把手机键盘推出,先按面板左侧的“功能表”键,再通过导航键在功能列表中选择“照相机”,手机就进入到拍照模式,屏幕上会自动显示...所谓KJAVA就是可以和现在的JAVA环境配合,让程序设计师可以在不同平台间转换,JAVA是一项目前已经广泛应用在交互式的网页设计技术。由于JAVA可以使用在不同的...