Material design - Components – Dividers

Dividers - 分隔线

A divider is a thin, lightweight rule that groups content in lists and page layouts.

【翻译】
分隔符是一种轻量级的轻量级规则,用于对列表和页面布局中的内容进行分组。

Dividers help organize page content and hierarchy into individual tiles.
Full-bleed dividers emphasize separate content areas and sections that require more distinct visual separation. Alternatives to full-bleed dividers include white space, subheaders, or inset dividers.
Image-based content in grid lists does not need dividers. Grid lists adequately separate content using white space and subheaders.

【翻译】
分隔符帮助将页面内容和层次结构组织成单个图块。
等屏宽分割线强调单独的内容区域和需要更明显的视觉分离的部分。等屏宽分割线替代品包括空格,子报头或插入分隔符。
网格列表中基于图像的内容不需要分隔符。 网格列表使用空格和子标题来充分分隔内容。

Usage - 用法
For lists and to separate content

【翻译】
用于列表和分隔内容

Type of dividers - 分隔符类型
Full-bleed dividers are used to separate distinct content sections.
Inset dividers are used to separate related content.

【翻译】
等屏宽分割线用于分离不同的内容部分。
插入分隔符用于分隔相关内容。

Specs - 规格
Thickness: 1dp
Opacity: 12% black or 12% white
Placement: Along the bottom edge of content tiles

【翻译】
厚度:1dp
不透明度:12%黑色或12%白色
放置:沿着内容的底部边缘

Usage - 用法

Dividers help users understand how content is organized by establishing a rhythm and hierarchy on a page. But a heavy use of dividers can lead to visual noise and dilute their impact.

Full-bleed dividers emphasize separate content areas and sections, but if such strong divisions are not required, consider using white space, subheaders, or inset dividers.

【翻译】
分隔线通过在页面上建立节奏和层次结构,帮助用户了解内容的组织方式。 但是,大量使用分隔符可能会导致视觉噪声并降低其影响。
等屏宽分割线强调单独的内容区域和部分,但如果不需要这种强分割,请考虑使用空格,子标头或插入分隔符。

Items without anchors - 没有锚点的项目
When lists don’t have an anchoring element such as an avatar or icon, spacing alone isn’t always enough to separate tiles. In this case, full-bleed dividers can help create rhythm and separate individual tiles.

【翻译】
当列表没有锚定元素(如头像或图标)时,单独的空间并不总是足以分隔图块。在这种情况下,等屏宽分割线可以帮助创建节奏和单独的区块。

[图片上传失败...(image-81a0e5-1552295408103)]
Full-bleed dividers separate email summaries.

【翻译】
等屏宽分割线分隔电子邮件摘要。

image

Full-bleed dividers separate the From, To, Subject, and Message sections of the email screen.

【翻译】
等屏宽分割线分隔电子邮件屏幕的“发件人”,“收件人”,“主题”和“邮件”部分。

**Image-based content - 基于图像的内容 **
Because the grid itself creates visual distinction, grid lists do not need dividers to separate subheaders from content. In this case, the white space and the subheaders separate the sections adequately.

【翻译】
因为网格本身创建视觉区别,网格列表不需要分隔符来从内容中分离子标头。在这种情况下,白色空间和子标题适当地分离这些部分。

image

The white space and the subheaders separate the photos and albums.

【翻译】
白色空间和子标题分隔照片和相册。

正确的示范

Do.
Judicious use of inset dividers demarcates major sections of content.

【翻译】
正确的示范
合理使用插图分隔符划分内容的主要部分。

正确的示范

Do.
Use inset dividers in conjunction with anchoring elements such as avatars.

【翻译】
正确的示范
使用插入分隔线与锚固元素(如化身)结合使用。

[图片上传失败...(image-14105b-1552295408103)]
Don't.
Overuse of full-bleed dividers creates visual noise and ultimately diminishes the meaning of the dividers.

【翻译】
错误的示范
过度使用等屏宽分割线会产生视觉噪声,并最终降低分割线的含义。

[图片上传失败...(image-94c36d-1552295408103)]
Don't.
Inset dividers help cut down on visual noise and should be used with anchor elements, but overuse reduces their meaning.

【翻译】
错误的示范
插入分隔符有助于减少视觉噪声,应与锚固元素一起使用,但过度使用会降低其意义。

Types of dividers - 分割符的类型

Full-bleed dividers - 等屏宽分割线

Full-bleed dividers separate distinct content sections (e.g., biographic details from contact information) or distinct content elements (e.g., list items) in both lists and page layouts.

Full-bleed dividers can also indicate seams in material where the material will expand when content is expanded.

【翻译】
等屏宽分割线将列表和页面布局中的不同内容部分(例如,联系人信息的传记细节)或不同内容元素(例如,列表项)分离。
等屏宽分割线还可以指示材料在材料膨胀时膨胀的接缝。

image

Example of full-bleed divider

【翻译】
等屏宽分割线示例

image

Example of full-bleed divider

【翻译】
等屏宽分割线示例

Inset dividers - 插入分隔符

Inset dividers separate related content, such as sections in a list of contacts or emails in a conversation.

Inset dividers should be used in conjunction with anchoring elements such as icons or avatars aligned with the Title Key Line.

【翻译】
插入分隔符用于分隔相关内容,例如对话中的联系人或电子邮件列表中的部分。
插入分隔线应与锚定元素(例如图标或与标题键行对齐的头像)结合使用。

[图片上传失败...(image-1ea581-1552295408103)]
Example of inset divider

【翻译】
插入分隔符示例

image

Example of inset divider

【翻译】
插入分隔符示例

Subheaders and dividers - 子标题和分隔符

When using a divider with a subheader, place the divider above the subheader to reinforce the relationship between the subheader and the content.

【翻译】
当使用带有子标题的分隔符时,将分隔符放在子标题之上以加强子标头和内容之间的关系。

[图片上传失败...(image-914c5e-1552295408103)]
Example of divider above subheader

【翻译】
子标题上的分隔符示例

[图片上传失败...(image-af3cc7-1552295408103)]
Example of divider above subheader

【翻译】
子标题上的分隔符示例

Specs - 规格

Dividers are 1dp thick, with an opacity of either 12% black in light themes or 12% white in dark themes.

Dividers are placed along the bottom edge of the content tiles, independent of the grid.

【翻译】
分隔线为1dp厚,不透明度为12%黑色在光主题或12%白色在黑暗主题。
分隔线沿着内容卡片的底部边缘放置,独立于网格。

image

The divider sits within the baseline of the tile.

【翻译】
分隔符位于图块的基线内。

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

推荐阅读更多精彩内容

  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi阅读 7,257评论 0 10
  • 范文:拾穗 收获的季节,麦香混合在尘雾中,弥散在田野上。太阳偏西,割麦的男人们已经离开了。地头几棵大树旁,已...
    小霸王朱老师阅读 1,004评论 0 1
  • 生活。刚好下午买的衣服上面就写着Life,意思生活或生命。晚饭吃完在洗碗时就想到了生活。生活就是一个道场,生活中出...
    河边木屋阅读 155评论 0 0
  • 运动时间:9月5日 锻炼部位:核心 热身+拉伸:最伟大拉伸,来回一趟10次,做两趟 正式动作:每个动作做3组 ...
    cltongever阅读 167评论 0 0
  • 这两天到婆婆家,没有网,所以手机就很自然的放下了。 跟三个朋友做温暖也是刻意让自己去聊天,发现自己的问题。一个是拳...
    娜日乐阅读 320评论 0 0