从设计指南说起，详解Material Design体系组件(下)

相关阅读：从设计指南说起，详解Material Design体系组件(上)

从设计指南说起，详解Material Design体系组件(中)

进度和动态

定义：在刷新加载或者提交内容时，需要一个时间过度，在做这个过程中需要一个进度和动态的设计。

尽可能地减少视觉上的变化，尽量使应用加载过程令人愉快。每次操作只能由一个活动指示器呈现，例如，对于刷新操作，不能即用刷新条，又用动态圆圈来指示。

指示器的类型有两种：线形进度指示器和圆形进度指示器。可以使用其中任何一项来指示确定性和不确定性的操作。

在操作中，对于完成部分不确定的情况下，用户需要等待一定的时间，无需告知后用户台的情况以及所需时间，这时可以使用不确定的指示器。

线形进度条：应该放置在页眉或某块区域的边缘。线形进度指示器应始终从0％到100％显示，绝不能从高到低反着来。如果一个队列里有多个正在进行的操作，使用一个进度指示器来指示整体的所需要等待的时间。

圆形进度指示器：

滑块

定义：滑块控件(Sliders，简称滑块)可以让我们通过在连续或间断的区间内滑动锚点来选择一个合适的数值。区间最小值放在左边，对应的，最大值放在右边。滑块(Sliders)可以在滑动条的左右两端设定图标来反映数值的强度。这种交互特性使得它在设置诸如音量、亮度、色彩饱和度等需要反映强度等级的选项时成为一种极好的选择。

连续滑块(Continuous Slider)

在不要求精准、以主观感觉为主的设置中使用连续滑块，让使用者做出更有意义的调整。

带有可编辑数值的滑块

用于使用者需要设定精确数值的设置项，可以通过点触缩略图、文本框来进行编辑。

间续滑块(Discrete Slider)：间续滑块会恰好咬合到在滑动条上平均分布的间续标记(tick mark)上。在要求精准、以客观设定为主的设置项中使用间续滑块，让使用者做出更有意义的调整。应当对每个间续标记(tick mark)设定一定的等级区间进行分割，使得其调整效果对于使用者来说显而易见。这些生成区间的值应当是预先设定好的，使用者不可对其进行编辑。

附带数值标签的滑块：用于使用者需要知晓精确数值的设置项。

Snackbar 与 Toast

定义：Snackbar 是一种针对操作的轻量级反馈机制，常以一个小的弹出框的形式，出现在手机屏幕下方或者桌面左下方。它们出现在屏幕所有层的最上方，包括浮动操作按钮。

它们会在超时或者用户在屏幕其他地方触摸之后自动消失。Snackbar 可以在屏幕上滑动关闭。当它们出现时，不会阻碍用户在屏幕上的输入，并且也不支持输入。屏幕上同时最多只能现实一个 Snackbar。

Android 也提供了一种主要用于提示系统消息的胶囊状的提示框 Toast。Toast 同 Snackbar 非常相似，但是 Toast 并不包含操作也不能从屏幕上滑动关闭，文本内容左对齐。

用法

短文本

通常 Snackbar 的高度应该仅仅用于容纳所有的文本，而文本应该与执行的操作相关。Snackbar 中不能包含图标，操作只能以文本的形式存在。

暂时性

为了保证可用性，Snackbar 不应该成为通往核心操作的唯一方式。作为在所有层的上方，Snackbar 不应该持续存在或相互堆叠

最多0-1个操作，不包含取消按钮

当一个动作发生的时候，应当符合提示框和可用性规则。当有2个或者2个以上的操作出现时，应该使用提示框而不是 Snackbar，即使其中的一个是取消操作。如果 Snackbar 中提示的操作重要到需要打断屏幕上正在进行的操作，那么理当使用提示框而非 Snackbar。

副标题

定义：副标题是特殊的列表区块，它描绘出一个列表或是网格的不同部分，通常与当前的筛选条件或排序条件相关。

副标题可以内联展示在区块里，也可以关联到内容里，例如，关联在相邻的分组列表里。

在滚动的过程中，副标题一直固定在屏幕的顶部，除非屏幕切换或被其他副标题替换。

为了提高分组内容的视觉效果，可以用系统颜色来显示副标题。

开关

定义：开关允许用户选择选择项。

一共有三种类型的开关：复选框、单选按钮和 on/off 开关。

注释：下面示例中所示的图形环代表一个动画，并不是实际按钮的外观。

复选框：允许用户从一组选项中选择多个。

如果需要在一个列表中出现多个 on/off 选项，复选框是一种节省空间的好方式。

如果只有一个 on/off 选择，不要使用复选框，而应该替换成 on/off 开关。

复选框通过动画来表达按压和按下的状态。

单选按钮：只允许用户从一组选项中选择一个。

单选按钮通过动画来表达聚焦和按下的状态。

开关：On/off 开关切换单一设置选择的状态。开关控制的选项以及它的状态，应该明确的展示出来并且与内部的标签相一致。开关应该单选按钮呈现相同的视觉特性。

开关通过动画来传达被聚焦和被按下的状态。开关滑块上标明 “on” 和 “off” 的做法被弃用，取而代之的是下图所示的开关。

Tabs

定义：在一个 app 中，tabs 使在不同的视图和功能间探索和切换以及浏览不同类别的数据集合起来变得简单。

用法：tab 用来显示有关联的分组内容。tab标签用来简要的描述内容。

使用规则：

• Tabs 也不是用于内容切换或是内容分页的（例如：应用中页面之间的切换）。

• Tabs 应该显示在一行内。

• 一组 tabs 至少包含 2 个 tab 并且不多于 6 个 tab。

• Tabs 控制的显示内容的定位要一致，为并列关系。

• Tab 中当前可见内容要高亮显示。

• Tabs 应该归类并且每组 tabs 中内容顺序相连。

文本框

文本框可以让用户输入文本。它们可以是单行的，带或不带滚动条，也可以是多行的，并且带有一个图标。点击文本框后显示光标，并自动显示键盘。除了输入，文本框可以进行其他任务操作，如文本选择（剪切，复制，粘贴）以及数据的自动查找功能。

文本框可以有不同的输入类型。输入类型决定文本框内允许输入什么样的字符，有的可能会提示虚拟键盘并调整其布局来显示最常用的字符。常见的类型包括数字，文本，电子邮件地址，电话号码，个人姓名，用户名，URL，街道地址，信用卡号码，PIN码，以及搜索查询。

单行文本框：当文本输入光标到达输入区域的最右边，单行文本框中的内容会自动滚动到左边。

带有滚动条的单行文本框：当单行文本框的输入内容很长并需跨越多行的时候，则文本框应该以滚动形式容纳文本

在滚动文本框中，一个图形化的标志出现在标线的下面。点击省略号，光标返回到字符的开头。

多行文本框:当光标到达最下缘，多行文本框会自动让溢出的的文字断开并形成新的行，使文本可以换行和垂直滚动。

工具提示

用法：对同时满足以下条件的元素使用工具提示：1.具有交互性。2.主要是图形而非文本。

后记：

iOS和Material Design组件都已经讲完了，接下来的几篇文章都会按照组件控件的功能属性，详解设计规范之组件控件体系。

原文始发于微信公众号（吴轶）：从设计指南说起，详解Material Design体系组件(下)