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

相关推荐

  • Axure官方教程中文版第3课:组件与母版-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/Axure.com-learn(3).MP4 新建一个文件 1、添加一个按钮并设置鼠标悬停交互样式 2、复制并对齐按钮 3、将按钮转化为母版 4、将母版应用于每一页 5、在母版中为每个…

    2015-01-25
  • 【交互】浅析交互设计

    点击上方"人人都是产品经理"可以订阅哦由于在工作中会经常探讨交互该怎么做以及如何做出高效的交互,今天就整理下自己的思路,和大家一起探讨下交互其实分为两种:一种是酷炫的动效,一种是隐形的操作反…

    2017-08-04
  • 由UI/UX设计师向产品设计师演变

    为了创造出伟大的产品,UI/UX设计师应该期待并成为能够生成和处理更多额外信息以获得最佳设计成果的产品设计师。

    2017-05-09
  • 如何应对交互设计中的技术实现问题

    数十万互联网从业者的共同关注!作者: 山晓,作者授权早读课转载。公众号:LEX设计生(ID:Lex-design)编辑:Dva技术实现是交互设计的last but not the least环节,甚至有时应该是设计优先考虑的问题,毕竟…

    2017-08-02
  • 【用户体验】“跳一跳”游戏的体验

    伴随着微信的升级和重点推荐,小游戏“跳一跳”一夜成为中国互联网的全民爆款休闲游戏。不仅周围的同事、连身在老家七八线小县城的小学同学都在乐此不彼的刷屏和相互竞技。如此如火如荼的燎原之势,除了有微信这个强大的平台效应之外,当然也有一些“跳一跳”自有的吸引力蕴含其中。今天,就和大家一起来聊一聊“跳一跳”中的游戏心理学。第一,尝鲜心理。追求新鲜事物,是人类的天性。任何时候,人类都从未停止过尝试新鲜事物的脚步。而微信,作为一个8亿+的社交平台,“...

    2018-02-26
  • 智能产品的交互设计,不做到这样可不行

    我们终将以自然的方式与机器交流。在2012年圣丹斯独立电影节上,影片《机器人与弗兰克》赢得特别奖,该片讲述机器人Robot照顾患有老年痴呆症弗兰克的故事。在2017年AI大热之年,人们能否像电影里的弗兰克那样,以人对人的方式与机器交流,这在人机交互学科里定义为“人机自然交互”。何为自然交互?简而言之就是以日常交流方式与计算机进行交互。何为日常交流方式?就是人们通过语音、肢体、手势、眼神、表情等形式进行交流互动。人机交互正迈上新台阶人机交...

    2018-02-07
  • 如何系统地整理设计规范?

    整理规范对设计师的基本能力有很好的锻炼作用,所以各位设计师们整理规范时不要嫌琐碎麻烦,它可以让我们慢慢变强!

    2017-04-28
  • 用户体验五要素

    01战略层什么是用户体验:用户在使用产品过程中建立起来的一种纯主观感受。用户体验的重要性:给用户一个积极、高效的体验,他们会持续使用你的产品,产品满足用户某方面的需求并来盈利,帮助人们提高生活质量,提高工作效率,改善人际关系,等等。五要素:战略层、范围层、结构层、框架层、表现层用户体验要素的作用:要素之间相互作用完成任务,创建一个总体的用户体验设计。适用场景:设计:战略层→范围层→结构层→框架层→表现层用户体验:表现层→框架层→结构层→...

    2018-02-06
  • 广告Banner :20种高度可行、转化率高的设计思路

    Banner广告是快速高效的吸引用户的重要手段。Banner广告在网站中通常都占据着不错的位置,它们的转化率和它本身的设计优秀与否息息相关,最重要的是,它要能迅速的吸引用户的注意力,通过优秀的文案和视觉让用户立刻马上点击。今天的文章,我们通过一系列优秀的范例,帮你梳理Banner 广告的20种高度可行、转化率高的设计思路。

    2017-05-03
  • 艺计回忆录 | 交互求职

    前几天和胡老板聊起我们这一代人在北上广深踟蹰前行即将奔三时的焦虑,不可避免地说到了职业规划这个话题。 对我们这些刚工作但残留一张学生脸的职场小腊肉来说,现状基本是满意的,前路虽不暗淡却也少不得早早谋划…

    2017-03-07