一品潮流
一品潮流 > 资讯 > 正文

8种移动APP导航设计模式

导读: 

8种移动APP导航设计模式

当完成初期的需求调研与分析,产品概念设计以及整体信息架构的初步构建后,就要开始着手进入具体的原型方案设计——合理的APP布局是一个好的产品方案的基石,充分了解常见的导航模式有助于我们更好的达到这个目标。

常见的导航模式如下:

标签导航、舵式导航、抽屉导航、宫格导航、组合导航、列表导航、tab导航、轮播导航

1.app标签导航

标签导航位于页面底部,通常包含5个标签是比较合适的数量。这种导航是非常常见的,如果你的应用需要用户频繁的在不同页面切换,可以采用这种导航。它的缺点是会占用一定高度的空间。

8种移动APP导航设计模式

2.app舵式导航

标签导航的变体,姑且称之为“舵式导航”,因为它的样式很像轮船上涌来指挥的船舵,两侧是其他操作按钮。当页面有处于同一层级的几大部分呢绒,同时又需要一个非常重要且频繁操作的入口,就可以采用这种app导航模式。

8种移动APP导航设计模式

3.app抽屉式导航模式

抽屉式导航是将菜单隐藏在当前页面后,点击入口即可像拉抽屉一样拉出菜单,这种导航的优点是节省页面展示空间,让用户将更多的注意力聚焦到当前页面。比较适合于不那么需要频繁切换内容的应用,例如对设置、关于等内容的隐藏。这种导航设计需要注意的是一定要提供菜单画出的过渡动画。

8种移动APP导航设计模式

4.app宫格导航

这种宫格导航是将主要入口全部聚合在页面,让用户做出选择。这样的组织方式无法让用户在第一时间看到内容,选择压力较大,采用这种导航的应用已经越来越少,往往用在二级页作为内容列表的一种图形化形式呈现,或是作为一系列工具入口的聚合。

8种移动APP导航设计模式

5.app混合组合导航

当用户需要聚焦内容,同时又需要一些快捷入口能够连接某些页面时,就可以采用组合导航。组合导航上方用宫格的形式展现快捷入口,与标签导航不同的是,这些宫格入口之间不需要是平级的关系,也不必包含整个层级的内容,你可以将它理解为一种图形化的文字链。这种导航比较灵活,能适应架构的快速调整。

6.列表式app导航

列表式app导航是我们在app设计中必不可少的一个信息承载模式。当然作为一个app的导航也是非常方便的。

不过目前来看,列表导航通畅用于二级页,由于它与宫格导航一样,不会默认展示任何实质内容,所以通常app不会在首页使用它。这种导航结构清晰,易于理解,冷静高效,能够帮助用户快速的定位去到对应的界面。列表项目可以通过间距、标题等进行分组。

7.tab导航

用于二级页,本质和标签导航相同,当应用层级较多的情况下,可以采用tab导航,典型场景是用于改变的当前的视图,或对当前页面内容进行分类查看。

8.大图录播导航或是大图上面的导航设计

当你的应用信息足够扁平,可以尝试轮播导航,如果应用得当,能够给人耳目一新的体验。这种导航能够最大程度的保证应用的页面简洁性,操作也是最方便的。但是缺点是不能够快速的定位对应的分页内容。

推荐阅读:商务财经网

频道推荐

待拔草商品

时间:2020-02-25 14:13:50

$.getJSON(["/ajax/viewArticle?s=", +new Date(), "&id=", "4916"].join(''), function (ret) {$('#view-times').html("阅读:" + ret.data);});