卡片设计的修养
前言
卡片作为我们最常用的组件之一，无论作为概念稿还是实际落地的项目中都比比皆是。接下来我们就从结构和功能的角度来了解一下它为什么这么优秀！
目录
1.卡片的定义
2.卡片的优势
3.卡片设计的建议
4.总结
01卡片的定义
简单点理解就是卡片是一个相对完美的处理信息集合。 
a. 构成分析
卡片的组成简单点来讲是由：由信息与操作组成。
视觉上由：内容层+承载层组成。
承载层我们可以理解为承载内容的容器，而内容层则是我们设计时的必要元素。
内容层多数为图片、文字、按钮等元素。
b. 功能分析
卡片最大的作用就是作为功能入口的存在。
由于卡片设计的独立性，使得单独的卡片能够承担功能入口的作用。例如我们常常看到的卡片作为功能入口的场景有首页流量分发、菜单等等。如下图：
02卡片的优点
a.卡片设计视觉统一性强
由于每一个卡片都是由承载层和内容层组成，形式上统一，所以在视觉上有很强的一致性。例如京东金融和下厨房：
b.卡片设计能够突出重点内容
卡片具有很强的独立性，具有空间感。在页面设计中，我们可以通过卡片与周围环境的差异，来突出的我们的想要展现的内容。例如转转：
c. 卡片设计能够区分不同维度的内容与归纳相同维度的信息
由于每张卡片的操作互相独立，互不干扰，有利于区分不同纬度的内容；同时也可以利用卡片来讲相同纬度的信息进行归类。keep 通过卡片来区分不同纬度内容展现，以此分别是运动数据、已参加课程、训练计划等不用纬度的模块，可以帮助用户用户的可以快速区分内容，进而执行下一步操作。
d. 卡片能让用户更加专注当前内容
卡片的圆角设计更容易吸引人的目光，并且通过卡片营造的空间感以及视觉层级的优先级，卡片能够更加吸引我们的注意力，让我们的更加专注当前内容。例如 app store
App store 今日推荐（Today）通过卡片设计中的阴影，增强当前卡片的空间感以及视觉层级；在设计上使用了圆角的设计形式，更加容易吸引用户的眼光，让用户更加专注当前推荐内容的卡片。
e. 卡片设计可以提高空间的利用率
卡片可以利用横（X）轴交互来提高空间的利用率，将部分内容隐藏在横轴的空间当中，在屏幕可视的空间范围内通过交互展示更多的内容。例如淘票票：
淘票票在热映电影的模块中通过横（X）轴交互，将部分内容隐藏在横轴的空间中，提高了控件利用率，在有限的空间内展示更多的电影信息。
f. 卡片可变化，适配性强
卡片是可变化的，具有无限扩展的属性，在适配上更是得天独厚；在同倍率下只需要按照设计稿件的间距标注做自然适配，不同倍率下只需要进行简单的换算即可。
g. 卡片设计能够提升界面的可操作性
如上我们提到卡片是一种拟真元素，交互设计可以被覆盖、堆叠、移动、划去，这样能更好的拓展内容模块的视觉深度和可操作性。例如途家和网易戏精：
途家热门目的地模块通过的卡片的堆叠来告诉用户当前有更加丰富的目的地，并能通过滑动来进行操作。
03卡片设计的建议
练习改版的设计展示的信息明显少于原版，导致用户需要付出更多的时间和交互成本。卡片设计明显不适合类似的使用场景页面。
使用什么样的设计方式是根据我们所要解决的问题和人们对信息的消费方式决定的，卡片式设计有它的适用范围，设计时切勿生搬硬套。
04总结
参考链接：卡片设计有什么好处
海盐社（公众号）
作者：姜正
