APP常用导航总结

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


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

APP常用导航总结

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

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

导航大概有如下:

  • 底部Tab
  • 顶部Tab
  • 抽屉式
  • 下拉筛选式
  • 侧边栏式
  • 九宫格式
  • 列表式

一、底部Tab

APP常用导航总结

(微信iOS版)[1]

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

优点:

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

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

缺点:

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

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

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

APP常用导航总结

(Path iOS版)[3]

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

二、顶部Tab

APP常用导航总结

(网易新闻 Android  v5.3.1)

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

优点:

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

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

3、手势操作非常方便。

缺点:

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

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

三、抽屉式

APP常用导航总结

(手机QQ Android版v5.8.0.2505)

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

优点:

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

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

缺点:

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

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

四、下拉筛选式

APP常用导航总结

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

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

优点:

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

缺点:

  1. 可见性差
  2. 操作步骤较多

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

APP常用导航总结

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

五、侧边栏式

APP常用导航总结

(天天动听Android 8.1.1)

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

优点:

  1. 可见性好,易于发现
  2. 扩展性好

缺点:

  1. 挤占了内容展示的空间
  2. 手指难以触及,因为一般都是在左上角的位置

六、九宫格式

APP常用导航总结

(支付宝安卓版9.0)

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

优点:

  1. 扩展性非常好
  2. 视野范围内可以展示的功能入口多

缺点:

  1. 单纯的只是作为入口,无法展示内容
  2. 当排布过多的时候,用户容易眼花缭乱

七、列表式

APP常用导航总结

(微信Android版6.2.5)

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

优点:

  1. 扩展性非常好
  2. 视野范围内可以展示的功能入口多

缺点:

  1. 单纯的只是作为入口,无法展示内容
  2. 当排布过多的时候,用户容易眼花缭乱

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

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

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

[2][系列]APP设计之五:导航

[3]一种新的底栏交互方式尝试

 

本文由 @yqqyzy 原创发布于人人都是产品经理 ,未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/31041/

(0)
CatherineCatherine
上一篇 2017-05-31 02:31
下一篇 2017-05-31 05:32

相关推荐

  • 【IxD案例】国际第一时尚品牌VGUE-iPad端案例

    今天给大家分享一个原型,这是第一个分享原型制作的源文件,还请大家多多见谅,源文件有点小复杂。

    附件内的源文件为高保真的原型,模拟了很多的效果,下面我给大家说一下

    2016-02-22
  • 交互设计:如何避免业务需求的遗漏

    笔者在春节期间在被七大姑八大姨问的比较多的一个问题有:你现在是做什么工作的啊?看着眼前的火锅实在不知道怎么解释,就问了他们一个问题“你觉得我们在春节期间怎么能吃上火锅?”他们的回答大概可以归类为:买材料 —— 火锅底料烧开 ——-放吃的 —— 完成而我的回答是:“如果今天的客人不敢吃辣,而你准备的是辣锅呢?”“如果你买的火锅料大家不是大家想要吃的呢?”“如果客人太多,而锅太小呢?”我目前的工作就是这个,让客人在各种状况下都能享受到这顿火...

    2018-03-06
  • app交互设计:手势流

    在智能交互中,手势已成为新的“点击”。现在每次打开手机里的app、游戏时,都需要用到点击、拖、拉等动作。单看点击的话,设计师与开发者只需要考虑用户点击屏幕哪里体验更好。但是手势不同,手势操作还需考虑什么动…

    2015-11-17
  • 90后消费者对广告无感!90后心理研究PPT分享

      大部分企业的中高管人员都是90前出生的一代,很多CEO和传统大企业的高管,很可能还是80前。他们出生和成长的年代,根本没有手机或者互联网,接受的教育以及文化熏陶,和当下最有潜力的消费主力,也就是90后…

    2015-02-02
  • Apple Watch界面设计规范之UI设计基础(2/2)

    六、布局 并排放置的按钮数量要控制好。当并排放置按钮时,使用图标来代替标题文案。一行不要放置3个以上,否则按钮的尺寸将会太小,很难被点到。 完整利用左右两个边缘之间的全部空间。Apple Watch的边缘斜面会在…

    2015-03-10
  • 设计中的 “潜在过程的外在可见后果”分析

    设计中的 “潜在过程的外在可见后果”分析 ——以第三方账号登录为例 “潜在过程的外在可见后果”,是在勒庞的《乌合之众》一书中看到的文字,这也是心理学家通常的研究切入点。外在结果作为表象,其潜在的发生过程才是更…

    2016-02-25
  • 深入业务和用户中做设计:58APP二手车大类页改版

    今年我们发起了一轮关于58APP各业务线大类页的改版优化,二手车便是其中一个。旧版二手车大类页已连续被用户使用一年多,然而业务属性与用户需求早已发生改变。作为交互设计师,需要在稳定提升大类页功能数据的前提下,重新对页面进行体验升级。

    2017-05-14
  • 友盟、缔元信.网络数据、CNZZ合并,新公司叫友盟+

    公告书 亲爱的用户: 年关将至,值此辞旧迎新的日子, 友盟、缔元信.网络数据、CNZZ联合发出公告:三家公司已于2016年1月26日宣布合并,联手打造新公司,更名为“友盟+”,共同开启“全域数据”时代。新公司任命阿里巴巴…

    2016-01-27
  • 交互进阶!如何扫除交互设计路上的3大障碍?

    Echo  :目前网上基本没有对做交互设计 师的难点进行系统的归纳和总结。基于这个原因我总结交互设计 师的三大障碍以及如何扫除交互设计 师路上的3大障碍。

    2017-09-14
  • Axure绘制专题页原型

    专题策划对于SEM至关重要,如果策划及文案都搞定了,接下来如何与设计进行沟通呢,这篇文章我们一起聊聊专题页原型绘制的话题。一、Axure界面介绍Axure的使用极其简单,只需要几个拖拽动作就可以基本搞定。接下来我们实际上手用学历教育的例子,带大家一起来看看。绘制这个原型可以分为两步,首先是手机的绘制,然后是文案内容的绘制。左侧面板(快捷键:Ctrl+Shift+[),主要是元件库,将需要用到的元件,直接拖拽就可以。右侧面板(快捷键:Ct...

    2018-03-04