Chips 纸片

珠珠 APP设计 461浏览

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

 

纸片是承载输入、属性或操作的紧凑元件。

 

目录

  1.     用法
  2.     分类
  3.     剖析
  4.     输入纸片
  5.     选择纸片
  6.     过滤纸片
  7.     操作纸片
  8.     主题化
  9.     规格


用法

纸片允许用户输入信息,进行选择,过滤内容或触发操作。纸片应该作为一组多个交互元素动态显示。与按钮不同,按钮是连贯的、用户熟悉的唤起某操作的方式,而纸片是用户希望在同一个通用区域中看到的相同的操作。

原则

类型

输入纸片

输入纸片表示在字段中使用的信息,例如实体或不同的属性。

 

选择纸片

在包含至少两个选项的集合中,选择纸片代表单个选择。

 

过滤纸片

过滤纸片表示过滤一个集合。

 

操作纸片

操作纸片触发与主要内容相关的动作。

 

剖析

1.容器

纸片容器容纳所有纸片元素,它的尺寸取决于这些元素。容器也可以是个框。

2.缩略图(可选)

缩略图通过显示头像,logo或图标来代表实体(如个人)。

3.文本

纸片文本可以是实体名称、描述、标签、操作或会话。

4.删除图标(可选)

输入纸片可以包含删除图标。

 

输入纸片

用法

输入纸片以紧凑的形式表示复杂的信息,例如实体(人,地点或事物)或文本。他们支持用户输入并通过将文本转换为纸片来验证输入。

 

输入纸片可以提供一些输入建议。

 

行为

可转换

输入纸片根据用户输入变换文本。

文本转换为输入纸片。

 

可编辑

当用户对纸片执行操作,例如发送电子邮件时,输入纸片文本可以编辑。通过点击纸片来编辑输入纸片的文本。

点击时输入纸片可编辑。

 

信息化

如果系统无法识别文本输入,则输入纸片可以提示错误。

输入纸片可以提示错误。

 

多个纸片

单个字段可以包含多个输入纸片。

多个输入纸片

 

可移动

输入纸片可以重新排序或被移动到其他区域。

可移动的输入纸片

 

可扩展

输入纸片可以扩展以显示更多信息或选项。

可扩展的输入纸片

 

位置

输入纸片可以与其他组件组合出现。可以这样:

● 和文本输入光标一起内嵌在字段中

● 竖排在列表中

● 放在水平滚动列表中

若所有输入纸片都需要可见,则可以换行。

水平滚动的输入纸片。

 

状态

输入纸片状态

 

选择纸片

用法

选择纸片允许从一组选项中选择单个纸片。 选择纸片在紧凑区域中清晰地描绘并显示选项。

它们是可切换按钮、单选按钮和单选菜单的优秀替代品。

行为

选择单个选项纸片会自动取消选择该组中的所有其他纸片。

选择一个选择纸片会取消选择其他纸片

 

位置

选择纸片成群出现。它们通常水平、顺序显示。

选择纸片水平位置

 

选择纸片不应该只有一个选项。

 

状态

选择纸片状态

 

过滤纸片

用法

过滤纸片使用标签或描述性词语来过滤内容。

过滤纸片在紧凑的区域中清晰地描绘并显示选项。 它们是可切换按钮或复选框的优秀替代品。

 

行为

点击纸片进行选择。可以选择或不选择多个纸片。

可以添加图标以表明过滤纸片已被选中。

 

当用户开始选择过滤纸片时,对应的建议可以动态地改变。

 

位置

过滤纸片可以显示在搜索字段下方。

 

在侧边栏中显示多个过滤纸片。

 

 

过滤纸片不应只提供一个选项。

 

状态

过滤纸片的状态

 

操作纸片

用法

操作纸片提供与主要内容相关的操作。它们应该在界面中随着上下文动态呈现。可以用 按钮替代操作纸片,按钮是固定且一致出现的。

行为

操作纸片可以触发动作或显示进度和确认。

点击操作纸片会触发情景操作。

 

操作纸片可以显示进度和确认反馈。

 

位置

操作纸片显示在主要内容之后,例如在卡片下方或固定在屏幕底部。

操作纸片应显示在主要内容下方。

 

状态

选择纸片的状态

 

主题化

Reply素材主题

这个电子邮件app的输入纸片已使用材料主题进行了定制。定制领域包括颜色、文本和形状。

Reply的自定义输入纸片

 

颜色

Reply的输入纸片在两个元素上使用了自定义颜色:文本和容器。

元素

类别

属性

文本

表面之上

颜色

不透明度

#232F34

100%

容器

表面之上

颜色

不透明度

#232F34

12%

 

文本

Reply的输入纸片使用了自定义排版文本。

元素

类别

属性

文本

正文2(Body 2)

字体

字型

字号

大小写

Work Sans

Regular

15

句首字母大写

 

形状

Reply的输入纸片容器具有自定义圆角形状。

元素

分类

属性

容器

小组件

Family尺寸

圆角半径50%

 

Shrine材料主题

这个零售应用程序的选择纸片已经使用材料主题进行了定制。定制领域包括颜色,文本和形状。

Shrine的自定义选择纸片

 

颜色

Shrine的选择纸片在四个元素上使用自定义颜色:已选容器、已选文本、未选容器和未选文本。

元素

类别

属性

已选容器

主色

颜色

不透明度

#FEDBD0

100%

已选文本

主色之上

颜色

不透明度

#442C2E

100%

未选文本

表面之上

颜色

不透明度

#442C2E

100%

未选容器

表面之上

颜色

不透明度

#442C2E

12%

 

文本

Shrine的选择纸片使用了自定义排版文本。

元素

类别

属性

文本

正文2(Body2)

字体

字型

字号

大小写

Rubik

Medium

14

句首字母大写

 

形状

Reply的选择纸片容器有定制的角形。

元素

分类

属性

容器

Override

Family尺寸

圆角半径4;4;4;4dp

 

Fortnightly材料主题

这款新闻应用程序的过滤纸片已经使用材料主题进行了定制。定制领域包括颜色、文本和形状。

Fortnightly自定义过滤纸片

 

颜色

Fortnightly的过滤纸片在两个元素上使用自定义颜色:文本和容器边框。

元素

分类

属性

容器

Override

Family尺寸

圆角半径4;4;4;4dp

 

文本

Fortnightly的过滤纸片使用了自定义文本。

元素

类别

属性

文本

正文2(Body2)

字体

字型

字号

大小写

Libre Franklin

Regular

14

首字母大写

 

形状

Fortnightly的过滤纸片具有自定义的角形。

元素

分类

属性

容器

小组件

Family尺寸

切角0;0;0;0dp

 

规格

操作纸片

线框操作纸片

选择纸片

过滤纸片

输入纸片

分组纸片

 

原文地址:Material Design

译者:珠珠

 

转载请注明:学UI网 » Chips 纸片

登录收藏
 
你可能喜欢的:
还在靠感觉做界面设计?来了解下格式塔,怎么套公式做设计还在靠感觉做界面设计?来了解下格式塔,怎么套公式做设计
产品细节剖析,让你看看大厂是如何做设计的05产品细节剖析,让你看看大厂是如何做设计的05
导航栏该如何设计?导航栏该如何设计?
老虎帮学员作品公开老虎帮学员作品公开
没想到这个设计这么简单,效果却这么好!没想到这个设计这么简单,效果却这么好!
58的系统性设计,让我收获不小58的系统性设计,让我收获不小
【蓝湖有方】如何做出有效的设计,让产品又好看又好用?【蓝湖有方】如何做出有效的设计,让产品又好看又好用?
初探运营活动故事化体验设计初探运营活动故事化体验设计
产品细节剖析,让你看看大厂是如何做设计的04产品细节剖析,让你看看大厂是如何做设计的04
挖掘服务链路中的体验设计机会点挖掘服务链路中的体验设计机会点