Material Design——Chips

#我是一个可爱的搬砖工系列# 尝试对照英文翻译学习MD的组件设计，借此加深各种组件的应用~

Material Design链接：Material Design——Chips

选项卡是表示输入，属性或动作的紧凑元素。

一、用法

选项卡允许用户输入信息，进行选择，过滤内容或触发操作。

△原则

· 紧凑 选项卡是代表离散信息的紧凑组件

· 相关性 选项卡应该与它们所代表的内容或任务有明确而有用的关系。

· 重点 选项卡应该使任务更容易完成，或者内容更容易排序。

△类型

输入选项卡：输入芯片表示在字段中使用的信息，例如实体或不同的属性。

选择选项卡：在包含至少两个选项的集合中，选择芯片代表单个选择。

动作选项卡：动作选项卡触发与主要内容相关的动作。

二、分析

· 容器  选项卡容器容纳所有元件，它们的尺寸由这些元件决定，容器也可以通过笔划来定义

· 缩略图（可选） 缩略图通过显示头像，角标或图标来识别实体（如个人）

· 文本 选项卡文本可以是实体名称，描述，标签，操作或会话

· 删除图标（可选） 输入选项卡可以包含删除图标

三、输入选项卡

△ 用法

输入选项卡以紧凑的形式表示复杂的信息，例如实体（人，地点或事物）或文本，用户可以通过将文本转换为选项卡来验证输入。

左：用于显示实体的输入选项卡；右：用于显示实体的概述输入选项卡。

输入选项卡可以提供建议的回复内容。

△ 行为

· 转型

输入选项卡根据用户输入变换文本。

文本转换为输入选项。

· 可编辑

输入选项卡的文本是可编辑的，直到用户对选项卡采取行动，例如发送电子邮件，点击选项卡编辑输入选项卡的文本。

点击时输入选项卡可编辑。

· 信息化

如果系统无法识别文本输入，则输入选项卡可以提示错误。

输入选项卡可以表示错误状态。

· 多项

单个字段可以包含多个条目选项卡。

多个输入选项卡。

· 可移动

输入选项卡可以重新排序或移动到其他领域。

可移动的。

· 展开

输入选项卡可以展开以显示更多信息或选项。

可输入选项卡的展开。

△ 位置

输入选项卡可以与其他组件集成，它们可以出现在：

· 与字段中的文本输入光标内联

· 在堆叠列表中

· 在水平滚动列表中

如果所有选项卡都需要可见，则输入芯片可以换行到新行。

输入选项卡水平滚动。

△ 状态

输入选项卡状态。

四、选择选项卡

△ 用法

选择选项卡允许从一组选项中选择单个选项卡。

选择选项卡清楚地描绘和显示在一个紧凑的区域选项。它们是切换按钮、单选按钮和单一选择菜单的一个很好的替代方案。

左：一套选项卡；右：一套描边选项卡。

△ 行为

选择单个选择选项卡会自动取消选择该组中的所有其他选项卡。

△  位置

选择选项卡是一系列的，它们通常是水平和顺序显示的。

选择芯选项卡的水平放置。

Right：选择选项卡可以水平滚动；Caution：选择选项卡可以换到新的行，使用两行或更多行选择选项卡会使每个选项卡更难扫描。

Wrong：选择选项卡不应只提供一个选项。

△ 状态

五、筛选选项卡

△ 用法

筛选选项卡使用标签或描述性文字筛选内容。

筛选选项卡显示在一个紧凑的位置，它们是切换按钮或复选框的好选择。

左：一套筛选选项卡；右：一套描边筛选选项卡。

△ 行为

点击选项卡进行选择，可以选择或者取消选项卡。

可以用图标来提示选中状态。

当用户点击筛选时，筛选选项卡建议可以动态地改变。

△ 位置

筛选选项卡可以显示在搜索字段下方。

在侧页中显示多组筛选选项卡。

△ 状态

六、动作选项卡

△ 用法

动作选项卡提供与主要内容相关的操作，它们应该动态地和上下文地出现在UI中。

动作选项卡的另一种选择是按钮，它应该持续地、始终如一地出现。

左：一套动作选项卡；右：一套描边动作选项卡。

△ 行为

动作选项卡可以触发动作或显示进展和确认。

点击动作选项卡会触发上下文操作。

△ 位置

动作选项卡显示在主要内容之后，例如在卡片下方或持久地在屏幕底部。

动作选项卡应显示在主要内容下方。

Caution：动作选项卡应该是一个组的；Right：动作选项卡可以水平滚动。

△ 状态

---

END.THANKS FOR YOUR READING~

如有不当，还请多多指教~