Material Design 组件图鉴 —— Cards

A card is a sheet of material that serves as an entry point to more detailed information. 卡片是作为更多详细信息的入口的一种承载物。

用法

卡片是一种承载各类型内容的一种很好的承载物。照片、按钮、文字,很多东西都可以放置在卡片里面。非常灵活。

当很多卡片都放置在一个平面上的时候,可以称之为一个卡片集。

何时使用:

  • 需要一次性综合展示多种类型信息的时候,文字、图片、视频等等。
  • 支持展示大小不一的内容物,例如图片,dashboard数据等等。
  • 可以包含点赞、评论按钮等等。
  • 当图片信息需要很多文字加以补充。
  • 内容与内容之间的同质性不高。相册、feed等等就不适用卡片作为承载物。

卡片一定有 2dp 的圆角,没有圆角的被称为 title。 卡片或含多种操作方式。 卡片一般是可以重新排列或去掉的。

内容

卡片通常作为详细内容的入口,卡片本身可以承载的内容可以是非常繁多的。卡片集内的卡片可以各自承载不同格式、不同尺寸的内容,也可以赋予其非常多的操作手势,但是一切都不要过量。

内容层级

卡片内重要的内容应当占去更大的面积以强调其重要性。

卡片内图片的放置方式有很多种,要视其重要性与作用进行选择。

以图像作为背景的卡片很常见,这时候要注意文字可读性

行为

卡片有固定的高与宽。其最大高度最大宽度不会超过所处于平台的边界,但是卡片可以临时展开,例如临时展开评论区。

卡片是不会以3d翻转这个动效来去展示更多信息的

支持手势

swipe gesture pick-up-and-move gesture

即使是同个卡片集中的卡片都可以因为内容的不同而存在不同的宽高。

它们的一般排列原则是: 从左至有,从上至下

滚动操作

卡片集只允许做垂直方向的滚动操作

而卡片集内的卡片并不允许再有自己的垂直方向滚动的操作,卡片内容量不能超过卡片本身的最大高度。

所以,即便是可以临时展开,处于卡片集中的卡片也不能展开得太大,其自身也不能再带垂直方向的滚动操作。

在桌面端的卡片就可以带自己的滚动操作。

焦点

动作

卡片可以容纳非常多的交互方式。

卡片的 primary action area(主要动作区)通常占去卡片最大区域,与主要内容呼应,同时也可以带有非常多的 supplemental actions area(补充动作区)。

补充动作区通常于卡片上的 icon,文字,按钮,组件等等位置。

同一张卡片内,同一个补充动作区域内的操作点最好不要超过两个。

卡片内也可以放置各类组件。

卡片内的溢出菜单可被放置于右上角或是右下角。

附加操作

卡片内严重不建议再使用inline超链接。

内容块及布局尺寸

卡片内容可能会含以下集中内容:

  • header(可选)
  • 一级标题
  • 富媒体(视频、图片等等)
  • 补充文字
  • 动作区域

内容块灵活的组合能够组成任意用途的卡片。

内容块类型及常用尺寸

  • Title 文字尺寸有两种,24sp或者14sp

  • Subtitle 一般为 14sp

  • 使用 24sp title 的时候,title 上边距为 24dp

  • Primary title 区域以下如果还有内容的话,title 下边距为 16sp。

  • 补充文字大小为 14sp


卡片集

(移动端) 卡片与屏幕的边距:8dp 卡片与卡片之间的边距:8dp

在其他平台上卡片与卡片之间的边距还可以为:8、16、24、40dp

移动端普通状态下卡片的高度为 2dp,升起状态为 8dp 桌面端普通状态下高度可为 0dp,升起状态为 8dp


内容块组合