移动设计UX(UE)ui 产品样例

APP导航模式

2017-08-15  本文已影响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

上一篇下一篇

猜你喜欢

热点阅读