1688 无线体验设计指南
  • Introduction
  • Color 颜色
  • Font 字体
  • Line 线
  • Button 按钮
  • Dialog 对话框
  • Icon 图标
  • List 列表
  • Loading 进度
  • Menu 菜单
  • Navigation 导航
  • Notice & Feedback 提示和反馈
  • Selector 选择控制器
  • Slider 轮播
  • Tab 选项卡
  • Tags 标签
  • Textfield 文本框
Powered by GitBook
On this page
  • 定义 / Definition
  • 分类 / Type
  • 样式与交互 / Style&Interaction
  • 1. 标签栏 / Tab Bar
  • 2. 底部栏 / APP Tab
  • 使用场景:
  • 使用规则:

Tab 选项卡

PreviousSlider 轮播NextTags 标签

Last updated 7 years ago

定义 / Definition

TAB栏让用户可以在不同子任务、视图、模式之间切换,它具有全局导航的作用,是全局功能的主要展示和切换区域,一个TAB标记一个核心功能,TAB之间可以快速点击切换。

分类 / Type

1、标签栏 Tab Bar

2、底部栏 App Tab

样式与交互 / Style&Interaction

1. 标签栏 / Tab Bar

使用规则:

横滑tab必须吸顶显示,在用户横滑时,可以得到明显的滑动反馈。

横滑tab可在页面中间使用,但下方只有一个控制模块,即下方内容统一由该tab控制,如不能出现其他tab等等。

横滑tab下方不能有其他横向滑动的模块,以免滑动互斥,如下方不能出现左滑删除的控件。

文字类型

ICON类型

扩展类型

在一些共同的情况,如时间或场次tab的滑动,为了达到营销效果,可以作相应的视觉处理,但是要保留滑动横条的视觉元素。

2. 底部栏 / APP Tab

使用场景:

吸底显示,适用于在独立的垂直频道。不同tab间为不同功能模块,关联性较弱。

使用规则:

1、不支持横滑手势切换tab,只能依靠点击来切换内容

2、选项最多不超过5个,设计为固定tab。

ICON类型

文字类型

菜单类型