Material Design — 按钮（ Buttons）

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

按钮（ Buttons）

Material Design链接：按钮

Button

按钮能传达用户触摸它们时发生的操作。

Buttons被按时被触发墨水扩散效果。 他们可能会显示文字，图像或两者都有。 平面按钮和浮动按钮是最常用的类型。

其他按钮类型包括：

·底部固定按钮（Persistent footer buttons）是可用于屏幕底部或提示框的平面按钮。

·下拉按钮（Dropdown buttons）显示多个选择。

·切换按钮（Toggle buttons）将选项汇聚在一起。 图标切换允许选择或取消选择单个选项。

标准按钮

平面按钮Flat buttons

平面按钮是只有文本的按钮

可用在dialogs， toolbars和inline

不会有抬起的效果，但是点击时会填充颜色

浮动按钮 Raised buttons

浮动的按钮是矩形的按钮。

它们可以内联使用。

他们被点击时会抬起并触发墨水扩散效果。

海拔

平面按钮Flat buttons: 0dp

悬浮按钮 buttons: 2dp

按钮类型

三种标准按钮:

悬浮响应按钮（Floating action button）： 点击后会产生浮起与墨水扩散效果的圆形按钮。

浮动按钮（Raised button）：点击后会产生浮起与墨水扩散效果的常见的方形按钮，。

扁平按钮（Flat button）： 点击后产生墨水扩散效果，但是没有浮起的效果。

三种标准按钮

三种标准按钮实例

选择按钮样式

选择按钮样式取决于按钮的优先级，屏幕上的组件数量和屏幕布局。

功能：非常重要+无处不在=悬浮响应按钮（Floating action button）

海拔：选择浮动还是平面按钮，具体取决于它所在的容器以及屏幕上有多少z轴空间图层。 屏幕上不应有太多层。

布局：每个容器主要使用一种类型的按钮。 只有在有充分理由的情况下才能使用混合按钮类型（比如需要强调一个浮起的效果）。

用法

按钮类型

按钮的适用类型应该与其所出现的环境相适应。

推荐的按钮放置

标准提示框

屏幕上的按钮对齐方式：右边

将肯定性按钮放在右侧，否定性的放在左边。

表单

屏幕上的按钮对齐：左边

将肯定性按钮放在左侧，否定性的放在右边。

卡片

按钮最好放在卡的左侧以增加其可见度。 但是，由于卡片具有灵活的布局，因此可以将按钮放置在适合内容和上下文的位置，同时保持产品内的一致性。

非标准的提示框和模态窗口

非标准提示框和模态窗口中的按钮放置取决于它们包含内容的复杂程度。

对于内容相对简单的提示框，建议将按钮放在对话框的右侧，肯定性按钮位于否定性按钮的右侧。

对于冗长或复杂的表单，建议将按钮放在表单的左侧，肯定性按钮位于否定性按钮的左侧。

样式

版式设计

按钮文本应该用有大写的语言大写。 对于其他语言，平面按钮上的彩色文本将它们与普通文本区分开来。

无障碍

为了确保残疾人的可用性，需要按钮的高度为36dp，热区的最低高度为48dp。

按钮样式

圆角半径

按钮应该有一个2dp的圆角半径。

密度

当鼠标和键盘是主要的输入方法时，可以稍微减少按钮尺寸以适应密集的UI界面。

扁平按钮(Flat button)

用法

平面按钮印在材料上。 不会浮起，但点击时会填充颜色。

可以在以下位置使用扁平按钮：

·在 toolbars上

·在提示框中，将按钮操作与对话框内容统一起来

·Inline, with padding，因此用户可以轻松找到它们

左：提示框中    右：将用户分心降到最低

行为

点击时的动画效果可以去网站观看

浮动按钮(Raised button)

用法

浮动按钮增加了大部分平面布局的海拔。 强调在拥挤的或者较大的空间的功能。

左：页面内容多    右：为内容分界

背景比较嘈杂的时候使用浮动按钮

浮动按钮就像一块放在另一张纸上的材料 - 点击时浮起并填充颜色。

按钮海拔

浮动按钮的默认海拔为2dp。

在桌面上，浮动按钮可以在悬停时获得此海拔。

底部固定按钮（Persistent footer buttons）

如果app要求操作持续存在且随时可供用户使用，请考虑使用悬浮响应按钮（Floating action button）或底部固定按钮（Persistent footer buttons）。

请勿在固定按钮区域使用浮动按钮。

添加分隔后，底部固定按钮可用于滚动的提示框。

下拉按钮（Dropdown buttons）

移动端下拉按钮

下拉按钮

下拉按钮可在多个选项中进行选择。 该按钮显示当前状态和向下箭头。 例如，可用状态可以显示为文字，颜色或icon的列表。

当用户与按钮交互时，Menus会覆盖按钮并显示可能的状态。 按下某个状态会取消Menus并更新按钮以显示此新状态。

在下拉菜单中滚动的方式与Menus滚动的方式相同。

一般的下拉按钮

溢出下拉菜单按钮

这种类型的下拉菜单默认显示箭头或者菜单按钮。点击按钮后会弹出菜单。点击菜单中的任意一个选项将会引导到对应的设置页面。

分段式下拉菜单按钮

分段式下拉菜单按钮有两个区域: 当前状态和下拉箭头。点击当前状态会触发状态相应的动作。点击下拉箭头则会弹出所有状态菜单; 点击任意一个状态会改变当前的状态。

可编辑分段式下拉菜单按钮

可编辑分段式下拉菜单按钮的当前状态位置是可编辑的（例如用来选择文字大小的下拉菜单）。 点击当前状态位置会触发相应的动作并且当前状态会变成可编辑。点击下拉箭头会显示所有状态。

桌面下拉

桌面应用栏规格

切换按钮（Toggle buttons）

切换按钮可用于分组的相关选项。 安排布局和间距来表达出切换按钮是组的一部分。

聚焦和点击状态可能会强化切换按钮是一个组的一部分。 例如，当聚焦一个切换按钮时，焦点可能会同时显示组中的其他切换按钮。

切换按钮需要：

·组中至少有三个切换按钮

·用文字，图标或两者标记按钮

建议使用以下组合：

·可以都不选

·只能选一个

·可以选多个

图标切换

图标适用于切换按钮，允许选择或取消选择单个选项，例如向项目添加或移除星标。

他们最好位于应用栏，工具栏，动作按钮或切换。

图标切换可能会在其触摸目标范围外显示有界或无界的墨水扩散反应波纹。