干货分享！悬浮按钮设计规范和经典实践

悬浮按钮（Floating Action Button，简称FAB）是APP应用中常见的UI元件。它轻盈、优雅、便捷又高效，是Google设计语言中一颗璀璨的明珠。悬浮按钮每每都会独立出如今界面之上，提高总体的导航，拓展页面的功能，使应用的操做更加便捷。

做为Android UI交互中最关键的元素之一，悬浮按钮在用户体验中的地位十分重要。UI上，每每是最色彩大胆最直观的页面元素；在功能上，每每是表明用户在页面上最高频次的操做。悬浮按钮的使用有什么基本准则？有哪些实用用途？咱们一块儿在这篇文章中来看一看。

悬浮按钮的使用原则

A、选择适当的悬浮按钮尺寸

悬浮按钮主要用于促进用户行为，它们经过在UI上浮动的圆圈图标来区分，而且具备包括变形，启动和传送锚点的运动行为。通常有两种尺寸，默认版和迷你版（仅用于与其余界面元素建立视觉连续性）。

默认的尺寸通常为56*56dp，迷你版的尺寸为40*40dp。界面宽度低于460dp时，须要从默认尺寸（56dp）调整至迷你尺寸（40dp）。

B、悬浮按钮只承载正向操做

因为悬浮按钮一般承载的是主要的、有表明性的操做，一般它应该是个积极正向的交互，好比建立、分享、探索等。惟一的悬浮按钮不该该执行破坏性的操做，好比删除、归档。它不该该是非特定的操做，或者是不完整的交互，好比剪切和粘贴是一组组合交互，它们应该存在于菜单栏当中，而非悬浮按钮中。

C、大尺寸屏幕上的悬浮按钮

悬浮按钮在大尺寸的屏幕上能够放置在扩展的APP栏、工具栏或者结构性的元素（前提不阻碍其余元素）和表单的边缘上。须要注意的是，每一个页面只能出现一个悬浮按钮，也不要将悬浮按钮与一个页面上的全部元素产生关联，悬浮按钮自己显眼抓人眼球，滥用悬浮按钮会分散用户的注意力。

悬浮按钮的用途

触发器

悬浮按钮能够简单地触发某个动做或在某处导航，经常使用于触发功能、菜单或导航。

        

工具栏

悬浮按钮能够在进行点按或滚动操做时变换成工具栏。 工具栏能够包含相关的操做，文本和搜索字段等。当用户经过滚动发出他们有兴趣继续浏览内容的信号，滚动消失的工具栏则大大地节省了屏幕空间，总体的使用体验会很是流畅。

   

界面变形的枢纽

悬浮按钮能够转换为APP结构的一部分，借助动效延伸到整个屏幕，甚至变为独立的界面，从而成为界面功能切换的动态枢纽。

对于这一块的用法，谷歌Material Design设计规范要求：“变形浮动按钮时，须要以逻辑的方式在开始和结尾的位置转换，不要使用其余元素，而且变形动画应该是可逆的，新的变形页面也能够转换会悬浮按钮。”

触发和扩展一系列操做

除了单一的功能触发外，经过悬浮按钮更经常使用于触发一系列的操做，经过扩展，用一组相关、经常使用的悬浮按钮来替代原来的单一交互。常见的形式有拓展按钮，拓展表单等。

做为通常规则，这组拓展出来的按钮不该少于3个，不能多于6个，不然违反了做为悬浮按钮的快速、高效的原则。

悬浮按钮的实践

明确了悬浮按钮的基本设计规范和用途分类后，咱们就能够尝试开始动手本身的设计实践了，下面为你们从两个方面的入门提供帮助。

原型设计

若是对悬浮按钮在产品上的运用有了初步的构思，能够经过原型工具Mockplus快速实现原型效果。

Mockplus支持快速设计、快速分享、轻松预览和轻松协做，你能够经过200个组件，8种智能交互组件，仅仅经过鼠标拖拽就实现交互；设计完成后由8种方式供你预览，还支持8种批注工具在线审阅，团队中也能大放光彩。上图的原型例子能够戳这里下载：http://doc.mockplus.cn/?p=1046

案例欣赏

尚未灵感？没关系。这里为你们收集了Dribbble和Uplabs上面的一些经典悬浮按钮设计案例，相信会带给你启发。

Navigation at the bottom

做品功能和UI贴切地结合是总体变得出彩，设计中，下拉菜单占据了屏幕的一半，模糊了背景上的元素，突出了表单的重要性。菜单设计得很是简练，全部选项都按照垂直顺序排列，大量的留白保证了文字处于主体地位。

流动的切换动画细节加强了呼吸感，给用户带来了感性细腻的操做反馈。

FAB for User Engagement

这一款FAB显得很是有侵略性。 激活以后没有一点的犹豫，垄断了整个屏幕，占据了主导地位。由于空间的充裕，设计成功地将全部重要环节都包含在内，图标美丽直观，体验强烈而宽敞。在UI方面做者巧妙地设置焦点，带来了愉悦的视觉观感。 

Filter Menu

这款做品把FAB做为一种枢纽，使搜索过程更加高效和愉快，为用户提供了更灵活的使用体验。 必要的过滤器选项排列在一个弧形当中，每个都有一款精心设计的圆形图标。菜单面板也具备很是像按钮自己的圆形形状。 这样一来，组件看上去就和谐了。 

总结

悬浮按钮看似简单，可是要在APP设计中，仍是要注意基本设计规范、场景和用户体验的。正确使用悬浮按钮，会给你的产品体验带来事半功倍的效果。