当前位置:首页 > 新闻中心 > 解决方案
手机网站建设:移动端抽屉式导航与列表式导航设计责任编辑 :李飞    文章来源 :星翼创想(www.iswweb.com)    发布时间 :2015-11-17    阅读次数:4513

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


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

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

我们看到随着iPhone6和iPhone6 plus的推出,到今年6S的持续推进,大屏幕手机时代就这么不可阻挡的来了,而屏幕顶部左上角的抽屉栏位置,一个需要被经常操作的入口,现在,处在了操作盲区。(如下图)

网站导航设计 移动端导航设计 移动站点优化 移动站点策划

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

抽屉栏为页面带来干净的设计的同时,也让用户忽视隐藏的信息,既然你第一眼看不到这些入口,那么你也就会时常忘记它们在哪儿。这也导致了隐藏在抽屉栏内的信息内容用户点击率下降,参与感降低。

那么,问题来了,到底什么时候适合用侧导航呢?

我们总结一下:

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

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

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

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


三、列表式导航

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

1、 作为主导航使用

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

网站导航设计 移动端导航设计 移动站点优化 移动站点策划

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

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

网站导航设计 移动端导航设计 移动站点优化 移动站点策划

总结:

列表式导航大多作为辅助导航来展示二级甚至更深层次的内容,若要作为主导航,必须满足层级浅且内容平级的条件

需要注意的是:

l  列表式导航的数量保持在一屏以内,超过一屏最好再分一级,

l  将最终要的内容归纳在前4个列表更容易被人们记住

l  要注意为列表内容分类。


文章转载请保留网址:http://www.iswweb.com/news/solutions/1551.html