卡片是我们随处可见的小UI组件，原因很简单，它们占用的空间非常小，并且可以显示足够的信息，通常还有1-2种选项。
为什么使用卡片：
1）卡片能够存在和流行，因为它们本身拥有简约的设计和良好的可用性，卡片将会继续流行。
2）卡片作为切入点，可以进一步展示更详细的信息。
3）卡片在视觉上也很令人愉悦，因为在大多数卡片上，卡片的图像为卡片赋予了风格。
4）它们自动适应Web和移动视图。
5）没有太多认知负荷，毕竟卡片无处不在，用户早已经很熟悉。
6）它们保持界面井然有序，且非常简约。
1.了解构造
UI中的“卡片”就相当于物理世界的卡片。它们可充当容器，将内部信息组合起来。
该原型使用墨刀设计
2.阴影/描边
阴影/描边有助于呈现出卡片的形态，至于你是想使用阴影还是描边，取决于UI的风格。
该原型使用墨刀设计
3.背景
卡片的好处在于：只要保证视觉上没有太繁多的对比，卡片的背景你可以随便“玩”。
该原型使用墨刀设计
4. 文本大小和重量
当字体较小时，用户会倾向于“细读”；而字体较大时，用户更倾向于“跳读”。如果字体粗细使用错误，会影响可用性和美观性。
5.对比度
卡片确实很小，因此对比度在分割信息和优先级方面起着重要作用。
6. 按钮
可以使用普通按钮、文本按钮或图标。在垂直卡片上，按钮通常放置在底部上；在水平卡片上则是在右侧或底侧。
7.间距和空隙
在可聚焦元素之间添加适当的空隙，也留足够的间距来对内部信息进行分组。
8.对焦和悬停。
要使卡片在鼠标悬浮时更明显，通常使用较暗的阴影或上升一点高度。
本文由墨刀翻译自Dorjan Vulaj 的8 rules for a perfect card design，转载请联系。
墨刀作为一款在线原型设计与协同工具，已经帮助众多产品经理和设计师们轻松做出交互原型，展现和验证设计想法，还支持多人协作编辑，分享和评论。新注册用户即可获得墨刀高级企业版的15天免费试用！开始体验一下吧！