悬浮按钮要怎么设计才能带来好体验。

悬浮操作按钮(Floating Action Button,FAB),或者说悬浮按钮,是 Android 应用中最常见的一个控件。悬浮按钮通常是圆形,底部的Material Design 风格的阴影让它看起来悬浮在整个UI之上。悬浮按钮是Android UI 交互中最关键的元素之一,在用户流程中至关重要。悬浮按钮非常的易用,但是要正确的使用它,还是要遵循一些基本的规则。

在今天的文章中,你会找到下面问题的答案:

什么时候适合使用悬浮按钮?

悬浮按钮的最佳实践有哪些?

悬浮按钮要如何同动效结合起来优化用户体验?

什么时候适合使用悬浮按钮

A、执行关键的操作

悬浮按钮通常用来承载相关度最高、最常用、最重要的操作。通常,在应用中,它应该承载特征性的操作,核心功能,就像下面的例子一样:

悬浮按钮要怎么设计才能带来好体验。

悬浮按钮用来触发应用中的主操作。屏幕上的暂停/播放交互使用悬浮按钮来触发,说明这个应用是一个音乐播放器。

B、作为引导工具

悬浮按钮还可以为用户提供下一步的提示和引导。Google 的研究表明,当面对不熟悉的界面之时,许多用户都倾向于点击悬浮按钮来探索,获取引导。因此,悬浮按钮在功能上有类似路标的属性。

悬浮按钮要怎么设计才能带来好体验。

Twitter 就将发推功能做成了悬浮按钮。

C、并不是每屏都需要悬浮按钮

悬浮按钮色彩显眼,高亮,非常抓人眼球。当你打开界面的时候,想要不去注意到它都不行,因为它太明显了。但是,并不是每个界面都需要悬浮按钮,因为不是每屏都有标志性的、重要的操作。

不要滥用悬浮按钮,它只为了关键操作而存在!

Android 系统中 Google Photos 应用就是一个典型的案例。当你打开它的图库的时候,首先映入眼帘的是用于搜索的悬浮按钮,这个时候,悬浮按钮存在2个关键的问题:

对于绝大多数的用户而言,搜索是非主要交互。首要的操作是浏览图片,所以此处并不需要悬浮按钮。

悬浮按钮会分散用户的注意力。

悬浮按钮要怎么设计才能带来好体验。

小贴士:判断一个界面的主要操作其实并没有看起来那么简单。为了简化任务,并且考量你是否需要悬浮按钮,可以参考这个“五分钟规则”:如果你花费了5分钟还没找到这一屏的主要操作,那么这说明这一屏不需要悬浮按钮。

悬浮按钮最佳实践

A、避免出现“迷之导航”

实际上我们这里说的迷之导航指的是“Mystery meat navigation”,通常简称为MMN,这句讽刺式的术语源于Web Pages That Suck 的站长 Vincent Flanders,指的是那些难于被发现、目的不明、只有当光标移动到其上才能发现、直到打开才知道其内容的“隐藏式”链接。

实际上,悬浮按钮所存在的问题和MMN有点相似,它是一个典型的图标式按钮,并不包含文字标签来说明其功能,而通用的、普遍被认识的图标始终是少数。举个例子,下面的按钮是什么功能?

悬浮按钮要怎么设计才能带来好体验。

有人能猜出它与分享相关,那么它的分享功能具体是指向什么地方,有什么效果,你能确知么?你想要知道,就必须点击它。的确,点击这些按钮来发现其功能,耗费的时间非常短,风险也不高,但是这终究是一种认知负担,不是吗?最麻烦的地方在于,用户必须记住它的功能才行。

将所有的的这些图标和相应的APP都记住,这个工作量可不小。

当然,使用图标式的按钮本身并不存在问题,前提是,APP的上下文环境要明晰,用户才能够清晰判断按钮的含义和功能。举个例子,你使用的是笔记类应用,很明显,主要的功能是记录、查看笔记。那么这个时候,悬浮按钮上的笔的图标,所表达的含义就很清晰了。

B、一屏只使用一个悬浮按钮

悬浮按钮在界面中是突出的,也是最具有侵略性的,所以要么只使用一个悬浮按钮,要么干脆别用。

悬浮按钮要怎么设计才能带来好体验。

C、悬浮按钮只承载正向操作

由于悬浮按钮通常承载的是主要的、有代表性的操作,通常它应该是个积极正向的交互,比如创建、分享、探索等。唯一的悬浮按钮不应该执行破坏性的操作,比如删除、归档。它不应该是非特定的操作,或者是不完整的交互,比如剪切和粘贴是一组组合交互,它们应该存在于菜单栏当中,而非悬浮按钮中。

悬浮按钮要怎么设计才能带来好体验。

Material Design 的设计规范中对于悬浮按钮所承载交互和图标有指引说明。

悬浮按钮和动效

悬浮按钮本身非常灵活,它可以扩展、变形,也可以给予反馈。

A、扩展为一系列操作

在某些情况下,点击悬浮按钮可以扩展出其他的常用操作(就像 Evernote这样)。通过扩展,用一组相关、常用的悬浮按钮来替代原来的单一交互,这样是可行的,它们是一体的,可展开也能收纳,不常驻,这和前面所提到的原则并不冲突。

不过,这样的设计要注意几点:

这些操作必须与开始的总悬浮按钮是关联起来的,它们是一体的,不要把展开后的按钮视为单独的存在。

作为一般规则,这组拓展出来的按钮不应少于3个,不能多余6个,否则违反了作为悬浮按钮的快速、高效的原则。

悬浮按钮要怎么设计才能带来好体验。

B、悬浮按钮变形为新的界面

悬浮按钮可以不一直都为按钮形态,借助动效它能够延伸到整个屏幕,变为独立的界面。

悬浮按钮能够作为界面转化的中间枢纽。

当悬浮按钮变形为界面的时候,它阐明了前后界面之间的逻辑关系,就像下面的案例:

悬浮按钮要怎么设计才能带来好体验。

C、滚动的时候隐藏悬浮按钮

为了便于用户在滚动的过程中阅读内容,悬浮按钮可以在滚动界面的时候,隐藏起来。

悬浮按钮要怎么设计才能带来好体验。

Medium 的 Android 版客户端当中,就是这么使用悬浮按钮的,当滚动到文章底部的时候,悬浮按钮会再次出现。实际上,他们的网页端也采用了类似的设计模式。

结语

悬浮按钮看起来很简单,但是要在APP设计的时候正确使用,还是要注意细节、场景和用户需求的。正确使用悬浮按钮,会有事半功倍的效果。

原文地址:uxplanet

原文作者:Nick Babich

优设译文:@陈子木

非特殊说明,本文版权归原作者所有,转载请注明出处

本文地址:http://www.uisdc.com/floating-action-button-in-ux-design

本文来自投稿,不代表科技代码立场,如若转载,请注明出处https://www.cwhello.com/47691.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
上一篇 2022年7月4日 00:47
下一篇 2022年7月4日 00:47

相关推荐

  • 有了这些在线设计网站,你就是设计大师。

    设计师这个词早已经成为了智慧和灵感的代名词,普通人想要成为设计大师的难度是比较大的,但要是你能够熟练使用以下的在线设计网站,你也可以成为一名“设计大师”! 企帮手(logo设计) 企帮手不仅能够简单方便的...

    2022年7月3日 建站资讯
    0214
  • 我来教你擅于做互联网推广的企业常有什么优点。

    很多的企业会咨询擅于做互联网推广的企业常有什么优点,那么,下面就由小编为大家介绍一下。 擅于做互联网推广的企业常有什么优点,小编介绍以下几点: 第一、网络媒介传播范围广、速度快、无时间地域限制、无时...

    2022年10月31日
    021
  • 为何自助建站相比传统建站已成大势。

    随着互联网的不断发展,网上用户不断增加,互联网宣传这个渠道已经是各中小企业及个人工作室不可或缺的营销方式,网站制作也成为企业开展互联网营销的最好选择之一。现如今传统的软件服务商也开始退出市场,云服...

    2022年7月3日
    0123
  • 什么是网站页面seo优化。

    页面优化是指SEO在网站内采取的所有措施,以提高网站在搜索引擎结果页面中的排名。这些措施与页面的内容和 HTML 源代码有关,例如元标记、关键字位置和关键字密度,包括您网站的技术设置、内容和用户友好性。因此...

    2022年7月1日 SEO操作
    0140
  • 分享互联网的品牌推广的要点有那些。

    互联网作为现在品牌推广不可缺少的推广地,有很多需要注意,那么品牌推广的要点有那些呢?云裂变认为下面三点,也是三大核心:第一、互联网传播着陆点,也就是SEO、新媒体工作人员要做的事,涉及互联网媒体的曝光...

    2023年4月19日
    00
  • 网站设计制作。

    就域名来就,com是注册率很高的一种后缀,个人建网站的话应优先选择com英文域名。选择的注册商一定要是品牌商家,同时对比价格,基本上不会相差太多。这种情况下优选品牌注册商的,因为这涉及到后期解析的问题,...

    2022年7月3日
    0110
  • 如果你还在犹豫是否要做独立站。

    平台竞争愈发激烈、管理愈发严苛、红利愈发衰退、天花板愈发明显——2019年平台这四座大山带给跨境卖家从未有过的压力。致使“独立站”在今年汇聚了众多灼灼目光。 大家都知道现在独立站也特别火,那么独立站到底有多...

    2022年7月3日 建站资讯
    0105
  • 怎么做个好网站网站制作有哪些流程。

    第一步:明确建立web站点的目的、目标。 任何一个网站都要有存在的价值,这个价值确定了,网站建设的目标就出来了,千万不能跟风似的,为了建网站而建网站,那样肯定是个失败的没有人访问的网站。 网站的目标就是...

    2022年7月3日
    099

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息