Google的材料设计规范是每位设计师都需要了解的，作为西半球最牛逼的公司之一，Google聚集了世界上最优秀的设计大虫，为开发者制定了一套具有Google精神的设计规范。
组件的规范使用就是其中很重要的一章，只要你用对了组件，谷歌的活力、阳光、理性就会从屏幕中迸发出来，感染到没有国界、种族、性别、年龄限制的理性的正常人。
如果大家有时间还是建议去拜读原著，不用翻墙。（浏览器中打开）↓
https://material.io/guidelines/
下面是整理关于组件的关键点，以前在印象笔记里藏着，搬出来分享一下。
Bottom navigation
底部导航
推荐用法：
- 3个导航分类显示图标和文本，4-5个的话非活动的不显示文本。
- 向下滚动时可以和状态栏一起隐藏，增加全浸式体验。
- 不要使用横向屏幕滚动在活动与非活动视图之间转换。
- 后退键不可以在导航栏之间切换。
- 它的高度是8DP。
Bottom sheets
底板
分类：
Modal bottom sheets 模态底板：简单对话框的形式，如分享。
Persistent bottom sheets 持久底板：提供应用程序内容，如音乐播放。（移动端100%宽度展示，平板桌面可以插入，不必要全宽显示）
模态底板可现实长菜单名称，图标和菜单相关联，带子文本的菜单等 。
模态底板可用于提供来自 [其它应用程序的内容] 或 [空间深层链接]。
如需提供关闭底板的按钮，应用 [ X ] 而不是 [ ← ]。
Buttons
按钮
分类：
- Flat button 平面按钮
- Raised button 上升按钮
- Floating action button 浮动按钮
- Dropdown buttons 下拉按钮
- Toggle buttons 切换按钮
- Flat button 平面按钮：
减少干扰
焦点：12%的不透明度（文字颜色）
规格：
- Raised buttons
上升按钮
1.紧急、匆忙的情境下使用。
2.突出、强调重要。
3.帮助组织UI，分隔信息。
- Floating action buttons
悬浮按钮
1.默认56DP，圆形。（触摸按键大小应在7---10mm，56dp的物理长度为9mm）
2.跨越屏幕时应短暂消失，如有必要可移动到其他位置，如：和FAB高度一样的Snack bar弹出时。（微信收藏文章时弹出Snack bar）
3.当屏幕宽度为460DP或更小时，更改为微型大小40DP。
4.每个屏幕只推荐1个浮动按钮（需要使用2个时请保证2个按钮的执行不同的操作），执行相关的主要操作（积极）。
5.避免遮住主要内容。
6.推荐3-6个选项。
↑ 浮动按钮不是溢出菜单。选项里也不应包含溢出菜单。（溢出菜单属于工具栏）
↓ 正确使用：（悬浮按钮变形至下图，可以伴随推动其他组件）
- Dropdown buttons
下拉按钮
- Toggle buttons
[右： icon toggles ]
切换按钮
Cards
卡片
2DP高度、2DP圆角、可以有多个动作。
↓ 从左到右：瓷砖（直角）、列表（加了一条线的瓷砖）、卡片（圆角、阴影）
卡片有固定宽度和可变的高度，最高为平台可用高度。
↓ 超过最大高度的信息将会被截断，不可滚动（桌面可以），但可扩展。
补充卡片
设计的时候可以从最基本的开始，需要哪些元素就在基础上补充。
UI控件
↑ 星级选项、选项卡、溢出菜单、滑块、分段按钮等
[ Google强烈反对文本中带有内联链接 ! ]
卡片内容块尺寸参考：
https://material.io/guidelines/components/cards.html#cards-content-blocks
Chips
芯片
高度32DP
芯片可以包含文本，照片、规则、图标、联系人等。
如点击可打开菜单，点击芯片出现邮箱选择。
Date Tables
数据表
[多用于桌面产品]
鼠标悬浮要暗于选中的列表
Dalogs
对话框
- 无标题提醒对话框
- 有标题提醒对话框
- 简单对话框
- 复杂对话框
-
全屏对话框
Dividers
分隔器
Full-bleed divider --- inset dividers
满血切割者 - 插入切割者
不必要的分隔会让用户困惑（如右图用多个满血分割线，或多个插入分割线）
Expansion panels
扩展面板
↑ 扩展面板作为轻量级的容器，可独立存在，也可以连接一个界面。
扩展面板上可执行轻量级的操作，如简单编辑，增加信息，避免繁琐的操作。
↓ 下图使用芯片可以让修改变得轻松，帮助文档协助用户使用。
Grid lists
网格列表
由重复图案的细胞瓷砖垂直水平排列，不能滑动，不建议网格的水平滚动。
网格列表：适合展示相同类型的内容，主要是图像。单个Cell里可以在顶部和底部用暗纱帮助展示提醒信息。
Lists
列表
适合包含多种数据类型的一组数据。
过滤与排序：
按文件类型、文件大小、字母顺序、时间日期或其他参数进行排序。
最具有特色的防止在瓷砖左侧。
大部分区域用于主要动作。小部分区域用于补充动作。
最总要的内容放在第一行。
举个例子，长按前后应该显示为：下图的上下半部分。
错误：长按单个商品后显示下左图。（右图为点击列表右上角3个小黑点时的交互，应该是长按的交互）
（2017.04.01的zara）
Lists : Controls
列表：控件
类型：
Check box 复选框
Switch 开关
Reorder 重新排序
Leave-behinds 保留
Expend/collapse 展开/折叠
检查-内联信息-嵌套菜单指示器 ↓
Menus
菜单
子菜单每层高度+1DP.
↓ 如果内容比较多，默认显示滚动条。
下拉菜单点击后，当前选择项应处于默认覆盖位置，并突出显示。
规格：
Picker
选择器
日期选择器
时间选择器（感觉瀑布流的更好用）
Progress&activity
加载
分类：
linear 线性
cirular 圆形
circular with intergration 圆形一体化
↓ 加载其他内容
Selection controls
选择控件
Check box 复选框
Radio button 单选按钮
Switch 开关
Sliders
滑块
滑块是凉的。做得好，用户喜欢与它们互动。做得不好，会产生挫败。
Continuous slider 连续滑块
Discrete slider 离散滑块
Continuous slider 连续滑块：只需要模糊值或相对值。
如果需要输入特定值也可以 ↑
Discrete slider 离散滑块：需要特定值得目标设置。
Toasts
推荐显示1.5秒。（视觉暂留达到峰值的最短时间）
Steppers
步骤提醒器
Editable steps
Mobile steps
可选步骤（标记可选）
vertical steppers 垂直步骤
horizontal steppers（stepper feedback ） 水平步骤（步骤反馈）
stepper feedback 步骤反馈:切换步骤时及时给予反馈（右 ↑）
Subheaders
子标题
子标题可以与瓷砖一起显示或与内容相关。他们通常与过滤或排序标准相关。
Tabs
标签
基础款---文字图标款---图标款(不推荐混合) ↓
扩展应用栏--插入搜索--可滚动 ↓
标签内容最好单行，如果需要被截断之前应被包裹到第二行 ↓
Text fields
文本字段
未输入提醒（必填+星号暗示）
焦点提醒
非重要信息提醒（文本、备注输入） ↑
重要信息提醒 （资料填写）↓
计数器文本输入提醒
错误提醒：
(无输入信息错误提醒,输入信息错误提醒)
输入（搜索）补全：(在输入框补全,下拉列表中补全)
Toolbars
工具栏
被统治的内容在工具栏下方滚动。
工具栏的操作不能被另一张材料分隔，除了对话框之类的临时操作。相反工具栏可以限制他们的宽度。
Tooltips
工具提醒
通过鼠标悬停，点击并按住一个项目触发工具提醒，（移动端按住触发）只要用户没有离开元素，保持显示。
显示时间为1.5秒，如果在此之前采取另一个操作，则提醒立刻消失。
Types of widgets
窗口小部件
窗口小部件是非常精致而方便的功能，例如印象笔记、日历、chrome等。
它们显示对用户重要的几个要素，提供快速的信息获取功能使用。
可以触发而不打开应用：
调整大小和位置
Google从一个个组件和一颗颗像素之中展现出对生命的尊重与热爱，给我们带来惊喜。同时也在指导我们如何用google精神设计生活、交互世界。
公众号：白无马
欢迎相互交流学习
网友评论