当我们确定了移动APP的设计需求和APP产品设计流程之后,開始着手设计APP界面UI或是APP原型图啦。这个时候我们都要面临的第一个问题就是怎样将信息以最优的方式组合起来?

或许我们对照和了解了其它一些经常使用的APP导航设计模式。

并且良好的APP导航设计模式决策对整个app的核心体验起到关键作用。

有一些优秀的app基于这些模式做了一些创新的优化方案。本文总结了眼下通用且流行的模式。并讨论了这些模式适用的场景,希望帮助交互设计师更快的作出较合理的信息组织决策。

先来看看8种移动APP导航设计模式对照图吧。

8种移动导航

第一种:app标签导航

标签导航位于页面底部,通常包括5个标签是比較合适的数量。这样的导航是很常见的,假设你的应用须要用户频繁的在不同分页切换,能够採用这样的导航。它的缺点是会占用一定高度的空间。如微信最新版的APP界面设计图。

app标签导航

另外一种:APP舵式导航

眼下流行一种标签导航的变体,个人把它称为“舵式导航”,由于它的样式非常像轮船上用来指挥的船舵,两側是其它操作button。当页面有处于同一层级的几大部分内容,同一时候又须要一个非常重要且频繁操作的入口。就能够採用这样的APP导航模式。

例如以下图葡萄社APP。

app舵式导航

第三种:APP抽屉式导航模式

抽屉导航是讲菜单隐藏在当前页面后,点击入口就可以像拉抽屉一样拉出菜单,这样的导航的长处是节省页面展示空间,让用户将很多其它的注意力聚焦到当前页面。比較适 合于不那么须要频繁切换内容的应用,比如对设置、关于等内容的隐藏。这样的导航设计须要注意的是一定要提供菜单画出的过渡动画。

自从path应用以来。这样的抽屉式导航菜单很受到大家的喜爱。

app抽屉式导航

第四种:APP宫格导航(比方九宫格)

这样的宫格导航是将主要入口所有聚合在页面,让用户做出选择。这样的组织方式无法让用户在第一时间看到内容。选择压力较大。採用这样的导航的应用已经越来越少。往往用在二级页作为内容列表的一种图形化形式呈现,或是作为一系列工具入口的聚合。

app宫格导航

第五种:APP混合组合导航

当用户须要聚焦内容,同一时候又须要一些快捷入口能够连接到某些页面时。就能够採用组合导航。

组合导航上方用宫格的形式展现快捷入口。与标签导航不同的是。这 些宫格入口之间不须要是平级的关系。也不必包括整个层级的内容。你能够将它理解为一种图形化的文字链。

这样的导航比較灵活,能适应架构的高速调整。

app混合组合导航

第六种:列表式APP导航

列表式APP导航是我们在APP设计种不可缺少的一个信息承载模式。当然作为一个APP的导航也是很方便的。

只是眼下来看,列表导航通经常使用于二级页,因为它与宫格导航一样,不会默认展示不论什么实质内容,所以通常app不会在首页使用它。这样的导航结构清晰。易于理解,冷静高效,可以帮助用户高速的定位去到相应的页面。列表项目可以通过间距、标题等进行分组。

app列表式导航

第七种:tab导航

用于二级页。本质和标签导航同样,当应用层级较多的情况下,能够採用tab导航,典型场景是用于改变的当前的视图,或对当前页面内容进行分类查看。

tab导航

第八种:大图轮播导航或是 大图上面的导航设计

当你的应用信息足够扁平,可以尝试轮播导航,假设应用得当,可以给人耳目一新的体验。这样的导航可以最大程度的保证应用的页面简洁性。操作也是最方便的。

可是缺点是不可以高速的定位相应的分页内容。

大图轮播导航

8种移动APP导航设计模式对照的更多相关文章

  1. 干货分享!关于APP导航菜单设计你应该了解的一切

    导航菜单是人机交互的最主要的桥梁和平台,主要作用是不让用户迷失方向.现在市面上产品的菜单栏种类繁多,到底什么样的才是优秀的导航菜单设计呢?好的菜单设计不仅能提升整个产品的用户体验,而且还能让用户耳目一 ...

  2. App导航设计全面梳理——附免费原型模版!

    生活中大家或多或少都会有迷路的经验,但你是不是从来没思考过迷路的定义是什么? 迷路的定义其实有两个核心: 1.想要到达一个目的地. 2.不知道自己在哪里,应该往哪走. 和生活中的迷路一样,我们在使用A ...

  3. 精华阅读第 13 期 |常见的八种导致 APP 内存泄漏的问题

    本期是移动开发精英俱乐部的第13期文章,都是以技术为主,所以这里就不过多的进行赘述了,我们直接看干货内容吧!本文系ITOM管理平台OneAPM整理. 实际项目中的MVVM(积木)模式–序章 导读:开篇 ...

  4. APP导航设计九法

    近期在设计APP原型,用EXCEL,用Axure.但无论工具如何,产品本身的界面布局和交互设计确实逃不掉的!网络中有关于APP导航设计的总结: 第一种:app标签导航  易用性:★★★★★   趣味性 ...

  5. 【转】五种常见的 PHP 设计模式

    工厂模式 最初在设计模式 一书中,许多设计模式都鼓励使用松散耦合.要理解这个概念,让我们最好谈一下许多开发人员从事大型系统的艰苦历程.在更改一个代码片段时,就会发生问题,系统其他部分 —— 您曾认为完 ...

  6. 五种常见的 PHP 设计模式

    设计模式 一书将设计模式引入软件社区,该书的作者是 Erich Gamma.Richard Helm.Ralph Johnson 和 John Vlissides Design(俗称 “四人帮”).所 ...

  7. Slideout.js – 触摸滑出式 Web App 导航菜单

    Slideout.js 是为您的移动 Web 应用开发的触摸滑出式的导航菜单.它没有依赖,自由搭配简单的标记,支持原生的滚动,您可以轻松地定制它.它支持不同的 CSS3 转换和过渡.最重要的是,它只是 ...

  8. 一种JavaScript 类的设计模式

    一种JavaScript 类的设计模式尽管前面介绍了如何定义一个类,如何初始化一个类的实例,但既可以在function定义的函数体中添加成员,又可以用prototype 定义类的成员,代码显的很混乱, ...

  9. 导航 - 利用系统自带的App导航

    导航: 可以将需要导航位置丢给系统自带的App进行导航 发送网络请求到公司服务器, 获取导航数据, 自己手动绘制导航 利用三方SDK进行导航(百度) #import "ViewControl ...

随机推荐

  1. 【bzoj2431】[HAOI2009]逆序对数列 dp

    题目描述 对于一个数列{ai},如果有i<j且ai>aj,那么我们称ai与aj为一对逆序对数.若对于任意一个由1~n自然数组成的 数列,可以很容易求出有多少个逆序对数.那么逆序对数为k的这 ...

  2. spring+freemarker+redis

    1./pom.xml文件内容: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http ...

  3. sqlmap post注入两种方式

    1. 使用抓包工具抓取数据包,sqlmap加载数据包 POST /SME/static/orderFind/orderIntfaceph HTTP/1.1 Host: abc.com User-Age ...

  4. 提高Java开发效率,Idea必装的几款插件

    1.codeMaker 重复代码生成工具 domian和dto两个类基本差不多,这个工具就可以通过一个类快速生成另一个类. 2.gsonFormat json转换成Java类 很多时候根据别人接口给的 ...

  5. Ant自动打包

    在ant的官网http://ant.apache.org进行下载后apache-ant-1.8.2包 解压(存放的路径不要有中文字符) 把ant里的lib设置到环境变量:E:\Android\apac ...

  6. js4:with,for in语句,windows,location对象的使用

    原文发布时间为:2008-11-08 -- 来源于本人的百度文章 [由搬家工具导入] <html> <head> <title>js</title> & ...

  7. 【Visual Studio - Dependency Walker】查找程序依赖的动态链接库文件(转)

    原文转自 http://163n.blog.163.com/blog/static/5603555220113151113287/ 有时我们需要知道一个程序依赖哪些动态链接库(DLL)文件.实际上,有 ...

  8. 【原创】Javascript-显示系统时间

    /*JS-显示系统时间*/ function showLocale(objD) { var str, colorhead, colorfoot; var yy = objD.getYear(); if ...

  9. Linux系统安装JDK和Tomcat

    首先先准备好需要安装的包 下载Linux JDK 和Tomcat 我这里下载的是Linux系统下的后缀名为tar.gz包 1.压缩命令: 命令格式:tar -zcvf 压缩文件名.tar.gz 被压缩 ...

  10. slam学习足迹

    1.slam入门介绍 2.齐次坐标系 3.贝叶斯滤波 均值:平均值 标准差:样本的集中程度/分散度 方差:标准差的平方 协方差:不同维度之间的关系(相关度) 协方差矩阵:多维度之间的关系(相关度) 4 ...