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

　　悬浮按钮(FAB)是Android使用法式中一个十分经常使用的控件。像一个漂泊正在用户界里上的圆形图标，为设想师挪用使用法式枢纽部门的产物故事。FAB长短常简朴且易于理论的UI元素，但设想师常常不克不及准确的归入设想中。本文中对FAB做了具体的引见，以便UX设想师的利用。

　　悬浮按钮(FAB)是Android使用法式中一个十分经常使用的控件。像一个漂泊正在用户界里上的圆形图标，为设想师挪用使用法式枢纽部门的产物故事。FAB长短常简朴且易于理论的UI元素，但设想师常常不克不及准确的归入设想中。正在本文中，您将找到有闭以下成绩的谜底：

　　1. 甚么时分利用FAB?

　　2. 甚么是FAB的最好理论?

　　3. FAB战动绘怎样配合改进UX?

　　甚么时分利用FAB?

　　标记性操纵

　　FAB夸大相干或常常利用的操纵。它该当用于具有很强特征操纵的使用法式中。幻想状况下，FAB该当代表全部使用法式的中心功用，便像上面的例子一样。

　　悬浮按钮暗示使用法式中的次要操纵。正在此屏幕上久停或规复播放会报告用户它是一个音乐使用法式。

　　做为找到办法的东西

　　FAB是报告用户下一步做甚么的天然提醒。Google的研讨表白，劈面对没有熟习的屏幕时，很多用户依靠用FAB去导航。因而，FAB做为主要的路标十分有效。

　　Twitter利用FAB写一个援用操纵。

　　没有是每一个屏幕皆需求FAB

　　FABs是丰硕多彩且可毁坏的。果为它们被设想得很凸起，发明那些按钮长短常简单的。但没有是每一个屏幕皆该当利用FAB，果为没有是每一个屏幕皆需求那一主要性的操纵。

　　为了增进操纵，没有要一味利用FAB!

　　合用于Android的Google Photos app便是一个很好的例子。该使用法式正在图库的视图中翻开，该视图具有效于搜刮的悬浮操纵的按钮。

　　FAB有两个成绩：

　　1. 搜刮是年夜大都用户的分外操纵。次要使命是照片阅读。因而，没有需求FAB。

　　2. 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正在那里是甚么意义?

　　正在您面击之前，您必然没有晓得。假如用户需求推测，您的按钮是mystery meat.。有人道，发明那些图标需求很短的工夫，并且风险低。经由过程面击它能够看出找到一个能够相称小的图标意味着甚么。可是有一个认知的承担：

　　用户必需记着它的寄义。

　　将一切的mystery meat图标叠减正在您一切的使用法式中，那是个很年夜的工程。

　　只要利用图标按钮才能够承受，并且要确保用户取相干语境的明晰。语境协助用户注释图标按钮战其操纵。比方，假如您有一个条记使用法式，很较着，使用法式的次要目标是采纳战检察——正文。“笔”图标将正在那种状况下的做用长短常年夜的。

　　每屏幕只能利用一个FAB

　　果为FAB是云云的凸起战具有侵进性，以是FAB正在页里上该当利用一次，大概底子没有利用。

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

　　仅利用FAB停止主动的操纵

　　果为FAB是有特征的，以是凡是是一个主动的操纵，如创立、分享、探究等等。FAB也该当具有毁坏性的操纵，如删除或回档。它们不该该长短特定的或正告的，有限的操纵，如剪切战粘揭文本，大概该当正在东西栏中停止的操纵(比方：改动音量)。

　　该功用该当是一个让用户对利用FAB感应高兴的操纵，而不消担忧会发作毛病。图片滥觞：Material Design

　　FAB战动绘

　　悬浮按钮的设想具有灵敏性。FAB能够扩大，变形或发作反响。

　　扩大一组操纵

　　正在某些状况下，按钮能够扭转出去并表露其他几个选项(以下里的Evernote示例所示)。 FAB能够用一系列更详细的操纵去替换本人，而且能够将它们设想为用户的语境。但请记着：

　　1. 那些操纵必需取FAB自己所表达的次要操纵相干联：假如它们位于东西栏上，没有要将那些的操纵视为自力的。

　　2. 做为普通划定规矩，按消息最少有三个选项，但没有得超越六个，包罗本初悬浮按钮目的。

　　悬浮按钮会扔出相干的操纵。

　　FAB能够改变成新的界里

　　FAB不只仅是一个圆形按钮，它借具有一些变化性的属性，您能够用它去协助用户从一个屏幕到另外一个屏幕。悬浮按钮能够转换为做为使用法式构造部门的视图。

　　FAB能够改进屏幕之间的转换

　　当悬浮按钮变形时，以逻辑方法正在开端战完毕地位之间转换。比方，上面的示例中的动绘保护用户的标的目的感，并协助用户理解视图规划中方才发作的变动，假如需求变动内容，稍后再次启动变动。

　　图片滥觞：Ehsan Rahimi

　　转动时能够躲藏FAB

　　当背下转动(假如障碍用户浏览内容)，FAB能够被躲藏。正在上面的例子中，FAB需求能够移出方法，以便列表项的一切部门实践上皆能够会见。

　　躲藏FAB以最年夜化公用于列表的视心地区。图片滥觞：Juliane Lehmann

　　Android的中等使用法式是利用此手艺的一个很好的例子。心净按钮消逝正在转动，只要当喜好文章的读者念要利用按钮时，正在文章末端到达时才会从头呈现。

　　结论

　　假如要正在使用法式中利用FAB，则必需认真思索使用法式的设想，并将用户的能够操纵回结为一个最凸起的功用。准确利用FAB，终极会给用户带去惊人的协助。

　　感激您的浏览!

　　本文地点：

　　https://uxplanet.org/floating-action-button-in-ux-design-7dd06e49144e

　　本文做者：Nick Babich

　　Nick is a software developer who's passionate about user experience.

　　译者：SKYUI