恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
用浮动操作按钮(FAB)提升UX的5种方式
0.0°
2018-03-05 自译外文 设计趋势 原作者: Fireart Studio 举报 7085 111 105 11

Floating Action Button (FAB)(FAB)是浮动在用户界面上方的图标。它的形状,位置和颜色使它与界面的其余部分明显区分开来。

在2014年Google推出了Material Design之后,FAB作为一个用户界面元素,被广泛应用于网站设计和移动设计中。

虽然FAB可能被视为一个微小的,无关紧要的UI组件,但其效果是至关重要的。在本文中,作者将介绍5种用FAB提升用户体验的方式。


1. 代表标志性操作

理想情况下,FAB应该突出显示最相关或经常使用的操作,它的操作可以突显当前APP最主要的特征。如果你要在你的APP中使用FAB,务必仔细考虑APP的设计原理,并将用户的可能操作归结为一个最显著的功能。例如,音乐APP可能具有表示“播放/停止”的FAB。一个像Instagram的应用程序可能有一个代表“拍照”的APP。


根据Steve Jones的研究,FAB在用户首次使用时表现出轻微的负面可用性影响。然而,一旦用户使用FAB成功完成任务,他们能够比使用传统的操作按钮更有效地使用它。



2. 作为一种提示工具

FAB可以作为一个非常自然的操作指引,告诉用户下一步该做什么。Google的研究表明,当面对不熟悉的屏幕时,许多用户依靠FAB来导航。


在Twitter中使用浮动动作按钮鼓励用户发布内容


3.提供一系列操作

在某些情况下,如下面的Evernote示例中可以看到的,FAB适合旋转出来并公开其他一些选项。FAB可以用一系列更具体的操作替代自己,并且可以将它们设计得与用户正在阅读的上下文相关。根据经验,选项的数量需控制在3-6个(包括原始浮动动作按钮目标)。

Image title



这些操作必须与FAB本身表达的主要操作相关联,且彼此关联。例如下图


“我在哪里”行动与创建内容动作无关。

4.结合使用情景

使用情景在用户交互中起着重要的作用。有时用户想消费内容,有时候他们想要执行动作。这一切都取决于使用情景。联系使用情景可以将FAB应用于任何APP的用户体验线路中。以Google+为例。


当用户正在使用信息流时,Google+会显示FAB,并在信息流停止时隐藏它。这两个状态依赖于使用情景:当用户使用信息流时,主要的操作是滚动,因此不需要FAB,当用户停止滚动时,他们可能会发布一些内容。


5. 连接两个状态

FAB不仅仅是一个圆按钮,它具有可变化的属性,这种属性可以用于帮助用户适应从一个屏幕跳转到到另一个屏幕。以下示例中的动画可以维持用户的方向感,并帮助用户了解视图布局中刚刚发生的变化,发生变化的原因,以及如果日后需要,如何再次启动变化。

Image title

图片来源:Ehsan Rahimi

Image title


图片来源:Dribbble



结论

有人会说FAB是不利于用户体验的。因为我们都已经习惯了熟悉的工具栏,而FAB的概念对我们来说还是比较新的,使用起来并不习惯。然而,尽管适应新事物是艰难的,但新事物却为我们的生活带来革新。正确合理地使用FAB可以为为用户带来更精心设计的用户体验。









更新:2018-03-05

收藏

111人已收藏

阿肆Stella

一些产品设计相关的真直拙见,偶尔翻译国外好文

  • 17

    作品

  • 2201

    粉丝

  • 36

    关注

  • 教你打造【0失误神器】—交互设计自查表
  • 5个技巧让你的图片【瞬间吸引眼球】
  • 写错误提示的正确姿势
  • 开屏三兄弟了解一下——闪屏/启动页/引导页

    猜你喜欢

      2018-03-05 自译外文 设计趋势 原作者: Fireart Studio 举报 7085 111 105 11

      用浮动操作按钮(FAB)提升UX的5种方式

      0.0°

      你确定要举报用浮动操作按钮(FAB)提升UX的5种方式

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年10月15日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      105
      111
      11

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录