每张卡片保留一个主题
确定用户在决定开卡之前需要了解哪些信息。
卡 设计体系
将信息和操作收集到一个易于扫描的单元中。
清单内容
检查进度
01
结构及意义
在使用环境中比较信息和演示。
02
交互性和可用性
尝试操作，更改状态并继续工作。
进度会自动保存在此浏览器中。
指南
检查方法
示例
应用示例
每张卡片保留一个主题
课程卡在“查看课程”按钮之前注明了名称、级别和持续时间。
变体与使用场景
如何分离卡片
使用边框或背景将卡片与页面区分开来,对相同的内容类型保持相同的规则。
在浅色和深色背景上测试卡;无论阴影如何,边界都必须可见。
示例 文档标签使用清晰的边框和链接的标题。
标签中的间距
按反映内容关系的间距对照片、标题、描述和操作进行分组。
尝试使用两行标题并缺少照片;距离不会创造无意义的空间。
示例 图片距标题 12px;描述比标签结束按钮更接近标题。
圆角和裁剪内容
保持半径相同的设计比例,并将图像裁剪为框架的直角。
将照片靠近卡片边缘并打开焦点;图像不超出角点,焦点边界不被切断。
示例 卡片顶部的照片仅覆盖顶部两个角;页脚将背景固定在框架上。