Buttons: Floating Action Button - 按钮：浮动操作按钮

A floating action button represents the primary action in an application.

A floating action button is used for a promoted action.

Shaped like a circled icon floating above the UI, it changes color upon focus and lifts upon selection. When pressed, it may contain more related actions.

【翻译】
浮动操作按钮表示应用程序中的主要操作。
浮动操作按钮用于提升的操作。
形状像一个圆圈图标漂浮在UI上方，它改变颜色焦点和提升后选择。 按下时，它可能包含更多相关操作。

Usage - 用法
Only one floating action button is recommended per screen to represent the most common action.

【翻译】
每个屏幕只推荐一个浮动操作按钮以表示最常见的操作。

Behavior - 行为
It animates onto the screen as an expanding piece of material, by default.

【翻译】
默认情况下，它作为一个扩展的材料在屏幕上动画。

Sizes - 尺寸
Default: 56 x 56dp
Mini: 40 x 40dp

【翻译】
默认值：56 x 56dp
迷你：40 x 40dp

Floating action button - 浮动操作按钮

Floating action buttons are used for a promoted action. They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point.

Floating action buttons come in two sizes:

Default size: For most use cases
Mini size: Only used to create visual continuity with other screen elements
The button size should change from the default (56dp) to the mini size (40dp) when the screen width is 460dp or less.

【翻译】
浮动操作按钮用于提升的操作。 它们通过浮动在UI上方的圆圈图标来区分，并且具有包括变形，发射和转移锚点的运动行为。
浮动操作按钮有两种尺寸：
默认大小：适用于大多数用例
迷你尺寸：仅用于创建与其他屏幕元素的视觉连续性
当屏幕宽度为460dp或更小时，按钮大小应从默认值（56dp）更改为微型大小（40dp）。

Floating action button

【翻译】
浮动操作按钮

Mini floating action button

【翻译】
迷你浮动动作按钮

The floating action button should be placed 16dp minimum from the edge on mobile and 24dp minimum on tablet/desktop.

【翻译】
浮动操作按钮应该从移动的边缘到最小16dp，在平板电脑/桌面上最小为24dp。

Floating action button

Interior icon: 24 x 24dp
Floating action button circle: 56 x 56dp

【翻译】
浮动操作按钮
内部图标：24 x 24dp
浮动按钮圈：56 x 56dp

Mini floating action button

Interior icon: 24 x 24dp
Floating action button circle: 40 x 40dp

【翻译】
迷你浮动动作按钮
内部图标：24 x 24dp
浮动按钮圈：40 x 40dp

The floating action button changes color on focus and lifts upon being selected.

【翻译】
浮动操作按钮在改变焦点和选择时升起时，

改变颜色。
Floating action button gaining focus

【翻译】
浮动操作按钮获得焦点

Floating action button being selected

【翻译】
浮动操作按钮正在选择

Not every screen needs a floating action button. A floating action button represents the primary action in an application.

【翻译】
不是每个屏幕都需要一个浮动操作按钮。浮动操作按钮表示应用程序中的主要操作。

正确的示范

Do.
The primary action is to touch images in a gallery, so no button is needed.

【翻译】
正确的示范
主要操作是触摸图库中的图片，因此不需要按钮。

正确的示范

Do.
The primary action is to add files.

【翻译】
正确的示范
主要操作是添加文件。

Only one floating action button is recommended per screen to increase its prominence. It should represent only the most common action.

【翻译】
每个屏幕只推荐一个浮动操作按钮，以增加其显着性。它应该只代表最常见的行为。

错误的示范 错误的示范

Qualities - 质量

Make floating action buttons positive actions like Create, Favorite, Share, Navigate, and Explore.

【翻译】
使浮动操作按钮成为积极的操作，如创建，收藏，共享，导航和探索。

正确的示范

Avoid using floating action buttons for minor and destructive actions, including the following:

Archive or Trash
Nonspecific actions
Alerts or errors
Limited tasks like cutting text
Controls that should be in a toolbar, like volume control or changing a font color
Floating action buttons don’t contain app bar icons or status bar notifications. Don’t layer badges or other elements over a floating action button.

【翻译】
避免对小型和破坏性操作使用浮动操作按钮，包括以下内容：
存档或已删除邮件
非特定操作
警报或错误
有限的任务，如剪切文本
应该在工具栏中的控件，如音量控制或更改字体颜色
浮动操作按钮不包含应用栏图标或状态栏通知。 不要在浮动操作按钮上叠加徽章或其他元素。

错误的示范

Use the circle-shaped icon consistently to enforce the primary action pattern across apps.

【翻译】
始终使用圆形图标来强制跨应用程序的主要操作模式。

正确的示范 错误的示范

Don’t give the floating action button extra dimension.

【翻译】
不要给浮动动作按钮额外的尺寸。

正确的示范 错误的示范

Behavior - 行为

The floating action button animates onto the screen as an expanding piece of material, by default. The icon within it may be animated.

Floating action buttons may move differently than other UI elements because of their relative importance.

【翻译】
默认情况下，浮动动作按钮作为一种扩展的材料动画到屏幕上。其中的图标可能是动画。
浮动动作按钮的移动与其他UI元素移动不同，因为它们相对重要。

Examples of moving floating action buttons

【翻译】
移动浮动操作按钮的示例

****Lateral screens - 侧面屏幕****
A floating action button that spans multiple lateral screens (such as tabbed screens) should briefly disappear, then reappear if its action changes.
The button should stay on screen if its action remains the same across screens (and translate to a new position, if necessary.)

【翻译】
跨越多个侧屏幕（例如标签屏幕）的浮动动作按钮应该短暂消失，然后如果其动作改变则重新出现。
如果屏幕上的操作保持不变，则该按钮应该保留在屏幕上（如果需要，可以转换到新位置）。

Lists - 列表
Lists underneath floating action buttons should have enough padding beneath them so their content isn’t blocked by the button.

【翻译】
在浮动操作按钮下面的列表应该有足够的填充，以便它们的内容不被按钮阻止。

正确的示范 正确的示范

****Tabbed screens - 标签屏幕****
On tabbed screens, the floating action button should not exit the screen in the same direction as the content. This prevents:
Floating action buttons from appearing functional when they aren’t
The perception that the floating action button is at the same the elevation as the content

【翻译】
在选项卡式屏幕上，浮动操作按钮不应以与内容相同的方向退出屏幕。 这防止：
浮动操作按钮出现功能时，内容不是
浮动操作按钮与内容重要度相同的假象

错误的示范 错误的示范

Transitions - 过渡

The floating action button is a unique example of a primary use case in an app. Take advantage of its visibility to create delightful transitions for a primary UI element.

Common transitions include Trigger, Toolbar, Speed dial, and Morphing. This is not an exhaustive list. Floating action buttons are designed to be flexible. Experiment with transitions that best suit your app and the screens on which the button sits.

【翻译】
浮动操作按钮是应用程序中主要用例的唯一示例。 利用其可见性为主UI元素创建令人愉快的过渡。
常用转换包括触发器，工具栏，快速拨号和变形。 这不是一个详尽的列表。 浮动按钮设计灵活。 尝试最适合您的应用和按钮所在屏幕的转场。

Trigger - 触发器
The floating action button can simply trigger an action or navigate somewhere. The animation of the touch ripple expands outwards as the force that causes changes to the UI.

【翻译】
浮动操作按钮可以简单地触发动作或在某处导航。触摸波动的动画向外扩展，作为导致UI变化的力

A floating action button can simply trigger an action.

【翻译】
浮动动作按钮可以简单地触发动作。

A floating action button recentering a map view

Apps typically use a single floating action button. However, this example uses two floating action buttons because they perform equally important yet distinct actions.

【翻译】
浮动操作按钮重定向地图视图
应用通常使用单个浮动操作按钮。但是，此示例使用两个浮动操作按钮，因为它们执行同样重要但不同的操作。

Toolbar - 工具栏
The floating action button can transform into a toolbar upon press or from a toolbar upon scroll. The toolbar can contain related actions, text and search fields, or any other items that would be useful at hand.

【翻译】
浮动动作按钮可以在按压时变换成工具栏，或者在滚动时从工具栏变换成工具栏。工具栏可以包含相关操作，文本和搜索字段，或任何其他在手边有用的项目。

A floating action button transforming into a toolbar

【翻译】
浮动操作按钮转换为工具栏

A floating action button transforming into a toolbar

【翻译】
浮动操作按钮转换为工具栏

A toolbar that disappears on scroll is particularly useful for screens where the full toolbar is needed upon initial entry or while at the top or bottom of a long list. This saves screen real estate when the user has signaled through scrolling that they’re interested in looking at the main content.

【翻译】
在滚动时消失的工具栏对于在初始输入时或在长列表的顶部或底部需要完整工具栏的屏幕特别有用。 当用户通过滚动通知他们有兴趣观看主要内容时，这节省了屏幕空间。

A toolbar transforming into a floating action button upon scroll

【翻译】
滚动时工具栏转换为浮动操作按钮

【翻译】
滚动时工具栏转换为浮动操作按钮

If a floating action button morphs into a toolbar, that toolbar should contain related actions.

【翻译】
如果浮动操作按钮变形为工具栏，该工具栏应包含相关操作。

正确的示范

Do.
In this example, the button lets the user select the media type to add.

【翻译】
正确的示范
在此示例中，按钮允许用户选择要添加的媒体类型。

错误的示范

Don't.
Don’t include unrelated or confusing actions.

【翻译】
错误的示范
不要包括无关或混乱的行为。

Speed dial - 快速表盘
The floating action button can fling out related actions upon press. The button should remain on screen after the menu is invoked. Tapping in the same spot should either activate the most commonly used action or close the open menu.

【翻译】
浮动动作按钮可以在按下时熄灭相关动作。调用菜单后，按钮应保留在屏幕上。点击同一点应激活最常用的操作或关闭打开的菜单。

A floating action button flinging out related actions

【翻译】
一个浮动动作按钮挥出相关的动作

A floating action button flinging out related actions

【翻译】
一个浮动动作按钮挥出相关的动作

The floating action button can transform into a single sheet of material which contains all the actions.

【翻译】
浮动动作按钮可以转换为包含所有动作的单张材料。

A floating action button transforming into a single sheet of material

【翻译】
浮动动作按钮变成单张材料

A floating action button transforming into a single sheet of material

【翻译】
浮动动作按钮变成单张材料

As a general rule, have at least three options upon press but not more than six, including the original floating action button target. If you have two options – i.e. your floating action button only flings out one other choice – choose which action is most important. If you have more than six, users may have trouble reaching the furthest option.

Reduce decision fatigue by giving users the best, most distinct, and fewest options.

【翻译】
作为一般规则，在按下时具有至少三个选项，但不超过六个，包括原始浮动动作按钮目标。 如果您有两个选项 - 即您的浮动操作按钮只能摆脱一个其他选择 - 选择哪个操作是最重要的。 如果您有超过六个，用户可能无法达到最远的选项。
通过给用户最佳，最独特和最少的选项来减少决策疲劳。

错误的示范

Don't.
A floating action button should fling out at least three options.

【翻译】
错误的示范
浮动操作按钮应至少出现三个选项。

错误的示范

Don't.
A floating action button should fling out no more than six options.

【翻译】
错误的示范
浮动动作按钮应该不超过六个选项。

Don’t put overflow menus in the floating action button actions. There should be at most two taps from the initial screen to get to the intended destination.

【翻译】
不要在浮动操作按钮操作中放置溢出菜单。从初始屏幕到最终目的地最多应该有两个入口。

正确的示范

Do.
Options should be specific destinations.

【翻译】
正确的示范
选项应该是特定的目的地。

[图片上传失败...(image-bb0fc9-1552296054613)]
Don't.
Options should not include an overflow menu.

【翻译】
错误的示范
选项不应包括溢出菜单。

Put overflow actions in the overflow menu in toolbars, not in floating action buttons.

【翻译】
将溢出操作放在工具栏中的溢出菜单中，而不是浮动操作按钮中。

正确的示范

Do.
Overflow menus belong in toolbars.

【翻译】
正确的示范
溢出菜单属于工具栏。

[图片上传失败...(image-140978-1552296054613)]
Do.
Overflow menus belong in toolbars.

【翻译】
正确的示范
溢出菜单属于工具栏。

[图片上传失败...(image-7ce6a3-1552296054613)]
Don't.
Floating action button are not overflow menus.

【翻译】
错误的示范
浮动操作按钮不是溢出菜单。

错误的示范

Don't.
Floating action buttons are not overflow menus.

【翻译】
错误的示范
浮动操作按钮不是溢出菜单。

If the hallmark of the app is adding file types, a floating action button can transform into related actions after it is first touched. However, if the actions that appear are unrelated to the button, place the actions into an overflow menu.

【翻译】
如果应用程序的标志是添加文件类型，第一次触摸后，浮动操作按钮可以转换为相关的操作。但是，如果出现的操作与按钮无关，则将操作放置到溢出菜单中。

正确的示范

Do.
A floating action button can transform into related actions.

【翻译】
正确的示范
浮动动作按钮可以转换为相关动作。

[图片上传失败...(image-5e60a9-1552296054613)]
Don't.
A floating action button should not transform into unrelated actions.

【翻译】
错误的示范
浮动操作按钮不应转换为不相关的操作。

A floating action button can contain a list of contacts. The list shouldn’t contain unrelated actions.

【翻译】
浮动操作按钮可以包含联系人列表。该列表不应包含无关的操作。

[图片上传失败...(image-bcbdb9-1552296054613)]
Do.
A floating action button can transform into a list of contacts.

【翻译】
正确的示范
浮动操作按钮可以转换为联系人列表。

[图片上传失败...(image-7718a9-1552296054613)]
Don't.
A floating action button should not transform into unrelated actions.

【翻译】
错误的示范
浮动操作按钮不应转换为不相关的操作。

Morph - 变形
The floating action button can transform into sheets of material that are part of the app structure. This dramatic transformation accentuates the action the button enables.
When morphing the floating action button, transition between starting and ending positions in a logical way. For example, do not pass through other sheets of material.
The morph animation should be reversible and transform the new sheet of material back into the floating action button.

【翻译】
浮动操作按钮可以转换为作为应用程序结构一部分的材料表。 这种戏剧性的变换强调了按钮启用的动作。
当变形浮动动作按钮时，以逻辑方式在开始位置和结束位置之间转换。 例如，不要穿过其他材料板。
变形动画应该是可逆的，并将新的材料表格转换回浮动动作按钮。

ezgif.com-video-to-gif.gif

A floating action button can morph into a sheet of material that is part of the app structure.

【翻译】
浮动动作按钮可以变形为作为应用程序结构的一部分的材料表。

A floating action button can morph into a sheet of material that is part of the app structure.

【翻译】
浮动动作按钮可以变形为作为应用程序结构的一部分的材料表。

Full screen - 全屏
The floating action button can transform into a new sheet of material that spans the entire screen.
This type of dramatic transformation is typically associated with creating new content. As a result, it does not tend to have an method of undoing the transformation or a reversible animation.

【翻译】
浮动动作按钮可以转换成跨越整个屏幕的新的材料片。
这种类型的戏剧性变换通常与创建新内容相关联。 因此，它不倾向于具有撤销变换或可逆动画的方法。

The floating action button can transform into a new sheet of material that spans the entire screen.

【翻译】
浮动动作按钮可以转换成跨越整个屏幕的新的材料片。

The floating action button can transform into a new sheet of material that spans the entire screen.

【翻译】
浮动动作按钮可以转换成跨越整个屏幕的新的材料片。

Large Screens - 大尺寸屏幕

A floating action button can attach to an extended app bar.

【翻译】
浮动操作按钮可以附加到扩展应用栏。

正确的示范

A floating action button can be attached to a toolbar or structural element within a sheet (as long as it’s not blocking other elements).

【翻译】
浮动操作按钮可以附加到工作簿或工作表中的结构元素（只要它不阻塞其他元素）。

正确的示范

A floating action button can be attached to the edge of a sheet.

【翻译】
浮动动作按钮可以附接到片材的边缘。

正确的示范

Don’t have more than one floating action button per screen.

【翻译】
每个屏幕不得有多个浮动操作按钮。

错误的示范

Don’t associate floating action buttons with every element on a screen.

【翻译】
不要将浮动操作按钮与屏幕上的每个元素相关联。

错误的示范