掌握了这个导航控件，你可以设计80%的应用导航

底部导航栏可以说是现在最流行的导航控件了，微信、支付宝、淘宝、网易云音乐……各种类型的应用都有应用。

如何使用这种极普遍的导航控件？之前的文章有介绍过相关规范。下面摘录其中有关这种控件的交互行为的定义：

Material Design 规范

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

另外，有以下三点需要注意：

  • 1、点击当前选项的图标，则页面返回顶部。即如果当前在第一个tab，则点击第一个tab，则页面回到顶部。
  • 2、点击底部导航栏中的选项后，应该返回该页面顶部并刷新该选项的页面（这一点笔者认为也不是必要，需要根据应用自身的场景来判断）。
  • 3、当点击底部导航栏中的不同选项时，避免页面发生横向切换。

苹果iOS设计规范

苹果的设计规范，主要讲了以下3点：

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

以上是底部tab导航栏的基本交互特性。底部tab导航，一般用于组织起应用的最顶层内容，其中的每个tab承载了应用的一个维度的功能。例如微信，每个tab都承载了一个维度的功能

赞 (0)

相关推荐

  • 设计规范 | 详解组件控件结构体系－导航类

    @Echo 本文作者将详细阐述组件控件结构体系中的导航系统,分别为7类:底部标签式导航.分段控制式导航.列表式导航.下拉菜单式导航.抽屉式导航.宫格式导航和卡片式导航.enjoy~ 什么是控件?什么组 ...

  • 常用日期时间控件（excel日期控件怎么设置）

    常用日期时间控件（excel日期控件怎么设置）

    在Excel 2013的开发工具中如果未能找到微软的日期控件Microsoft Date And Time Picker Control,这就需要手工进行相关的注册.下面介绍下相关的注册该控件的方法. ...

  • qt怎么使用ui中的控件

    生活中有这许许多多的烦恼,下面就由小编教你qt怎么使用ui中的控件,希望你的生活多姿多彩~ 操作方法 01 QT中自己定义的函数,不能直接调用MainWindow类和UI类中的成员. 02 并且在类外 ...

  • 怎么创建Bartender数据输入控件

    通过模板创建数据输入控件 1. 在模板上,插入新条形码.文本或图片对象,此对象的值由用户在打印时决定.(注:对于图片对象,用户需要输入图像文件的路径和文件名.) 2. 双击对象,以打开"对象 ...

  • Access怎么设置控件? Access窗体控件的设计方法

    今天我们就来详细介绍一下Access设置控件的教程,请看下文详细介绍. 1.双击打开已经创建完成的数据库. 2.在对象导航窗格中右键单击“rEmp”报表,选择右键菜单“设计视图”,进入报表的设计视图. ...

  • Access如何创建窗体和添加控件

    Access如何创建窗体和添加控件

    Access是由微软发布的关系数据库管理系统,有些新用户不知道该软件如何创建窗体和添加控件,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步先打开电脑中的Access软件,接着根据 ...

  • 软件设计中那些最基础的控件元素！

    控件作为组织界面最基础的元素,相信大家都不会陌生,今天想谈谈这个不起眼的话题.文章从现实的控件过渡到软件界面,再用三大输入法的控件作为实际案例解说,全文干货满满,来收! 一.现实世界的控件 " ...

  • 设计规范 | 详解组件控件结构体系－单元控件类

    @Echo  本篇文章是设计规范中的单元控件类,也是设计规范系列的最后一篇,继这个系列之后我会写一些超有意思的文章,敬请期待哦! 单元控件类一共含以下7类: 搜索 开关 页面控制 图标 滑块 进度 选 ...

  • 设计规范 | 详解组件控件结构体系－加载类

    本文作者将加载划分为6种类型,分别适用于不同的场景,各有优缺点.设计师在设计时,可以根据用户的使用场景和环境设计适合的加载. @Echo 设计师在进行APP设计时,往往会更加专注于界面的布局.界面和界 ...