导航设计的目的就是需要突出产品的核心,扁平化用户的任务路径。让用户能够顺利的在产品中畅行,让用户时刻清楚自己在应用中所处的位置,及如何前往目的页面。
产品的导航系统,是产品的信息结构在用户界面上的展现方式。移动端产品导航的设计没有最好之说,只有最合适,根据你的产品采取最合适的导航设计。
纵观应用市场上的APP,导航设计的模式总是几种的组合使用。下面我们来看一下常见的10种导航设计模式。
描述:
优点:
缺点:
描述:
顶部Tab是谷歌提出来的,为了区分与iOS的区别的一种导航模式,由于在顶部,手指难以触及,所以谷歌对应地提出了手势操作的解决方法:通过在屏幕左右滑动来切换标签。
实际项目中,顶部与底部配合使用的挺多。
优点:
缺点:
可见性略逊:这是空间占据的区域变小之后的后果。
描述:
当你的应用信息足够扁平,可以尝试轮播导航;
优点:
能够最大程度的保证应用的页面简洁性,操作也是最方便;
缺点:
不能够快速的定位对应的分页内容;
描述:
优点:
缺点:
描述:
优点:
缺点:
描述:
优点:
缺点:
描述:
优点:
菜单与界面的连贯性比抽屉式要好,容易让用户感知当前位置;
缺点:
描述:
优点:
缺点:
描述:
优点:
缺点:
举例:
描述:
一个网站或者APP内不可能只用一种导航,通常都是组合来使用。在不同使用场景下根据实际需要进行选择。但是通常主导航会对这个产品的格调起决定性作用。
优点:
缺点:
举例:淘宝首页
淘宝的首页布局就是是顶部搜索框(非常重要)+banner轮播(精准推送的广告、形成变现)+宫格(给阿里系产品进行导流)+卡片+底部tab。
1.底部tab式
2.顶部标签式
3.轮播式
4.宫格式
5.卡片式
6.抽屉式
7.下拉式
8.列表式
9.弹窗式
10.组合式
导航可能不单单只有这几种,可能大家的叫法也不尽相同。每种导航都有其存在的意义,无所谓对错,只有合适与否。真正在实际项目中,还是得根据产品的实际情况综合去运用。