发布时间：2023-4-12 分类： 电商动态
浮动按钮设计规范和经典实践。
浮动操作按钮（FAB）是APP应用程序中的常用UI组件。轻巧，优雅，方便，高效，是Google设计语言中的一颗璀璨明珠。浮动按钮将经常独立出现在界面上，改善整体导航，扩展页面功能，使应用程序的操作更加方便。
作为Android UI交互中最重要的元素之一，悬停按钮的位置在用户体验中非常重要。在UI上，它通常是最大胆和最直观的页面元素;在功能方面，它通常是代表用户的最高频率操作。使用悬停按钮的基本准则是什么？有什么实际用途？我们来看看这篇文章。
使用飞行按钮的原则
A.选择适当的悬停按钮大小
悬停按钮主要用于促进用户行为，它们通过浮动在UI上的圆形图标来区分，并且具有包括变形，启动和传输锚点的运动行为。有两种尺寸，默认版本和迷你版本（仅用于创建与其他界面元素的视觉连续性）。
默认大小通常为56 * 56dp，迷你版本为40 * 40dp。当界面宽度低于460dp时，需要将其从默认大小（56dp）调整为迷你大小（40dp）。
B，浮动按钮只能进行前进操作
由于悬停按钮通常带有主要的代表性操作，因此通常应该是积极的积极互动，例如创建，共享，探索等。唯一的浮动按钮不应执行删除和存档等破坏性操作。它不应该是非特定操作或不完整的交互。例如，剪切和粘贴是一组组合交互，应该存在于菜单栏中而不是浮动按钮中。
C，大屏幕上的浮动按钮
悬停按钮可以放置在扩展的APP栏，工具栏或结构元素（不妨碍其他元素）和大屏幕上的表单边缘。应该注意的是，每个页面上只能出现一个浮动按钮，并且浮动按钮不应与页面上的所有元素相关联。浮动按钮本身会吸引眼球，滥用浮动按钮会分散用户的注意力。
使用悬停按钮
触发
悬停按钮可以简单地触发操作或导航到某处，通常用于触发功能，菜单或导航。
工具栏
点击或滚动时，可以将飞行按钮转换为工具栏。工具栏可以包含相关操作，文本和搜索字段等。当用户通过滚动发送他们有兴趣继续浏览内容的信号时，滚出工具栏大大节省了屏幕空间，整体体验非常流畅。
界面变形界面
悬停按钮可以转换为APP结构的一部分，通过运动效果延伸到整个屏幕，甚至可以成为单独的界面，从而成为界面功能切换的动态集线器。
对于此作品的使用，Google Material Design规范要求：“当变形浮动按钮时，需要在位置的开头和结尾进行逻辑转换，不要使用其他元素，并且变形动画应该是可逆的，新变形页面您也可以转换悬浮按钮。“
触发并扩展一系列操作
除了单个函数触发器之外，浮动按钮更常用于触发一系列操作，并且通过扩展，一组相关的常用浮动按钮替换原始单个交互。常见表单包括扩展按钮，扩展表单等。
作为一般规则，该组扩展的按钮数量不应少于3，不应超过6，否则违反快速有效的浮动按钮原则。
浮动按钮练习
在澄清浮动按钮的基本设计规范和使用分类后，我们可以尝试开始我们自己的设计实践。以下是一些入门提示。
原型设计
如果您对产品上浮动按钮的使用有初步了解，可以使用原型工具Mockplus快速实现原型效果。
Mockplus支持快速设计，快速共享，轻松预览和轻松协作。您只需2个鼠标即可与200个组件和8个智能交互式组件进行交互。设计完成后，您可以通过8种方式进行预览，并且还支持8种注释工具在线查看，团队可以发挥作用。上面的原型示例可以在这里盖章下载：http://doc.mockplus.cn/?p=1046
案例欣赏
仍然没有灵感？没关系。以下是Dribbble和Uplabs的一些经典浮动按钮设计案例，我希望能为您带来灵感。
在底部导航
功能和UI的组合被整合到整体颜色中。在设计中，下拉菜单占据了屏幕的一半，模糊了背景中的元素，突出了表单的重要性。菜单设计得非常简洁，所有选项都按垂直顺序排列，大量的空白区域确保文本处于主要位置。
流动切换动画细节增强了呼吸感，并为用户提供了感性和精细的操作反馈。
用户参与的FAB
这种FAB非常具有攻击性。激活后，毫不犹豫，垄断整个屏幕并占据主导地位。由于空间充足，设计成功地包括了所有重要方面，图标美观直观，体验强大而宽敞。在UI方面，作者巧妙地设定了焦点并带来了愉悦的视觉印象。
过滤菜单
这项工作使用FAB作为中心，使搜索过程更加高效和愉快，为用户提供更灵活的体验。必要的过滤器选项以弧形排列，每个都有一个精心设计的圆形图标。菜单面板也具有圆形形状，与按钮本身非常相似。通过这种方式，组件看起来很和谐。
总结
天桥按钮可能看起来很简单，但在APP设计中，您应该注意基本的设计规范，场景和用户体验。正确使用飞行按钮将对您的产品体验产生倍增效应。
