宁海网站建设：设计出色的浮动动作按钮的秘诀

浮动操作按钮可以大大增强用户体验。本文介绍了浮动操作按钮的基本原则，用法和实践。

作为Android UI中最重要的元素之一，浮动操作按钮起着重要作用。它始终是最迷人和最直观的元素，并呈现出高效的行动。FAB的基本准则是什么？哪里可以使用？我们来看看这篇文章。

FAB指南

第1步：为FAB选择合适的大小

浮动动作按钮的特征在于浮动在UI上方的带圆圈的图标，并具有包括变形，启动和传输锚点的运动行为。通常有两种尺寸，默认版本和迷你版本（仅用于创建与其他界面元素的视觉连续性）。

默认大小一般为56 * 56 dp，迷你版大小为40 * 40dp。当界面宽度小于460dp时，需要将其从默认大小（56dp）调整为迷你大小（40dp）。

第2步：仅将FAB用于积极行动

浮动按钮通常带有主要的代表性动作。通常，它应该是积极的互动，例如创建，分享，探索等。唯一的android按钮设计不应执行破坏性操作，例如删除，存档。它不应该是非特定的或不完整的。例如，剪切和粘贴是一组复合交互，应该存在于菜单栏中而不是浮动按钮中。

第3步：大屏幕上的FAB

浮动按钮可以放置在扩展的APP条，工具栏或结构元素上（不会妨碍其他元素），也可以放在大屏幕上的表单边缘。您应该注意每个页面只能出现一个浮动按钮，也不会将浮动按钮与页面上的所有元素相关联。浮动按钮本身非常醒目，按钮的滥用会分散用户的注意力。

FAB的用途

触发

浮动按钮可以轻松触发操作或在某处导航。它通常用于触发功能，菜单或导航。

工具栏

单击或滚动时，浮动按钮可以转换为工具栏。工具栏包含相关操作，文本，搜索字段等。当用户滚动显示他们有兴趣阅读更多信息时，滚动消失的工具栏将大大节省屏幕空间并为用户带来更流畅的体验。

变形

fab按钮可以转换为APP结构的一部分。借助动态效果，它可以扩展到整个屏幕，甚至可以成为一个单独的界面，成为切换界面的动态集线器。Google材料设计指南要求：

“当变形浮动动作按钮时，以逻辑方式在起始位置和结束位置之间转换。例如，不要穿过其他材料。

变形动画应该是可逆的，并将新的材料片段转换回浮动动作按钮。“

触发并扩展一系列操作

除了单功能触发器之外，FAB更常用于触发一系列操作，以用一组相关的常用浮动按钮替换原始单个交互。

作为一般规则，这组扩展按钮应该大于3但小于6.否则，它违反了快速，高效的原则。

浮动动作按钮的做法

在弄清楚浮动按钮的基本指导和使用后，您可以尝试开始自己的设计实践。有两种进入方法。

原型设计

如果您对如何使用产品上的浮动按钮有初步了解，可以使用Mockplus快速对其进行原型设计。

Mockplus是一款免费的一体化Web UI模型工具，允许您为移动设备（Android和iOS），桌面（PC和Mac）和Web应用程序创建模型，这有助于确保特定模型与所有设计最佳实践相匹配。

样品

还没有灵感？没关系。这3款精心挑选的经典浮动按钮设计案例，相信它们会为您带来灵感。

设计师非常注重可用性，但也记得考虑到帐户设计和动态成分。

在这里，下拉菜单 占据了屏幕的一半，稍微模糊了背景上的元素以强化其重要性。伴随动画的详细流体有助于总体印象。

用户参与的FAB

这种FAB看起来非常激进。激活后，表格毫不犹豫地占据整个屏幕。由于空间充裕，设计成功地包含了所有重要元素。图标美观直观，提供强大而宽敞的用户体验。作者巧妙地设定了焦点，为UI设计带来了愉悦的视觉感受。

过滤菜单

设计人员使用FAB作为中心，使搜索过程更加高效和愉快，为用户提供更灵活的用户体验。必要的滤波器选项以弧形排列。他们每个人都有一个精心设计的圆形图标。菜单面板呈圆形，类似于按钮本身。所有这些因素使组件看起来和谐。

摘要

浮动操作按钮在App设计中看起来像是一个简单的动画，但是您应该注意很多细节，例如基本指南，场景和用户体验。正确使用浮动按钮将为您的产品体验带来倍增效果。