【Material Design视觉设计语言】UI组件设计(十四):Tabs
来源:互联网 发布:世界网络银行商城手机 编辑:程序博客网 时间:2024/05/16 01:41
作者:郭孝星
微博:郭孝星的新浪微博
邮箱: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%
- 【Material Design视觉设计语言】UI组件设计(十四):Tabs
- 【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组件设计(十二):滑块
- 【Material Design视觉设计语言】UI组件设计(十三):Toast
- 【Material Design视觉设计语言】UI组件设计(十五):文本框
- 【Material Design视觉设计语言】Material Design设计概述
- 【Material Design视觉设计语言】开篇
- 两次调用encodeURI来解决乱码问题
- MySQL 删除数据失败问题
- 内存映射文件
- 最长回文
- 使用EmguCv播放指定视频
- 【Material Design视觉设计语言】UI组件设计(十四):Tabs
- 语法错误,字符1,代码0 行1361错误
- zzuli OJ 1051: 平方根的和
- java IO流api使用详解
- javascript操作表单
- Android 问题:Attribute "xxx" has already been defined
- ie 10中flash动画只有声音没有画面解决办法
- 斐波那契数列第N项的值---动态规划
- Opencv中使用cvSobel算子一点注意