APP导航设计

作者: 北岭有狐 | 来源:发表于2018-07-19 10:35 被阅读145次

良好的APP导航设计模式决策对整个app的核心体验起到关键作用。几种常见的移动APP导航设计模式对比图。

导航模式图 导航模式图

☆ APP标签导航

标签导航位于页面底部,通常包含四个或五个标签,适用于用户需要频繁在不同页面切换,它的缺点是会占用一定高度的空间。

微信标签导航设计

☆ APP舵式导航

舵式导航的样式很像轮船上用来指挥的船舵,两侧是其他操作按钮。当页面有处于同一层级的几大部分内容,同时又需要一个非常重要且频繁操作的入口,就可以采用这种APP导航模式。

舵式导航

☆ APP抽屉式导航

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

抽屉式导航菜单

☆ APP宫格导航

宫格导航是将主要入口全部聚合在页面,让用户做出选择。这样的组织方式无法让用户在第一时间看到内容,选择压力较大,采用这种导航的应用已经越来越少,往往用在二级页作为内容列表的一种图形化形式呈现,或是作为一系列工具入口的聚合。但是,以宫格的形式展示内容信息还是有很大优势的,图文并茂,以图形大画幅展示可以吸引用户的注意力,提供沉浸式的体验。

内容宫格展示

☆ APP混合组合导航

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

混合组合导航

☆ 列表式APP导航

列表式APP导航是我们在APP设计种必不可少的一个信息承载模式。当然作为一个APP的导航也是非常方便的。列表导航通常用于二级页,由于它与宫格导航一样,不会默认展示任何实质内容,所以通常app不会在首页使用它。这种导航结构清晰,易于理解,冷静高效,能够帮助用户快速的定位去到对应的页面。列表项目可以通过间距、标题等进行分组。

列表导航

☆ tab导航

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

tab导航

相关文章

  • 移动应用设计细节分析——导航

    移动设计模式整理分析——导航篇 产品导航设计优缺点分析 8种移动APP导航设计模式大对比 1.扁平式导航 1.1 ...

  • APP导航设计

    良好的APP导航设计模式决策对整个app的核心体验起到关键作用。几种常见的移动APP导航设计模式对比图。 ☆ AP...

  • APP导航设计

    一、导航概述 1、导航定义:采用功能定义法,其核心功能即指引(导航) 2、划分方法:导航的形状和位置 3、重要性:...

  • 让APP中内容呈现更友好易用的5种常见导航设计模式

    今天的文章会着重介绍移动端APP导航的设计模式。无论你所设计的APP是什么样的类型,或多或少都绕不开导航设计。作为...

  • APP导航设计模式

    下图是八种导航设计模式对比图: 一、列表式导航 列表式导航是最常见的主导航形式之一,是APP设计中不可少的一个导航...

  • 移动互联网-APP导航设计

    导航设计导航设计需要突出产品的核心点,尽量做到任务路径的扁平化,同时还要考虑到导航操作的便捷性。移动app导航样式...

  • App导航设计类型及示例分析

    App导航的设计对于突出产品核心功能,扁平化指导用户操作有着极为重要的作用。常见的导航设计类型有:标签式导航...

  • React Native的Navigator详解

    前言 除了极少数特殊设计的App,导航都是一个App重要组成的部分。导航栏能够维护一个导航堆栈,能够让用户清楚的知...

  • 原型设计中的导航分类

    导航设计概述 导航设计是APP展现信息入口的表达方式,我们在设计原型的时候可以更具当前应用的信息入口的多少、信息入...

  • APP导航设计模式

    导航主要分为两大类,横向和纵向。横向的导航有:标签导航、舵式导航、tab导航、轮播导航;纵向的导航有:宫格导航、下...

网友评论

    本文标题:APP导航设计

    本文链接:https://www.haomeiwen.com/subject/kiuzpftx.html