Material Design —Tabs

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚

Tabs

Material Design链接:Tabs

Tabs

Tabs可以轻松浏览和切换不同的视图。

选项卡使内容组织处于较高级别,例如在app的视图、数据组或功能之间切换。

将Tabs以单行的形式显示在其关联的内容上方。 Tab的标签应该简洁地描述其中的内容。

由于滑动手势用于在Tabs之间导航,请勿将Tabs与同样支持滑动手势的内容配对。

类型

固定

滚动

Tab标签

标签标签可能包含icons和文字。

颜色

将app的强调色或对比色用于文本字段和文本字段光标。


用法

Tab提供了显示分组内容的功能可见性。 Tab的标签简洁地描述了tab的相关分组的内容。

移动端

左:默认app bar和固定的tab bar    中:延长的app bar和固定的tab bar    右:固定的tab bar固定到滚动内容顶部
左:放入搜索,app bar和固定的tab bar    中:默认的app bar和可滚动的tab bar    右:文字颜色与tab指示器颜色相同
左:默认app bar和带icon的tab bar    右:icon的颜色与tab指示器颜色相同

pc端

默认的app bar与tab bar
带有一个下拉菜单的tab bar


点击菜单中“book”后的tab bar
带有滚动标页码的tab bar
选中tab bar时

何时使用

例如,使用选项卡组织高级别的内容,以呈现报纸的不同部分。 请勿将标签用于轮播或分页内容。 这些使用案例涉及查看内容,而不是在内容组之间进行导航。

有关使用制表符导航顶层视图的更多详细信息,请参阅导航 - 模式中的“制表符”。

请勿使用包含支持滑动手势的内容的选项卡,因为滑动手势用于在选项卡之间进行导航。 例如,避免在内容可平移的地图中使用选项卡,或者避免在滑动内容的情况下使用可以取消项目的列表。

固定标签应该使用有限数量的标签,并且一致的放置将有助于肌肉记忆。 当有许多或可变数量的选项卡时,应使用可滚动的选项卡。

左:tabs用于在包含了重要程度相似的内容中进行切换    右:重要程度参差不齐

Tab特征

Tabs控制在一个始终如一的位置显示内容。

格式规范:

·将tabs显示为单行。 如果需要,将tab标签换行,然后省略。

·不要在tabs中套用tabs

·突出显示与可见内容对应的tab

·将tabs分级组合在一起。 内容相似的tabs链接为一组

·保持标签与其内容相邻以保持两者之间的关系

tabs是以行展示而不是列
tabs不能套用

内容

在tabs中显示的内容可能差异很大,甚至在tabs之间。 例如,显示艺术家不同年份作品集的tabs与包含不同类型设置的tabs。

一组tabs中的所有内容应该根据一个较大的组织原则下(例如,设置或指导)进行关联,每个tab的内容与其他tab的内容互斥。

Tabs标签应提供有意义的差别,才能让用户从逻辑上讲其与其中内容关联起来。

Tabs标签可能包含icons和文字。 选择文字标签时,请使用简短的标题。

避免对内容进行交叉标签比较的需要。 重要的跨标签比较可能表明内容将从不同的组织方式或展示方式中获益,从而使内容更接近。

标签的展示方式

Tabs类型

根据平台和使用环境,tab的可以分为固定tabs或可滚动tabs。

固定tabs

固定tabs可同时显示所有tabs,最适合用于需要固定位置tabs之间快速切换的内容,例如切换Google地图中指示运输路径的方向。

固定tabs具有相同的宽度,计算方式为视图宽度除以标签数量,或基于最宽的tab标签。 要在固定选项卡之间导航,可点击tab或向左或向右滑动内容区域。

可滚动tabs

可滚动选项卡在任何特定时刻显示选项卡的子集。 它们可以包含更长的选项卡标签和比固定选项卡更多的选项卡。 当用户不需要直接比较选项卡标签时,可滚动选项卡最适合用于浏览触摸界面中的上下文。

要在可滚动选项卡之间导航,请触摸选项卡或向左或向右滑动内容区域。 要在不导航的情况下滚动选项卡,请向左或向右滑动选项卡。

移动端可滚动tabs
pc端可滚动tabs
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,794评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,050评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,587评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,861评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,901评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,898评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,832评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,617评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,077评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,349评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,483评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,199评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,824评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,442评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,632评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,474评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,393评论 2 352

推荐阅读更多精彩内容