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

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

2017/09/05 7402评论区

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

往期回顾:

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

Google Material Design Guideline

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

用法

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

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

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

△  抽屉导航

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

△  底部Tab导航和标签导航

△  选项位置是固定的

△  注意选项个数

样式

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

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

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

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

行为

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

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

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

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

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

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

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

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

iOS Human Interface Guidelines

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

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

△  肩标示意

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

△  工具栏示意

以上介绍了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规范解析之按钮

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

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

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

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

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

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/ios-android-tab

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 设计师干货 排版布局 职场 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 海报设计 用户体验设计 设计规范 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里