8种移动APP导航设计模式大对比

本文转自用户体验联盟

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

也许我们对比和了解了其他一些常用的APP导航设计模式。

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

之前跟大家分享过6个超实用的APP导航设计方案和3种常见的APP导航设计方案优劣势分析

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

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

1

第一种:app标签导航

标签导航位于页面底部,通常包含5个标签是比较合适的数量。这种导航是非常常见的,如果你的应用需要用户频繁的在不同分页切换,可以采用这种导航。它的缺点是会占用一定高度的空间。如微信最新版的APP界面设计图。

2

第2种:APP舵式导航

目前流行一种标签导航的变体,个人把它称为“舵式导航”,因为它的样式很像轮船上用来指挥的船舵,两侧是其他操作按钮。当页面有处于同一层级的几大部分内容,同时又需要一个非常重要且频繁操作的入口,就可以采用这种APP导航模式。如下图葡萄社APP。

3t

 

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

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

自从path应用以来,这种抽屉式导航菜单非常受到大家的喜爱,25学堂之前也重点介绍了9种最佳移动APP侧边栏设计方案。

4

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

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

5

 

第五种:APP混合组合导航

用户需要聚焦内容,同时又需要一些快捷入口能够连接到某些页面时,就可以采用组合导航。组合导航上方用宫格的形式展现快捷入口,与标签导航不同的是,这 些宫格入口之间不需要是平级的关系,也不必包含整个层级的内容,你可以将它理解为一种图形化的文字链。这种导航比较灵活,能适应架构的快速调整。

6

 

第六种:列表式APP导航

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

不过目前来看,列表导航通常用于二级页,由于它与宫格导航一样,不会默认展示任何实质内容,所以通常app不会在首页使用它。这种导航结构清晰,易于理解,冷静高效,能够帮助用户快速的定位去到对应的页面。列表项目可以通过间距、标题等进行分组。

7

 

第七种:tab导航

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

8

 

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

当你的应用信息足够扁平,可以尝试轮播导航,如果应用得当,能够给人耳目一新的体验。这种导航能够最大程度的保证应用的页面简洁性,操作也是最方便的。但是缺点是不能够快速的定位对应的分页内容。

9

 

 

原文来自:UED学院

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/1004/

(0)
iouedioued
上一篇 2014-10-21 21:31
下一篇 2014-10-27

相关推荐

  • 关于使用Principle的一些小建议

    在日常的设计工作中,难免会遇到一些制作可交互原型的工作。可交互的原型对比于静态原型来说,直观是最大的优点。其次,在研究一些动效的时候,直接调好参数给工程师,会比口述来得更加简单粗暴,效率更好。现在的…

    2016-10-28
  • Axure中文教程:注释功能

    AxureRP将交互与注释说明功能放在了一个面版上,同时又针对整个页面有一个交互与注释说明。交互功能设置的是用户通过不同方式触发页面中元素或者载入页面时,发生的交互动作。而注释说明则用文字详细说明对应元素的细节或页面的说明。由于针对整个页面的说明和交互,与针对页面中某个元素的说明与交互在文档表现和生成的不同,而被分开,但是他们的实际功能是一致的,可以一起来说。这里主要讲述annotations,即注释说明,这个部分主要应用于后期的产品规格说明书的生成,详细可参见《AxureRP教程–生成规格说明书》。

    2015-01-01
  • 在线预览Axure文件,使用新浪SAE发布在线Axure文档

      俗话说,不会写代码的产品经理不是好的射鸡湿。关于产品经理与技术之间的微妙关系,扯开了讲可是长篇大论,比如知乎上这个问题:IT 行业产品经理(尤其是创业的)需要懂技术吗?懂到什么程度?,以及这个:…

    2016-01-07
  • 016. 动态面板——axure线框图部件库介绍

    1、什么是Axure的动态面板 按照Axure官方网站的解释 :动态面板控件(Dynamic Panel)可以让你实现高级的交互功能,实现原型的高保真度。动态面板包含有多个状态(states),每个状态可包含一系列控件(你可以把一…

    2014-09-12
  • 【Mockplus教程】标尺和参考线

    每个页面都拥有单独的标尺和参考线,可以用于辅助组件的对齐以及尺寸调整。   1. 使用标尺   新建页面之后,在主菜单中选择“显示标尺”即可看到工作区左边和上边显示出 标尺。标尺有两种显示方式:百分比…

    Mockplus 2015-08-31
  • 【Mockplus教程】收藏和重用

    1. 制作模板   选择需要制作为模板的页面,鼠标右击,弹出的菜单中选择“加入到模板收藏”,然后选择相应 的模板库,如果没有模板库会提示新建一个。 加入成功之后会在左边模板收藏栏中看到模板页面的缩略图。 &…

    Mockplus 2015-08-31
  • 『交互设计经验分享』信息交互设计金字塔法则

    本文由卓衡科技运营总监刘鹏分享。文中刘鹏讲述了他们在创业过程中总结出的交互设计的金字塔法则。 金字塔方法这个说法来源于美国著名的现代管理咨询公司麦肯锡。大致的意思就是:任何事情都能归纳出一个中心点,而…

    2015-01-27
  • 看了这三个问题,你就知道UX设计师如何起步

    如何成为一个合格的UX设计师,怎样才能从菜鸟转变为设计高手,每天都有无数的设计师思考着同样的问题。凡事要做好,必须得回答这三个问题:做什么?怎么做?用什么做?看了这三个方面的问题,你就应该能够明白如何…

    2023-03-03
  • 入门:如何应用AxureRP做原型设计

    什么是原型呢?这个在之前介绍为什么需要进行原型设计当中有提到,原型是产品的最初形态,确认用户对产品界面和操作功能可用性的需求,高保真的原型接近于产品的最终形态,但仍只是原型。产品原型简单的说就是产品设计成形之前的一个大体框架,对网站来讲,就是将页面模块、元素进行粗放式的排版和布局,深入一些,还会加入一些交互性的元素,使其更加具体、形象和生动。

    2015-01-01
  • 10个在线原型设计软件推荐

    现在,基于云端的软件渐渐成为主流,而网站原型设计工具当然也不例外。在线原型工具相比于桌面版有得天独厚的优势,它不需要安装、不限制地点、不限制操作系统,无论你使用的Linux,Solaris, Mac 还是Windows,你都…

    原型设计教程 2015-08-25