广州做网站:如何使用有用的资源创建浮动操作按钮

2019.08.09 mf_web

197

Google新视觉语言中最受欢迎的组件之一是浮动操作按钮。基本上,它只是一个小圆形图标,用于快速访问提升的操作。然而,这种设计模式已经设法唤起了相当复杂的感觉。

虽然它被认为是一项重大改进,但一些开发人员认为它是一种用户体验杀手。这种争议并不令人惊讶,因为任何一种全新的技术它仍处于试用期,并且可以很容易地解释得很差或不正确。

如果您想从中获益,您需要一些背景知识,我们已经为您准备好了。我们的列表包含各种来源,包括库,插件和代码片段,可让您克隆组件并伪造其功能。

浮动动作按钮有用的资源

CSS3仅由Kyle Lavery复制Google Inbox FAB

此代码段展示了在CSS属性的帮助下创建的浮动操作按钮的副本。它具有相同的外观,带有微妙的阴影和优雅的动态行为。它与五个动作相关联,这些动作以带有标题的图标形式呈现。

仅限CSS3复制Google Inbox FAB

材料用户界面中的FAB

当然,这个庞大的UI包的一个主要组成部分是FAB。它有两种尺寸可供选择,可以设置背景颜色,覆盖内联样式等等。

材料用户界面中的FAB

适用于Android的浮动操作按钮库

该库允许您向任何由Android提供支持的界面添加一个小圆形浮动图标。要使库发挥作用,您需要安装Android SDK 9或更高版本。至于功能,您可以选择三种不同的尺寸和各种颜色; 添加阴影或中风; 或者应用像波纹一样的微小效果。

适用于Android的浮动操作按钮库

FAB过渡布局

这个小型FAB工具栏启发的库为转换添加了一个很好的触摸。它使圆形图标变成一个狭窄的,精心描绘的面板,贴在页脚上并具有几个基本功能。

FAB过渡布局

KC FAB

KC FAB是一个jQuery插件,用于再现浮动动作按钮,外观时尚,干净,明亮。生成的组件位于底部,并在单击后显示两个操作。通过HTML文件可以轻松增加许多功能。

KC FAB

Android浮动动作按钮

该概念的想法是为FAB提供更原生的行为。该插件创建一个响应滚动事件的按钮,当目标向上滚动时变为可见,当向下移动时变为不可见。

Android浮动动作按钮

浮动动作按钮

与前面的示例非常相似,这个小小部件的行为取决于滚动动作。因此,它可以在必要时隐藏或出现。作者还为它配备了几个自定义选项,使其成为一个非常通用的工具。

浮动动作按钮

由Mourad Majdoub设计的FAB菜单

虽然传统上材料FAB在垂直线上显示其子菜单,但该解决方案以其非标准圆形定位而着迷。所有快速操作都围绕主图标,可以通过鼠标或手指触摸设置为旋转。

FAB菜单

Daniel Kemper使用SVG和GSAP创建的更好的材料FAB菜单

开发人员结合了SVG和GSAP的功能,重新创建了更加改进的FAB版本。在这里,一组提升的动作占据了屏幕的一个相对较大的部分,并使用实心的圆形画布作为背景。结果,该组件具有更大的视觉重量。

带SVG和GSAP的FAB菜单

FAB转型

该图书馆旨在为业主提供对材料设计指南中描述的典型FAB变形的支持。它有两个选项:转换到底部的工具栏,以及转换为覆盖所有内容的工作表。

FAB转型

具有Gooey效果的Android Fab按钮

解决方案看起来很有趣。巧妙复制的Gooey效果使按钮产生了刺激性,使其看起来更加突出和原创。您可以更改菜单选项的数量,最小化或增加细节之间的距离,以及设置其他字形。

具有粘性效果的Android FAB按钮

纸FAB-菜单

这个小插件会在几秒钟内创建一个带有纸质元素的FAB。它为用户提供七种属性和三种方法,可以自定义以满足您的需求。请注意,默认情况下,组件是隐藏的。

纸FAB-菜单

由nobitagit提供的Angular.js材料浮动按钮指令

这个微小的Angular指令也以Vanilla HTML格式提供,它包含一个Material Design FAB,它具有适当的语义核心和无杂乱的代码。您可以将其放置在屏幕的任何部分,也可以通过选择多个选项来指定动画类型,包括幻灯片放入+淡入淡出,放大和喷泉。

Angular.js材料浮动按钮指令

FAB过渡

该库包含通过使用微小而精美的伴随动画丰富它来创造性地旋转FAB的方法。它有两种类型:工具栏动画和材质表动画。

FAB过渡

Android上的Fab和Dialog Morphing动画

该解决方案演示了从FAB到带有按钮和内容的标准对话窗口的变形。移动平稳,令人赏心悦目。面板遮盖了主屏幕并吸引了整个注意力。

Android上的Fab和Dialog Morphing动画

Kyle Lavery的材料设计过渡/动画

这是Kyle Lavery在我们的系列中的另一个项目,专门用于Material Design浮动操作按钮。它包括从圆形按钮到带有“关闭”图标和CTA的全屏模态窗口的转换。用它作为起点。

材料设计转型

由Chris St. Amant实现移动和平板电脑的FAB工具提示

该解决方案适用于小型或中型尺寸的接口,如手机或平板电脑。由于组件发生在右下角,并且有一些隐藏的动作在点击时变得可见。

实现移动和平板电脑的FAB工具提示

纯粹的CSS3动画分享FAB由Kyle Lavery

在这里,FAB被用作常规的“分享”按钮,可以快速逃离谷歌,Twitter和Facebook。可以通过代码文件轻松更改社交媒体图标的数量和类型。这个概念是轻量级和快速的,因为它只使用CSS。

纯CSS3动画分享FAB

Dribbble上的FAB

需要一些设计或动态行为的灵感?然后访问使用不同FAB示例的人口过多的Dribbble。在这里,您可以找到从传统到非传统的各种实现,无论是静态图像还是GIF动画。

Dribbble上的FAB

FAB到工具栏按钮

此库适用于构建FAB,该FAB将转换为Android界面上可见的小工具栏按钮。它平稳地漂浮在内容之上,隐藏在滚动上并变成纯正的CTA。

FAB到工具栏按钮

结论

广州做网站有多种方法可以复制Google的FAB。您可以使用插件,库或简单的代码片段,以最符合您的要求为准。虽然某些解决方案为您提供了现成的组件,但其他解决方案允许自定义,将动画分配给变形或仅改进形状和行为。


最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP