APP导航设计模式

作者: wanderer28 | 来源:发表于2019-04-08 15:56 被阅读22次

下图是八种导航设计模式对比图:

APP导航设计模式

一、列表式导航

列表式导航是最常见的主导航形式之一,是APP设计中不可少的一个导航设计。一般出现在二级导航设计页面。

列表式导航包含:分组列表、个性化列表、行内扩展列表(一般是次级导航)和增强性列表。

优点:用户可以快速查找所需内容,并且可以向下延展更多的导航内容,承载力比较强。

APP导航设计模式

二、标签导航设计

标签式导航就是常说的Tab式导航。一般位于页面底部,用于切换主页面。

标签式导航tab个数一般在3-5个。极限情况下不要少于2个、也不要多于6个。

标签式导航可分为顶部标签式导航、底部标签式、舵式导航(底部扩展式导航)。

优点:结构简单,操作便捷,信息清晰,增加信息的曝光率。很多APP首页设计都在采用标签导航设计模式。

底部标签式:

APP导航设计模式

舵式导航

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

APP导航设计模式

三、抽屉式导航设计

抽屉导航是指菜单隐藏在当前页面后,点击入口即可像拉抽屉一样拉出菜单,这种导航的优点是节省页面展示空间,让用户将更多的注意力聚焦到当前页面。

比较适 合于不那么需要频繁切换内容的应用,例如对设置、关于等内容的隐藏。这种导航设计需要注意的是一定要提供菜单滑出的过渡动画。

APP导航设计模式

四、宫格导航设计(例如九宫格)

主要入口全部聚合在页面,让用户做出选择。可以呈现多个功能聚合,可呈现更多的功能,且各个功能相互独立互相独立。

缺点:无法让用户在第一时间看到内容,选择压力较大。

APP导航设计模式

五、组合导航设计

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

例如很多首页都采用标签导航、九宫格导航、抽屉式导航。

优点:这种导航比较灵活,能适应架构的快速调整。

APP导航设计模式

六、tab导航设计

用于二级页,本质和标签导航相同,当标签导航下分类层级比较多时可以采用tab导航。

七、大图轮播导航或是 大图上面的导航设计

应用信息足够扁平,可以应用轮番导航设计,页面简洁,操作方便,但内容太多会导致不容易定位信息。例如九宫格设计功能超出后可以利用轮播导航。

APP导航设计模式

相关文章

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

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

  • APP导航设计

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

  • APP导航设计模式

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

  • App导航设计模式

    1.抽屉式导航 抽屉式导航就是当前比较流行的导航样式,是应用选择比较多的一种导航方式,这种导航的核心思想就是隐藏,...

  • APP导航设计模式

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

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

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

  • 移动应用UI设计模式图示

    移动应用UI设计模式: 1.导航设计模式:主要导航和次要导航模式。 1)主菜单导航模式: 跳板式 Springbo...

  • APP设计模式之——导航设计

    该篇文章首发自我的知乎专栏:cheka的产品笔记 想查看更多产品干货,欢迎关注我的知乎:cheka hou ---...

  • APP导航设计常见模式

    当我们确定了移动APP的设计需求和APP产品设计流程之后,开始着手设计APP界面UI或是APP原型图啦。这个时候我...

  • 移动应用UI设计模式

    本书主要介绍以下设计模式: 导航模式:了解主导航和次级导航的设计模式 表单模式:改掉行业内表单设计的不良习惯 表格...

网友评论

    本文标题:APP导航设计模式

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