悬浮按钮要怎么设计才能带来好体验? - 优设-UISDC

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

2017/05/12 16925评论区

悬浮操作按钮(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设计的时候正确使用,还是要注意细节、场景和用户需求的。正确使用悬浮按钮,会有事半功倍的效果。

【2017年的设计趋势都在这里】

  1. 《作为8年DRIBBBLE粉,和设计师聊聊未来的视觉趋势》
  2. 《PS教程!教你打造2017年最受欢迎的渐变幻彩风格》
  3. 《趋势抢先知!2017年设计师都在讨论的服务设计到底是什么?》
  4. 《2017年,这5个网页设计风格可能会成为主流趋势》

原文地址:uxplanet
原文作者:Nick Babich
优设译文:@陈子木

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量180万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/floating-action-button-in-ux-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 设计师专访 素材下载 视觉设计 设计流程 配色 web前端开发 用户体验设计 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 设计趋势 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里