Material Design —悬浮响应式按钮(Buttons: Floating Action Button)

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚

Material Design链接:悬浮响应式按钮

悬浮响应式按钮

悬浮响应式按钮代表一个应用中最重要的操作。

悬浮响应式按钮用于促进操作。

就像在UI上方浮动的圆形icon一样,它会在聚焦时改变颜色,并在选择时上浮。 点击时,它可能包含更多相关的操作。

用法

每个屏幕只推荐一个悬浮响应式按钮来表示最常用的操作。

行为

默认情况下,悬浮响应式按钮在屏幕上以动画形式展开。

尺寸

默认值:56 x 56dp

最小:40 x 40dp


悬浮响应式按钮

悬浮响应式按钮

浮动操作按钮用于促进操作,悬浮响应式按钮是由在UI上方浮动的圆形icon来区分的,它们的运动行为包括变色、发射(功能)和改变锚点。

浮动操作按钮有两种尺寸:

·默认大小:对于大多数用例。

·最小尺寸:只用于创建与其他屏幕元素的视觉连续性。

当屏幕宽度为460dp或更小时,按钮的大小应该从默认的(56dp)变为最小尺寸(40dp)。

左:默认尺寸    右:最小尺寸

悬浮响应式按钮应该放置在离手机边缘至少16dp的位置,平板电脑/pc上至少需要离24dp。

悬浮响应式按钮在聚焦时改变颜色,在选择时上浮。

左:聚焦前    右:聚焦后
左:选择前    右:选择后

并非每屏都需要浮动操作按钮。 浮动操作按钮表示app中的最重要的操作。

左:最重要的操作是点击图片    右:最重要的操作是添加文件

每个屏幕建议只用一个悬浮响应式按钮,增加其显眼程度。 悬浮响应式按钮应该只代表最常用的动作。

性质

使悬浮响应式按钮代表积极的操作,如创建,喜欢,共享,导航和搜索。

避免对次要和消极的操作使用浮动操作按钮,包括以下内容:

·存档或清空

·不明确的行为

·警告或错误

·有限制的任务,如剪切文本

·应该在工具栏中的控件,如音量控制或更改字体颜色

浮动操作按钮不包含应用栏icons或状态通知(如小红点)。 不要将其他元素叠放在悬浮响应式按钮上。

一致地使用圆形图标以在app间强制最重要的操作的一致性。

不要给悬浮响应式按钮多余的维度效果。


行为(此部分见原网站)

默认情况下,悬浮响应式按钮在屏幕上以动画形式展开。 其中的icon可能是动态的。

由于其相对而言的重要性,悬浮响应式按钮的移动方式可能与其他UI元素不同。

跨屏幕

横跨多个横向屏幕(例如顶部标签屏幕)的悬浮响应式按钮应该短暂消失,然后如果其动作改变就重新出现(此部分动图见原网站)。

如果按钮在各个屏幕上的动作保持不变(如有必要,则转换为新位置),该按钮应保持在屏幕上。

列表

悬浮响应式按钮下面的列表应该在它们下面有足够的空间,以便它们的内容不被按钮挡住。

带标签的屏幕

在带标签的屏幕上,悬浮响应式按钮不应以与内容相同的方向退出屏幕。 这可以防止:

·悬浮响应式按钮在不在屏幕时显示功能

·悬浮响应式按钮与内容海拔相同的感觉


变换

变换

浮动操作按钮是app中主要用例的特别示例。 利用其可见性为主要的UI元素创建令人愉快的变换。

常用变换包括触发,工具栏,Speed dial和变形。 这不是一个详尽的清单。 悬浮响应式按钮的设计灵活。 尝试最适合您的app和按钮所在屏幕的变换。

触发

悬浮响应式按钮可以简单地触发动作或在某处导航。 触摸波动的动画向外扩展导致UI变化。

工具栏

浮动动作按钮可以在按下时变换成工具栏。 工具栏可以包含相关的操作,如文本和搜索字段,或任何其他有用的项目。

滚动就消失的工具栏适用于:

·最开始进入时需要完整工具栏的屏幕

·长列表顶部或底部需要完整工具栏的屏

当用户通过滚动表示他们有兴趣查看主要内容时,节省了屏幕空间。

如果悬浮响应式按钮变形为工具栏,则该工具栏应包含相关操作。

工具栏中的操作需关联

Speed dial

按动悬浮响应式按钮可以甩出相关动作。 菜单被唤起后,该按钮应保持在屏幕上。 在同一地点点击应激活最常用的操作或关闭打开的菜单。

悬浮响应式按钮可以转换为包含所有动作的单张材料。

一般规则是,按下时至少有三个选项,但不能超过六个,包括原始悬浮响应式按钮目标。 如果您有两个选项 ,即您的浮动操作按钮只显示另一个选项,则选最重要的动作作为悬浮响应式按钮。 如果你有超过六个,用户可能难以触摸到最远的选择。

为用户提供最好,最明显,最少的选择,来减少决策疲劳。

不要在浮动操作按钮操作中放置溢出菜单。 从最初的屏幕应该最多只有两次点击就能到达预期的目的地。

将溢出操作置于工具栏中的溢出菜单中,而不是悬浮响应式按钮中。

如果app的特点是添加文件类型,浮动操作按钮可以在第一次触摸后转换为相关操作。 但是,如果显示的操作与按钮无关,请将操作放入溢出菜单。

悬浮响应式按钮可以包含联系人列表。 该列表不应包含无关的操作。

变形

浮动操作按钮可以转换为属于应用程序结构的一部分材料。 这种戏剧性的变化突出了按钮所能实现的动作。

悬浮响应式按钮变形时,以有逻辑的方式在开始和结束位置之间转换。 例如,不要通过其他材料。

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

全屏

浮动动作按钮可以转换为跨越整个屏幕的新材料。

这种戏剧性转变通常与创建新内容相关联。 因此,它往往不具有撤消转换或可逆动画的方法。


大屏幕

大屏幕

悬浮响应式按钮可以附加到扩展的应用程序栏。

悬浮响应式按钮可以附加到工作表内的工具栏或结构元素(只要它不阻挡其他元素)。

悬浮响应式按钮可以附加到薄片的边缘。

每个屏幕不要有多个浮动动作按钮。

不要将悬浮响应式按钮与屏幕上的每个元素相关联。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容