卡片设计对我们来说并不陌生，卡片设计在界面中已经是非常常见的一种设计形式，大家做设计时几乎都会用到。今天我想从我自己的经验来总结卡片设计的细节要点，期望能给大家总结一些快速提升卡片设计效果的方法。

本文主要从三个方面来分析如何将卡片设计的更为出色：

1、卡片的形体

2、投影深度

3、颜色对比

4、卡片的内外间距

1、卡片的形体

1）圆角

同样的卡片设计，不同的圆角给人的感受也各有差异，根据圆角的大小我们可以将卡片分为直角、小圆角、大圆角。所以在设计的时候，根据自己的产品属性选择气质相符的圆角设计很有必要。

我一般喜欢用8的倍数来设置圆角，比如圆角大小为8px、16px、32px之类的。要注意的是，圆角越大，可用面积会越小，需要根据实际场景进行平衡，以视觉上舒服为宜。

2）比例

卡片的比例，我习惯遵循一些美感规律，比如常用到一些比例为16:10 、16:9 、4:3 、1:1之类的比例。当然，实际设计需求中的比例，还是要结合内容的多少具体分析。

我的经验是，当比较接近这些美感比例其中之一时，就直接优化到这个比例。像一些banner图设计时，会直接按照16:10的比例进行设计。

2、投影深度

卡片投影的视觉效果，会直接影响用户对卡片的整体感受，太深太大的投影会显得整体卡片过于厚重、看起来有点脏，太浅太小的投影则显得过度生硬。这里给大家提供两个小技巧。

1. 在取色的时候，可以选择背景颜色的色相，然后略微加深一些。

2. 投影的距离设置合理的数值比例，不要太大或太小。

我常用的一组数值规律是1:2或1:3，例如Y轴偏移10px，模糊度则设定为20或30px，这样成比例的数值出来的效果会较为自然，

3、颜色对比

卡片与背景的颜色对比会影响这卡片的整体质感，在设计时我们需要把握好卡片与底色的对比，不同的明暗对比出来的质感也会有差异。

卡片色与背景色不宜太过接近或使用同一颜色，因为会影响卡片整体的空间质感或使得卡片的边缘锐度下降；

深色背景上，尽量让卡片与背景色在同一色系或者明度不要差异太大，避免过于突兀。

5、卡片的内外间距

外间距

卡片具有独特的视觉空间感，能增加了页面的层次感，让页面更加灵动。在做卡片式设计时，经常会纠结边距的设定，宽边还是窄边？多少像素更为合适？这个需要根据实际的运用场景来设置。

一般我做在卡片间的间距设计时，通常采用的8的倍数，如16px 、24px 、32px等。也有许多人采用是10的倍数。这个可以根据实际情况使用，避免间距过大或拥挤即可。

 

内间距

卡片的内间距，我一般在外边距的基础上设计，按照固定比例进行增减，8的倍数为基础进行计算。虽然没有严格按照删格设计来得规范，但也可以让设计变得有迹可循。

6、文字长度

卡片里的文本应仅提供信息概述，来帮助用户确定他们是否进行下一步操作（例如是否点击按钮）；过于冗长的信息会增加用户的阅读成本并增加用户作决策的时间。

我的一般是横向不要超过42字，纵向不要超过5行。过多的文本不建议使用卡片形式。

 

总结

卡片式设计的流行同样得益于自身的灵活性。这种设计形式在跨设备、跨屏幕上有着天然的优势， 也更加实用，为设计提供了更多的组合形式，给观者带来了良好的使用体验。

以上就是三石关于卡片设计的一些经验总结，希望能对大家有所帮助。但是卡片也不是万能的，设计师要做的是在正确的场景中合理地利用卡片式设计。

 

参考链接

http://mrw.so/5EC9yH

http://blog.sina.com.cn/s/blog_5d7170af0101dnpk.html