Dividers 分隔线(译自谷歌材料设计指南)

原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。

 

分隔线是一条用于对列表和布局中的内容进行分组的细线。

 

目录

  1. 内容
  2. 用法
  3. 类型
  4. 主题化
  5. 规格

 

用法

分隔线将内容明确分组。

原则

Dividers 分隔线(译自谷歌材料设计指南)

 

类型

Dividers 分隔线(译自谷歌材料设计指南) Dividers 分隔线(译自谷歌材料设计指南)

 

类型

全出血分隔线

全出血分隔线将内容分成几个部分,例如:

  1. 分隔列表和布局元素
  2. 指示元素可扩展到哪里

Dividers 分隔线(译自谷歌材料设计指南)

内嵌分隔线

当存在诸如图标或头像之类的锚定元素时,使用内嵌分隔线。

Dividers 分隔线(译自谷歌材料设计指南) Dividers 分隔线(译自谷歌材料设计指南)

居中分隔线

分隔线也可以放置在布局的中间。它们最适合分离如收据上的价格的相关内容。

Dividers 分隔线(译自谷歌材料设计指南)

 

带有副标题的分隔线

分隔线可以与副标题配对以定义分组内容。将分隔线放在副标题上方以加强副标题与内容的连接。

Dividers 分隔线(译自谷歌材料设计指南)

 

主题化

Fortnightly材料主题

此款新闻App的分隔线颜色已使用材料主题进行自定义。

Dividers 分隔线(译自谷歌材料设计指南)

Fortnightly的自定义分隔线

 

颜色

Fortnightly的分隔线使用了自定义颜色

Dividers 分隔线(译自谷歌材料设计指南)

元素

类别

属性

表面

表面

颜色

不透明度

#FFFFFF

100%

分隔线

表面之上

颜色

不透明度

#000000

12%

 

Owl材料主题

这个教育App的分隔线颜色已使用材料主题进行了自定义。

Dividers 分隔线(译自谷歌材料设计指南)

Owl的自定义分隔线

 

颜色

Owl的分隔线为自定义颜色

Dividers 分隔线(译自谷歌材料设计指南)

元素

类别

属性

背景

背景

颜色

不透明度

#0336FF

100%

分隔线

背景之上

颜色

不透明度

#FFFFFF

20%


规格

Dividers 分隔线(译自谷歌材料设计指南)

 

原文地址:Material Design

叶子设计 >> https://www.yeziui.cn/tutorials/app/1379.html

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注