标签：
作者：郭孝星
微博：郭孝星的新浪微博
邮箱：allenwells@163.com
博客：http://blog.csdn.net/allenwells
Github：https://github.com/AllenWells
按钮由文字和/或图标组成，文字及图标必须能让人轻易地和点击后展示的内容联系起来。
悬浮响应按钮(Floating action button)， 点击后会产生墨水扩散效果的 圆形按钮。
悬浮响应按钮是促进动作里的特殊类型。 是一个圆形的漂浮在界面之上的、拥有一系列特殊动作的按钮，这些动作通常和变换、启动、以及它本身的转换锚点相关。
悬浮响应按钮有两种尺寸: 默认尺寸和迷你尺寸。 迷你尺寸仅仅用于配合屏幕上的其他元素制造视觉上的连续性。
浮动按钮(Raised button)， 常见的方形纸片按钮，点击后会产生墨水扩散效果。
浮动按钮使按钮在比较拥挤的界面上更清晰可见。能给大多数扁平的布局带来层次感。在用动画表现浮动按钮时，浮动按钮看起来像一张放在页面上的纸片，点击后会浮起来并表现出色彩。
一个屏幕只推荐使用一个浮动操作按钮来增加其显著性。它应该只代表最常见的操作（应用的主要操作按钮应该采用圆形按钮，且不要给按钮增加额外的维度）。下面就是一种错误的做法。
浮动按钮通常用来进行积极的操作，如创建、收藏、分享、浏览和探索。
避免用浮动操作按钮进行下面这些轻微破坏性操作
关于在平板等大屏幕设备中浮动按钮的摆放位置。
浮动操作按钮可以附属到一个扩展的App Bar
浮动操作按钮可以被附属到单页中的一个工具栏或者结构化元素
浮动操作按钮可以被附属到一个单页的边缘。
单个屏幕上不要多与一个浮动操作按钮
不要将浮动操作按钮与屏幕上的每个元素都联系起来
扁平按钮(Flat button)， 点击后产生墨水扩散效果，和浮动按钮的区别是没有浮起的效果。
扁平按钮一般用于对话框或者工具栏， 可避免页面上过多无意义的层叠。在用动画表现扁平按钮时，应该让扁平按钮一直保持和页面贴合的状态，点击后会填充颜色。
按钮的使用规则如下所示：
对话框中使用扁平按钮作为主要按钮类型以避免过多的层次叠加。
如果需要一个非主要、但是能快速定位到的按钮，则可以使用底部固定按钮。
图标适合用在应用导航条或者工具条上，作为动作按钮或者开关。图标开关可以在它的范围内呈现弹性或者非弹性的墨水扩散涟漪效果。
下拉菜单按钮可以用来控制对象状态; 一般会有两个甚至更多的状态。 按钮会显示当前状态以及一个向下的箭头—当按钮触发后， 一个包含所有状态的菜单会在按钮周围弹出（通常都是在下方）。 菜单中的状态通常会以字符、调色板、图标或者其他的形式呈现出来。点击任意一个状态将会改变按钮的状态显示。这展示的是一个常见的带有列表式菜单的下拉菜单按钮。
我们通常会用墨水涟漪效果来实现按钮的交互响应，墨水涟漪效果会跟着焦点的改变从一个按钮转换到另一个按钮。聚焦状态的动画会表现出正常状态和点击状态间来回切换的过渡效果。
模拟按钮状态的时候， 可以使用图形轮换来表现动画。注意聚焦状态会一直处于动画的状态
Flat Light/Light color
最小宽度: 88 dp， 高度: 36 dp
覆盖状态: 20% #999， 点击状态: 40% #999， 不可用状态: 10% #999
Flat Dark/Dark Color
最小宽度: 88 dp， 高度: 36 dp
覆盖状态: 15% #ccc， 点击状态: 25% #ccc， 不可用状态: 10% #ccc
我们来看一下实际的扁平按钮动画表现
浮动操作按钮就像一块扩展的物体在屏幕上活动。在它里面的图标可能是活动的。
Raised Light/Light Color
最小宽度: 88 dp， 高度: 36 dp
Raised Dark/Dark Color
最小宽度: 88 dp， 高度: 36 do
正常状态: Color 500， 覆盖状态: Color 600， 点击状态: Color 700， 不可用状态: 10% #ccc
我们来看一下实际的浮动按钮动画表现
浮动按钮获取焦点
浮动按钮被选中
如果在多个旁边的屏幕上有浮动操作按钮（例如选项卡），在进入屏幕时，若在每个屏幕上的操作不同，按钮应该显示和隐藏。若操作相同，按钮应该停留在屏幕上，如果有需要则转换到新的位置上。
对于带有标签的屏幕，浮动操作按钮不应朝着屏幕退出时的同一方向退出屏幕。否则会导致视觉噪音。这也将导致在屏幕上出现一个失灵的浮动操作按钮。此外，它错误地暗示了浮动操作按钮与内容在相同的 Z 水平高度上，而不是在根水平高度中 UI 主元素所在的水平高度的上。
浮动操作按钮变成一个工具栏
工具栏在滚动时转变成一个浮动操作按钮
一个浮动的操作按钮能够释放相关的操作，按动按钮时保持三个以上的选项，但不要超过六个，包括原来的浮动操作按钮。如果你有两个选项，即，你的浮动操作按钮只弹出了另外一个选项——选择哪个操作是最重要的。如果选项超过六个，用户可能在选择上有困惑。
一个浮动按钮转变为一个 material 单页，浮动操作按钮可以转变为 material 单页，app 结构中的部分。这个神奇的转变突出了按钮可以做的操作。
当浮动操作按钮变形时，在开始和结束位置之间以合理的方式转换。例如，不要穿过其他的 material 单页。
变形动画应该是可逆的，可以将新的 material 单页变回为浮动操作按钮。
浮动动作按钮可以转变成占满整个屏幕的新型物品
版权声明：当我们认真的去做一件事的时候，就能发现其中的无穷乐趣，丰富多彩的技术宛如路上的风景，边走边欣赏。
【Material Design视觉设计语言】应用组件设计（一）：按钮
标签：
原文地址：http://blog.csdn.net/allenwells/article/details/47979463
