Cards 卡片

珠珠 APP设计 1221浏览

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

卡片包含有关单个主题的内容和操作。

 

目录

  1. 用法
  2. 剖析
  3. 行为
  4. 操作
  5. 卡片集
  6. 主题化
  7. 规格

 

用法

卡片是展示单个主题的内容和操作的界面。

他们应该易于浏览相关的和可操作的信息。其中的诸如文本和图像等元素应明确指示出层次结构。

 

原则

 

剖析

容器是卡片中唯一必需的元素。所有其他元素都是可选的。

卡片布局可以有所不同,以支持它们包含的内容类型。常见以下元素。

  1. 容器
    卡片容器容纳所有卡片元素,它们的大小由这些元素占据的空间决定。卡片海拔高度即容器高度。
  2. 缩略图[可选]
    卡片可以包含缩略图以显示头像、logo或图标。
  3. 标题文字[可选]
    标题文字可以包括诸如相册或文章的名称之类的内容。
  4. 子标题[可选]
    子标题文本可以包括文本元素,例如文章署名或标记位置。
  5. 媒体[可选]
    卡片可以包括各种媒体,包括照片和图形,例如天气图标。
  6. 辅助文本[可选]
    支持文本包括文章摘要或餐馆描述等文本。
  7. 按钮[可选]
    卡片可以包括操作按钮。
  8. 图标[可选]
    卡片可以包括操作的图标。

 

每张卡都由内容块组成。所有块,作为一个整体,与单个主题或目的页面相关。内容可以根据其层次结构级别获得不同级别的强调。

卡片包含富媒体,首要标题,支持文本和操作。

 

分隔线

分隔线可用于分隔卡片中的区域或指示可以扩展的卡片区域。

使用内嵌式分隔线(1),长度没有卡片那么宽的,来分隔相关内容。

 

可扩展的内容应该使用全宽(全出血)分隔线。

 

行为

转换

卡片可以转换为显示更多内容。

卡片使用父-子转换来填充整个屏幕。

 

 

展开卡片以显示信息。

 

 

卡片不会翻转来显示信息。

 

海拔高度

在移动设备上,卡片的默认高度为1dp,升高后高度为8dp。

阴影有助于表明这是卡片。

在桌面和移动设备上,卡片可以具有0dp的静止高度。它们在悬停时升至8dp。

0dp的边框有助于表明这是卡片。

 

手势

手势应该在卡片集中保持相对一致。卡片上经常使用的手势包括滑动、拾取和移动以及滚动。

 

滑动

在卡片的任何位置,一次可以用一种手势来滑动单张卡片。

它可以用于:

  1. 关闭卡片
  2. 更改卡片的状态(例如标记或存档)

 

 

一张卡片只能配有一个滑动动作。

 

 

卡片不应包含可滑动的内容(例如图像轮播或分页)。 滑动手势也不应导致卡片内容块在滑动时分离。

 

拾起并移动

拾取和移动手势允许用户移动和重新排列集合中的卡片。

 

移动卡片时,请增加其海拔高度。

 

 

不要将卡片移到其他卡片后面。

 

 

不要让卡片将其他元素撞开。拾取卡片时,它会显示在所有元素的前面(应用栏和导航除外)。

 

滚动

高于最大卡片高度的卡片内容会被截断并且不会滚动,但可以通过扩展卡片的高度来显示它。卡片可以扩展到超出屏幕的最大高度,在这种情况下,卡片在屏幕内滚动。

 

在移动设备上,卡片可以扩展以显示更多内容,并在屏幕内滚动。卡内的内容不会滚动。

 

 

在移动设备上,卡片内部内容无法滚动,因为它可能会导致显示两个滚动条。

 

 

在桌面端,卡片内容可以在卡片中扩展和滚动。

 

操作

首要操作

卡片的主要操作区域通常就是卡片本身。通常,卡片是某个主题的细节页面中一个大触摸目标。

卡片的操作区域包含富媒体和辅助文本。

 

补充操作

补充操作由卡片上的图标,文本和UI控件表示。它们通常放在卡片的底部。

对于两个以上的补充操作,请使用溢出菜单。

卡片底部的补充文字和操作

 

溢出菜单

溢出菜单包含相关操作。它们通常放在卡片的右上角或右下角。

溢出菜单通常位于卡片的右上角或右下角。

 

UI控件

UI控件可以包含在卡中,以允许用户与卡片的内容进行交互。UI控件可以是滑块、评价内容的星标、纸片或按钮。

 

此卡片包含用于评分内容的星标。

此卡片在操作区域内包含选择纸片。

 

此卡片在操作区域内包含滑块控件。

 

其他操作

卡片可以支持多种操作,例如UI控件和溢出菜单。因为卡片是更详细信息的入口点,因此它们的操作数量应有所限制。

谨慎使用

卡片是更繁杂的信息的入口。小心不要使信息或操作量过载。

 

焦点

当遍历卡片上的焦点时,访问每个聚焦元素,然后移动到下一张卡片。

对于仅使用焦点框(使用方向键和键盘)导航的用户,卡片或有一项主要操作,或打开包含主要和补充操作的新页面。

卡片上焦点的移动

 

卡片集

用法

当存在多张卡片时,它们被组合在一起成为一个或多个集合。默认情况下,集合中的卡片是共面的,除非拾取或拖动它们,否则有相同的静止海拔。

 

布局

把卡片组织成集合,以方便使用。如何布置卡片会影响它们的感知方式。

将卡片添加到集合时,第一个项目会自动定位在左上角。后续卡片从左到右,从上到下排列。

 

可浏览

要使一组卡片易于浏览,请将它们放在一致的模式中。

可浏览的卡片

 

仪表板

要在屏幕上显示多个主题和功能,请使用仪表板样式的卡片集。

仪表板式的卡片集

 

可区分

要突出显示每张卡片的个性,风格或新颖性,请使用带有不对称网格的卡片集。

非对称网格中的卡片

 

容器内的集合

卡片集可以放在容器中,并在其中滚动。

 

卡片集可以在容器内水平滚动。

 

 

集合的容器不应该是卡片,容器的整个表面区域是不能交互的。

 

过滤和排序

可以通过各种方式过滤卡片集,包括按日期或字母顺序。 如果可以过滤集合,则过滤器必须应用于集合中的每个卡片。

过滤器或排序选项应放在卡片集之外。

 

主题化

Owl材料主题

这款教育app的卡片已使用材料主题进行了定制。 定制领域包括颜色、排版和形状。

Owl的自定义卡片

 

颜色

Owl的卡片在三个元素上使用了自定义颜色:容器、文本和图标。

元素

类别

属性

容器

背景

颜色

不透明度

#0336FF

100%

文本,图标

背景之上

颜色

不透明度

#FFFFFF

100%

 

文本

Owl卡片的标题、数字和类型文本使用了自定义排版。

元素

类别

属性

标题

副标题1(Subtitle 1)

字体

字型

字号

大小写

Rubik

Medium

16

首字母大写

数字

副标题2(Subtitle 2)

字体

字型

字号

大小写

Rubik

Medium

14

首字母大写

类别

上划线(Overline)

字体

字型

字号

大小写

Rubik

Regular

10

全部大写

 

形状

Owl的卡片使用自定义的容器形状。

元素

类别

属性

容器

中等组件

Family尺寸

尖角半径0;0;0;0dp

 

Reply素材主题

此电子邮件app的卡片使用了材料主题自定义。定制领域包括颜色、排版和形状。

Reply的自定义卡片

 

颜色

Reply卡片在六个元素上使用了自定义颜色:容器、元数据文本、标题文本、正文文本、图标和图标填充。

元素

类别

属性

容器

主色

颜色

不透明度

#FFFFFF

100%

元数据文本

辅助色之上

颜色

不透明度

#232F34

100%

标题文本

辅助色

颜色

不透明度

#232F34

100%

正文文本

辅助色

颜色

不透明度

#232F34

100%

图标

辅助色

颜色

不透明度

#232F34

100%

图标填充

辅助色

颜色

不透明度

#232F34

30%

 

文本

Reply的卡片标题、正文和元数据文本使用了自定义排版。

元素

类别

属性

标题

标题6(H6)

字体

字型

字号

大小写

Work Sans

Bold

21

句首字母大写

正文

正文1(Body 1)

字体

字型

字号

大小写

Work Sans

Regular

17

句首字母大写

元数据

正文2(Body 2)

字体

字型

字号

大小写

Work Sans

Regular

15

句首字母大写

 

形状

Reply卡片使用自定义容器形状。

元素

类别

属性

容器

中等组件

Family尺寸

圆角半径0;0;0;0dp

 

规格

本节并不是详尽无遗的规范。卡片没有单一的布局,排版或图像尺寸。所有卡片的设计都应满足其所呈现内容的需求。此章节显示了各种卡片布局,以帮助展示其多样性。

有海拔的卡片

线框卡片

 

原文地址:Material Design

译者:珠珠

 

转载请注明:学UI网 » Cards 卡片

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