【Material Design视觉设计语言】UI组件设计(十四):Tabs
2015-08-28 16:32
901 查看
作者:郭孝星
微博:郭孝星的新浪微博
邮箱:allenwells@163.com
博客:http://blog.csdn.net/allenwells
Github:https://github.com/AllenWells
【Material Design视觉设计语言】Material Design设计概述
【Material Design视觉设计语言】应用布局设计
【Material Design视觉设计语言】应用自适应布局
【Material Design视觉设计语言】应用样式设计
【Material Design视觉设计语言】应用动画设计
【Material Design视觉设计语言】UI组件设计(一):按钮
【Material Design视觉设计语言】UI组件设计(二):卡片
【Material Design视觉设计语言】UI组件设计(三):纸片
【Material Design视觉设计语言】UI组件设计(四):表格
【Material Design视觉设计语言】UI组件设计(五):提示框
【Material Design视觉设计语言】UI组件设计(六):分隔线
【Material Design视觉设计语言】UI组件设计(七):网格
【Material Design视觉设计语言】UI组件设计(八):列表
【Material Design视觉设计语言】UI组件设计(九):菜单
【Material Design视觉设计语言】UI组件设计(十):选择器
【Material Design视觉设计语言】UI组件设计(十一):进度条
【Material Design视觉设计语言】UI组件设计(十二):滑块
【Material Design视觉设计语言】UI组件设计(十三):Toast
【Material Design视觉设计语言】UI组件设计(十四):Tabs
【Material Design视觉设计语言】UI组件设计(十五):文本框
Tabs是在在不同的视图和功能间探索和切换的一种组件。
Tabs 不应该被嵌套。也就是说,一个 tab 里的内容不应包含另一组 tabs。
一组 tabs 至少包含 2 个 tab 并且不多于 6 个 tab。
Tabs 控制的显示内容的定位要一致。
Tab 中当前可见内容要高亮显示。
Tabs 应该归类并且每组 tabs 中内容顺序相连。
保持 tabs 和他们的内容相邻,可以明确两者间的关系,距离太远会让人误解。
视图的宽度限制了 tabs 的最大数量。在固定的 tabs 中每个 tab 宽度相等,都是最宽的 tab 标签的宽度。可以通过点击 tab 或者是在内容区域中左右滑动来在固定的 tabs 间进行导航。
Tab 宽度:屏幕的 1/3
激活的Tab的指示器高度:2 dp
文本:14 sp Roboto Medium
文本在 tab 中居中
激活的文字颜色:#fff 或颜色选择中的次要颜色(详情可见Color)
不可用的文字颜色:#fff 60%
可以通过点击 tab 、在 tab 上左右滑动或者在内容区域中左右滑动来在滚动的 tabs 间进行导航。
Tab 宽度:12 dp + 文本宽度 + 12 dp
激活的Tab的指示器高度:2 dp
文本:14 sp Roboto Medium
激活的文字颜色:#fff 或颜色选择中的次要颜色(详情可见Color)
不可用的文字颜色:#fff 60%
激活的Tab的指示器高度:2 dp
文本:平板 14 sp 桌面 13 sp Roboto Medium
激活的文字颜色:#fff 或颜色选择中的次要颜色(详情可见Color)
不可用的文字颜色:#fff 60%
微博:郭孝星的新浪微博
邮箱:allenwells@163.com
博客:http://blog.csdn.net/allenwells
Github:https://github.com/AllenWells
【Material Design视觉设计语言】章节列表
【Material Design视觉设计语言】开篇【Material Design视觉设计语言】Material Design设计概述
【Material Design视觉设计语言】应用布局设计
【Material Design视觉设计语言】应用自适应布局
【Material Design视觉设计语言】应用样式设计
【Material Design视觉设计语言】应用动画设计
【Material Design视觉设计语言】UI组件设计(一):按钮
【Material Design视觉设计语言】UI组件设计(二):卡片
【Material Design视觉设计语言】UI组件设计(三):纸片
【Material Design视觉设计语言】UI组件设计(四):表格
【Material Design视觉设计语言】UI组件设计(五):提示框
【Material Design视觉设计语言】UI组件设计(六):分隔线
【Material Design视觉设计语言】UI组件设计(七):网格
【Material Design视觉设计语言】UI组件设计(八):列表
【Material Design视觉设计语言】UI组件设计(九):菜单
【Material Design视觉设计语言】UI组件设计(十):选择器
【Material Design视觉设计语言】UI组件设计(十一):进度条
【Material Design视觉设计语言】UI组件设计(十二):滑块
【Material Design视觉设计语言】UI组件设计(十三):Toast
【Material Design视觉设计语言】UI组件设计(十四):Tabs
【Material Design视觉设计语言】UI组件设计(十五):文本框
Tabs是在在不同的视图和功能间探索和切换的一种组件。
一 Tabs设计原则
Tabs 应该显示在一行内。Tabs 不应该被嵌套。也就是说,一个 tab 里的内容不应包含另一组 tabs。
一组 tabs 至少包含 2 个 tab 并且不多于 6 个 tab。
Tabs 控制的显示内容的定位要一致。
Tab 中当前可见内容要高亮显示。
Tabs 应该归类并且每组 tabs 中内容顺序相连。
保持 tabs 和他们的内容相邻,可以明确两者间的关系,距离太远会让人误解。
二 Tabs设计规格
2.1 固定Tabs
固定的 tabs 同时显示所有 tabs,最适合用于快速相互切换的 tabs (例如,在地图中切换线路的交通方式)。视图的宽度限制了 tabs 的最大数量。在固定的 tabs 中每个 tab 宽度相等,都是最宽的 tab 标签的宽度。可以通过点击 tab 或者是在内容区域中左右滑动来在固定的 tabs 间进行导航。
Tab 宽度:屏幕的 1/3
激活的Tab的指示器高度:2 dp
文本:14 sp Roboto Medium
文本在 tab 中居中
激活的文字颜色:#fff 或颜色选择中的次要颜色(详情可见Color)
不可用的文字颜色:#fff 60%
2.2 可滚动Tabs
滚动的 tabs 用于显示 tabs 的子集,可以在任何时候使用,并且可以包含更长的 tab 标签和更多的 tabs 数量,最适合用于触摸操作的浏览环境并且用户不需要直接比较 tab 标签。可以通过点击 tab 、在 tab 上左右滑动或者在内容区域中左右滑动来在滚动的 tabs 间进行导航。
Tab 宽度:12 dp + 文本宽度 + 12 dp
激活的Tab的指示器高度:2 dp
文本:14 sp Roboto Medium
激活的文字颜色:#fff 或颜色选择中的次要颜色(详情可见Color)
不可用的文字颜色:#fff 60%
2.3 桌面/平板Tabs
Tab 宽度:24 dp + 文本宽度 + 24 dp激活的Tab的指示器高度:2 dp
文本:平板 14 sp 桌面 13 sp Roboto Medium
激活的文字颜色:#fff 或颜色选择中的次要颜色(详情可见Color)
不可用的文字颜色:#fff 60%
相关文章推荐
- iOS开发之View属性hidden, opaque, alpha的区别
- 【Material Design视觉设计语言】UI组件设计(十三):Toast
- windowsAPI之OpenProcessToken,AdjustTokenPrivileges 和LookupPrivilegeValue
- Android TouchEvent之requestDisallowInterceptTouchEvent
- SeaJS与RequireJS最大的区别
- iOS8里设置tableview的setSeparatorInset:UIEdgeInsetsZero不起作用
- [Bluetooth Core V4.2 ] VOL2, PartB, 3 Physical Links
- leetcode Repeated DNA Sequences
- 8.9 Controlling the Query Optimizer
- 【Material Design视觉设计语言】UI组件设计(十二):滑块
- [UI]抽屉菜单DrawerLayout分析(三)
- [UI]抽屉菜单DrawerLayout分析(二)
- [UI]抽屉菜单DrawerLayout分析(一)
- 【Material Design视觉设计语言】UI组件设计(十一):选择器
- li value 为负值时,IE 的兼容性问题
- iOS更改UISearchBar里面的UITextField的frame以及去除UISearchBar的背景
- UE4 Metal Rendering API
- UE4 Setting Device Profiles
- 【Material Design视觉设计语言】UI组件设计(十一):进度条
- [iOS]iOS7+ UITabBar修改选中图片显示为默认蓝色的问题解决方法,去除UITabbar顶部一像素横线