干货分享！悬浮按钮设计规范和经典实践

　　悬浮按钮设想标准战典范理论。

　　悬浮按钮(Floating Action Button，简称FAB)是APP使用中常睹的UI元件。它轻巧、文雅、便利又下效，是Google设想言语中一颗灿烂的明珠。悬浮按钮常常城市自力呈现正在界里之上，提拔团体的导航，拓展页里的功用，使使用的操纵愈加便利。

　　做为Android UI交互中最枢纽的元素之一，悬浮按钮正在用户体验中的职位非常主要。UI上，常常是最颜色斗胆最曲不雅的页里元素;正在功用上，常常是代表用户正在页里上最下频次的操纵。悬浮按钮的利用有甚么根本原则?有哪些真用用处?我们一同正在那篇文章中去看一看。

　　悬浮按钮的利用本则

　　A、挑选恰当的悬浮按钮尺寸

　　悬浮按钮次要用于增进用户止为，它们经由过程正在UI上浮动的圆圈图标去辨别，而且具有包罗变形，启动战传收锚面的活动止为。普通有两种尺寸，默许版战迷您版(仅用于取其他界里元素创立视觉持续性)。

　　默许的尺寸普通为56*56dp，迷您版的尺寸为40*40dp。界里宽度低于460dp时，需求从默许尺寸(56dp)调解至迷您尺寸(40dp)。

　　B、悬浮按钮只启载正背操纵

　　因为悬浮按钮凡是启载的是次要的、有代表性的操纵，凡是它该当是个主动正背的交互，好比创立、分享、探究等。独一的悬浮按钮不该该施行毁坏性的操纵，好比删除、回档。它不该该长短特定的操纵，大概是没有完好的交互，好比剪切战粘揭是一组组开交互，它们该当存正在于菜单栏傍边，而非悬浮按钮中。

　　C、年夜尺寸屏幕上的悬浮按钮

　　悬浮按钮正在年夜尺寸的屏幕上能够安排正在扩大的APP栏、东西栏大概构造性的元素(条件没有障碍其他元素)战表单的边沿上。需求留意的是，每一个页里只能呈现一个悬浮按钮，也没有要将悬浮按钮取一个页里上的一切元素发生联系关系，悬浮按钮自己隐眼抓人眼球，滥用悬浮按钮会分离用户的留意力。

　　悬浮按钮的用处

　　触收器

　　悬浮按钮能够简朴天触收某个行动或正在某处导航，经常使用于触收功用、菜单或导航。

　　东西栏

　　悬浮按钮能够正在停止面按或转动操纵时变更成东西栏。 东西栏能够包罗相干的操纵，文本战搜刮字段等。当用户经由过程转动收回他们有爱好持续阅读内容的疑号，转动消逝的东西栏则年夜年夜天节流了屏幕空间，团体的利用体验会十分流利。

　　界里变形的关键

　　悬浮按钮能够转换为APP构造的一部门，借助动效延长到全部屏幕，以至变成自力的界里，从而成为界里功用切换的静态关键。

　　关于那一块的用法，谷歌Material Design设想标准请求：“变形浮动按钮时，需求以逻辑的方法正在开端战末端的地位转换，没有要利用其他元素，而且变形动绘该当是可顺的，新的变形页里也能够转换会悬浮按钮。”

　　触收战扩大一系列操纵

　　除单一的功用触收中，经由过程悬浮按钮更经常使用于触收一系列的操纵，经由过程扩大，用一组相干、经常使用的悬浮按钮去替换本来的单一交互。常睹的情势有拓展按钮，拓展表单等。

　　做为普通划定规矩，那组拓展出去的按钮不该少于3个，不克不及多于6个，不然违背了做为悬浮按钮的快速、下效的本则。

　　悬浮按钮的理论

　　明白了悬浮按钮的根本设想标准战用处分类后，我们便能够测验考试开端入手本人的设想理论了，上面为各人从两个圆里的进门供给协助。

　　本型设想

　　假如对悬浮按钮正在产物上的使用有了开端的构想，能够经由过程本型东西Mockplus快速真现本型结果。

　　Mockplus撑持快速设想、快速分享、沉紧预览战沉紧合作，您能够经由过程200个组件，8种智能交互组件，仅仅经由过程鼠标拖拽便真现交互;设想完成后由8种方法供您预览，借撑持8种讲明东西正在线核阅，团队中也能年夜放光荣。上图的本型例子能够戳那里下载：http://doc.mockplus.cn/?p=1046

　　案例浏览

　　借出有灵感?没关系。那里为各人搜集了Dribbble战Uplabs上里的一些典范悬浮按钮设想案例，信赖会带给您启示。

　　Navigation at the bottom

　　做品功用战UI揭切天分离是团体变得出彩，设想中，下推菜单占有了屏幕的一半，恍惚了布景上的元素，凸起了表单的主要性。菜单设想得十分精练，一切选项皆根据垂曲次第布列，年夜量的留黑包管了笔墨处于主体职位。

　　活动的切换动绘细节加强了吸吸感，给用户带去了理性细致的操纵反应。

　　FAB for User Engagement

　　那一款FAB隐得十分有侵犯性。 激活以后出有一面的踌躇，把持了全部屏幕，占有了主导职位。果为空间的丰裕，设想胜利天将一切主要环节皆包罗正在内，图标斑斓曲不雅，体验激烈而宽阔。正在UI圆里做者奇妙天设置核心，带去了愉悦的视觉不雅感。

　　Filter Menu

　　那款做品把FAB做为一种关键，使搜刮历程愈加下效战高兴，为用户供给了更灵敏的利用体验。 须要的过滤器选项布列正在一个弧形傍边，每个皆有一款粗心设想的圆形图标。菜单里板也具有十分像按钮自己的圆形外形。 那样一去，组件看上来便调和了。

　　总结

　　悬浮按钮看似简朴，可是要正在APP设想中，借是要留意根本设想标准、场景战用户体验的。准确利用悬浮按钮，会给您的产物体验带去事半功倍的结果。