【Material Design视觉设计语言】UI组件设计（二）：卡片

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

【Material Design视觉设计语言】章节列表

【Material Design视觉设计语言】开篇
【Material Design视觉设计语言】Material Design设计概述
【Material Design视觉设计语言】应用布局设计
【Material Design视觉设计语言】应用自适应布局
【Material Design视觉设计语言】应用样式设计
【Material Design视觉设计语言】应用动画设计
【Material Design视觉设计语言】UI组件设计（一）：按钮
【Material Design视觉设计语言】UI组件设计（二）：卡片
【Material Design视觉设计语言】UI组件设计（三）：纸片
【Material Design视觉设计语言】UI组件设计（四）：表格
【Material Design视觉设计语言】UI组件设计（五）：提示框
【Material Design视觉设计语言】UI组件设计（六）：分隔线
【Material Design视觉设计语言】UI组件设计（七）：网格
【Material Design视觉设计语言】UI组件设计（八）：列表
【Material Design视觉设计语言】UI组件设计（九）：菜单
【Material Design视觉设计语言】UI组件设计（十）：选择器
【Material Design视觉设计语言】UI组件设计（十一）：进度条
【Material Design视觉设计语言】UI组件设计（十二）：滑块
【Material Design视觉设计语言】UI组件设计（十三）：Toast
【Material Design视觉设计语言】UI组件设计（十四）：Tabs
【Material Design视觉设计语言】UI组件设计（十五）：文本框

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

一 卡片的特点

卡片有以下特点：

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

卡片显示的内容：

• 作为一个集合，由多种数据类型组成（例如，卡片集包含照片，电影，文本，图像）
• 不要求直接比较（用户不直接与图像或字符串比较）
• 包含可变长度内容，例如评论
• 由富内容或互动操作组成，例如+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 表现网格图片库是不要使用卡片

举例

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

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