作者：郭孝星
微博：郭孝星的新浪微博
博客：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 表现网格图片库是不要使用卡片
举例
网格瓷砖是表现图片库的干净轻量的方法
在这里加入卡片是没有必要的
版权声明：当我们认真的去做一件事的时候，就能发现其中的无穷乐趣，丰富多彩的技术宛如路上的风景，边走边欣赏。
时间： 2024-11-06 07:33:57