北京pk10网上骗局新闻:Android设计规范 Material Design-Components(16 Tabs)

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

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)

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网pk10技巧 冠亚和稳赚 www.581n8.cn?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.www.581n8.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.www.581n8.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.www.581n8.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

 
你可能喜欢的:
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工具
形式与功能 – 卡片式设计基础概念和运用方法形式与功能 – 卡片式设计基础概念和运用方法
?
  • 端午节湖北接待游客1558万多人次 实现旅游总收入61亿元 2018-11-21
  • 自家车给自家店拉货咋就成“非法营运”了? 2018-11-21
  • (两会受权发布)中华人民共和国副主席简历 2018-11-20
  • 远离闹市喧嚣 亲子携手感受特色小镇的生活美学 2018-11-20
  • 租购并举渐入佳境 构建楼市阶梯型消费 2018-11-19
  • 向德荣寓言:农夫、青蛙与苍蝇(原创首发) 2018-11-19
  • 2018首届“中新广州知识城杯”绘画摄影作文大賽·奥一网 2018-11-18
  • 任何时候,国家安全都是老百姓最"稳"的幸福 2018-11-17
  • 别扯没用的,土地事实上属于地方政府才是关键。粮食更重要,咋不炒粮食? 2018-11-16
  • 中考科目改革催热高价冲刺班 2018-11-16
  • 因滑门存隐患 现代汽车召回2339辆起亚嘉华汽车 2018-11-15
  • 异类非人思维。如一尼安德特人从2万年前发出的声音。 2018-11-15
  • 【专题】王学义教授做客长城网燕赵名医大讲堂 2018-11-14
  • 广州市从化区人民法院公告专栏 2018-11-14
  • 美媒:中国歼10改进型能力强悍,已成美空军强大威胁 2018-11-13
  • 515| 503| 203| 251| 557| 780| 363| 571| 975| 859|