010-51265006

全方位科普移动端导航的六种设计模式

时间:2016-07-01

任何APP的组织信息都需要以某种导航框架固定起来,就像是建筑工人拔地而起的高楼大厦一样,地基非常重要,之后你想要盖多少层楼、每层楼有多少间房,都在地基的基础上构成。而一个新的产品也是这样,合适的导航框架,决定了产品之后的延伸和扩展。

不同的产品需求和商业目标决定了不同的导航框架的设计模式。而交互设计的第一步,就是决定导航的框架设计,框架确定后,才能开始逐渐丰富血肉。

首先,我们要为组织信息分层,在这一步骤,一定要做好信息层级的扁平化,不能把所有的组织信息都铺出来,这样做只会让用户心烦意乱找不到想要的重要操作,也不能把层级做的很深,用户没有那么多耐心跟你玩躲猫猫。一定要将做核心、最稳固、最根本的功能要素放在第一层页面,其他得内容收在第二层、第三层、甚至更深。

之后,根据层级的深度和广度来确定导航的设计模式。不要觉得这有多难,移动端的屏幕尺寸就这么大,操作方式也无非就是点击、滑动、长按这些。因此导航模式一般也就分为以下7种。

一、标签式导航

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

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

1、底部tab式导航

如果此时你观察一下自己手机中常用的APP你就会发现QQ、微信、淘宝、微博、美团、京东等全部都是底部tab式导航

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

将导航放置在屏幕底部也不仅仅关乎到拇指操作的舒适性,还关系到另一个问题:如果放在上面,用手指操作时,会挡住阅读的视线。如果控件在底部,不管手怎么移动,至少不会挡住主要内容,从而给予清晰的视角。呈递内容的屏幕在上方,控制按键在下方。

2、顶部tab式导航

Android的物理按键已经放在底部了,为了不产生堆叠,很多Android应用运用了顶部tab式导航,这是一种妥协下的行为。(下图为微信AndroidiOS图)

 

而如今,在妥协物理按键和拇指操作舒适中,微信Android版抛弃了顶部导航的方式,和IOS保持了一致。

当然顶部导航也不是那么一无是处,QQ音乐和酷我音乐现在用的就是顶部Tab式导航;还有腾讯新闻和网易新闻这种新闻类APP,由于内容、分类较多,运用顶部和底部双tab导航。

小结:在两种情况下可以选择顶部tab式导航。

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

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

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

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

 

标签导航总结:

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

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

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

二、抽屉式导航

经常和底部tab式导航结合使用的抽屉式导航,我们可以称之为优雅的隐喻。抽屉式导航将部分信息内容进行隐藏,突出了应用的核心功能。设想你的产品信息层级有非常多的页面和内容,难以在一屏内显示全部内容,那么你一定首先会想到去设计一个底部或顶部的tab导航,但导航太多无疑显得臃肿,而且使用户难以点击,那么这个时候,抽屉式导航是个不错的选择。

但是,抽屉栏式导航有两大缺陷:

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

2、抽屉式导航可能会降低你产品一半的用户参与度

那么,到底什么时候适合用侧导航呢?我们总结一下:

1).如果应用主要的功能和内容都在一个页面里面。只是一些用户设置这类低频操作内容需要显示在其他页面里。为了让主页面看上去干净美观,可以把这些辅助功能放在抽屉栏里。

2).如果你的应用有不同的视图,且他们是平级的,需要用户同等地对待,抽屉栏将会浪费掉大多数的用户对于侧边栏中入口的潜在参与度和交互程度。

3).在大屏时代使用抽屉栏,手势操作显得尤为重要,从屏幕边缘唤出抽屉栏是个不错的选择。

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

三、列表式导航

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

1、作为主导航使用

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

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

你几乎在所以APP中都能看到它的应用,作为信息梳理条目,列表数量尽量保持在一屏以内,超过一屏最好再分一级,而且按照人一次只能记住4项事物的心理法则最重要的内容归纳在前4个列表更容易被人们记住。如果不同种类的内容放在同一页面,那么要注意为这些内容分类。

四、平铺式导航

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

 

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

总结:

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

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

五、宫格式导航

这种导航模式非常常见,但是却不常用。

常见是因为,无论你用的是Android还是iOS,每天一打开手机都可以看到。

每一个APP都是一个宫格,这些宫格聚集在中心页面,用户只能在中心页面进入其中一个宫格,如果想要进入另一个宫格,必须要先回到中心页面,再进入另一个宫格。每个宫格相互独立,它们的信息间也没有任何交集,无法跳转互通。因为这种特质,宫格式导航被广泛应用于各平台系统的中心页面,这就是为什么说他常见。

总结一下:

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

一旦入口需要有所交集,必然导致更多的操作负累,这个时候只能根据产品特性做出权衡,如果不适合,建议果断拒绝这种方式。

六、悬浮icon导航

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

总结:

悬浮式icon是一个非常便捷的操作入口,也适应大屏幕时代。

但需要注意的是

1).悬浮式icon会遮挡某些页面的操作,在设计的时候应该考虑进去,比如无论在那个页面永远为悬浮icon留有位置。

2).在某些信息层级繁多且复杂的APP,让用户自主决定是否需要调出悬浮式icon,或者让用户自定义菜单会更加符合用户的心理预期。

最后总结一下:

标签式导航:最常用、最不易出错,请第一时间考虑它。

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

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

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

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

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

最后,根据产品层级的深度和广度,选择适合的导航模式,是产品设计中的关键一环。

Copyright©2007 - 2017 webthink.cc 版权所有 网博思创网络技术(北京)有限公司 京ICP备07017583号 百度统计