南昌UI培训
达内南昌中心

0571-56020837

热门课程

移动端导航的六种设计模式的特点

  • 时间:2015-11-19
  • 发布:南昌达内
  • 来源:达内培训


    移动端的屏幕尺寸有限,操作方式也只有就是点击、滑动、长按。因此导航模式一般也就分为以下6种,接下来达内UI培训专家具体分析一下这六种导航模式。

    一、标签式导航

    也就是tab式导航,是移动应用中最普遍、最常用的导航模式,适合在相关的几类信息中间频繁的调转。这类信息优先级较高、用户使用频繁,彼此之间相互独立,通过标签式导航的引导,用户可以迅速的实现页面之间的切换且不会迷失方向,简单而高效。

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

    1、底部tab式导航

    QQ、微信、淘宝、微博、美团、京东等手机中常用的APP全部都是底部tab式导航

    这是符合拇指热区操作的一种导航模式,对于手机来说,为触摸进行交互设计,主要针对的就是拇指。

    随着手机屏幕越来越大,内容显示变多了,但是单手操作变难了。这也就是为什么,工具栏和导航条一般都在手机界面的下边缘,而将导航放置在屏幕底部即拇指热区,这样的方式为单手持握时拇指操作带来了更大的舒适性。

    2、顶部tab式导航

    Android的物理按键已经放在底部了,因此,很多Android应用运用了顶部tab式导航。

    音乐播放器为了更好的浏览基本信息、以及支持快捷操作播放器需要固定在底部,此时顶部tab导航是一个好的选择。

    腾讯新闻和网易新闻这种新闻类APP,由于内容、分类较多,运用顶部和底部双tab导航,而切换频率最高的tab放在顶部,加入手势切换的操作,能带来更好地阅读体验。

    3、底部tab式导航的扩展形式

    简单的底部tab式导航有时难以满足更多的操作功能,需要一些扩展形式来满足需求。如微博和QQ空间等都做了这种扩展,也因此给设计增加了一些个性化的亮点 。

    小结:底部Tab模式导航在iOS和Android上一直是最安全的一种导航模式,既不会出彩,也不会犯错。在大屏幕时代,底部Tab模式的导航更能适应,也更好设计。

    二、抽屉式导航

    经常和底部tab式导航结合使用的抽屉式导航,可以将部分信息内容进行隐藏,突出了应用的核心功能。

    优点:

    产品信息层级有非常多的页面和内容,难以在一屏内显示全部内容,那么这个时候,抽屉式导航是个不错的选择。 大屏时代使用抽屉栏,手势操作非常重要,从屏幕边缘唤出抽屉栏也是好的选择。 为了让主页面看上去干净美观,可以把这些辅助功能放在抽屉栏里。

    缺点:

    1、在大屏幕手机上,单手持握时处于操作盲区,难以点击

    2、 抽屉式导航可能会使用户点击率下降,参与感降低。

    三、列表式导航 

    列表式导航是APP中最必不可少的一种信息承载模式,这种导航结构简单清晰、易于理解、冷静高效,能够帮助用户快速定位到对应内容。这种导航也分为两种:

    1、 作为主导航使用

    该APP主要表达的信息层级较为单一,且并不会在入口间频繁且反复跳转,那么将列表式导航作为主导航是一种不错的选择。

    2、 作为辅助导航来展示二级甚至更深层级的内容

    作为信息梳理条目,列表数量尽量保持在一屏以内,超过一屏再分一级,而且最重要的内容要归纳在前4个列表,更容易被人们记住。 如果不同种类的内容放在同一页面,那么要注意为这些内容分类。

    四、平铺式导航

    信息足够扁平的话,可以尝试平铺式导航。这种导航方式很容易带来高大上的视觉体验,最大程度的保证了页面的简洁性和内容的完整性,且一般都会结合滑动切换的手势,操作起来也非常方便。

    缺点是用户只能切换的相邻页面,很难跳转到非相邻的页面,很容易迷失位置,因此平铺式导航都会添加几个小点来指示当前位置。

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

    五、宫格式导航

    这种导航模式非常常见,但是却不常用。 无论你用的是Android还是iOS,每天一打开手机,面前就是宫格式导航了。

    每一个APP都是一个宫格,这些宫格聚集在中心页面,用户只能在中心页面进入其中一个宫格,如果想要进入另一个宫格,必须要先回到中心页面,再进入另一个宫格。每个宫格相互独立,相互之间没有交集,也无法跳转,因此宫格式导航被广泛应用于各平台系统的中心页面。

    宫格式导航适合入口相互独立互斥,且不需要交叉使用的信息归类 ;宫格式导航不适合入口交集多、操作过多的情况。

    六、悬浮icon导航

    悬浮icon导航,是将导航页面分层,无论你到达APP的哪个页面,悬浮icon永远悬浮在上面,你依靠悬浮层随时可以去想要去的地方,同时,为了让悬浮icon不遮挡某个页面的操作,通常悬浮的icon都可以在屏幕边缘自由移动。

    iOS系统就运用了这种导航模式-Assistive Touch,悬浮icon在大屏幕时代发挥的作用是什么呢?当你单手持握手机,拇指在手机中部浏览,你想回到主屏幕,但是手指却难以到达屏幕底部,悬浮方块在这个时候就能为你提供快捷操作。

    最后,达内UI培训专家总结一下六种移动端导航模式的特点:

    标签式导航:最常用、最不易出错

    抽屉式导航:如果你的信息层级繁多,可以考虑将辅助类内容放在抽屉中

    列表式导航:作为辅助导航来展示二级甚至更深层级的内容,每个APP必不可少,但请注意数量与分类

    平铺式导航:如果你的内容是随意浏览,无需来回跳转的,可以考虑它。

    宫格式导航:不建议在APP中作为主导航使用,如果非使用不可,请增加跳转的关联性

    悬浮式导航:更适应大屏的导航模式,注意不要让它遮挡住某些页面的操作

上一篇:预期式设计怎样提升用户体验
下一篇:达内:六边形元素的优秀网页设计

达内Linux学员毕业2周就业率96%,最高薪资10000元

达内教育总裁韩少云受邀出席GIE国际教育峰会做主题演讲

达内教育集团总裁韩少云:回归本质, 打铁还需自身硬

达内教育、北京开放大学联合推出“保就业的学历教育”

选择城市和中心
贵州省

广西省

海南省

台湾