高手帮你学规范!iOS版和安卓的规范解析之底部标签导航

底部tab导航是现在应用里非常常见的一种组件。关于这种最常用到的组件,你了解的全面吗?下面我们来分别看一下Material Design设计规范以及iOS设计规范里是怎么规定的。

往期回顾:

  1. 高手帮你学规范!iOS和Android规范解析之提示框+警告框
  2. 高手帮你学规范!iOS和Android规范解析之简易菜单+弹框
  3. 高手帮你学规范!iOS和Android规范解析之底部浮层
  4. 高手帮你学规范!iOS和Android规范解析之按钮
  5. 高手帮你学规范!IOS和ANDROID规范解析之标签导航和分段控件

Google Material Design Guideline

MD规范,先是给这个控件来了总述:底部导航栏可以使用户通过点击一下,就在顶层视图间的进行方便的切换。

用法

底部导航栏主要是为手机的导航设计的。如果是在较大的显示屏上,比如桌面,则可以使用侧边导航,如下图:

高手帮你学规范!iOS版和安卓的规范解析之底部标签导航

底部导航栏主要用于以下两种情况:

3至5个同等重要的页面间切换(注:在Material Design中,这种情况也可视情况使用抽屉导航,如下图:

高手帮你学规范!iOS版和安卓的规范解析之底部标签导航

△  抽屉导航

需要在应用里方便地对页面进行切换(注:如果是1或者2个页面,则可以使用标签导航)。

高手帮你学规范!iOS版和安卓的规范解析之底部标签导航

△  底部Tab导航和标签导航

高手帮你学规范!iOS版和安卓的规范解析之底部标签导航

△  选项位置是固定的

高手帮你学规范!iOS版和安卓的规范解析之底部标签导航

△  注意选项个数

样式

首先,Material Design中关于底部导航栏中的图标和文字有如下说明:

  • 当某个选项是被选中状态,则展示该选项的图标和文字。
  • 如果只有3个选项,则一直展示所有选项的图标和文字;如果有4或5个选项,则被选中的选项展示图标和文字,未被选中的只展示图标(实际中这一条好像很多应用都没有严格遵守这一条,笔者也觉得没有必要严格遵守)。

其次,关于颜色,MD比较提倡使用简单的颜色,避免复杂,如下图:

高手帮你学规范!iOS版和安卓的规范解析之底部标签导航

高手帮你学规范!iOS版和安卓的规范解析之底部标签导航

最后,关于每个选项的文字,需要注意文字不要折行(就是不要有两行的情况),不要出现标题使用“...”来省略的情况,不要为了节省空间而缩小文字的字号。这几点国内的应用都做的很好啦,没有什么好说的。

行为

当用户选择点击某个选项时,则应该直接展现相应的页面,或者刷新当前的页面;注意不要在点击后展示菜单或者弹出框(pop-up)。另外,如果点击系统返回键,不会切换到底部导航栏上一次点击的页面。

另外,有以下三点需要注意:

高手帮你学规范!iOS版和安卓的规范解析之底部标签导航

△  点击当前选项的图标,则页面返回顶部

高手帮你学规范!iOS版和安卓的规范解析之底部标签导航

△ 点击底部导航栏中的选项后,应该返回该页面顶部并刷新该选项的页面(这一点笔者认为也不是必要,需要根据应用自身的场景来判断)

下面这个是错误的案例,需要注意不要这样做:

高手帮你学规范!iOS版和安卓的规范解析之底部标签导航

△  【错误案例】当点击不同选项时,避免时页面发生横向切换

MD中,对各个组件都规定了它们在垂直方向上的高度。可以看到,底部导航栏的垂直高度还是比较高的,规范中提到,底部导航栏仅仅比底部浮层、抽屉栏以及键盘低一些,如下图:

高手帮你学规范!iOS版和安卓的规范解析之底部标签导航

△  MD中各控件垂直高度示意

iOS Human Interface Guidelines

相对而言,苹果的规范要简单的多,大部分都是我们平时用到的状态,也比较少用错。大家只需要注意以下几点就可以了:

  • 如果底部导航栏中的某个选项暂时不可用,不要把该选项置灰。在不可用而又点击了的情况下,页面只要展示这个页面为什么没有内容就可以了。
  • 避免使用过多的选项。当然,如果选项过少也会有问题。一般在iPhone上,3到5个选项比较合适。在iPad上可以适量增加。
  • 可以使用肩标来提示信息数量,如下图:

高手帮你学规范!iOS版和安卓的规范解析之底部标签导航

△  肩标示意

需要注意的一点是,底部导航栏和之前介绍过的工具栏,是不能同时出现的。

高手帮你学规范!iOS版和安卓的规范解析之底部标签导航

△  工具栏示意

以上介绍了MD和iOS设计规范中,对底部导航栏的定义。

最近把这个系列的专题都做成了音频+幻灯片形式的分享,同时整理了交互方面对实战很有帮助的一些知识点,在千聊上跟大家分享,希望可以帮助大家提高交互技能。分享是一个系列,总共包含6次主题分享:

  1. 场景思维的运用
  2. 心理模型和流程设计(一)
  3. 流程设计(二)
  4. 流程设计(三)
  5. 正确使用iOS和Material Design控件
  6. 方案测试和验证

千聊分享的形式,是PPT + 语音,通过PPT展示重点内容,结合语音讲解,效果较好,感兴趣的朋友可以通过链接报名(价格是66元,包含6次分享):https://m.qlchat.com/live/channel/channelPage/850000134259058.htm

作者系列文章:

  1. 高手帮你学规范!iOS和Android规范解析之提示框+警告框
  2. 高手帮你学规范!iOS和Android规范解析之简易菜单+弹框
  3. 高手帮你学规范!iOS和Android规范解析之底部浮层
  4. 高手帮你学规范!iOS和Android规范解析之按钮

欢迎关注作者微信公众号:新设计青年

高手帮你学规范!iOS版和安卓的规范解析之底部标签导航

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

收藏 34
点赞 1

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。