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

相关推荐

  • Welcome to the Gutenberg Editor

    The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of pieces of content—somewhat similar to LEGO bricks—that you can move around…

    2023-03-03
  • 用户体验设计上的6个关键见解

    用户体验在产品设计中的重要性不言而喻,但是并不是所有的产品经理都能在用户体验设计上做到完美。入行产品经理那么久,也许你已经能特别熟练的写PRD,轻而易举的用Axure画原型,甚至还能用Axure实现“打飞机”,但是却做不到将用户体验设计上升一个新层次?如果这也是你目前遇到的情况,那么请认真看看这篇文章,它或许会给你一个答案。 “如果你不能说出你的想法,就算这些想法非常的棒,它们也不会存活。” “伟大的设计就像在讲诉一个故事。”“太多的文本信息并不会增加太多的价值。”

    2017-05-23
  • 你的APP引导页,为啥用户会忽略?【UXRen译#159】

    作者:Anthony  |  翻译:冬柏,校审:小四   对于一个新的App产品来说引导页就是它的说明书。当新用户第一次使用时,就可以通过引导页简要的了解到整个App的特征,所以这对新用户来说是很必要的。 但是如果引导页…

    交互专题 2017-08-07
  • 关注 Web 设计

    相较于设计教程,这样的问答对于个人来说更有针对性,离我们日常的设计工作更近一些。我个人也有这样的体会,有时会有一两个问题长期停留在脑子里,得不到解决,偶然的碰到刚好涉及到这方面的文章,会有一下子豁然开朗的感觉。所以这样的形式也是非常有价值的。以下就是第1周的所有问题和答复,希望在设计对大家有所帮助。

    2015-01-03
  • 对话界面的现在与未来

    计算机与人类并不使用同一种语言。所以为了之间的交互成为可能,我们依赖于图形化的用户界面(GUIs)。但是GUIs同样有着天然的屏障:人们必须去学习如何使用他们。他们不得不去学习一个汉堡icon隐藏着一个菜单,这是一个button触发一个操作。但是随着技术的发展,语言识别和处理效率的提高改善,我们当前的交互方式正在变得更直观,简单而又高效-通过对话界面

    2016-07-20
  • 聊聊蒙版引导的应用场景以及设计建议

    蒙版引导一直是一个十分热门的话题,对于很多用户来讲经常会不彻底阅读甚至快速关闭来结束引导,这样便起不到很好的教育作用。甚至还有“在界面上添加这些并不会让你的产品变得更易用”的说法(观点引自文章“Misused mobile UX patterns”)。但我认为这种说法过于片面,对于一些流程复杂或者功能个性的产品应用,添加蒙版引导进行说明,是十分有必要的。

    2017-05-11
  • UED新刊 | 马岩松:梦露十年

    UED105期《MAD国际实践专辑》现已开始预售更有30本马岩松亲笔签名版,只限预售!具体购买详见文末互动福利PART 1新刊导读尽管频频有人发问,中国建筑为何迟迟未能冲出亚洲、走向世界,然而这是个太过深广的课题,涉及文化、经济、 政治、意识形态等等诸多方面,并不是三言两语甚至是一期杂志就能说清楚的。在这样的大背景下,马岩松和他的MAD 建筑事务所在国际上的实践探索,便分外独树一帜、另人瞩目。2004年,马岩松在纽约创办MAD建筑事务所...

    2018-02-07
  • 污力传感器——当飞机杯都有了交互体验

    污力传感器入门枕边人这是一个高科技枕头,包含一个指环和一个内置在枕头里的扬声器。当用户带上指环设备将获取用户的心跳。通过智能手机应用控制从而将信号传送到对方枕头内的扬声器中,用户靠到枕头上就仿佛实时听到爱侣的心跳!该枕头还会微微发光哦,是不是更加温馨甜蜜。污力传感器进阶Kissenger它是一款可以将远在千里之外恋人的亲吻传送到面前的装置,是不是听上去晕乎乎的?请收看以下视频:硅胶唇下嵌有高精度力传感器,用以测量吻时嘴唇不同部位的动力,...

    2018-01-30
  • 叶云燕:不懂用户体验,没有互联网思维的代理人,迟早会被淘汰!

    第1937期|编发/保险论坛互联网时代,到处都在谈如何用互联网思维做生意。有人用互联网思维卖奶茶,销售额翻倍;有人用互联网思维开理发店,已获得数千万融资;有人用互联网思维卖衣服,年利润过亿;而当我第一次提出要用互联网思维卖保险时,很多人都感到茫然,认为这不过是赶时髦,蹭热点。保险代理人的新机遇事实上,互联网时代的到来,对保险代理人来说是一个前所未有的机遇,它让代理人的品牌形象更加丰满,展业渠道更加多样化。更重要的是,互联网思维的核心是以...

    2018-04-25
  • 如何让设计效果可量化

    前言: 做搜搜这些年一直沉浸于重点工作中的项目,除了定时写项目总结与培训。都快忘记写文章很抱歉。这次终于有了重新学习机会,应该多写。 长久一来也是思考如何让我们每天面对的工作内容更直观价值体现与量化。 …

    2015-04-13