Material Design——Buttons: floati
#我是一个可爱的搬砖工系列# 尝试对照英文翻译学习MD的组件设计，借此加深各种组件的应用~
Material Design链接：Buttons: floating action button
用浮动动作按钮(FAB)触发屏幕的主要操作。
一、使用
浮动动作按钮(FAB)在屏幕上执行主动作或最常见的动作。它出现在所有屏幕内容的前面，通常是一个圆形形状，中间有一个图标。有三种类型：regular, mini, and extended（常规的，迷你的，和扩展的）。
只有当显示屏幕主要动作最合适的方式时才使用FAB。
左：使用浮动操作按钮表示最常见的主要操作，例如起草新的电子邮件；右：FABs不需要在每个屏幕上，例如当图像代表主要操作时。
Wrong：不要在一个屏幕上显示多个FAB；Caution：偶尔可以使用两个FAB，如果它们执行不同但同样重要的操作。
△原则
· 首要的 FAB表示屏幕上的主要操作
· 建设性的 FAB应该执行建设性的操作(例如创建、共享或探索)
· 与上下文有联系的 FAB应该与显示它的屏幕相关
二、分析
1.Container；2.Icon
△ 容器
FAB通常显示在一个圆形容器中，应用程序的颜色方案决定了它的颜色填充，这应该与FAB后面的区域形成对比。
FAB containers come in two sizes:
Default (56 x 56dp)
Mini (40 x 40dp)
Mini FAB应该在较小的屏幕上使用。当屏幕宽度为460 dp或更少时，默认FAB(56 Dp)的容器应转换为最小大小(40 Dp)。
Mini FABs还可以用来创建与其他屏幕元素的视觉连续性。
这个Mini Fab创建视觉连续性，有一个相关的大小、形状，并将文件夹图标放置在它下面。
Right：FAB 按钮采用应用程序调色板的颜色；Wrong：不要在FAB上添加角标或其他元素。
△ 图标
FAB的图标应该清楚地说明它的行动，FAB不应该包含在屏幕其他地方找到的通知或操作。
左：不要使用模棱两可的图标；右：不要把文字放在常规的FAB中。
三、位置
FABS可以连接到顶部的应用程序栏和一些组件的边缘。
浮动动作按钮(FAB)可以附加到顶部的应用程序栏。
FAB可以连接到组件的边缘。
单个组件，例如卡片，不能每个人都有自己的FAB。
四、行为
△ 操作
浮动操作按钮(FAB)可以在当前屏幕上触发操作，也可以执行创建新屏幕的操作。
浮动操作按钮促进一项重要的建设性行动，例如：
· Create
· Favorite
· Share
· Start a process
避免将FAB用于比较不重要的或破坏性行为，例如：
· Archive or trash（存档或删除警告）
· Alerts or errors（警告或错误）
· Limited tasks like cutting text（限制任务如剪切文本）
控件更适合工具栏(如调整音量或字体颜色的控件)
使用FAB进行主要的、积极的操作。
不要将FAB用于次要的、溢出的、不明确的或破坏性的操作。
△ 手势
在整个用户流程中，FAB位置保持一致。出现在屏幕中
当FAB在屏幕上动画时，它从中心点向外扩展，里面的图标也可能是动画的。
虽然FAB应该与屏幕内容相关，但它们不会叠加在正文内容上，Fabs与其他UI元素的移动是不同的，因为它们的相对重要性。
屏幕转换
FAB可以变形，以启动相关的行动，当屏幕改变其布局时，FAB应在过渡期间消失并重新出现。
再现
FAB只应在与新屏幕相关的情况下重新出现，如果可能的话，它应该以相同的位置出现。
△ 条形屏幕
当标签出现时，FAB应该会短暂地消失，然后当新的内容移到适当的位置时重新出现，这表示FAB没有连接到任何特定的选项卡。
Right：在制表符之间切换时，FAB消失，然后重新出现；Wrong：当在顶部标签之间切换时，FABs不会与屏幕内容一致移动。
五、转换类型
△ Speed dial （快速拨号功能）
当按下FAB时，FAB可以快速拨号的形式显示三到六个相关动作。这种转变可以下列方式之一进行：
· 当点击FAB，FAB可以触发相关操作
· 按下后，FAB可以转换为包含相关操作的菜单(仅限Android)
如果需要六个以上的操作，就应该使用FAB以外的其他东西来呈现它们
触发相关操作
当点击FAB，FAB仍然可见，并触发一些系列相关的操作，如果在此状态下按下FAB，则为关闭该操作。
FAB显示一系列相关操作
左：A speed dial 应该包括至少三个选项；右：A speed dial 不应超过六个选项。
左：FAB可以包含联系人列表；右：相关操作可以有文本标签。
左：FAB不应该变成不相关的行为；右：FAB不应包括溢出菜单。
转换为带有相关操作的菜单
在Android上按下FAB可以转换为包含相关操作的菜单，Scrim表示操作菜单之外的功能暂时禁用，菜单一直在屏幕上，直到执行动作，或 the scrim 被点击。
转换为动作菜单的FAB
左：不要使用少于三个选项的动作菜单；右：动作菜单不应该包含六个以上的选项，因为动作菜单不支持滚动。
△ 转换
FAB可以在应用程序中转换成另一个界面，变形应该是可逆的，并将新的界面转化为FAB。
FAB可以变成应用程序结构的一部分的表面。△ 全屏
Fab可以转换成一个覆盖整个屏幕的新界面，这种类型的转换通常用于创建新内容。
六、扩展FAB
扩展FAB更宽，它包括一个文本标签。
Extended FAB△ 分析
· 容器
扩展的FAB容器的宽度可以是固定的或者是流体的。
固定宽度容器由图标、文本标签和填充的累积宽度定义。
流体容器是由它与屏幕上的其他东西(如屏幕宽度或布局网格)的关系定义。
固定的扩展FAB宽度由图标、文本标签和容器填充的累积宽度定义。
扩展的FAB容器宽度是由布局网格列定义的。
· 图标
扩展FAB的图标应该直观地表示它的功能。
左：图标应该放置在文字标签的左边，内容从左到右；右：从右到左时，图标应该放在右边。
Right：与标准FAB不同，扩展FAB不需要图标。；Wrong： 不能只有文本标签没有图标。
· 文本标签
扩展FAB的文本标签应该描述它的功能。
Caution：如果较短的文本不是选项，则只截断文本；Wrong：避免包装文字。
△ 位置
扩展的Fab可以定位在屏幕的中心、左边或右侧。
· 电脑桌面
对于大于840 dp的UI，例如桌面，扩展的Fab应该放在屏幕的左上角或屏幕的右下角。
·
· 移动设备
在移动设备上，扩展的FAB应该放在右下角或底部的中心位置。
Caution：避免在底部的应用程序栏上使用扩展的Fab，因为这种组合占用了大量的屏幕空间。扩展的Fab应该会与底部的应用程序栏重叠。
△ 行为
· Speed dial
扩展后的FAB还可以在点击时显示3-6相关操作的Speed dial，在悬停时，这些相关操作展开以显示标签。
在Speed dial过渡期间，扩展的FAB成为标准的FAB。
Extended FAB speed dial
· 转换为标准FAB
如果空间变得有限，扩展的FAB可以转换为标准的FAB。例如，如果一个app视图端口调整到840 dp以下，或者打开一个导航抽屉。
Extended FAB transforming into a standard FAB
当屏幕滚动时，扩展的FAB可以转换为标准的FAB。
在用户滚动回页面顶部之前，FAB不应该返回到扩展的FAB。
在用户滚动到页面顶部后，扩展FAB转换为标准FAB。
END.THANKS FOR YOUR READING~
如有不当，还请多多指教~
