pk10免费计划app苹果:Android设计规范 Material Design-Components(16 Tabs)

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

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-06-24
  • 钱江潮评 让高质量发展插上人才的翅膀 2019-06-24
  • 湖北浠水十月村经济史料及其研究价值 2019-06-23
  • 高清:鲍哈杜兹自摆乌龙 摩洛哥0 2019-06-23
  • 中国动力电池市场竞争加剧 70家公司仅占三成份额 2019-06-22
  • 发展的机遇 合作的平台(国际论坛) 2019-06-22
  • 美丽中国:环保督察 不达目的不松手 2019-06-21
  • [微笑]这样一来,混资源的被杜绝了,真正有病需要治的也不受影响! 2019-06-21
  • 天津市级机关工委机关党委部署开展br“不忘初心 牢记使命”——纪念建党97周年系列活动 2019-06-20
  • 端午节过后福利多高铁票打折 高温津贴提高! 2019-06-20
  • 国务院关税税则委员会关于对原产于美国500亿美元进口商品加征关税的公告 2019-06-19
  • 学深悟透监察法 提高履职尽责能力 2019-06-18
  • 《虎啸龙吟》黑化司马懿?真实的人性没那么简单 2019-06-17
  • 中国共产党第十九次全国代表大会 2019-06-16
  • 《古汉字发展论》简介 2019-06-15
  • 七星彩走势图带坐标连线图标 江西快三推荐 六合皇 大乐透在那个台开奖直播 吉林快3盘 广东快乐十分复试9选5 11选5技巧大全书籍 四川真钱棋牌游戏 体彩福建31选7 同乐心水论坛 足彩16123期奖金 辽宁35选7大星走势图贴吧 室内网球场高度 广东快乐十分中奖宝典 6+1浙江体育彩票开奖结果