作者：郭孝星
微博：郭孝星的新浪微博
邮箱：allenwells@163.com
博客：http://blog.csdn.net/allenwells
Github：https://github.com/AllenWells

卡片是包含一组特定数据集的纸片，数据集含有各种相关信息，它通常用来显示由不同种类对象组成的内容的便捷途径。它们也适用于展示尺寸或操作相当不同的相似对象，像带有不同长度标题的照片。

一 卡片的特点

卡片有以下特点：

• 卡片通常是通往更详细复杂信息的入口。
• 卡片有固定的宽度和可变的高度。最大高度限制于可适应平台上单一视- 图的内容，但如果需要它可以临时扩展（例如，显示评论栏）。
• 卡片不会翻转以展示其背后的信息。

卡片显示的内容：

• 作为一个集合，由多种数据类型组成（例如，卡片集包含照片，电影，文本，图像）
• 不要求直接比较（用户不直接与图像或字符串比较）
• 包含可变长度内容，例如评论
• 由富内容或互动操作组成，例如+1按钮，滑块，或评论
• 如果使用列表需要显示超过三行文本
• 如果使用网格列表需要显示更多文本来补充图像

二 卡片的布局

• 字体：正文（14 sp 或 16 sp）、标题（24 sp 或更大）
• 扁平按钮：Roboto Medium, 14 sp, 10 sp 字间距
• 屏幕边界与卡片间留白：8 dp
• 卡片间留白：8 dp
• 内容留白：16 dp

三 卡片的操作

卡片提供上下文及通往更复杂信息与视图的入口，确保不要滥用带有无用信息或操作的卡片。

卡片提供的操作：

• 追加操作：卡片的追加操作通过图标，文本，和UI控制准确地呼出，这些通常放置在卡片底部。放置在主要内容中的行内UI控制可以调整主要内容的外观，例如，滑块来选择日期，星星来给内容评分，或者分段的按钮来选择日期范围。
• 弹出菜单：弹出菜单（可选）通常放置在卡片的右上角，但它也可以放置在右下方，如果这样安排改善内容布局和易读性。

卡片提供的功能：

• 卡片集筛选，排序，和重组：卡片集可以按要求排序或按日期，文件大小，字母表顺序，或其他参数筛选。集合中的第一项定位于集合的左上角，其余的从左至右从上至下延续。

卡片提供的交互：

• 手势：支持单张卡片基准上的滑动手势。卡片手势表现应该始终在卡片组中实现。按住并拖动手势可行。然而，考虑对用户能够在集合中排序卡片是否重要，或者如果按要求筛选/排序内容可以提供更好的体验。
• 滚动：卡片集只会竖直滚动。超过最大卡片高度的卡片内容将被截断且不可滚动。带截断内容的卡片可以扩展，这样卡片高度可以超过视图的最大值。这种情况下，卡片将与卡片集一起滚动。

注意：

• 不要滥用带过多操作的弹出菜单。
• 强烈不推荐文本内容的行内链接。
• 尽管卡片可以提供多种操作，UI控制，和弹出菜单，谨慎使用并且记得卡片是通往更复杂详细信息的入口。

我们来看几组卡片上实际的操作设计：

举例

二 卡片的实践

2.1 卡片带圆角和多种操作，并且可以忽略和重排

举例

正确的卡片表现方式

错误的卡片表现方式，这其实是网络瓷砖的表现方式。

2.2 不要用卡片打断用户的注意力

举例

快速扫描列表有利于用户方便快捷的查看同类型信息

卡片的使用分散了用户的注意力，用户体验较差。

2.3 表现网格图片库是不要使用卡片

举例

网格瓷砖是表现图片库的干净轻量的方法

在这里加入卡片是没有必要的