APP常用导航总结

作者: 妖叶秋 | 来源:发表于2015-09-03 12:08 被阅读2422次

    虽然我承认导航这种东西在现在的app非常常见,但是实际上,这种东西也不是必须存在的。如果应用够轻,比如雅虎每日新闻News Digest就不存在导航这种东西。只有当app的架构扩大到一定的程度,当内容繁杂到无法展示在一个页面中,这时候才需要用到导航。

    在选用导航的形式之前,更重要的是对内容进行分类(只针对内容,功能的导航可以不需要)。类别分清楚了,就对这个类别起个名字。之后,用户就可以根据类别来找到他们需要的内容了。

    当然,导航也是可以嵌套使用的,不过嵌套的时候建议选用不同的导航形式。

    导航大概有如下:①底部Tab,②顶部Tab,③抽屉式、④下拉筛选式、⑤侧边栏式、⑥九宫格式、⑦列表式。

    一、底部Tab

    (微信iOS版)[1]

    底部Tab是iOS提出来的导航方式,已经延续使用了很多年,所以这种导航最为常见。

    优点:

    1、可见性非常好,底部Tab非常明显,易于发现;

    2、同时,由于实在底部,操作性也非常好,用户很方便就能触及到这个区域。

    缺点:

    1、容纳导航的类别有限,iOS建议最多五个,超过五个之后,底部有人就容纳不下了。

    2、占据空间大,一般都是文字+图标的形式,占据空间略大。

    当然,这种导航还存在一种变形的形式。某些app会尝试在这里加入重要的操作,形成super tab,变成了一种兼顾导航和操作的导航栏。

    (Path iOS版)[3]

    不过,有个小小的疑问就是,为什么我见到的所有的操作都是放在中间的呢?这个问题欢迎探讨一下。

    二、顶部Tab

    (网易新闻 Android  v5.3.1)

    顶部Tab是谷歌提出来的,为了区分与iOS的区别的一种导航模式,由于在顶部,手指难以触及,所以谷歌对应地提出了手势操作的解决方法:通过在屏幕左右滑动来切换标签。

    优点:

    1、扩展性非常好:标签的个数没有上限,不过太多的话,越是后面的页面渗透率会越低。

    2、占据空间小:相比于底部Tab,顶部Tab一般占据的空间更小(因为不需要考虑手指点击,所以可以把区域缩小,只选用图标或者文字即可),可以把更多的空间安排给内容展示。

    3、手势操作非常方便。

    缺点:

    可见性略逊:这是空间占据的区域变小之后的后果。

    当然,顶部Tab有时候也会容纳一些按键,形成一种super tab,如上图的网易新闻,某种意义上,那就是一种super tab。

    三、抽屉式

    (手机QQ Android版v5.8.0.2505)

    抽屉式也是谷歌提出来的一种导航模式,由于虚拟按键的存在,所以在安卓上使用底部Tab会造成双底栏,视觉观感不佳。但是,多重导航普遍是需要的,所以,谷歌提出来侧边栏的形式。通过汉堡菜单按钮(如下)触发这个侧边栏。

    汉堡菜单按钮

    优点:

    1、扩展性好,导航的个数没上限。

    2、不占据空间,通过按钮触发,所以这种导航是占据空间最小的。

    缺点:

    1、可见性太差,用户还没能把汉堡菜单按钮和侧边栏联系起来,所以,侧边栏的渗透率很低。

    2、操作复杂,汉堡菜单放置的位置比较难以触及,同时不同的标签页切换步骤也比较多。

    四、下拉筛选式

    (安智市场安卓版v5.7)

    下拉筛选式跟抽屉式很类似,可以说只是视觉上的一些区别而已。

    优点:

    1、占据空间小,所以很容易嵌套到其他的导航里面去。

    缺点:

    1、可见性差

    2、操作步骤较多

    关于这个下拉筛选式,我设想的是如下的嵌套方式:

    顶部Tab与下来筛选式的嵌套

    五、侧边栏式

    (天天动听Android 8.1.1)

    侧边栏式是一种在手机上很少见的导航,更多的是在PC端会常见一些。

    优点:

    1、可见性好,易于发现

    2、扩展性好

    缺点:

    1、挤占了内容展示的空间

    2、手指难以触及,因为一般都是在左上角的位置

    六、九宫格式

    (支付宝安卓版9.0)

    九宫格是一种常见的功能型导航,这种导航的思路很简单,就是把功能排布出来,任君挑选。

    优点:

    1、扩展性非常好

    2、视野范围内可以展示的功能入口多

    缺点:

    1、单纯的只是作为入口,无法展示内容

    2、当排布过多的时候,用户容易眼花缭乱

    七、列表式

    (微信Android版6.2.5)

    这也是一种常见的功能导航。

    优点:

    1、扩展性非常好

    2、视野范围内可以展示的功能入口多

    缺点:

    1、单纯的只是作为入口,无法展示内容

    2、当排布过多的时候,用户容易眼花缭乱

    这篇东西其实只是一个总结,总结得也比较浅显,更多的是希望在以后自己在设计的时候,有个参考的东西而已。而且是考虑当有导航嵌套的时候,要怎么样选用这些导航。

    而且,不同的导航之间,其实差别都不是特别大,翻来覆去就是:可见性、操作性以及是否会挤占内容展示空间这几点。这些点在导航设计中也不是难点。

    [1] App常用导航框架http://www.jianshu.com/p/45930d06d504

    [2][系列]APP设计之五:导航http://www.jianshu.com/p/33073c336be4

    [3]一种新的底栏交互方式尝试http://www.jianshu.com/p/94b2ebfd2128

    相关文章

      网友评论

      本文标题:APP常用导航总结

      本文链接:https://www.haomeiwen.com/subject/znulcttx.html