按钮（Button）
一、按钮（Buttons）
按钮允许用户只需轻按一下即可进行操作并做出选择。
按钮传达用户可以采取的操作。它们通常被用在整个UI中，例如：
-
对话框
-
模态窗口
-
列表
-
卡片
-
工具栏
原则
1、易读性
按钮应该明确表明可以触发一个动作。
2、可查找
按钮应该很容易在其他元素中找到。
3、清晰
按钮的操作和状态应该清晰。
类型
1、文本按钮（重要性低）
文本按钮通常用于不太重要的操作。
2、线框按钮（重要性中）
由于带有一个底框，线框按钮用于比文本按钮强调性更强。
3、填充按钮（重要性高）
填充按钮强调性更强，因为使用了颜色填充和阴影。
4、切换按钮
切换按钮通过布局和间距，对一组操作进行分组。它们的使用频率低于其他3种按钮类型。
层级
1、一个突出的按钮
一个布局应包含一个突出显示的按钮，以清楚地衬托出其他按钮在层级中的重要性较低。这个高度强调的按钮最引人注意。
2、其他按钮
在APP的布局中，可以同时显示多个按钮，因此高度强调的按钮可以伴随中等和低强调按钮，这些按钮常用来执行不太重要的操作。
使用多个按钮时，请确保一个按钮的可用状态，不会看起来像另一个按钮的禁用状态。
位置
同一个页面中，使用多种按钮类型可用于表示不同的强调程度。
以上布局使用了：
-
重要性最高的悬浮操作按钮
-
重要性较高的紫色填充按钮
-
重要性低的文本按钮
二、悬浮操作按钮（FAB）
悬浮操作按钮（FAB）表示屏幕的主要操作。
悬浮操作按钮（FAB）在屏幕上执行主要或最常见的操作。它出现在所有屏幕内容的最前面，通常是一个圆形，中间有一个图标。
FAB有三种类型：常规、迷你和扩展。
原则
1、主要的
FAB表示屏幕上的主要操作。
2、建设性
FAB应执行建设性的操作（例如创建、分享或探索）。
3、关联性
FAB应与其页面内容相关。
类型
1、常规 FAB
当屏幕宽度大于460dp时，默认常规FAB（56x56dp）。
2、迷你 FAB
迷你FAB应该用在较小的屏幕上。当屏幕宽度为460dp或更小时，常规 FAB（56dp）的容器则会转换为迷你FAB（40dp）。
迷你FAB还可用于与其他屏幕元素建立视觉连续性。
3、扩展 FAB
扩展FAB更宽，并包含文本标签，图标可选。
位置
在移动设备上，扩展FAB应放置在右下角或底部中心。
注：避免在底部应用栏上方使用扩展FAB，因为这样会占用大量屏幕空间。如果它们必须是一对组合，则扩展FAB应在滚动时折叠。
用法
悬浮操作按钮（FAB）可以在当前页面上触发操作，也可以执行跳转到新页面的操作。
FAB执行重要的建设性操作，例如：
-
创建
-
收藏
-
分享
-
启动进程
避免使用FAB执行不重要或破坏性的操作，例如：
-
存档或删除
-
警报或错误
-
限制性的任务，如截断文本
调整音量或字体颜色等的控件更适合用在工具栏。
快速展开
按下FAB后，以快速展开的形式显示3～6个相关动作。
若超过6个操作，则应使用其他操作来呈现它们而不是 FAB。
1、按下后，FAB 发出相关动作
2、按下后，FAB 转换为包含相关操作的菜单（仅限Android）
在Android上按下后，FAB可以转换为包含相关操作的菜单。黑色蒙版表示暂时禁用了操作菜单之外的功能。菜单始终显示在屏幕上，直到触发操作或点击黑色蒙版。
– 推 荐 阅 读 –
本文来自:宛苏 作者:宛苏
评论0