北京pk10六码公式教程:Android设计规范 Material Design-Components(16 Tabs)

学UI网-虎哥 APP设计 10086浏览

pk10技巧 冠亚和稳赚 www.581n8.cn 9月20日,啦啦啦~~啦啦啦~我是卖报的小行家,大风大雨的满街跑,走不好,摔一跤,今天的内容真正好~~大家快来看看有多好~~我还在辛勤的劳作~~你们今天是不是都在休息呢~~

Tabs

在一个 app 中,tabs 使在不同的视图和功能间探索和切换以及浏览不同类别的数据集合起来变得简单。

用法

tab 用来显示有关联的分组内容。tab标签用来简要的描述内容。

移动设备的 tabs

components-tabs-usage-tabs-spec-02_large_mdpi
扩展的 app bar + tab bar

components-tabs-usage-tabs-spec-03_large_mdpi
加入检索 + app bar + tab bar

components-tabs-usage-tabs-spec-06_large_mdpi
默认的 app bar + tab bar

components-tabs-usage-tabs-spec-08_large_mdpi
默认的 app bar + 可滚动的 tab bar

components-tabs-usage-tabs-spec-07_large_mdpi
和 tab 指示器一样的字体颜色

components-tabs-usage-tabs-spec-17_large_mdpi
被锁定滚动的 tab bar

桌面环境的 tabs

components-tabs-usage-tabs-spec-09_large_mdpi
默认的 app bar + tab bar

components-tabs-usage-tabs-spec-15_large_mdpi
附加“更多”溢出下拉菜单

components-tabs-usage-tabs-spec-09_large_mdpi
Tab 溢出标识码,第一步

components-tabs-usage-tabs-spec-13_large_mdpi1

components-tabs-usage-tabs-spec-16_large_mdpi
展开的菜单

components-tabs-usage-tabs-spec-14_large_mdpi
居中的 tab bar

何时使用

使用 tabs 将大量关联的数据或者选项划分成更易理解的分组,可以在不需要切换出当先上下文的情况下,有效的进行内容导航和内容组织。

仅管 tab 的内容让人自然的联想到导航(例如:道路选项可以切换地图的视图,搜索结果引导到其他网站),但 tabs 本身并不是用来导航的。

Tabs 也不是用于内容切换或是内容分页的(例如:应用中页面之间的切换)。

components-tabs-usage-tabs_do_10_large_mdpi

components-tabs-usage-tabs_dont_10_large_mdpi
不要

Tab 特性

Tabs 应该显示在一行内。

Tabs 不应该被嵌套。也就是说,一个 tab 里的内容不应包含另一组 tabs。

一组 tabs 至少包含 2 个 tab 并且不多于 6 个 tab。

Tabs 控制的显示内容的定位要一致。

Tab 中当前可见内容要高亮显示。

Tabs 应该归类并且每组 tabs 中内容顺序相连。

保持 tabs 和他们的内容相邻,可以明确两者间的关系,距离太远会让人误解。

components-tabs-usage-tabs_do_06_large_mdpi

components-tabs-usage-tabs_dont_06_large_mdpi
不要

components-tabs-usage-tabs_do_08_large_mdpi

components-tabs-usage-tabs_dont_08_large_mdpi
不要

内容

Tab 的内容

即使是两个 tabs 之间,tab 中呈现的内容可以有很大的差别。比如,不同年份的 tab 组合或者是不同类型的设置。

一组 tabs 中的所有内容应该互相关联并且在同一个主题下(例如:设置、指南),但是每个 tab 又是相互独立的。

Tab 标签应该逻辑的组织相关内容,并提供有意义的区分。

Tab 标签可能是图标或者文字并且不能省略。

避免进行跨 tab 的内容比较。如果一个跨 tab 的内容比较是有必要的,那么也许应该换一种内容的组织和呈现方式。

components-tabs-content-tabs_15_large_mdpi

Tabs 的类型

根据平台和使用环境,tab 的内容可以表现为固定的 tabs 或者是滚动(滑动)的 tabs。

固定的 tabs

固定的 tabs 同时显示所有 tabs,最适合用于快速相互切换的 tabs (例如,在地图中切换线路的交通方式)。

视图的宽度限制了 tabs 的最大数量。在固定的 tabs 中每个 tab 宽度相等,都是最宽的 tab 标签的宽度??梢酝ü慊?tab 或者是在内容区域中左右滑动来在固定的 tabs 间进行导航。

components-tabs-typesoftabs-tabs-spec-06_large_mdpi

滚动的 tabs

滚动的 tabs 用于显示 tabs 的子集,可以在任何时候使用,并且可以包含更长的 tab 标签和更多的 tabs 数量,最适合用于触摸操作的浏览环境并且用户不需要直接比较 tab 标签。

可以通过点击 tab 、在 tab 上左右滑动或者在内容区域中左右滑动来在滚动的 tabs 间进行导航。

components-tabs-usage-tabs-spec-12_large_mdpi1

components-tabs-usage-tabs-spec-13_large_mdpi1

 

规格

固定并且全屏宽度

  • Tab 宽度:屏幕的 1/3
  • 激活的Tab的指示器高度:2 dp
  • 文本:14 sp Roboto Medium
  • 文本在 tab 中居中
  • 激活的文字颜色:#fff 或颜色选择中的次要颜色(详情可见Color
  • 不可用的文字颜色:#fff 60%

components-tabs-typesoftabs-tabs-spec-04_large_mdpi

可滚动的

  • Tab 宽度:12 dp + 文本宽度 + 12 dp
  • 激活的Tab的指示器高度:2 dp
  • 文本:14 sp Roboto Medium
  • 激活的文字颜色:#fff 或颜色选择中的次要颜色(详情可见Color
  • 不可用的文字颜色:#fff 60%

components-tabs-typesoftabs-tabs-spec-05_large_mdpi

桌面/平板

  • Tab 宽度:24 dp + 文本宽度 + 24 dp
  • 激活的Tab的指示器高度:2 dp
  • 文本:平板 14 sp 桌面 13 sp Roboto Medium
  • 激活的文字颜色:#fff 或颜色选择中的次要颜色(详情可见Color
  • 不可用的文字颜色:#fff 60%

components-tabs-typesoftabs-tabs-spec-10_large_mdpi

按下 tab 时的动画

非常感谢这些辛苦翻译的小伙伴??!未完待续~~~

原文:Tabs?翻译:vincent4j?校对:PoppinLp

?文章转自://design.1sters.com/?

========================关于学ui网=========================

?www.581n8.cn 学ui网发布高质量ui设计教程和设计分享经验,希望打造一个最好的ui学习教程平台!

APP截图站:app.www.581n8.cn? 海量APP截图,让你灵感爆发!

 

转载请注明:pk10技巧 冠亚和稳赚 » Android设计规范 Material Design-Components(16 Tabs)

登录收藏
 
你可能喜欢的:
11款美观实用的Material Design UI工具包11款美观实用的Material Design UI工具包
看谷歌设计师如何使用Material看谷歌设计师如何使用Material
不可不看的2018UI设计趋势不可不看的2018UI设计趋势
安卓UI (三) — 设计规范安卓UI (三) — 设计规范
为什么选择XXHDPI做设计呢?为什么选择XXHDPI做设计呢?
UI设计师设计思路的进阶之路UI设计师设计思路的进阶之路
UI最乐观的状态是什么?UI最乐观的状态是什么?
民宿设计分享民宿设计分享
助你快速搭配 Material Design 配色方案的10款Web工具助你快速搭配 Material Design 配色方案的10款Web工具
形式与功能 – 卡片式设计基础概念和运用方法形式与功能 – 卡片式设计基础概念和运用方法
?
  • 第十二届中国(南宁)国际园林博览会吉祥物正式发布 2019-01-16
  • 重庆高校湖中捞起千斤超大号鱼 校方:端午给师生加菜 2019-01-16
  • 【十九大·理论新视野】动漫:文化自信为何关乎伟大复兴 2019-01-15
  • 网友自嘲工资拖后腿 专家:衡量个人收入需更多数据 2019-01-15
  • 养老保险基金中央调剂制度应防“少交多得” 2019-01-14
  • 不只广东有爱情故事,新疆也有,还刷爆抖音! 2019-01-14
  • 县名解析:大同阳高县县名来历 2019-01-13
  • 山阴:痴呆老人迷路 交警热心救助 2019-01-13
  • 龙船礼 有讲究 百岁龙 抖精神 2019-01-12
  • 美国发起贸易战,我们要让世界知道美元、美债并不可靠 2019-01-12
  • 【我是援藏教师】这一次,带上女儿去支教 2019-01-11
  • 居文君夺冠 中国智慧贡献第六位世界棋后 2019-01-10
  • 端午小长假 游人“醉”西湖 2019-01-10
  • 哦。对了,那些成天嚷嚷“亲不亲,阶级亲”的人应该把这些货真价实的“无铲阶级”接回家去。[哈哈] 2019-01-09
  • 湖北菜果茶监测合格率98% 2019-01-09
  • 751| 796| 690| 355| 91| 807| 527| 183| 116| 28|