不管是在移动端还是在web端，现在随处可见卡片式设计。卡片式设计利于信息的分层和整合，能够使页面信息更加清晰，易于用户理解；视觉上也更加整洁美观。在页面中突出卡片的形态，主要是依据卡片的圆角、投影、以及颜色对比。但是这三点并非一定要同时具备。卡片设计应用的场景实际上有很多，本篇着重分析的是在图片流和卡片流中的应用。
图片流
图片流，故名思义就是以图片为主，帮助用户快速浏览和筛选图片内容。因此除了图片外，不管是图标还是文字都做相对弱化处理，以突出图片。
其中图片流有两种主要形式，一种是单列图片展示，另外一种是双列图片展示。单列图片展示中，图片主导性更强，页面焦点集中。例如下图中的“懒饭app“，以高清的诱人美食吸引用户点击。
这里只使用了统一的大小和圆角来规范卡片。因为是全图片形式，无需做颜色与投影的处理，就能很好的和背景区分开来。
双列图片展示，能够展示的内容更多，方便对比。这种形式相对的沉浸感更强，用户在不断滑动的同时，页面也在不断加载。
这里的卡片使用了颜色区分和投影。卡片颜色和背景颜色，要有明显区分，又不能差距过大，否则会显得很突兀。我通常背景色使用的是#F2F2F2，有时会加入一些蓝色使页面显得清爽干净#F0F4F4。
投影的数值也要合适才会看着舒适，过大的投影会显得卡片厚重，过小的投影显得生硬。之前看过一篇文章说的是投影的数值成比例会比较协调（y：blur=1:2/1:3）。比如说y轴偏离5，模糊就调到10或者15。那根据比例估算的话，我常用的数值就是（x：y：blur=1:2:3），如图：
双列图片的宽度通常是固定的，高度可以视情况而定，例如比较注重图片展示的马蜂窝app来说，可以解放图片高度来保证更好的展示图片效果。
其中图片流中图片的把控显得很重要，要保证其质量高，背景干净，风格色调和谐统一。另外图片要能够烘托主题，统一品牌感，降低用户的理解成本。
其次这里图片尺寸比例常见的有：4:3，1:1等。
4:3图像紧凑，利于构图排版。
1:1强调主体的存在感，常用于产品展示，头像特写展示等场景。比如上面的懒饭app，还有淘宝的详情页面主图展示等。
但是比例也不是完全固定的，也要根据自己的产品来做适当的调整，就比如说双列展示图片的界面中，只固定宽度，释放高度，比例也就不固定。
这里的卡片也是使用的图片自然形成卡片，文字的规范排版，使其和图片形成一体，使用户默认它为一个卡片显示。
卡片流
卡片流是以文字信息为主的卡片形式，在卡片上用固定的排版方式进行信息的展示。卡片流的设计重点是：归纳复杂的信息，保证信息的呈现让用户快速抓取重要信息，节省用户时间。
做卡片流的时候要注意内容的归纳提炼与层级区分。通常信息可以分为重要信息、辅助信息，以及补充信息。重要信息是起着吸引用户注意、产生兴趣的作用；辅助信息帮助用户对重要信息进行理解，补充信息是在用户有一定的了解下，补充以及刺激用户操作行为。
在做文字层级区分的时候要站在产品以及用户的角度考虑信息的优先级，可以通过改变字体的大小、字重和颜色来实现层级的区分。但是一个卡片中要避免太多的字号与颜色，否则会显得凌乱。通常两到三种就足以区分了：标题文字（16/18/20pt）、正文文字（14pt）、辅助文字（12pt）。
卡片中的操作按钮通常要根据业务重要程度来决定其形式。比如支付宝的这个页面，只是用户的一个查看的操作，并不涉及产品的转化，就可以使用文字按钮。而京东的订单列表中下方的几个按钮都是涉及到转化，甚至“再次购买”。因此采用了描边按钮形式，重要的按钮加入品牌色，突出并引导用户选择。
划重点
卡片式设计的构成，有卡片本身，卡片内部排版，以及图片的选取。小小的卡片细节却是很多。做完一个卡片可以先自查下：卡片是否和背景有所区分且和谐自然，文字层级是否清晰，选图是否优质等。且要多看优秀的线上产品，从中分析学习以应用到自己的产品中。
