使用地图时,如果不知道自己在哪儿,就会迷失在这个城市。导航就是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
网友评论