卡片设计的分类、优势及技巧

　　导语：UI界面设计中，卡片式设计已经是一种非常常见的设计形式，这也是当下流行的一种设计风格。今天来谈谈：卡片设计的分类，卡片设计的优势，卡片设计的技巧。

　　一、卡片设计的分类

　　1、边距卡片

　　边距卡片通常采用带圆角形式，利用阴影以及四周的边距形成页面留白，提升整体设计层次感，通过投影、前后颜色的设定，让内容与背景之间产生视觉空间感，在页面设计中应用更加广泛。

　　2、悬浮卡片

　　悬浮卡片主要用于功能集合或者页面内容扩展场景，目的是提升页面的操作效率。

　　3、通栏卡片

　　与边距卡片相比，通栏卡片没有左右两端留白，只保留上下边距，可展示图片、文字的空间更大。卡片与背景的关系用一条背景色块抽象表现，通常不会增加阴影，边框线等样式。

　　它更像一种在极简列表式和卡片式设计之间的折中选择，既保留了卡片式的分层方式和强交互性，又使页面变得更简洁。

　　二、卡片设计的优势

　　1、便于组织信息

　　卡片式设计将信息组织成区块增加可读性：它避免了阅读起来费劲费时的文字墙式的布局，并且让用户更快的找到他们感兴趣的内容并沉浸其中 — 有效组织信息成块，增加浏览识别度

　　卡片式设计将内容划分成有序的部分，就像段落将一篇文章中的句子划分成不同的组块一样，它可以将许多不同的信息有效的组合成一个连贯的整体 — 将不同内容划分成有序的部分

　　2、易于阅读

　　卡片是用来给用户传递故事内容的有效方式，把相关内容放进一张卡片上使用户很容易理解，并且用户能通过不同的卡片来快速找到他们感兴趣的内容 — 这里主要涉及到格式塔心理学的接近原则，即卡片具有明显的边界(现在一般用色块+阴影来做区隔)，相关联的信息都位于此边界之内

　　3、视觉美观

　　卡片式设计通常很依赖视觉元素，实际上很强的视觉元素恰恰是卡片式设计的一种优势。有研究确认图片能够提升网站和app的设计质量，因为图片可以快速有效的吸引用户的注意力。卡片式设计依赖图片的使用这一特性能更好的的吸引用户。

　　4、适应不同尺寸的设备

　　卡片式最重要的特性就是它几乎可以随意编辑。自从卡片式作为内容承载起可以随意放大或缩小它就是响应式设计中的常用设计方法。卡片式的这种特性使得我们可以只需要设计一种视觉样式就可以放在不同的设备上并且保持体验上的一致性 — 这里主要指由于卡片可以自由编辑(横排或竖排数量，单张卡片大小)因此非常适用于不同尺寸的屏幕

　　5、适合手指操作

　　卡片很适合手指操作，这样看起来卡片式设计确实是为了app而量身定做。虚拟世界里的卡片其实与实物卡片的操作原理是差不多的。用户喜欢卡片简单易用的特性并且很自然的就能理解把卡片反过来看更多信息和滑走来看下一张的信息 — 这里主要指卡片的操作方式(卡片反过来查看更多信息、滑走查看下一张卡片)便于用户的直观理解，符合用户的操作预期

　　三、卡片设计的技巧

　　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行。过多的文本不建议使用卡片形式。