在我们的产品中,导航起到了举足轻重的作用。导航相信大家都不陌生,它可以让我们知道“我现在在哪里”“我可以去哪里”“我怎么去目的地”。在手机端里面,导航尤为重要。因为手机的尺寸问题,在设计手机网站或APP的时候,比起web端的需要考虑的更周全,尽量保持简约和易用性高。

选项卡式(tab)导航可以说是最常见的导航了,尤其是APP。大部分的APP都采用这种导航模式作为主导航,有时也会将tab导航和其他的导航模式配合,作为次级导航使用。下面我们就一起来看看选项卡式(tab)导航具体是怎样的。

(1)底部选项卡导航

底部导航是最常见的主导航模式,且这是符合拇指热区操作的一种导航模式。当在这个APP中有几个模块信息对用户来说是功能性和使用频率相似,并且支持使用者第一时间获取重要性最高、频率最大的信息或任务,同时用户可以在不同模块、信息或者任务之间进行快速的切换。

在使用这种导航时要注意,由于尺寸的限制,tab的数量最多不要超过5个。如果超过5个的话,而且实在不能做出取舍的话,一般的做法是最后一个标签是“更多”,将其他的tab放在“更多”中。

(2)顶部选项卡导航

 顶部菜单和底部意义差不多,把菜单放在顶部,可以遵循上至下的阅读习惯。但是顶部导航比较难进行单手操作,毕竟我们的手指没有那么长。

(3)固定选项卡

 固定选项卡,顾名思义,选项卡的位置和数量是固定的,这个大家可以看一下上面的例子,例如网易云音乐。它的tab数量是4个,每个tab的位置都会固定的。

固定选项卡是安卓系统提供的三种顶级导航方式之一。它能够扁平化整个信息结构,并且支持左右滑动切换到不同的视图。如果需要经常切换视图,内容视图有限或者需要让用户清楚地知道可供选择的视图,这几种情况下可以使用固定选项卡。

(4)滚动选项卡

 一般滚动选项卡要比固定选项卡要, 一个模块中可以显示多个(超过5个)类别的视图,并且还可以进行扩展以及自定义展示(多用在频道/模块定制中),同样可以左右滑动切换不同类别的视图。

滚动选项卡比固定选项卡使用上更灵活。它可以显示更多的选项,可以更多重要性和使用频率处于同一级别的功能模块、信息或者任务。同时用户可以通过左右滑动切换,展示更多的选项,这也是它为什么叫滚动选项卡的原因。

 

我们对选项卡式(tab)导航做了一个简单的分类。我们在实际使用中经常是不同的导航配合使用,比如一直播(上方的图片),就将底部选项卡式导航和滚动选项卡式导航结合使用。知道了每种类型的使用场景之后,就可以根据自己的需要使用其中的一种或者几种,同时也可以与除选项卡式导航的其它导航共同使用。一切为了自己的产品!

(加微信:pexuepexue,小编邀请您进入全国产品经理交流群)

群内每日分享学习资料、重磅报告、面试问题、招聘信息、免费课程

更多精品文章查看:http://axure.pexue.com/PeiXue/Default.aspx

APP设计中的选项卡式(tab)导航相关推荐

  1. 移动UI设计中的7种主要导航模式

    2019独角兽企业重金招聘Python工程师标准>>> 正如精良的设计一样,优秀的导航也大象无形.不管是浏览好友信息,还是租赁汽车,完美的导航设计能让用户根据直觉使用应用程序,也能让 ...

  2. html手机响应式布局,手机网页设计中的响应式布局

    随着各种特性和智能手机浏览器的发展,网页能够根据设备显示变得很重要.我们不用再根据桌面浏览器窗口尺寸建立网站,然后让它们在更小的移动浏览器上渲染.现在,我们可以让元素大小和布局针对设备作出改变. 在C ...

  3. 【MATLAB-app】如何使用键盘回调以及在app设计中应用

    整理时间:2020-06-28 关键词 键盘回调 . app设计 . MATLAB 目录: 1.抛转 2.引玉 3.深入 正文: 1.抛转 在实际使用中,我们可能会不断的点击鼠标来使用button控件 ...

  4. app css导入字体大小,app设计中的字体行高

    参考文章:https://www.jianshu.com/p/23963b31915d 在ui设计的过程中由于字体行高的导致设计的还原出现问题的地方挺多的. 例如我再sketch中设计两个16px的字 ...

  5. 逻辑设计中需要显式地使用IBUF以及OBUF类似的原语吗?

    前言 平日里写博文都是长文,或者稍长文,但是最近感觉这样既不利于看,也不利于写? 不利于写很好理解,就是大家都有自己的正式事业,上班或者上学,没有整体的时间去写文章,这会导致像我一样,一次断更,甚至达 ...

  6. 如何在iOS 6 时代的App Store中推广

    下载原文:如何在iOS_6_App_Store_脱颖而出 1 winning strategies for iOS 6 App Store Optimization MIX 智游汇2012 10 如何 ...

  7. 格式塔心理学在UI设计中的运用

    "格式塔"是德文"Gestalt"一词的音译,意为"完形"."整体".格式塔心理学于1912年诞生于德国.它以反对冯特的 ...

  8. 视觉平衡与物理平衡_设计中的平衡理论为什么这么重要?

    原标题:设计中的平衡理论为什么这么重要? 在平面设计中很重要的理论就是关于平衡的应用.无论在logo设计还是网页设计还是海报设计中,一个好的设计一定会兼顾视觉的平衡.今天123标志网就跟大家一起看看平 ...

  9. 视觉平衡与物理平衡_设计中的构图平衡,对称与反对称

    作者(翻译):刘海静 构图平衡主要意味着调整设计中积极元素与消极元素之间的关系,确保设计中的区域不存在偏差.每一种元素都彼此相连,组成一个无缝衔接的整体.而不均衡的构图会引发紧张,当设计中的元素失衡时 ...

最新文章

  1. ios 仿电脑qq登录界面_1、IOS开发--iPad之仿制QQ空间(登录界面搭建+登录逻辑实现)...
  2. Linux 常用命令一览
  3. ZkServer服务启动的逻辑-QuorumPeerMain.runFromConfig
  4. 本题中的变量(不包括变量ID)进行z-score标准化
  5. mysql之group_concat函数
  6. Problem B: C语言习题 学生成绩输入和输出
  7. Must、should、have to、can 和 need to的否定句_56
  8. delphi列举用户
  9. 免费录屏、最快截图、装X必备、看完工作学习效率直接翻倍
  10. aardio - 【库】libxl库,一个dll操作excel
  11. 揭秘 typedef四用途与两陷阱
  12. lower_bound()/upper_bound()函数(C++)
  13. Python学习笔记——selenium无头模式
  14. MyBatis01:第一个程序
  15. CNN网络结构理解:感受野计算方法
  16. [JVM]了断局: [ 目录 ]
  17. 2黄计算机技术,网络消费中的计算机技术黄录飞(原稿)
  18. 敏捷开发中的sprint是什么意思_百度知道
  19. 深入分析移动构造函数及其原理
  20. 数字化浪潮催生新组织关系,看用友云人力服务如何应对?

热门文章

  1. WPF字体颜色字符颜色转Foreground
  2. 供水管网漏损监测,24小时保障城市供水安全
  3. Camtasia2023电脑录屏视频自动生成字幕软件
  4. 店宝宝:9.9致富经
  5. 发送邮件到qq邮箱、126邮箱后丢失样式
  6. edusoho对接腾讯会议直播功能 直播结束自动转存阿里云视频点播
  7. seetaface2人脸识别
  8. 电脑是怎样上网的 (二) 从网线到网络设备
  9. 还在愁个人博客没有图片放?
  10. Linux下配置vim配置python轻量级IDE