APP导航模式

作者: 芥子未末 | 来源:发表于2017-08-15 15:35 被阅读232次

使用地图时,如果不知道自己在哪儿,就会迷失在这个城市。导航就是APP的地图,如果设计不得当,用户就会在APP里迷路,不知道自己在哪儿,该怎么操作。

1. 底部tab导航

底部tab导航是最常见的导航,这是符合拇指区域的一种设计,易于单手操作。

使用场景:

一般作为APP的一级导航。

通常有3~5个tab,一般不会超过5个。

每一个tab所对应的页面或功能应属于同一层级。

交互设计:

对于多余5个tab的导航,可以将最右侧tab设计为更多,点击显示更多的功能或信息。

可以将底部tab导航隐藏以追求沉浸感,即上滑时隐藏,下滑时显示。

当前页面的tab要明确标示,可以尝试颜色、尺寸的变化。

2. 顶部tab导航

顶部tab导航相比于底部tab导航,数量和形式上更加灵活。

使用场景:

通常作为页面内导航使用,本质和底部tab导航相同。区别在于底部tab导航是整个APP的导航,而顶部tab导航是某个页面内的导航。

交互设计:

顶部tab导航可以固定数量,也可以向左滑动展现更多tab。甚至可以像新闻APP那样,衍生出订阅功能。

顶部tab导航在ios中一般当作二级导航。而有余物理按键置于底部,为了不产生堆叠,在Android的设计规范中,顶部tab导航模式以前被用作一级导航。如今,Google推出“抽屉导航”作为一级导航,同时为了妥协拇指区域,很多APP在设计时与ios保持一致。

3. 舵式导航

舵式导航可以看作是底部tab导航的延伸。

使用场景:

APP最核心功能需要重点强调,可以将此功能放在底部tab导航栏上。

交互设计:

在设计上要重点突出,在颜色和尺寸上与其他tab保持差异化。

核心功能不唯一,舵式导航里可以放置重要性高、使用频繁的功能,但会增加用户记忆负荷。

4. 抽屉导航

抽屉式导航占用空间少,使主页面看上去简洁美观。

使用场景:

APP的主要功能都集中在主页面里,可以采用抽屉导航,用来放辅助功能。

交互设计:

抽屉导航与拇指区域是矛盾的,大屏幕下可以使用手势操作,可以尝试从屏幕边缘唤出抽屉栏。

5. 宫格导航

宫格导航占据空间大,以平铺的形式展示所有功能,但是不方便功能之间切换。

使用场景:

通常用作同级别下使用频率相近,同时各功能彼此独立且切换频率不高的场景。

通常作为二级导航使用。

交互设计:

同级别的功能,如果互相之间有关联,可以分类处理。

宫格导航的延展性良好,理论上可以无限延展。

6. 列表式导航

列表式导航简单清晰、易于理解,能够帮助用户快速定位到对应内容。

使用场景:

作为主导航,与宫格导航类似,各功能彼此独立,信息不共享。

作为二级导航,可以适用于层级较深的信息架构。

交互设计:

可以分类处理。

列表式导航的延展性良好。

列表式导航占用的空间更大,可以展示核心内容。

7. 悬浮导航

悬浮导航占用的页面空间最小,可以极大的简化功能或信息入口。

使用场景:

通常信息展示需要尽量大的空间,需要简化页面。

交互设计:

可以融入动态效果,增加趣味性。

8. 轮播导航

轮播导航的视觉体验最好,保证了页面的简洁性和内容的完整性。

使用场景:

信息足够扁平的APP可以采用轮播导航。

交互设计:

一般结合手势切换,方便操作。

轮播导航占据的页面空间最大,可以尽可能多的展示内容页的核心信息。

每种导航都有常见的使用场景,但是没有绝对的界限,在实际设计中要具体情况具体分析。同时大多数APP也不会使用单一的导航模式,根据不同的功能需求和信息架构,灵活混用多种导航模式。


欢迎转载,记得标明出处哦

扫描下方二维码关注Yinteraction

相关文章

  • APP导航设计

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

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

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

  • APP导航设计模式

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

  • APP导航模式

    使用地图时,如果不知道自己在哪儿,就会迷失在这个城市。导航就是APP的地图,如果设计不得当,用户就会在APP里迷路...

  • App导航设计模式

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

  • APP导航设计模式

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

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

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

  • APP导航设计常见模式

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

  • iOS中导航设计模式

    平铺导航模式 UIPageController 标签导航模式 UITabBarcontroller 树形导航模式 ...

  • iOS中导航设计模式

    平铺导航模式 UIPageController标签导航模式 UITabBarcontroller树形导航模式 UI...

网友评论

  • e400af76c901:同意,能点击解决的事,绝对不愿意去打一个字。
  • r2iqqR:其实感觉一个APP如果搜索足够强大,那么导航失去了意义,哈哈哈
    芥子未末:搜索产生的原因是因为导航不够强大,如果导航足够强大,反倒是搜索没有了意义

本文标题:APP导航模式

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