补一补产品基础知识:App各类导航设计适用场景及优劣势总结

最近在看一些产品文章时,总会看到一些词汇(例如:“tabbar”、“抽屉菜单”、“宫格菜单”),开始也不是很能理解,但是结合上下文还是能猜出一二的。之后去搜了一下相关资料,得知这原来属于App导航设计的范畴,所以就简单总结了一下常见的App导航设计,跟大家共享。

1.Tab导航

又称为“标签式导航”,分上、下两种。

举例:

左:多看阅读 右:网易云阅读

适用场景: (1)上面的tab导航,一般适用于对当前页面的分类查看,或者改变当前视图。可以滑动,所以数量可多可少; (2)下面的tab导航,一般是用来展示App的核心功能,可以迅速切换,适合用于需要频繁切换的功能。受限于屏幕宽度,数量一般控制在5个以内,4个为最佳,(以4个举例)其中第2、3个最好操作。当有更多操作的时候,可以将最后一项设置为“更多”,来将一些次要功能进行隐藏。

优势: 1、让用户快速了解app的核心功能,且切换页面方便,简单高效,用户不易“迷路” 2、所有入口都可以看见,容易寻找

劣势: 1、占据一定屏幕高度,如果是下方tab,浏览时会阻挡内容 2、可展示功能数量少,最多只有5个

2.抽屉式导航

举例:

左:知乎日报 右:36Kr

适用场景: 将并不是太常用或者切换不频繁的功能隐藏在主界面之后

优势: (1)导航界面隐藏在主界面之后,有助于用户集中注意力,营造沉浸式体验 (2)可容纳多个条目,可扩展性强

劣势: (1)用户不容易发现,使用户认知成本增加 (2)用户容易“迷路”

3.宫格导航

举例:

左:美颜相机 右:美图秀秀

适用场景: 适合用于独立、无功能交叉、不频繁切换的部分,多用于二级菜单

优势: 分类清晰、入口独立、风格简约

劣势: 并不会展示实质内容,不适合需要频繁切换的功能

4.列表式导航

举例:

糗事百科

适用场景: 通常位于二级页面,不展示实质内容,作为内容列表的一种图形化方式展现

优势: 结构清晰、简单,能够让用户快速定位想要找到的内容

劣势: 不展示实质内容,需要用户点击后才能知道具体内容,增加了用户的操作成本

5.舵式导航

也称“点聚式”导航,path首创。

举例:

新浪微博

适用场景: 适用于非常重要且用户操作频繁适用的功能点,将这些功能点汇聚,放在底部tab的中间或者右边(根据app的具体功能确定)

优势: 突出的表现入口,能够吸引用户注意力,使得频繁使用的入口容易被用户接触到

劣势: 入口数量有限、可扩展性差

6.轮播导航

举例:

墨迹天气:当添加了多个城市,查看城市天气时,为轮播式导航

适用场景: 常用于查看图片类

优势: (1)操作方便,只需手指左右滑动即可 (2)内容突出展示,增加了曝光率

劣势: 只能查看相邻卡片展示的内容,并不能跳跃性地进行选择

7.组合导航

举例:

QQ

适用场景: 当前很多app都使用了组合式导航。当一种导航方式已经不能满足app的复杂功能时,组合导航就能很好的安排信息的排列方式,以最优的方式来引导用户使用app

优势: 可以根据app的功能需要,进行多种导航方式的组合,来达到最优的信息展现

劣势: app变得厚重,入口数量较多时,用户容易眼花缭乱,给用户造成心理压力

小结: 不同的导航方式都有各自的优缺点,导航方式的选择要依据自己app的信息架构和具体功能而定,最适合用户的才是最好的!

原文发布于微信公众号 - 数据的力量(shujudeliliang)

原文发表时间:2016-07-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

网站开发流程、第一个HTML文件与基本的HTML标签

上周我们讲解了HTML与CSS的学习方法,并且概览了一下HTML与CSS,今天我们就开始进入“课程内容”的第一课。 讲法声明 - 很重要,请先查看 关于HTM...

4595
来自专栏知晓程序

帮你快速抢红包,微信聊天记录竟有这些隐藏操作? | 晓技巧

1233
来自专栏即时通讯技术

从客户端的角度来谈谈移动端IM的消息可靠性和送达机制

IM App 是我做过 App 类型里复杂度最高的一类,里面可供深究探讨的技术难点非常之多。这篇文章和大家聊下从移动端客户端的角度所关注的IM消息可靠性和送达机...

1881
来自专栏无原型不设计

你应该知道的网页设计中的规则和禁忌

网页设计是一个棘手的话题。当你创建网站时你需要考虑很多事情。为了简化这个任务,我这里准备了一个列表,每个网页设计师在设计网页时都应该考虑这些注意事项。好消息...

2504
来自专栏钱曙光的专栏

一周极客热文:依赖 IDE 做开发,会让你成为一名糟糕的程序员么?

上图为:Mac系统文本编辑器Chocolat 事实上,一款优秀的IDE会让你的工作更有效率:优质的框架加快了项目进度,自动编译和IDE重构工具让编码进行得更快,...

20210
来自专栏极客编程

前端开发路线图——从小白到前端工程师

编者按:很多人都想学编程。但是苦于没有具体的步骤和指导。比如想找份前端开发的工作,却不知道应该先学习什么再学习什么,也不知道该选择什么样的工具。因为经常被人问到...

1361
来自专栏数据小魔方

瀑布图

今天要跟大家分享的图表是瀑布图! ▽▼▽ 瀑布图图在诸多图表中算是比较复杂的图表,因而在excel2013及以下版本中并没有办法直接制作,不过最近更新的exce...

2926
来自专栏程序员宝库

现代前端开发路线图:从零开始,一步步成为前端工程师

编者按:很多人都想学编程。但是苦于没有具体的步骤和指导。比如想找份前端开发的工作,却不知道应该先学习什么再学习什么,也不知道该选择什么样的工具。因为经常被人问到...

1466
来自专栏腾讯移动品质中心TMQ的专栏

腾讯TMQ在线沙龙回顾|UI自动化——adbui的使用及实现

1575
来自专栏河湾欢儿的专栏

APP概括

移动端:运行在移动设备上的产品 移动设备:手机 平板 我们做的页面只适用于安卓系统和ios系统,诺基亚是Windows Phone系统不用管

1182

扫码关注云+社区