Material Design之浮动操作按钮

本文转自UI中国

浮动操作按钮

浮动操作按钮一般作为进阶操作的开关，在用户界面中通常是一个漂浮的小圆圈，它有自身独特的动态效果，比如变形、弹出、位移等等。

有两种尺寸的浮动操作按钮：默认大小和较小的，使用哪种尺寸需要根据屏幕中的元素来决定。

 

内容相关

并不是每一个屏幕都需要浮动操作按钮。一个浮动操作按钮应该能够代表这个APP中的主要操作。在左边主要是相册集和打开的图片，并不需要浮动按钮。而在右侧，主要的动作是添加内容，所以添加浮动操作按钮是合理的。

尽量只在屏幕中摆放一个浮动按钮，因为它是整个屏幕中最突出的按钮。

不要在对话框中使用浮动按钮，去使用扁平的按钮。

不要在侧边的导航栏中加入浮动按钮，他会分散用户的注意力，侧边栏的主要任务就是导航。

不要把浮动操作按钮摆放在下拉菜单会覆盖的面积。

操作相关

不要在浮动操作按钮中设置弹出菜单选项。

如果是应用程序内添加文件类型的标志，可以让浮动操作按钮在被点击后变化为相关的按钮。

然而，如果是一组动作按钮，之间并没有关联，那么你应该把这些按钮放入到菜单中，而不是通过浮动操作按钮激活。

如果在点击浮动操作按钮过后，出现工具栏，那么工具栏中应该摆放相关的按钮。在这个例子中，是让用户选择添加的媒体类型。

不要将毫无关联的图标按钮添加到由浮动操作按钮激活的工具栏中。

一个浮动操作按钮可以包含联系人列表。

但是不要将各类功能和联系人或其他元素都放进按钮中。

品质

浮动按钮通常可以作为：添加、编辑、喜欢、分享、搜索等等按钮出现

一般来说，我们会避免在浮动操作按钮上设置会对内容操作按钮，比如下载、删除、新建文件夹等等；或者不具体的动作，比如警告或错误；应该在工具栏或控件栏中的按钮，比如音量控制、字体颜色等等。另外浮动操作按钮不应该包含应用程序栏图标或状态栏上的通知图标，还有注意的是，不要在浮动操作按钮上再添加气泡或其他元素。

使用圆形作为按钮的外形，以免混淆用户。

不要在浮动操作按钮中加入反弹动画。

位置

浮动操作按钮可以放在界面中明显的分割线上或附加在扩展栏中。

也可以将浮动操作按钮放在页脚或者展开的列表上。

不要将浮动操作按钮随机的悬浮在一个位置上，同时也要注意不要让浮动操作按钮遮挡住其他按钮。

一个浮动操作按钮可以链接到一个新的窗口

浮动操作按钮可以被放置在工具栏或者页面分隔上（只要不遮挡其他元素）

浮动操作按钮可以附着在区域的边缘

一个屏幕中只允许出现一个浮动操作按钮

不要将浮动操作按钮隐藏在侧边栏或附着在侧边栏上

不要给界面中每一个元素上都放置一个浮动操作按钮

不要让状态通知或其他元素，遮挡住浮动操作按钮。