浮动动作按钮-即将流行的设计趋势

浮动动作按钮-即将流行的设计趋势

浮动操作按钮是一个轻量级、优雅、动态、快速和高效的助手,旨在支持主导航和增强用户体验。它只是一个随用户移动的小圆形元素,独立地凌驾于一切之上,作为一个规则,它附着在右侧,它能够扩展每个屏幕的功能,并使程序更方便。

正如谷歌规范所暗示的,按钮应该具有建设性的声音,并提供快速访问只有重要的仪器。该指南鼓励您装备它与各种状态之间的华丽过渡和平滑悦目的转换,选择直观和清晰的图形和充满活力和引人注目的设计,以及避免使用它的次要或破坏性的功能。我们收集了一小部分新的移动用户界面概念,这些概念已经掌握了这一新趋势。

浮动操作按钮

Instagram材料设计

由Chris设计的Instagram材质再设计(Part 1)有一个小的圆形按钮,上面有一个微妙的阴影,并被涂上了相应的深蓝色。它允许快速拍照,并为用户提供额外的功能。它伴随着大多数屏幕。

Instagram材料设计

Android & Wear应用生态系统

Stephan Castro利用了一个圆形浮动按钮,由于红色的色调,它与内容形成了鲜明的对比。它打开了五个小图标,图标的标题是用明亮的颜色制作的。它们是从下到上排列的。

Android & Wear应用生态系统

Magnet.me

Jules Holleboom采用与前面示例相同的方法。起初,它只是一个固定在页面底部的普通圆形按钮。当用户点击它时,它会平滑地显示另外三个垂直放置的图标。

Magnet.me

着色UI

Lois Yang在选择调色板方面做得很好,因为UI的内容非常多。明亮的实心红色背景与一个微妙的阴影将图标与内容流区分开,不引人注意地吸引注意力。

着色UI

亨利克·费雷拉的《流口水》

浮动按钮由优雅的半透明覆盖屏幕支撑。后者需要为图标和标题提供一个健壮的基础,因为应用程序填充了大量的yummy图像。轨道上的微小偏差给设计增添了趣味。

流口水

浮动动作按钮-添加媒体埃里克阿萨雷斯

o形的操作按钮位于页面的底部,包括四个按圆形排列的cta。以这种方式,他们可以很快地访问。每个图标都有一个相对巨大的尺寸,明亮的颜色,和一个清晰的可理解的字形。

浮动操作按钮

每日UI 010由本Transue

在这里,浮动按钮链接到一个大的侧栏面板,该面板从右侧出现,内容稍微向左移动。它与社交媒体相关联,包括所有流行的门户网站:Pinterest、Twitter、Facebook、谷歌等。

每日UI 010

Alex Riabushko的《连线》

按钮和它的cta设计成漂亮的平面样式和一种颜色。但是,悬停状态会将默认的蓝色变为亮黄色。圆圈内巨大的象形文字是直观和清晰的。该元素为用户提供视觉提示,以快速实现他们的目标。

附件

材料设计app PSD模板由Daniele De Santis

UI是在现代谷歌规范的最佳传统中创建的。经典的浮动按钮调用一个大面板,它几乎占据了整个屏幕,覆盖了“收件箱”部分所需的操作。更重要的是,这是一个免费的,下载并付诸行动。

材料设计App PSD

Smiley的移动用户界面

艺术家展示了许多功能屏幕的概念。正如您所看到的,几乎每个页面都有自己的动作按钮。后者使人联想到一个小而全高的面板,它位于左侧,占据了大约15%的空间。

移动用户界面

浮动操作按钮

浮动动作按钮由泰勒贝瑞打破了大部分列在我们的收集。它不仅抛弃了丰富的色彩和可爱的阴影,还在UI的顶部显示了一行图标。

浮动操作按钮

浮动动作按钮由Giulio“bart172”Smedile

虽然大多数按钮与其他按钮相关,但这个按钮与标准键盘相连。作者充分利用了这个漂浮的小助手。他还提供了两种状态之间的无缝过渡效果。

浮动操作按钮

UX Exploration - Gooey FAB by Paul van Oijen

浮动按钮在一行中演示了一组cta。它占据了屏幕的下半部分,并从一边放置到另一边。双色,单色画布,像素完美的符号和阴影创造了美学。

用户体验探索

Jochem van der Veer设计的拇指用户界面

这个概念使用了一个浮动的动作按钮,看起来与大多数按钮相似。它附着在右边,有一个简单和直接的外观,吸引眼球。在某些情况下,它与一个微型版的标志携手并进。

拇指用户界面

漂浮魔术按钮

浮动魔术按钮由李贾尔斯是高度简约的功能。它仅用于为用户提供对工作区的快速访问,用户可以在工作区中创建自己的书籍。设计符合材料标准,符合app的心情。

漂浮魔术按钮

马特·莱格斯皮(Matt Legaspi)的《核心安卓》(core Android)

这里的按钮与cta看起来优雅,复杂和精致。线条风格与美丽的双色配色,蓝色在其中大放异彩,达到卓越的美学效果,并将动作转化为焦点。

theScore安卓

通过并行实验室的用户参与FAB

艺术家使用了一个动作按钮,其设计与顶部导航栏轻轻呼应。它的目的是吸引用户,让他们在项目中感到舒适。它被链接到一个从右下角出现的弹出窗口,并占据整个屏幕。

用户参与FAB

mayur karodia的Alternacare

作者隐藏在浮动操作按钮过滤器下,让用户在几秒钟内整理出冗余信息并达到目标。由于大胆的外观和明亮的颜色,它不与内容融合,并立即打动眼睛。

Alternacare

Swipii应用概念

由Sarah Ahmad设计的Swipii应用程序的概念是基于几个新的解决方案。浮动按钮就是其中之一。它很好地实现了它的目的,使用户的生活更加轻松。它被放置在每个页面的角落,并显示一个带有二维码的弹出页面,以便快速扫描和收集点数。

Swipii应用概念

液体浮动动作按钮舒牧野

这是一个简短的gif动画,演示了浮动动作按钮的标准工作流程。它由平滑的过渡提供动力。它包括七个项目与优雅的形式,一个接一个地出现,并坚持在右侧。

液浮动作按钮

结论

浮动操作按钮很容易成为必备的,因为它是一种改进UI和UX的优雅而又相当简单的方法。为用户提供重要功能的快速访问,他们开门见山,使应用程序的使用快速、有效和富有成效。

你觉得这种新潮流怎么样?这是真正的增强吗?

2020-02-07 17:06
相关热门