组件 列表:控件

列表:控件

列表控件为列表项提供状态信息和操作。

列表控件为列表项的提供信息、指示状态或展示操作。列表控件以图标的形式显示在文本左侧或右侧。

列表控件位置:

  • 状态和主要操作放在列表磁帖的左侧。
  • 次要操作和信息放在磁帖的右侧。

类型

复选框
开关
排序
展开/折叠
滑动隐藏控件

菜单控件

选中
行内信息
嵌套菜单标识

用法 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

列表控件分为四类:

  • 状态
  • 主要操作(包括文文本)
  • 次要操作
  • 次要信息

在 LTR(从左向右)语言的界面中,将最容易辨认的元素放在磁帖的左侧,反之亦然。状态和主要操作放在磁帖的左侧。列表项中的文本可以考虑放置在主要操作的触控范围内。

不要把图标和操作放在一起,例如把复选框放在头像旁边。

如果列表项的主要操作是导航性质的,则不要使用图标。列表项本身及其情境就足以传达出操作结果。

次要操作和次要信息应该放在标题的右侧。次要操作的操作范围是独立于主要操作的,就像用户预期的那样,一个图标触发一个操作。

状态和主要操作放在磁帖的左侧。次要操作和次要信息放在标题的右侧。

列表控件类型 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

复选框

复选框可以作为主要操作,也可以作为次要操作。

类型:主要操作/主要状态

桌面端的复选框应该只在鼠标悬停和获取焦点时显示。

列表中的复选框是主要操作和状态指示器。

类型:次要操作

单独的操作目标

当控制一组变量时,考虑使用开关来替代。

列表中的复选框是次要操作。

开关

类型:次要操作

单独的操作目标

开关是次要操作并且是单独的操作目标。

排序

类型:次要操作

取决于当前列表的模式,通常是单独的操作目标。

允许用户在列表内拖动条目。通常出现在列表编辑模式下。

排序图标是列表项的次要操作。

展开/折叠

类型:次要操作

单独的操作目标

展开和折叠列表是垂直的列表视图,用来展示当前条目的隐藏详情。

轻触列表控件可以展开列表。

已经展开的列表。

折叠的单行列表项

展开的单行列表项

滑动提示

类型:其他

在滑动列表项时,滑动提示会显示出这样做的后果。滑动提示可以转换成操作。

无论从哪个方向滑动列表项,都会出现图标来暗示操作。滑走之后,会有后续操作以文本按钮的形式出现在列表项原本的位置。

从右向左滑动列表项会出现图标来暗示操作。

从左向右滑动列表项会出现图标来暗示操作。

菜单控件类型 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

菜单是特殊类型的列表。在菜单中,使用下拉菜单和弹出菜单的控件。不要在普通列表中使用这些控件。

选中

类型:状态

非单独的操作目标。

仅用于菜单。表示当前列表项已被选中,通过点击其他控件来完成选择。

打勾表示列表项已被选中

行内信息

类型:次要信息

非单独的操作目标。

仅用于菜单。行内信息是一小段文本,可以提供与标题相关的信息或提示(比如快捷键)。它不能被截断。

行内信息为加粗、斜体和下划线提供了快捷键。

嵌套菜单标识

类型:主要操作

非单独的操作目标。

仅用于菜单。该符号表示鼠标悬停、聚焦或者选中后会出现子菜单。

菜单项的符号表示鼠标悬停、聚焦或者选中后会出现子菜单。