您的位置：首页 > 产品设计 > UI/UE

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

2015-08-28 10:02 477 查看

作者：郭孝星

微博：郭孝星的新浪微博

邮箱：allenwells@163.com

博客：http://blog.csdn.net/allenwells

Github：https://github.com/AllenWells

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

一卡片的特点

卡片有以下特点：

卡片通常是通往更详细复杂信息的入口。

卡片有固定的宽度和可变的高度。最大高度限制于可适应平台上单一视- 图的内容，但如果需要它可以临时扩展（例如，显示评论栏）。

卡片不会翻转以展示其背后的信息。

卡片显示的内容：

作为一个集合，由多种数据类型组成（例如，卡片集包含照片，电影，文本，图像）

不要求直接比较（用户不直接与图像或字符串比较）

包含可变长度内容，例如评论

由富内容或互动操作组成，例如+1按钮，滑块，或评论

如果使用列表需要显示超过三行文本

如果使用网格列表需要显示更多文本来补充图像

二卡片的布局

字体：正文（14 sp 或 16 sp）、标题（24 sp 或更大）

扁平按钮：Roboto Medium, 14 sp, 10 sp 字间距

屏幕边界与卡片间留白：8 dp

卡片间留白：8 dp

内容留白：16 dp

三卡片的操作

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

卡片提供的操作：

追加操作：卡片的追加操作通过图标，文本，和UI控制准确地呼出，这些通常放置在卡片底部。放置在主要内容中的行内UI控制可以调整主要内容的外观，例如，滑块来选择日期，星星来给内容评分，或者分段的按钮来选择日期范围。

弹出菜单：弹出菜单（可选）通常放置在卡片的右上角，但它也可以放置在右下方，如果这样安排改善内容布局和易读性。

卡片提供的功能：

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

卡片提供的交互：

手势：支持单张卡片基准上的滑动手势。卡片手势表现应该始终在卡片组中实现。按住并拖动手势可行。然而，考虑对用户能够在集合中排序卡片是否重要，或者如果按要求筛选/排序内容可以提供更好的体验。

滚动：卡片集只会竖直滚动。超过最大卡片高度的卡片内容将被截断且不可滚动。带截断内容的卡片可以扩展，这样卡片高度可以超过视图的最大值。这种情况下，卡片将与卡片集一起滚动。

注意：

不要滥用带过多操作的弹出菜单。

强烈不推荐文本内容的行内链接。

尽管卡片可以提供多种操作，UI控制，和弹出菜单，谨慎使用并且记得卡片是通往更复杂详细信息的入口。

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

举例