课程咨询 :0571-56020837 QQ:162157806

南昌达内UI名师

南昌UI培训 > 达内新闻 > 移动端导航的六种设计模式的特点
  • 移动端导航的六种设计模式的特点

    发布:南昌达内      来源:达内培训      时间: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中作为主导航使用,如果非使用不可,请增加跳转的关联性

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

    推荐文章

上一篇:预期式设计怎样提升用户体验

下一篇:达内:六边形元素的优秀网页设计

最新开班日期  |  更多

UI设计培训免费训练营

UI设计培训免费训练营

开班日期:每周一

UI设计培训高级班

UI设计培训高级班

开班日期:每周一

UI设计培训全日制班

UI设计培训全日制班

开班日期:每周一

UI设计培训周末班

UI设计培训周末班

开班日期:每周一

  • 地址:南昌市北京西路156号洪城大厦10楼
  • 课程培训电话:0571-56020837 QQ:162157806     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.com.cn
  • 2001-2016 达内国际公司(TARENA INTERNATIONAL,INC.) 版权所有 京ICP证08000853号-56