这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。

 

浮动操作按钮(FAB)代表一个页面的首要操作。

 

目录

  1. 用法
  2. 剖析
  3. 位置
  4. 行为
  5. 过渡类型
  6. 扩展型FAB
  7. 主题化
  8. 规格

 

用法

浮动操作按钮(FAB)在页面上执行首要或最常见的操作。它出现在所有页面内容的前面,通常是一个圆形,中间有一个图标。FAB有三种类型:常规型、迷你型和扩展型。

只在作为展示页面首要操作的最合适方式时,使用FAB

原则

 

剖析

  1. 容器
  2. 图标

 

容器

FAB通常显示在圆形容器中。 App的颜色方案决定了它的填充颜色,这应该与FAB背后区域的颜色形成对比。

FAB容器有两种尺寸:

1.默认(56 x 56dp

2.迷你(40 x 40dp

迷你FAB应该用在较小的页面上。当页面宽度为460dp或更小时,默认FAB56dp)的容器应转换为迷你尺寸(40dp)。

迷你FAB还可用于与其他页面元素建立视觉连续性。

这个迷你FAB通过其下方文件夹图标的对应尺寸、形状和位置来创建视觉连续性。

 

图标

FAB的图标应清楚地说明其动作。FAB不应包含页面上其他位置的通知或操作。

 

位置

FAB可以附加到顶部应用栏和某些组件的边缘。

浮动操作按钮(FAB)可以附加到顶部应用栏。

 

浮动操作按钮(FAB)可以附加到顶部应用栏。

单个组件(如卡片)不能各自拥有自己的FAB

 

行为

操作

浮动操作按钮(FAB)可以在当前页面上触发操作,也可以执行创建新页面的操作。

FAB可触发重要的、建设性操作,例如:

  1. 新建
  2. 喜欢
  3. 分享
  4. 启动一个过程

 

避免使用FAB进行不重要的或破坏性操作,例如:

  1. 存档或删除
  2. 警报或错误
  3. 限制性任务(如剪切文本)

 

更适合放工具栏的控件(如调整音量或字体颜色的控件)

使用FAB进行首要的积极操作。

不要将FAB用于轻微,溢出,不清楚或破坏性的操作。

 

动效

在整个用户流程中,FAB位置保持一致。

出现在页面上

FAB在页面上动时,它会从中心点向外扩展。其中的图标也可以是动的。

虽然FAB应与页面内容相关,但它们不会附加到所显示内容的表面。FAB由于其相对重要性而与其他UI元素分开移动。

页面转换

FAB可以变形以启动相关操作。当页面更改其布局时,FAB应该消失并在转换期间重新出现。

再现

只有当它与新页面相关时,FAB才会重新出现。如果可能的话,它应该重新出现在相同的位置。

 

标签式页面

当存在标签时,FAB应该短暂消失,然后在新内容移动到位时重新出现。这表示FAB未连接到任何特定选项标签。

在标签之间切换时,FAB消失然后重新出现。

 

在标签之间切换时,FAB不与页面内容一致移动。

 

过渡类型

快速拨号

按下时,FAB可以以快速拨号的形式显示三到六个相关动作。此转换可以通过以下方式之一进行:

  1. 按下后,FAB可以弹出相关动作
  2. 按下后,FAB可以转换为包含相关操作的菜单(仅限Android

 

如果需要超过六个操作,则应使用除FAB之外的其他组件来呈现它们。

 

发出相关动作

按下后,FAB仍然可见并发出一堆相关动作。如果在此状态下按下FAB,则应启动其默认操作或关闭快速拨号操作。

FAB显示一堆相关操作。

 

转换为包含相关操作的菜单

Android中按下FAB后,它可以转换为包含相关操作的菜单。遮罩表示暂时禁用了操作菜单之外的功能。只有点击了某操作或遮罩后,菜单才消失。

FAB转换为操作菜单

 

 

变形

FAB使用容器变形模式来变换成各种表面。

 

屏幕内

FAB可以转换为App中的另一个表面。变形应该是可逆的,并能将新表面转换回FAB。

FAB可以变形为App结构的一部分。

 

全屏

FAB可以转换为跨越整个页面的新表面。 这种类型的转换通常用于创建新内容。

FAB可以转换为跨越整个页面的新表面。

 

扩展型FAB

扩展型FAB更宽,它包含文本标签。

扩展型FAB

 

剖析

  1. 容器
  2. 图标(可选)
  3. 文字标签

 

容器

扩展型FAB容器的宽度可以是固定的或流动的。

  1. 固定宽度容器由图标、文本标签和内边距的累积宽度而定。
  2. 流体宽度容器由其与页面上诸如页面宽度或布局网格等内容的关系而定。

此固定扩展型FAB的宽度由图标、文本标签和容器填充的累积宽度定义。

 

此扩展的FAB容器宽度由布局网格而定。

 

图标

扩展型FAB的图标应直观地表示其操作。

对于从左到右书写的语言,图标应放在文本标签的左侧。

 

对于从右到左书写的语言,图标应放在右侧。

 

文本标签

扩展型FAB的文本标签应描述其行为。

 

位置

扩展型FAB可以位于页面的中央,左侧或右侧。

 

桌面和平板电脑

对于大于840dp的界面(例如桌面),扩展型FAB应放在页面的左上角或页面的右下角。

在桌面端,扩展型FAB位于左上角

 

在桌面端,扩展型FAB位于右下角

 

移动端

在移动设备上,扩展型FAB应位于右下角或底部中间。

在移动设备上,扩展型FAB应位于右下角或底部中间

 

在移动设备上,扩展的FAB位于右下方

 

避免在底部应用栏上方使用扩展型FAB,因为该组合会占用大量页面空间。如果它们已配对,则扩展型FAB应在滚动时折叠。

 

行为

快速拨号

当点击时,扩展型FAB还可以显示3-6个相关动作的快速拨号。在悬停时,这些相关操作会展开以显示标签。

在快速拨号转换期间,扩展型FAB变为标准FAB

扩展型FAB快速拨号

 

转换为标准FAB

如果空间有限,扩展型FAB可以转换为标准FAB。例如,如果App视区的大小调整为低于840dp,或者打开了导航抽屉。

 

扩展型FAB转换为标准FAB

 

当滚动页面时,扩展型FAB可以转换为标准FAB

在用户滚动回页面顶部之前,FAB不变回扩展型FAB

用户滚动到页面顶部后,扩展型FAB转换为标准FAB

 

主题化

Reply素材主题

此电子邮件App的浮动操作按钮已使用材料主题进行自定义。定制领域包括颜色和形状。

Reply自定义的FAB

 

颜色

Reply的扩FAB在两个元素上使用了自定义颜色:容器,图标和文本。

元素

类别

属性

容器

辅助色

颜色

不透明度

#FAAB1A

100%

图标

辅助色之上

颜色

不透明度

#232F34

100%

文本

辅助色之上

颜色

不透明度

#232F34

100%

 

文本

Reply的扩展型FAB在其按钮文本上使用了自定义排版。

元素

类别

属性

文本

按钮(Button)

字体

字型

字号

大小写

Work Sans

ExtraBold

15

全部大写

 

形状

ReplyFAB在其容器上使用了自定义形状。

元素

分类

属性

容器

小组件

Family大小

50%圆角

 

Posivibe’s材料主题

此社交媒体App的浮动操作按钮已使用材料主题进行自定义。定制领域包括颜色和形状。

Posivibe’s的自定义FAB

 

颜色

Posivibe’sFAB在两个元素上使用了自定义颜色:容器和图标。

元素

类别

属性

容器

辅助色

颜色

不透明度

#000000

100%

图标

辅助色之上

颜色

不透明度

#FFFFFF

100%

 

形状

Posivibe’sFAB在其容器上使用了自定义形状。

元素

分类

属性

容器

Override

Family

切角50%

 

Shrine材料主题

此零售App的扩展浮动操作按钮已使用材料主题进行自定义。定制领域包括颜色、排版和形状。

Shrine的自定义FAB

 

颜色

Shrine的扩展型FAB在两个元素上使用自定义颜色:容器和文本。

元素

类别

属性

容器

主色

颜色

不透明度

#FEDBD0

100%

文本

主色之上

颜色

不透明度

#442C2E

100%

 

文本

Shrine的扩展型FAB在其按钮文本上使用了自定义排版。

元素

类别

属性

文本

按钮(Button)

字体

字型

字号

大小写

Rubik

Medium

14

全部大写

 

形状

Shrine的扩展型FAB在其容器上使用自定义形状。

元素

分类

属性

容器

小组件

Family大小

切角半径4;4;4;4dp

 

规格

浮动操作按钮

常规型

迷你FAB

位置

 

扩展浮动操作按钮

 

位置

 

原文地址:Material Design

译者:珠珠

 

转载请注明:学UI网 » Buttons: floating action button 浮动操作按钮

登录收藏
 
你可能喜欢的:
业务想大多全,用户要精准简,首页设计该如何破局?业务想大多全,用户要精准简,首页设计该如何破局?
案例锦囊|交互设计中「情感化」设计优秀案例(二)案例锦囊|交互设计中「情感化」设计优秀案例(二)
这个练习虽然已经不错了,但我觉得还可以有以下几点能优化!这个练习虽然已经不错了,但我觉得还可以有以下几点能优化!
iOS 规范与 Material Design 哪里不同?官网总结了这几点iOS 规范与 Material Design 哪里不同?官网总结了这几点
百度这一局改版,内容导向设计做得真行!百度这一局改版,内容导向设计做得真行!
微信生态中的设计(上) | 设计师如何通过生态视角找到设计优化点?微信生态中的设计(上) | 设计师如何通过生态视角找到设计优化点?
酷家乐优秀设计频道改版酷家乐优秀设计频道改版
如何用新风格引爆业务增长如何用新风格引爆业务增长
一局APP首页 改版设计分析一局APP首页 改版设计分析
干货|交互设计中的「有效反馈」7大准则!干货|交互设计中的「有效反馈」7大准则!