Chips 纸片

珠珠 APP设计 1072浏览

这是一个翻译系列,原文是谷歌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 纸片

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