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-31
  • 浅析手机交互设计中的“拇指法则”

    你有没有遇到过一款APP让你用的很不舒服?你的拇指必须要伸得老远才能够得到菜单,或者页面里元素太多导致你经常误操作。这些都是因为交互设计师在设计的时候没有考虑拇指的感受,或者更学术化点说,没有考虑到“拇指法则”。

    2017-05-02
  • 【交互设计方案】记分对比法运用

    交互设计中,为什么需要这种方法? 在交互设计工作中经常会遇到这样的问题,某些位置的设计牵扯到比较复杂的场景,要考虑的因素比较多,这些设计点往往是最容易引起争议的,因为团队成员不一定都能快速了解全部的场…

    2015-10-09
  • 淘宝UED的设计流程

    国内知名 UED 团队的设计流程是怎样的? 淘宝 UED 的设计流程图 <img src="https://pic4.zhimg.com/75bcc954c5e1695eeeeb1710eb62c947_b.jpg" data-rawwidth="4000" data-rawheight="1678" clas…

    2016-06-01
  • 用户体验至上 三星Pay与苹果Pay谁更胜一筹?

    文\孟永辉如今,移动支付市场早已过百家争鸣时代,深耕细作成为当下移动支付市场的主旋律,阿里和腾讯便是这主旋律的代表。虽然两大巨鳄占据移动支付市场大部分份额,但终端市场的支付竞争依然存在。苹果与腾讯就因为App端微信赞赏功能抽成的事情闹出矛盾,原因是两家公司对赞赏抽成的比例及支付渠道存在分歧。由此也不难看出,移动支付市场潜力巨大,想要成为移动支付大潮的弄潮儿,领略潮流之下的无限风光不仅需要强大的研发实力,还要有对市场运行趋势和规律的精准把...

    2018-03-30
  • 网页首图抓住用户注意力的8个要点

    Banner 是我们最常聊到的设计元素,它是一个网页的招牌,是用户最容易看到的视觉元素。今天,我们来聊聊Banner中的急先锋,网页首图,它的设计之道。

    2017-05-08
  • 2018年移动端用户体验设计趋势

    在移动应用领域,事物正飞速发展。要想在用户体验设计领域获得成功,设计师必须有远见,并为即将到来的新挑战做好准备。为了简化这个任务,我列出了2018年最重要、最有影响力的趋势,而且很有可能远不止如此。1.简化用户的使用流程当我们与应用程序或网站互动时,我们有一个特别的目标。通常,我们花在实现这一目标上的努力越少,体验就越好。线性用户使用流程线性用户体验设计指的是一种带有特定的开始、过程和结束,并且可以让用户在每一步完成一个动作的用户体验设...

    2018-02-01
  • 腾讯高级交互设计师的自我总结

    ——关于转岗、给新人的建议、交互与产品设计、腾讯ISUX的总结 1.能聊聊您从网页设计师变成前端工程师再转为交互设计师的过程么,有什么建议能给和您一样自学交互的同学呢? 答:回想起来挺有意思,过程很丰富,说明…

    交互设计 2015-12-01
  • 回音专栏丨交互设计中的规律

    回音专栏丨来自行业最前线的设计大咖们的独家MAX干货聚合!库伯学习圈,从行动中归纳出经验,把经验升华为规律,再用规律指导行动。……交互设计中的规律昨天讲了库伯学习圈和正确的学习步骤,应该从行动中归纳出经验,把经验升华为规律,再用规律指导行动。今天就来讲讲我在学习交互设计时,是怎样总结出一些有用的规律的,你同样也能用这种方法学习别的知识。行动中归纳经验我们平时都会使用一些电脑软件和手机APP,你有留意到它们的界面和操作吗?比如iPhone...

    2018-01-30
  • BAT名师访谈,阿里交互设计专家的成长之路

    编者按:优设访谈第四期!今天这位设计师也是老朋友了,作为网易电子商务部UED团队的创建者,阿里现任交互设计专家,以及业内人士鼎力推荐的《破茧成蝶:用户体验设计师的成长之路》联合出版人,@刘津legene 老师的…

    2015-11-19