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

相关推荐

  • 阿里设计师的思考总结:用户体验设计的进阶修炼之路

    从方法、标准、协同、软技能和创新五个方面说说我对用户体验设计进阶修炼的思考与实践。

    2017-05-17
  • Sketch导入图片丢色、变白解决方案

    周五晚上回家作图遇到点状况,折腾了半天才好。整理一下发出来,估计有人用得上。以下内容为磨磨叽叽的瞎逼逼顺序,着急解决问题的同志可以快速下滑,会有提示周五到家日常打开电脑作图,做的做的发现不对劲,之前导入进来的图片好像不正常了。如下图一开始还以为是不小心降低了透明度,cmd+左键,发现没降。再想可能是加了纯色,看了一眼属性,也没有叠加颜色。醉了,这什么鬼。我一看既然不成那就算了。重新再导入一张图片,这张后入的是好的。没当回事,接着做图。过...

    2018-04-25
  • 【UX设计】如何成为一名更加贴心的用户体验设计师?

    我曾见过一个简单却贴心的设计,是个仅170 像素的笑脸。那是非常疲惫的一天,下班后我想要清理一下Email 收件箱,放松一下心情。以前我都是用苹果自带的邮件应用,但这次我打开刚下载的Gmail 应用,筛选了收件箱里…

    交互设计 2015-09-13
  • [自译]VR 设计实践

    在Media Lab的作者分享了他在本科项目中对VR设计实践的一些思考,阅读后能够帮助对虚拟现实中的体验设计建立一些基础的认识,其中对地形特征(terrain features)和标线(reticle)的交互解读让我感觉收获颇多,与…

    交互设计 2016-08-30
  • 【UI交互设计】首月结课作业展示

    花瓣美素是全国最大的版权素材平台,本文章内学生作品图片,未经允许,严禁抄袭和转载。花瓣网丨花瓣美素教学中心,承担天津市大学软件学院数字媒体专业UI交互设计方向120人的教实训任务,在刚刚过去的第一个月里,通过同学们和教师团队的不断努力,专业核心课程《图形图像基础》和《用户体验设计》等两门课程教学任务圆满完成。《图形图像基础》是UI交互设计专业的专业必修课。通过企业教师的认真指导和对该课程的学习,同学们对UI交互有了进一步的了解,在企业教...

    2018-04-17
  • 团队设计沉淀:做好 Style Guide 不容易

    说起 Style Guide (即设计规范),大部分人的第一反应就是 Material Design 和 iOS Human Interface Guidelines,我自己就是靠读这两份文档逐渐入门设计领域,国内外的设计师、开发者们自然也是对它们了然于胸。来大公司实习之后,接到的第一个任 务就是维护、优化团队的设计规范网站,同时最近也经常和饿了么、随手记等互联网公司的设计师或产品经理探讨如何沉淀团队的设计。

    2017-06-04
  • Pinpil 交互设计作品欣赏

    Pinpil交互设计作品欣赏

    2018-03-24
  • 2014年最佳的十款交互设计工具

    在设计之初,UI设计师所提供的视觉稿和最终的可交互原型之间,需要交互设计师借助工具来补足,让静态的视觉转化为富有生命力的可交互界面。2014年所涌现出来的这些交互设计工具,在不断迭代升级中走向了成熟,易用…

    2015-01-15
  • UI设计师工作必备的七个设计神器

    今天推荐的这7个神器,有经典款也有新人版,不过大致贯穿了UI设计的整个工作流程,从排版、配色、切图到标注、预览,都有对应的良心神器推荐 ,非常适合刚入门的UI设计师,当然,有两款谷歌刚出的神器,也值得老手们来瞧一瞧。

    2017-05-31
  • 【CIO说】花椒直播韩三普:用户体验与核心技术才是硬实力

    本期推荐韩  三  普花 椒 直 播 CTO社交直播作为一个年轻的行业,”高富帅”表现出的强大增长和吸金实力虽让业外人士倍感羡慕,然而作为一个严重依赖技术、用户体验要求极高的行业,流量等时代红利已经不能称其为门槛。如何打造平台差异化的竞争力?近日,花椒直播CTO韩三普接受了ENI经济和信息化网的采访,分享了花椒直播快速增长背后技术所提供的强大支持。并结合当下创新趋势,分享了直播在其中可发挥的作用。亮点提炼如何打造平台差异化的竞争力,以核...

    2018-04-26