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

    相关文章

      网友评论

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

      本文标题:APP导航模式

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