FAB实践分析:设计中的悬浮按钮

如果要在应用程序中使用FAB,则必须仔细考虑应用程序的设计,并将用户的可能操作归结为一个最突出的功能。正确使用FAB,最终会给用户带来惊人的帮助。为了促进操作,不要一味使用FAB!用户必须记住它的含义。FAB可以改善屏幕之间的转换


如果要在应用程序中使用FAB,则必须仔细考虑应用程序的设计,并将用户的可能操作归结为一个最突出的功能。正确使用FAB,最终会给用户带来惊人的帮助。

FAB实践分析:设计中的悬浮按钮

悬浮按钮(FAB)是Android应用程序中一个非常常用的控件。像一个漂浮在用户界面上的圆形图标,为设计师调用应用程序关键部分的产品故事。FAB是非常简单且易于实践的UI元素,但设计师往往不能正确的纳入设计中。在本文中,你将找到有关以下问题的答案:

  • 什么时候使用FAB?
  • 什么是FAB的最佳实践?
  • FAB和动画如何共同改善UX?

什么时候使用FAB?

标志性操作

FAB强调相关或经常使用的操作。它应该用于具有很强特性操作的应用程序中。理想情况下,FAB应该代表整个应用程序的核心功能,就像下面的例子一样。

FAB实践分析:设计中的悬浮按钮

悬浮按钮表示应用程序中的主要操作。在此屏幕上暂停或恢复播放会告诉用户它是一个音乐应用程序。

作为找到方法的工具

FAB是告诉用户下一步做什么的自然提示。Google的研究表明,当面对不熟悉的屏幕时,许多用户依赖用FAB来导航。因此,FAB作为重要的路标非常有用。

FAB实践分析:设计中的悬浮按钮

Twitter使用FAB写一个引用操作。

不是每个屏幕都需要FAB

FABs是丰富多彩且可破坏的。因为它们被设计得很突出,发现这些按钮是非常容易的。但不是每个屏幕都应该使用FAB,因为不是每个屏幕都需要这一重要性的操作。

为了促进操作,不要一味使用FAB!

适用于Android的Google Photos app就是一个很好的例子。该应用程序在图库的视图中打开,该视图具有用于搜索的悬浮操作的按钮。

FAB有两个问题:

  • 搜索是大多数用户的额外操作。主要任务是照片浏览。因此,不需要FAB。
  • FAB的存在可以分散用户的注意力,让用户远离主要内容(照片)。

FAB实践分析:设计中的悬浮按钮

搜索是Google相册的额外操作,不需要FAB

提示:查找屏幕的主要操作可能比第一次看到困难得多。为了简化任务并了解是否需要FAB在你的UI中使用一个简单的五分钟规则:如果你在屏幕的主要搜索操作超过了5分钟,很明显这里不需要FAB。

FAB的最佳实践

避免mystery meat导航

术语“mystery meat导航”是由Vincent Flanders介绍,Vincent Flanders是著名网站 Web Pages That Suck.的创始人。它指的是用户必须利用按钮和链接来查找接下来做的事情。

FAB是一个仅图标的按钮,问题是icons are really hard to understand,因为它们是如此开放的解释。正如NNGpoints out,普遍认可的图标很少见。例如,你能猜测下面的例子中的按钮是用来做什么的吗?

FAB实践分析:设计中的悬浮按钮

FAB在这里是什么意思?

在你点击之前,你一定不知道。如果用户需要猜测,你的按钮是mystery meat.。有人说,发现这些图标需要很短的时间,而且风险低。通过点击它可以看出找到一个可能相当小的图标意味着什么。但是有一个认知的负担:

用户必须记住它的含义。

将所有的mystery meat图标叠加在你所有的应用程序中,这是个很大的工程。

只有使用图标按钮才可以接受,而且要确保用户与相关语境的清晰。语境帮助用户解释图标按钮和其操作。例如,如果你有一个笔记应用程序,很明显,应用程序的主要目的是采取和查看——注释。“笔”图标将在这种情况下的作用是非常大的。

每屏幕只能使用一个FAB

因为FAB是如此的突出和具有侵入性,所以FAB在页面上应该使用一次,或者根本不使用。

FAB实践分析:设计中的悬浮按钮

屏幕上没有多个悬浮按钮。

仅使用FAB进行积极的操作

因为FAB是有特色的,所以通常是一个积极的操作,如创建、分享、探索等等。FAB也应该具有破坏性的操作,如删除或归档。它们不应该是非特定的或警告的,有限的操作,如剪切和粘贴文本,或者应该在工具栏中进行的操作(例如:改变音量)。

FAB实践分析:设计中的悬浮按钮

该功能应该是一个让用户对使用FAB感到开心的操作,而不用担心会发生错误。图片来源:Material Design

FAB和动画

悬浮按钮的设计具有灵活性。FAB可以扩展,变形或发生反应。

扩展一组操作

在某些情况下,按钮可以旋转出来并暴露其他几个选项(如下面的Evernote示例所示)。 FAB可以用一系列更具体的操作来替代自己,并且可以将它们设计为用户的语境。但请记住:

  • 这些操作必须与FAB本身所表达的主要操作相关联:如果它们位于工具栏上,不要将这些的操作视为独立的。
  • 作为一般规则,按新闻至少有三个选项,但不得超过六个,包括原始悬浮按钮目标。

FAB实践分析:设计中的悬浮按钮

悬浮按钮会抛出相关的操作。

FAB可以转变成新的界面

FAB不仅仅是一个圆形按钮,它还具有一些变革性的属性,你可以用它来帮助用户从一个屏幕到另一个屏幕。悬浮按钮可以转换为作为应用程序结构部分的视图。

FAB可以改善屏幕之间的转换

当悬浮按钮变形时,以逻辑方式在开始和结束位置之间转换。例如,下面的示例中的动画维护用户的方向感,并帮助用户了解视图布局中刚刚发生的更改,如果需要更改内容,稍后再次启动更改。

FAB实践分析:设计中的悬浮按钮

图片来源:Ehsan Rahimi

滚动时可以隐藏FAB

当向下滚动(如果阻碍用户阅读内容),FAB可以被隐藏。在下面的例子中,FAB需要可以移出方式,以便列表项的所有部分实际上都可以访问。

FAB实践分析:设计中的悬浮按钮

隐藏FAB以最大化专用于列表的视口区域。图片来源:Juliane Lehmann

Android的中等应用程序是使用此技术的一个很好的例子。心脏按钮消失在滚动,只有当喜欢文章的读者想要使用按钮时,在文章结尾达到时才会重新出现。

结论

如果要在应用程序中使用FAB,则必须仔细考虑应用程序的设计,并将用户的可能操作归结为一个最突出的功能。正确使用FAB,最终会给用户带来惊人的帮助。

感谢您的阅读!

 

译者:SKYUI

原文作者:Nick Babich,Nick is a software developer who’s passionate about user experience.

原文地址:https://uxplanet.org/floating-action-button-in-ux-design-7dd06e49144e

本文由@SKYUI 翻译发布于人人都是产品经理,未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/22226/

(0)
CatherineCatherine
上一篇 2017-04-30 23:22
下一篇 2017-05-01 01:23

相关推荐

  • 浙大教授告诉你用户体验的知识、内容、流程

    作为一门新兴学科,在具体的设计操作过程中,用户体验设计吸取了多个学科的知识。除了第一章所讲述的面向人的学科和面向技术的学科之外,还包括面向设计的学科。面向人的学科包括心理学、生理学、社会学、文化学、语言学、哲学和美学等方面的知识;面向设计的学科包括工业设计、艺术设计、数字媒体设计和动画设计等;面向技术的学科主要指信息沟通技术,涉及到计算机技术、信息技术、电子技术、网络技术、软件工程、人机交互技术和数据库等。

    2017-05-29
  • 我不知道的“用户体验”

    在梁宁《产品思维30讲》的“用户体验”模块共包含5讲,分别是:用户体验的五个层次怎样绘制用户体验地图服务蓝图的核心要素:峰值、终值上瘾机制:用户激励系统名字是你的文化资产作为一名从未系统学习过用户体验和产品设计的PM来说,这个模块可谓干货多多(具体内容请详见下面的思维导图)。先打好理论基础,从用户/人性的角度出发将用户体验分为五个层次;然后抛出两个方法论,一是绘制用户体验地图用讲故事的形式获取用户情绪曲线;二是考虑到资源和成本控制的约束...

    2018-02-20
  • 完美界面设计秘诀:界面设计的八大黄金法则

    只要你的设计涉及到人与界面之间的交互,这八大规则在设计过程中至关重要。“这个功能减轻了焦虑,因为用户知道即便操作失误,之前的操作也可以被撤销,鼓励用户去大胆放手探索。”

    2017-08-04
  • 抛砖引玉——VR应用UI设计心得

    “2016是VR元年”,这一观点早已在计算机互联网行业中流行开来,与VR相关的各种分析研究也是层出不穷,包括盈利模式、发展预测、平台构建等。而随着Google Cardboard等技术逐渐普及,VR使用成本也在不断降低。因此在未来,VR技术对于日常生活的影响,也将变得非常令人期待。目前很多VR应用不在以PC端为主要载体,而是将平台选定为保有量大、技术成熟的手机作为硬件平台。而UI作为应用中一个重要组成部分,其对于用户体验和产品推广的重要性可想而知。笔者想借此机会简单分享一下个人对于VR应用UI设计的心得和体会。(注:笔者在下文中所指的VR模式指用户已经带上VR体验设备,双眼通过分屏已经进入沉浸式体验情况)

    2017-05-28
  • Axure小白,快速做出冲顶大会高保真原型,全靠它(附源文件下载)

    Hi,大家好我是Axure实战班萌萌哒的班主任Sara(*^▽^*)这是一篇很有内容的Axure班介绍文章如果你被Axure困扰想快速玩转Axure,做出标准的原型图想写出规范的原型说明,掌握产品交互那么花3-5分钟了解下这个实战班吧,2000多位同学报名学习了,不会错的~先给大家看看我们班liwen同学,做的冲顶大会gif图喔,真的很棒棒耶(*╹▽╹*)(福利资料:添加班主任Sara为好友,可获取“冲顶大会”原型文件。Sara微信见文...

    2018-03-26
  • 好的产品经理是什么样的?

    互联网界自从出了几个大神级的产品之后,产品背后的产品经理被捧红了,一时间产品经理成了诸多行业从业者追求的目标,每个人都期望有一天也能做出一个很牛的产品来,这种影响导致了很多刚毕业的学弟学妹,都认为产…

    2014-11-12
  • 干货!Sketch49交互原型新功能大解析

    2月28日发布了Sketch49新版本的消息,笔者打开了官网看到了最新的版本更新视频,确实还是挺激动的。觉得Sketch按照这样的发展趋势,马上就能“统一六国”了,哈哈。一起来看看Sketch49的版本更新了哪些新功能吧!(先看介绍,使用教程在后面哦!)亮点一:交互原型功能画板(Artboards)和热区(Hotspot)链接实现页面间的跳转,实现动态交互原型(类似交互软件Marvel中的热区链接 )Sketch49版本中的交互原型预览...

    2018-03-07
  • 关于创意,国外设计师用垃圾制作的插画,震惊到我了。

    本文来源于交互设计网:我是UE网,小编:阿西巴巴 图片来源:互联网 有些生活中的日用品或消耗品产生的垃圾我们随手都丢掉了,不过在设计师眼里这些也可能价值数十万美元。她是如何变废为宝的呢? 下面是作品: 我真…

    2015-04-20
  • 如何平衡用户体验和商业变现

    互联网公司往往会面对怎样平衡用户体验和商业变现的问题。其中最常见也是最典型的代表就是,作为互联网公司商业模式之一的广告,某种程度上会影响用户体验。比如广告数量过多、与用户需求根本不相关等,这都会引起用户的反感。而在Facebook看来,这并非是一个无解的问题。在1月21日举办的2018极客公园创新大会上,Facebook工程总监范鹏分享了Facebook平衡用户体验与商业变现问题的4个原则。范鹏认为,用户体验与商业变现之间产生的问题其实...

    2018-02-10
  • 短期记忆与用户体验:为脑力的局限而设计

    人类大脑不适于抽象思考和记忆数据,但网站常常要求我们这么做。许多可用性指南都取决于认知局限。

    2017-04-27