宁海网站建设:设计出色的浮动动作按钮的秘诀

2019.07.26 mf_web

70

浮动操作按钮可以大大增强用户体验。本文介绍了浮动操作按钮的基本原则,用法和实践。

作为Android UI中最重要的元素之一,浮动操作按钮起着重要作用。它始终是最迷人和最直观的元素,并呈现出高效的行动。FAB的基本准则是什么?哪里可以使用?我们来看看这篇文章。

FAB指南

第1步:为FAB选择合适的大小

Fab_size

浮动动作按钮的特征在于浮动在UI上方的带圆圈的图标,并具有包括变形,启动和传输锚点的运动行为。通常有两种尺寸,默认版本和迷你版本(仅用于创建与其他界面元素的视觉连续性)。

默认大小一般为56 * 56 dp,迷你版大小为40 * 40dp。当界面宽度小于460dp时,需要将其从默认大小(56dp)调整为迷你大小(40dp)。

第2步:仅将FAB用于积极行动

Positive_action

Negative_action

浮动按钮通常带有主要的代表性动作。通常,它应该是积极的互动,例如创建,分享,探索等。唯一的android按钮设计不应执行破坏性操作,例如删除,存档。它不应该是非特定的或不完整的。例如,剪切和粘贴是一组复合交互,应该存在于菜单栏中而不是浮动按钮中。


第3步:大屏幕上的FAB

大屏幕坏工厂

浮动按钮可以放置在扩展的APP条,工具栏或结构元素上(不会妨碍其他元素),也可以放在大屏幕上的表单边缘。您应该注意每个页面只能出现一个浮动按钮,也不会将浮动按钮与页面上的所有元素相关联。浮动按钮本身非常醒目,按钮的滥用会分散用户的注意力。

FAB的用途

触发

浮动按钮可以轻松触发操作或在某处导航。它通常用于触发功能,菜单或导航。


地图

工具栏


单击或滚动时,浮动按钮可以转换为工具栏。工具栏包含相关操作,文本,搜索字段等。当用户滚动显示他们有兴趣阅读更多信息时,滚动消失的工具栏将大大节省屏幕空间并为用户带来更流畅的体验。

Scroll fab 2

变形

fab按钮可以转换为APP结构的一部分。借助动态效果,它可以扩展到整个屏幕,甚至可以成为一个单独的界面,成为切换界面的动态集线器。Google材料设计指南要求:

“当变形浮动动作按钮时,以逻辑方式在起始位置和结束位置之间转换。例如,不要穿过其他材料。

变形动画应该是可逆的,并将新的材料片段转换回浮动动作按钮。“

音乐播放器

触发并扩展一系列操作

除了单功能触发器之外,FAB更常用于触发一系列操作,以用一组相关的常用浮动按钮替换原始单个交互。

触发

作为一般规则,这组扩展按钮应该大于3但小于6.否则,它违反了快速,高效的原则。

展开按钮

浮动动作按钮的做法

在弄清楚浮动按钮的基本指导和使用后,您可以尝试开始自己的设计实践。有两种进入方法。

原型设计

Fab in mockplus

如果您对如何使用产品上的浮动按钮有初步了解,可以使用Mockplus快速对其进行原型设计。

Mockplus是一款免费的一体化Web UI模型工具,允许您为移动设备(Android和iOS),桌面(PC和Mac)和Web应用程序创建模型,这有助于确保特定模型与所有设计最佳实践相匹配。

样品

还没有灵感?没关系。这3款精心挑选的经典浮动按钮设计案例,相信它们会为您带来灵感。

导航底部

设计师非常注重可用性,但也记得考虑到帐户设计和动态成分。

在这里,下拉菜单 占据了屏幕的一半,稍微模糊了背景上的元素以强化其重要性。伴随动画的详细流体有助于总体印象。

用户参与的FAB

用户参与的Fab

这种FAB看起来非常激进。激活后,表格毫不犹豫地占据整个屏幕。由于空间充裕,设计成功地包含了所有重要元素。图标美观直观,提供强大而宽敞的用户体验。作者巧妙地设定了焦点,为UI设计带来了愉悦的视觉感受。

过滤菜单

过滤菜单

设计人员使用FAB作为中心,使搜索过程更加高效和愉快,为用户提供更灵活的用户体验。必要的滤波器选项以弧形排列。他们每个人都有一个精心设计的圆形图标。菜单面板呈圆形,类似于按钮本身。所有这些因素使组件看起来和谐。

摘要

浮动操作按钮在App设计中看起来像是一个简单的动画,但是您应该注意很多细节,例如基本指南,场景和用户体验。正确使用浮动按钮将为您的产品体验带来倍增效果。

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP