这篇文章将讲述如何通过一些简单的设计准则来构建完美的卡片UI。
在过去的十年中，由于互联网与手机APP的普及，我们很容易在这些应用程序中看到卡片设计，然而用户体验问题往往也来源于拙劣的卡片设计。
卡片组件的元素
卡片是一种交互设计的组件，把信息聚合在一个形状类似卡牌的模块内，同时它又是信息的入口，点击便可进入其他页面。卡片组件的基本元素包含图片视频模块、标题、副标题、元数据、摘要文本以及行为(按钮、链接)。
01限制卡片文本字数
将卡片内容限制在100个字或两个短句之内。
卡片文本应仅提供信息概述，来帮助用户确定他们是否进行下一步操作(例如点击卡片上的按钮)。
02视觉上区分卡片行为优先级
包含多个行为(action)的卡片应在视觉上进行优先级区分。在上述的例子中，我通过采用按钮与链接两种不同的形式来区分首要行为与次要行为。
与按钮相比，链接在视觉上不那么突出，这种设计引导用户点击按钮执行首要行为，从而实现商业目的。
03文本内容增加视觉层次
文本内容应具有视觉层次区分，满足排版五要素，从而凸显重点并增加内容可读性。
04拒绝边框滥用
新手设计师经常会滥用边框分割模块，然而这些不必要的分割线会影响整体的美观与内容的呈现。
05不要在文本中插入链接
不要在文本中插入链接，这样会因为频繁跳转而影响用户做出判断。
06每张卡片一个想法
不要在一张卡片中展示多个想法，而是将想法分散在不同的卡片中。
07知道何时使用列表
对于文本内容较少的模块，请使用列表代替卡片，从而加快使用者的阅读速度。
08知道何时使用表格
对于包含大量信息数据，需要快速阅读、分类、排序与信息过滤的文本，请以表格形式展示。
09其他注意事项
卡片方向
卡片组件可以垂直或水平排列，它的内容可以包含媒体模块(视频、图片)，也可以只包含文本内容。
凸显卡片
通过边框、阴影、颜色的差异，将卡片与画布背景区分开来
考虑悬停行为的设计
在空间不够用时，可以考虑通过悬停状态触发行为(primary action)，这种设计可以增加界面的美观度，减少空间的占用，但是无法应用到触摸屏中。
不清楚悬停设计是什么的同学可以参考下图
图源 I Dribble
总结：
- 限制卡片文本字数。
- 视觉上区分卡片行为优先级。
- 文本内容增加视觉层次。
- 限制边框的使用，学会通过排版与色块来区分内容
- 不要在文本里插入链接
- 每张卡片一个想法
- 当文本内容较少时，使用列表
- 包含大量数据信息，需要分类展示时使用表格
- 卡片组件可以垂直或者说水平排列，卡片内容可以只包含文本
- 通过边框、阴影、颜色将卡片内容与背景区分
- 考虑悬停设计来美化卡片外观、减少面积占用
想学习或提升设计可以来aaa教育。
相关推荐：
如何设计更高级？
设计细节，视觉差设计
数据图表有什么使用技巧？
内容过多时，页面如何设计？
什么是设计语言？以及如何搭建
