Dividers 分隔线

珠珠 APP设计 1288浏览

这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。

 

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

 

目录

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

 

用法

分隔线将内容明确分组。

原则

 

类型

 

类型

全出血分隔线

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

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

内嵌分隔线

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

居中分隔线

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

 

带有副标题的分隔线

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

 

主题化

Fortnightly材料主题

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

Fortnightly的自定义分隔线

 

颜色

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

元素

类别

属性

表面

表面

颜色

不透明度

#FFFFFF

100%

分隔线

表面之上

颜色

不透明度

#000000

12%

 

Owl材料主题

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

Owl的自定义分隔线

 

颜色

Owl的分隔线为自定义颜色

元素

类别

属性

背景

背景

颜色

不透明度

#0336FF

100%

分隔线

背景之上

颜色

不透明度

#FFFFFF

20%


规格

 

原文地址:Material Design

译者:珠珠

 

转载请注明:学UI网 » Dividers 分隔线

登录收藏
 
你可能喜欢的:
业务想大多全,用户要精准简,首页设计该如何破局?业务想大多全,用户要精准简,首页设计该如何破局?
案例锦囊|交互设计中「情感化」设计优秀案例(二)案例锦囊|交互设计中「情感化」设计优秀案例(二)
这个练习虽然已经不错了,但我觉得还可以有以下几点能优化!这个练习虽然已经不错了,但我觉得还可以有以下几点能优化!
iOS 规范与 Material Design 哪里不同?官网总结了这几点iOS 规范与 Material Design 哪里不同?官网总结了这几点
百度这一局改版,内容导向设计做得真行!百度这一局改版,内容导向设计做得真行!
微信生态中的设计(上) | 设计师如何通过生态视角找到设计优化点?微信生态中的设计(上) | 设计师如何通过生态视角找到设计优化点?
酷家乐优秀设计频道改版酷家乐优秀设计频道改版
如何用新风格引爆业务增长如何用新风格引爆业务增长
一局APP首页 改版设计分析一局APP首页 改版设计分析
干货|交互设计中的「有效反馈」7大准则!干货|交互设计中的「有效反馈」7大准则!