Material design - Components – Lists: Controls

List controls display information and actions for list items.

【翻译】
列表控制列表项的显示信息和操作。

List controls provide information, indicate a state, or present actions for list items. List controls appear as icons to the left or right of list text.

【翻译】
列表控件提供列表项的信息,指示状态或显示操作。列表控件在列表文本的左侧或右侧显示为图标。

List control placement:

States and primary actions are placed on the left side of a list tile.
Secondary actions and info are placed on the right side of the tile.

【翻译】
列表控件展示位置:
状态和主要操作放置在列表图块的左侧。
次要动作和信息放在图块的右侧。

Types - 类型

Checkbox
Switch
Reorder
Expand/collapse
Leave-behinds

【翻译】
复选框
开关
重新排序
展开/折叠
留下

Menu controls - 菜单控件

Check
Inline information
Nested menu indicator

【翻译】
检查
内联信息
嵌套菜单指示器

Usage - 用法

List controls fall under four categories:

State
Primary action (including text strings)
Secondary action
Secondary info

【翻译】
列表控件分为四类:
状态
主要操作(包括文本字符串)
次要行动
次要信息

Distinguishing elements of list tiles need to be on the left for left-to-right interfaces, and vice versa. States and primary actions are placed on the left side of a list tile. Text within a list item should be considered part of the primary action target.

Don’t place two icons or actions next to one another, such as a checkbox next to an avatar.

If the primary action of the list item is navigational, don’t use an icon. The list item itself and its context should be sufficient to communicate the destination.

Secondary actions and info should be placed on the right side of the title. Secondary actions are always a separate target from the primary action, as users increasingly expect every icon to trigger an action.

【翻译】
列表图块的区分元素需要在左侧用于从左到右的接口,反之亦然。 状态和主要操作放置在列表图块的左侧。 列表项中的文本应被视为主要操作目标的一部分。
不要将两个图标或操作彼此相邻放置,例如头像旁边的复选框。
如果列表项的主要操作是导航,则不要使用图标。列表项本身及其上下文应足以传达目的地。
次要操作和信息应放置在标题的右侧。次要操作始终是与主要操作不同的目标,因为用户越来越期望每个图标触发操作。

[图片上传失败...(image-c2de6c-1552294894386)]
States and primary actions are placed on the left side of a list tile. The secondary action and secondary info should be placed on the right side of the title.

【翻译】
状态和主要操作放置在列表图块的左侧。次要操作和辅助信息应放置在标题的右侧。

Types of list controls - 列表控件的类型

Checkbox - 复选框

A checkbox can either be a primary action or a secondary action.

Type: primary action/state

Desktop checkboxes should appear only on hover and focus.

【翻译】
复选框可以是主要操作或辅助操作。
类型:主要操作/状态
桌面复选框只应在悬停和焦点上显示。

[图片上传失败...(image-11f7ba-1552294894386)]
The checkbox is the primary action and the state indicator for the list item.

【翻译】
复选框是列表项的主要操作和状态指示器。

Type: secondary action

Separate target

When controlling a family of variables, consider using switches instead.

【翻译】
类型:二级动作
单独目标
当控制一系列变量时,请考虑使用开关。

[图片上传失败...(image-4c63e3-1552294894386)]
The checkbox is the secondary action for the list item.

【翻译】
该复选框是列表项的辅助操作。

Switch - 开关

Type: secondary action

Separate target

【翻译】
类型:二级动作
单独目标

[图片上传失败...(image-8983cd-1552294894386)]
The switch is the secondary action and a separate target.

【翻译】
开关是辅助操作和单独的目标。

Reorder - 重新排序

Type: secondary action

Usually a separate target, depending on which mode list it is in.

Allows dragging of the list item to other locations within the list. It usually appears in list editing mode.

【翻译】
类型:二级动作
通常是一个单独的目标,取决于它在哪个模式列表。
允许将列表项拖动到列表中的其他位置。它通常出现在列表编辑模式。

[图片上传失败...(image-d1cc82-1552294894386)]
The reorder icon is the secondary action for the list item.

【翻译】
重新排序图标是列表项的辅助操作。

Expand/collapse - 展开/折叠

Type: secondary action

Separate target

Expands and collapses a list view vertically to show and hide details of existing list items.

【翻译】
类型:二级动作
单独目标
垂直扩展和折叠列表视图以显示和隐藏现有列表项的详细信息。

[图片上传失败...(image-d2f1e3-1552294894386)]
By touching the list control, the user expands the list.

【翻译】
通过触摸列表控件,用户将展开列表。

[图片上传失败...(image-e9ddf7-1552294894386)]
The list is expanded.

【翻译】
列表被扩展。

[图片上传失败...(image-8bfb3b-1552294894386)]
Collapsed single-line item

【翻译】
折叠的单行项目

image

Expanded single-line item

【翻译】
展开的单行项目

Leave-behinds

Type: Other

A leave-behind is an informative hint as to what swiping a list item away will do to that item. The leave-behind can transform into an action.

Swiping on a list item from either direction will reveal an icon indicating the action. After swiping, a follow-up action can appear as a text button within the space of the list item.

【翻译】
类型:其他
留下是一个提示性的提示,即清除项目将会对该项目执行什么操作。留下的东西可以变成一个动作。
从任一方向在列表项上滑动将显示指示动作的图标。在滑动后,后续操作可以作为列表项目空间中的文本按钮显示。

[图片上传失败...(image-f83c90-1552294894386)]
Swiping on a list item from right to left will reveal an icon indicating the action.

【翻译】
从右向左滑动列表项将显示一个表示操作的图标。

[图片上传失败...(image-a47af-1552294894386)]
Swiping on a list item from left to right will reveal an icon indicating the action.

【翻译】
在列表项上从左向右滑动将显示指示操作的图标。

Types of menu controls - 菜单控件的类型

A menu is a special type of list. In menus, use controls that are appropriate for dropdown menus, overflow menus, and so on. Don’t use these controls in regular lists. Use the regular list controls instead.

【翻译】
菜单是一种特殊类型的列表。在菜单中,使用适用于下拉菜单,溢出菜单等的控件。不要在常规列表中使用这些控件。请改用常规列表控件。

Check - 检查

Type: state

Not a separate target.

Menus only. Indicates that the list item has been selected. The selection is done through a different control.

【翻译】
类型:状态
不是一个单独的目标。
仅菜单。表示已选择列表项。通过不同的控制来进行选择。

[图片上传失败...(image-3bcc11-1552294894386)]
The check indicates that the list item has been selected.

【翻译】
检查表示已选择列表项。

Inline information - 内联信息

Type: secondary info

Not a separate target.

Menus only. Inline information is a small snippet of text related to the line title that can provide information or a tip, like a keyboard shortcut. It cannot be truncated.

【翻译】
类型:次要信息
不是一个单独的目标。
仅菜单。内联信息是与线标题相关的一小段文本,可提供信息或提示,如键盘快捷键。它不能被截断。

[图片上传失败...(image-c5dac1-1552294894386)]
The inline information for Bold, Italic and Underline provide keyboard shortcuts.

【翻译】
Bold,Italic和Underline的内联信息提供键盘快捷键。

**Nested menu indicator - 嵌套菜单指示器 **

Type: primary action

Not a separate target.

Menus only. The glyph indicates that a secondary menu will fly out upon hover, focus, and/or selection.

【翻译】
类型:主要操作
不是一个单独的目标。
仅菜单。字形表示当悬停,聚焦和/或选择时,辅助菜单将飞出。

[图片上传失败...(image-cbc97-1552294894386)]
The glyphs for the menu items indicate that a secondary menu will fly out upon hover, focus, and/or selection.

【翻译】
菜单项的字形表示当悬停,聚焦和/或选择时,辅助菜单将飞出。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,835评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,598评论 1 295
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,569评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,159评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,533评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,710评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,923评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,674评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,421评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,622评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,115评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,428评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,114评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,097评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,875评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,753评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,649评论 2 271

推荐阅读更多精彩内容

  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi阅读 7,108评论 0 10
  • 你只管经营好自己 一心向上生长 不要花时间,去控制别人 如果爱没有增加 一切都不会改变
    4a56fbd39f16阅读 212评论 0 0
  • 上午工作到10点40分,赶去参加同学女儿的婚礼,到她家饭店觉得不对劲,门外静悄悄,知道婚礼地点我弄错了,在...
    王文琦阅读 182评论 0 0
  • 2016.09.22 随着喵越来越大,懂的事情也越来越多了。 她已经变成了一个“甜嘴巴”。 妈妈做了好吃的蛋卷,喵...
    摹喵居士阅读 174评论 0 0
  • 我最喜欢冬天,下雪的时候我和弟弟可以堆雪人打雪仗,还可以在院子里铲雪玩。冬天我奶奶还会腌很多酸菜,我爷爷炒的酸菜可...
    姜辰骏阅读 89评论 0 0