【UXRen原创】Floating Action Button——Material Design专题分享(22)

md-16-00

非凡回来了,今天继续讲Floating Action Button

  1. Floating action button
  2. Behavior
  3. Transitions
  4. Large Screens

上一节是描述悬浮响应按钮的基本特性,这节主要描述它的使用行为和变化。

 

2、Behavior

悬浮响应按钮正在屏幕中的动画就像一块有扩展性质的材料,而且图标是可动的。由于它的相对重要性和层级不同于其他UI元素,因此它的出现和移动也区别于其他UI元素。

需要考虑它与其他UI元素的出现和消失次序和方式。

先来看看它的基本出现和消失的动画。

  • components-buttons-fab-behavior_01_xhdpi_012
  • components-buttons-fab-behavior_02_xhdpi_012

情况:当悬浮响应按钮在页面切换时,例如tabs 切换,多个页面之间的切换。

表现:如果每个行为是不一致的,在进入每个页面时,需要进行出现和消失的动作。如果行为一致,则留在屏幕中(如果需要可以移动位置)

具体表现动画为:
  • components-buttons-fab-behavior_03_xhdpi_001
  • components-buttons-fab-behavior_04_xhdpi_009
错误示范:

在tabs切换中,悬浮响应按钮不应该与页面在同一个方向退出,这会导致很大的视觉干扰,同时在移动中还作为一个没有意义按钮出现在屏幕中。此外,错误按钮悬浮响应按钮与页面内容在同一个z轴高度上,而不是在主层级中作为主要的UI元素存在。

错误示范动画:
  • components-buttons-fab-behavior_05_xhdpi_009
  • components-buttons-fab-behavior_06_xhdpi_009

 

3、Transitions

悬浮按钮是一个应用中的核心操作按钮,利用它的独特性和显眼的位置创造一个舒适的操作元素。

常见的转换包括触发、弹出按钮、工具栏、变形。这种转换不是出现详细的列表,它的使用是灵活多变的,设计时,让转换适合应用场景以及界面的布局展示。

Trigger

悬浮响应按钮可以简单触发或者取消一个操作。触发时产生涟漪扩散,作为元素变化的触发征兆。

请看这种转化的动画:

  • components-buttons-fab-transition_trigger_01
  • components-buttons-fab-transition_trigger_02

其中动画2,使用了两个悬浮响应按钮,因为他们执行同样重要但不同的操作。可见它的用法是灵活的。

Toolbar

悬浮按钮可以在点击的时候变成工具栏,滚动的时候回复原状。工具栏可以包含相关操作、文本、搜索区域或者其他当前有用的项目。

它的使用动画如下:
  • components-buttons-fab-transition_toolbar_01
  • components-buttons-fab-transition_toolbar_02

在浏览一长串信息的时候,上滚动时,工具栏消失,在最初进入或者顶部和底部时出现工具栏,这种用法非常有效,另当前浏览的空间变大同时减小视觉干扰。

这点在《五月》APP中就出现过,让工具栏始终存在于底部时对当前用户行为的持续性干扰,工具栏不是当前必要的操作,为了鼓励用户分享、收藏而强加在此处是不划算的,打破了用户的良好体验。

请看官方给出的动画:
  • components-buttons-fab-transition_scrolltoolbar_01
  • components-buttons-fab-transition_scrolltoolbar_02

最后需要注意一点:工具栏类不要不选不想管的或者产生混淆的操作。

md-22-01

图为正确用法,三个相关操作

md-22-02

图为错误用法,出现不相关操作(第二个)。

 

总结:

今天主要内容是:悬浮响应按钮的使用中,1 再切换中的出现和消失变换运用,不同的操作在页面切换时,需要表现出现和消失。2 触发交互和转化工具栏的用法。

好了,本次分享结束。下期再见。

 

feifan-logo
作者:邬非凡,现互联网交互设计师,崇尚自然设计并将生活情感与设计相结合,目前死磕Material Design 分享和学习。非凡语录“享受生命的过程”
 
======================================================================================= 不知不觉本网站已经一岁半了, 在这里小编要感谢那么一如既往支持本站的油茶人。 同时也欢迎各位喜欢13太保的同学们把自己收集的好资源一起分享给更多油茶人,如果有意愿在网站发布原创性的文章也欢迎随时和我们联系!我们收到邮件后会认真的查看和回复。 投稿邮箱:contact@13tech.com.cn
=======================================================================================

 

发表评论

您的电子邮箱地址不会被公开。