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

原型设计

如果对悬浮按钮在产品上的运用有了初步的构思，可以通过原型工具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设计中，还是要注意基本设计规范、场景和用户体验的。正确使用悬浮按钮，会给你的产品体验带来事半功倍的效果。