移动端导航的6种设计模式

一、标签式导航

也就是我们平时说的tab式导航,是移动应用中最普遍、最常用的导航模式,适合在相关的几类信息中间频繁的调转。这类信息优先级较高、用户使用频繁,彼此之间相互独立,通过标签式导航的引导,用户可以迅速的实现页面之间的切换且不会迷失方向,简单而高效。需要注意的是标签式导航根据逻辑和重要性控制在5个以内,多余5个用户难以记忆而且容易迷失。

而标签式导航还细分为底部tab式导航、顶部tab式导航、底部tab的扩展导航这三种。

腾讯新闻和网易新闻这种新闻类APP,由于内容、分类较多,运用顶部和底部双tab导航,而切换频率最高的tab放在顶部,这是为什么呢?因为新闻在每个tab都是沉浸式阅读,最常用的操作是在一个tab中不断地下滑阅读内容,将常用的tab放在顶部,加入手势切换的操作,反倒能带来更好地阅读体验。

选择顶部tab的情况:

(1)某项功能必须固定在底部,那么其他tab只能固定在顶部,但为了方便操作,顶部tab导航最好支持手势操作,即滑动即可切换

(2)该APP是沉浸式体验,如新闻、小说等,为了带给用户更好的阅读体验,可以将tab放在顶部

标签导航总结:

实际上,底部Tab模式导航在iOS和Android上一直是最安全的一种导航模式,他不怎么出彩,但是绝对不会犯错。在大屏幕时代,底部Tab模式的导航更能适应,也更好设计。

适用于:入口分类数目不多,可以控制在5个以内,且用户需要在入口间频繁切换来执行多个任务

需要注意:结构太过复杂而且不稳定的应用不适合标签式导航

二、抽屉式导航

需要用户有一定参与的信息层级,最好不好放置在抽屉栏

eg:SAY

三、列表式导航

如果该APP主要表达的信息层级较为单一,且并不会在入口间频繁且反复跳转,那么将列表式导航作为主导航是一种不错的选择。例如杂志Elle,作为一个杂志APP,他以文字、图片表达为主,层级浅且内容评级,用列表式导航作为主导航来构架内容,简单而直接。

eg:ELLE

四、平铺式导航

当你的信息足够扁平,可以尝试平铺式导航。这种导航方式很容易带来高大上的视觉体验,最大程度的保证了页面的简洁性和内容的完整性,且一般都会结合滑动切换的手势,操作起来也非常方便。PChouse是一个家居杂志的APP,杂志休闲随意的特质,非常适合平铺式导航,最大限度的保持了图片的完整性。

轮播式导航比较适用于足够扁平化的内容和随意浏览的阅读模式

需要注意的是:无法跳转至费相邻页面,如果入口间需要反复跳转,则不适合这种模式

五、宫格式导航

宫格式导航适合入口相互独立互斥,且不需要交叉使用的信息归类

eg:美图秀秀

六、悬浮icon导航

AssistiveTouch

推荐阅读更多精彩内容

  • 当确定了APP的设计需求和产品的整体结构之后,要着手开始规划和制作APP的原型及UI界面。一款APP的好与不好,很...
    艺彤虹雨阅读 29,155评论 7 104
  • 假设我们需要建造一栋建筑,那么第一步需要做什么工作?——没错,设计和规划好地基,万丈高楼平地起依靠的是稳健合理的地...
    汪继志阅读 340评论 0 10
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 131,894评论 20 560
  • 平时生活中使用过很多APP,也看过一些关于移动产品导航设计的文章。今天整理了一下市场上常见的几种导航设计,算是对自...
    克果阅读 761评论 1 16
  • 读万卷书,不如行万里路;行万里路,不如阅人无数;阅人无数,不如名师指路。 这周去听从中兴公司来的王总给我们带来关于...
    陈顺富888087阅读 37评论 0 0