2017 Material Design完整中文版：第五章节《组件》 第二部分
【站酷首发】10大章79小节重译！半年心血只为让更多人正确认识、学习MD。由于单篇文章字数限制，全文将分为N篇文章陆续发布。
按钮能够传达给用户按下后对应的操作反馈。
Material的按钮被按下触发后会产生墨水扩散的动效。按钮可以显示文本、图像或两者都显示。其中扁平按钮（flat button）和高抬按钮（raised button）是最常见的按钮类型。
除以上两种常见按钮类型外还有：
常驻底部（Persistent footer）按钮属于扁平按钮的一种，一般用于页面底部或对话框中。
下拉按钮（Dropdown button）显示多个选项。
切换按钮（Toggle button）可对相关联的选项进行分组。图标切换允许用户单向选择或取消。
扁平按钮
扁平按钮是只有文本信息的按钮。
常用于对话框、工具栏或内联（inline）中。
被按下后高度（Z轴）不会抬高，但会产生墨水扩散的动效。
高抬按钮
高抬按钮是一个矩形形状的按钮。
可用于内联中。
被按下后按钮会被抬高并产生墨水扩散的动效。
高度（Elevation）
扁平按钮：0dp
抬高按钮：2dp
三种标准的按钮类型：
浮动按钮（Floating Action Button）：圆形形状按钮。被按下后按钮会被抬高并产生墨水扩散的动效。
高抬按钮：很典型的矩形形状按钮。被按下后按钮会被抬高并产生墨水扩散的动效。
扁平按钮：只有文本的按钮。被按下后高度不变，但会产生墨水扩散的动效。
浮动按钮
高抬按钮
扁平按钮
案例：浮动按钮
案例：高抬按钮
案例：扁平按钮
选择按钮类型
从按钮优先级、屏幕容器（containers）的数量和页面布局三方面入手考虑选择什么类型的按钮。
功能：是否重要到需要用到浮动按钮？
维度：容器所处的位置以及屏幕中Z轴方向上层的数量决定选择高抬还是扁平按钮。屏幕中拥有过多层的话容易造成混乱。
布局：每个容器主要使用一种类型的按钮。不推荐混合使用多个类型按钮，除非你有一个好的理由，如强调某个重要功能。
按钮类型
按钮类型应与使用环境相关。
| 环境 | 按钮类型 | |
| 对话框 | 对话框中使用扁平按钮 | |
| 内联 | 根据你的布局选择使用高抬按钮还是扁平按钮来作为内联按钮 | |
| 保持持续可用 | 如果你的应用需要某些操作能够方便用户第一时间可见、获得和使用的话，可以考虑使用浮动按钮或常驻底部按钮 | |
按钮右对齐屏幕
将表达肯定、积极意思的按钮放置在右边，反对意思（如取消）的按钮放置在左边。
按钮左对齐屏幕
将表达积极、正面意思的按钮放置在左边，反对意思的按钮放置在右边。
卡片
为了提高按钮可见，按钮最好放在卡片的左侧位置。然而，因为卡片具有相对灵活的布局，所以按钮应该配合内容和环境放置在合适的地方，以此保持产品视觉方面的一致。
非标准对话框和模态窗口
在非标准对话框和模态窗口下按钮的放置位置取决于它们自身包含内容的复杂程度。
如果对话框中的内容相对简单，建议将按钮放在对话框的右侧。其中表示肯定的按钮放在表示反对意思按钮的右边。
如果拥有过长且复杂的表单内容，建议将按钮放在表单的左侧。其中表示肯定的按钮放在表示反对意思按钮的左边。
排版（Typography）
按钮文字应大写。其他语言（不能用大写形式区分的语言）可通过改变文字颜色来区分与普通文本的区别。
可访问性（Accessibility）
为了确保残疾人能够正常使用应用，按钮高度至少需要达到36dp以及按钮触发区域的高至少达到48dp。
按钮高度：36dp
按钮被触发区域的高度：48dp
圆角半径
按钮需要有2dp的圆角半径。
可行
按钮有2dp的圆角半径。
密度
如果鼠标和键盘是主要的输入方式，那么按钮的尺寸需要适当缩小以确保适应当前密集的界面。
默认按钮
按钮文本：14pt Roboto medium
按钮高度：36dp
按钮文本左、右内边距（padding）：16dp
按钮的圆角半径：2dp
密集界面下的按钮
按钮文本：13pt Roboto medium
按钮高度：32dp
按钮文本左、右内边距（padding）：16dp
按钮的圆角半径：2dp
尺寸和内边距
案例：对话框中的扁平按钮
高：36dp
最小宽度：8dp
按钮触发区域的高度：48dp
圆角半径：2dp
水平方向的外边距（margin）：8dp
水平方向的内边距（padding）：8dp
用法
扁平按钮存在于material的面上，它不是单独的一个面。所以它们被用户触发后不会向高抬按钮一样发生Z轴方向上的高度变化，取而代之的是产生墨水扩散的效果表示反馈。
扁平按钮一般放置在：
工具栏
对话框，按钮操作与对话框内容相统一
内联，为了方便用户发现按钮，需要使用内边距（padding）
对话框中的扁平按钮
避免内容和扁平按钮距离过近导致用户注意力分散
可行
扁平按钮的正确使用案例
不可行
这里使用高抬按钮会过于显眼
尺寸说明
扁平按钮：浅色主题下
最小宽度：88dp
高度：36dp
圆角半径：2dp
按下（Pressed）：40% #999999
禁止状态（Disabled）文本：26% #000000
扁平按钮：暗色主题下
最小宽度：88dp
高度：36dp
圆角半径：2dp
按下（Pressed）：25% #CCCCCC
禁止状态（Disabled）文本：30% #FFFFFF
对话框文本内边距：24dp
对话框按钮容器的高度：52dp
对话框按钮：容器边缘有着8dp的内边距，容器中按钮向右对齐（LTR（从左到右的文字排列格式））
对话框中的扁平按钮
对话框按钮
按钮高度：36dp
按钮的上外边距：24dp
按钮的内边距：8dp
容器中按钮向右对齐（LTR（从左到右的文字排列格式））
按钮宽度：随着按钮文本的长度变化
扁平按钮聚焦（focus）时会产生12%不透明度的背景框。
行为
扁平按钮
用法
高抬按钮在当前页面布局中相异于其他元素，它是凸起的（2dp 高度）。高抬按钮一般用于强调页面中的某个功能。
使用高抬按钮能够很好的区别其与页面中其他内容的关系，并将用户注意力吸引到按钮身上。
高抬按钮能够影响页面中内容的布局，有助于用户理解内容。
可行
高抬按钮比扁平按钮突出、显眼。
不可行
图中页面不适合使用扁平按钮，因为用户很难发现按钮所在。
高抬按钮就像一material面放在另一面上。当高抬按钮被触发后，它的高度会自动抬高并产生墨水扩散效果。
高抬按钮/浅色主题
最小宽度：88dp
高度：36dp
圆角半径：2dp
禁止状态（Disabled）文本：26% #000000
禁止状态（Disabled）按钮：12% #000000
聚焦状态：叠加一层颜色12% #000000
高抬按钮/暗色主题
最小宽度：88dp
高度：36dp
圆角半径：2dp
按下后颜色：700
禁止状态（Disabled）文本：30% #FFFFFF
禁止状态（Disabled）按钮：12% #FFFFFF
聚焦状态：叠加一层颜色12% #000000
按钮高度
高抬按钮默认高度为2dp。
在桌面端，高抬按钮的高度在悬停状态下才是2dp。
暗色/浅色主题
最小宽度：88dp
高：36dp
高度（Elevation）：0dp
禁止状态（Disabled）文本：30% #FFFFFF
禁止状态（Disabled）按钮：12% #FFFFFF
行为
高抬按钮
如果你的应用需要某些操作能够方便用户第一时间可见、获得和使用的话，可以考虑使用浮动按钮或常驻底部按钮。
常驻底部按钮高48dp
案例：常驻底部按钮
常驻底部按钮区域中不能混用高抬按钮。
不可行
常驻底部按钮可用于可滚动的对话框。其中使用分隔线区分按钮和可滚动的内容。
对话框中的常驻底部按钮
可滚动对话框中的常驻底部按钮
移动端上的下拉按钮
下拉按钮
可通过下拉按钮选择多个选项。如下图，默认状态下的按钮只显示当前状态和一个下拉箭头。下拉状态下的按钮会展示该按钮下的字符串列表、颜色或icon。
当用户与按钮发生交互，按钮会被一个菜单覆盖并向用户展示菜单列表选项。然后用户点击某个选项后菜单消失，按钮更新并向用户展示所选选项内容。
下拉列表的滚动方式跟菜单的滚动方式相同。
已关闭的下拉按钮，已打开的下拉按钮，正在选择中的下拉按钮
列表菜单中的下拉按钮
常见的溢出下拉按钮
这种溢出下拉按钮默认状态下只显示下拉箭头icon或者菜单按钮。用户按下按钮后，菜单会显示出来。随后触发某个菜单内选项进行相应跳转。
分段式下拉按钮（Segmented dropdown button）
分段式下拉按钮由两部分组成：当前状态以及下拉箭头icon。点击当前状态会刷新当前页面。点击下拉箭头会展示所有的状态选项。随后触发某个选项将会展示对应的状态。
可编辑的分段式下拉按钮（Editable segmented dropdown button）
跟分段式下拉按钮相比稍有不同，可编辑的分段式下拉按钮的当前状态可供用户编辑，比如可自定义字体大小。点击当前状态会刷新当前页面，并且当前状态变为可编辑。点击下拉箭头会展示所有的状态选项。
用户与以上三种按钮交互的不同阶段
下拉按钮动效
桌面端的下拉按钮
桌面端应用栏的尺寸说明
桌面端的下拉按钮
上、下内边距：16dp
左内边距：24dp
右外边距：16dp
字体样式间的水平距离：24dp
切换按钮可对相关联的选项进行分组。其中通过间隔布局来示意选项的分组。
从聚焦（Focus）和按下（Pressed）状态下可以看出这些选项是否为一组的。比如，当其中一个选项被聚焦，那么其余选项也可能被同时聚焦。
切换按钮需要：
至少由3个切换选项组成
具有文本标签或icon，或者两者皆具备
推荐以下按钮使用状态：
多项选择且允许不选择
单项选择且允许不选择
单项选择且不允许不选择
单项选择
如图，只允许用户选择单一选项。如选择其他选项，另一个将会被取消选择。
允许用户不进行选择
多项选择
如图，允许用户同时选择多个选项。
icon切换
除上述切换按钮的使用情况外，还有另一种使用情况，icon切换。icon切换只允许用户进行选择或者取消操作。比如，添加或取消星标文章。
icon切换一般用于应用栏、工具栏、操作按钮或切换操作。
用户触发icon切换后会产生墨水扩散动效。
icon切换用户交互的不同阶段
icon切换聚焦状态下（focus）反馈的颜色和不透明度跟icon自身的颜色有关。
浮动按钮包含应用中的最主要的操作。
浮动按钮是一种promoted操作。
浮动按钮是“悬浮”在界面之上的一个圆形形状按钮，当聚焦时按钮颜色会发生变化，按下时按钮高度会抬起。用户按下浮动按钮后，按钮会展开并显示更多操作。
用法
每个页面只能出现一个浮动按钮，其中包含了最常用的操作。
行为
默认情况下，浮动按钮使用放大效果的动效。
尺寸
默认：56 x 56dp
Mini：40 x 40dp
浮动按钮
浮动按钮是一种promoted操作。它是“悬浮”在界面之上的一个圆形形状按钮，被触发后的动效包括形变、放射以及基于点的变化。
浮动按钮有两种尺寸大小：
默认尺寸：运用在大多数情况下
Mini尺寸：只是为了与页面中其他视觉元素保持一致
当屏幕宽度小于460dp时，浮动按钮大小应从默认尺寸（56dp）变为Mini尺寸（40dp）。
浮动按钮
Mini浮动按钮
移动端上浮动按钮应至少距离屏幕边缘16dp；平板/桌面端上则至少24dp。
浮动按钮
内部icon：24 x 24dp
浮动按钮圆形大小：56 x 56dp
Mini浮动按钮
内部icon：24 x 24dp
浮动按钮圆形大小：40 x 40dp
当浮动按钮聚焦时颜色会发生变化，按下时按钮高度会抬高。
获得聚焦的浮动按钮
已被触发的浮动按钮
不是每个页面都需要用到浮动按钮。浮动按钮包含的是应用中最主要的操作。
可行
图库中最重要的操作是选择图片，所以这里不需要用到浮动按钮。
可行
该案例中最重要的操作是添加文件，所以可以用到浮动按钮。
每个页面只能出现一个浮动按钮，其中包含了该页面中最常用的操作。
不可行
不可行
按钮的特质
给予浮动按钮积极的用户操作，如创建、喜欢、分享、导航和探索等等操作。
可行
一些次要的或消极的操作不要出现在浮动按钮中，比如：
存档或删除
不明确的操作
警告或报错
受限制的任务，如剪切文本
应该出现在工具栏上的控件，如音量控制或改变字体颜色
应用栏（app bar）icon或状态栏通知不应该包含在浮动按钮中。浮动按钮上也不能放置其他icon元素。
不可行
在不同的应用中，浮动按钮的外形始终使用圆形形状。这样做的好处在于能够强化用户脑海中浮动按钮即是主要操作的概念。
可行
不可行
不要更改或增加浮动按钮的维度。
可行
不可行
浮动按钮默认使用放大效果的动效。
因为浮动按钮相对于其他UI元素重要，所以它的动效跟其他UI元素不一样。
浮动按钮动效案例
页面横向移动
当页面横向移动时（如标签页），如果浮动按钮包含的操作发生变化，那么它会在页面移动的时候短暂消失，之后再次出现。
当页面横向移动时，如果浮动按钮包含的操作没有发生变化，那么它会在页面移动的时候继续保持在屏幕上（如有需要，它同时会转变到新的位置）。
列表
浮动按钮与列表之间需要预留足够的空间，这样列表通过按钮的时候才不会产生冲突。
可行
可行
标签页
在标签页中，浮动按钮不要跟随页面移动而离开屏幕。这样做可以避免：
浮动按钮不像是一个可操作的按钮
浮动按钮与页面中内容高度（Z轴）相同
不可行
不可行
- 过渡动效
过渡动效
浮动按钮是应用重要的操作中比较特殊的一个。我们需要利用它的高可见性为其自身好好设计一套能够愉悦用户的动效。
常见的动效包括触发、工具栏、快速转盘和变形。当然，远不止这些，你可以根据你的应用设计出合适的过渡动效以及在页面合适的地方放置按钮。
浮动按钮被用户按下后会产生扩散动效。
地图应用视图中，点击浮动按钮可以回到当前位置。
一般我们在应用中只使用一个浮动按钮，但在上面这个地图应用案例中却使用了两个。原因是这两个按钮执行同样重要但又是两个不同的操作。
工具栏
浮动按钮被按下后或在滚屏中能够过渡转变成一个工具栏。其中工具栏包括相关的操作、文本、搜索字段等等。
案例：浮动按钮过渡变成工具栏
案例：浮动按钮过渡变成工具栏
对于像初始入口或长列表这种有工具栏需求的地方，工具栏能够随屏幕滑动而消失对整个页面非常有帮助。这样做能够帮助页面节省空间，以致用户滑动屏幕的时候能够看到更多的页面内容。
屏幕滚动时，工具栏过渡变成浮动按钮
屏幕滚动时，工具栏过渡变成浮动按钮
浮动按钮过渡变成工具栏后，该工具栏应该包含之前按钮的相关操作。
可行
案例：该变形后的按钮允许用户选择添加媒体类型
不可行
不能包括不相关的操作
快速转盘
浮动按钮按下后会“弹出”相关联的操作。当按钮被触发后仍保留在屏幕上。同一地方再次按下能够触发最常用的用户操作或关闭已打开的菜单。
浮动按钮按下后会“弹出”相关联的操作
浮动按钮按下后会“弹出”相关联的操作
浮动按钮能够过渡变成一个material面，并且里面包含了所有相关联的操作。
浮动按钮过渡变成一个material面
浮动按钮过渡变成一个material面
一般情况下，浮动按钮按下后出现的操作选项需要多于三个并少于六个（包括浮动按钮本身在内）。这里解释下为什么不能少于三个：比如你只有两个操作选项（浮动按钮算在内），那么按下浮动按钮后就只能弹出一个选项，这么说的话也就没有必要使用浮动按钮了。当然，多于六个的情况也不行，因为用户够不着太远的选项。
减少用户决策疲劳，给予用户最好、最明确和最简洁的选项。
不可行
至少需要三个操作选项（包括浮动按钮本身）
不可行
不能多于六个选项
触发浮动按钮后出现的选项中不应该出现溢出菜单。也就是说用户不能用超过两次点击来达到目的。
可行
选项能够直接指明目的地
不可行
选项中不能出现溢出菜单
溢出菜单最好放在工具栏中，不要出现在浮动按钮的选项内。
可行
溢出菜单属于工具栏
可行
溢出菜单属于工具栏
不可行
浮动按钮中不应该出现溢出菜单
浮动按钮中不应该出现溢出菜单
如果某应用的主要功能是添加不同类型的文件，那么可以使用浮动按钮来关联这些操作。
可行
如图，浮动按钮包含应用中相关的操作
不可行
这些不相关的操作不应该出现在浮动按钮中
如果浮动按钮展示的是联系人列表，那么列表中不应该出现其他不相关的操作选项。
可行
不可行
变形
浮动按钮能够过渡变形成一个material面，并且这个material面属于应用结构的一部分。这种形态上的明显变化是为了凸显按钮中所包含的操作。
浮动按钮的变形，从开始到结束都是以合乎逻辑的方式进行转换。例如，不能在转换过程中穿过其他material面。
变形后的material面可以变回为浮动按钮，也就是说变形的动效也是可以逆向播放的。
浮动按钮能够过渡变形成一个material面
浮动按钮能够过渡变形成一个material面
浮动按钮能够过渡变形成一个满屏的material面。
这种变化尺寸大的情况通常与创建新的内容相关。一般来说，这种变化结果是不能撤销，不可逆的。
浮动按钮能够过渡变形成一个满屏的material面
浮动按钮能够过渡变形成一个满屏的material面
大屏环境
浮动按钮能够依附在一个扩展出来的应用栏（app bar）上。
可行
浮动按钮也能依附在工具栏或结构元素上（只要它不妨碍到其他元素）。
可行
浮动按钮还能依附在一个sheet的边缘。
可行
每个页面只能存在一个浮动按钮。
不可行
页面中不能每个元素都关联一个浮动按钮。
不可行
