卡片式设计的变迁
说到卡片大家都不陌生。日常生活中我们都接触过哪些卡片呢？细细留意实际上我们每天无时无刻不被卡片所包围着。例如出门必备的公交卡、身份证、银行卡、各种票据、甚至路边的指示牌等。
那么卡片的共同特征可以归结为包含一组特定相关联信息数据的集合。卡片通常是正反面，可以翻转的。具备移动使用的功能，即具有可交互性。通常起到归纳总结和提示信息的作用，给我们的生活提供了巨大的便利。
在互联网时代的到来，卡片也走进了荧屏，其实最早应用卡片式设计并非google 的material design 和苹果的IOS design，而是palm webOS。在webOS中，传统意义上的程序概念被弱化，取而代之的是卡片系统。所有的任务均以卡片的形式出现。任何时候点击手势区，都会进入卡片视图。相信webOS的出现对日后卡片式设计以及人机交互的运用起到了重要的垫定基础。
此外在PC端影响力较大的图片分享网站 Pinterest率先的使用，使得近年来卡片式设计越来越流行。网络巨头Facebook和Twitter在自己的PC端和移动端纷纷采用了卡片式设计布局。
不得不说以 Google Now 为代表，全线产品趋向简洁。当时“卡片”已是并不新鲜的概念了，却成为谷歌最重视的元素。
随后谷歌将卡片结合纸张材质的概念，进行了扩展定义，即我们现在看到的Material Design设计规范。将卡片赋予了纸张的材质，基于网格的布局、响应动画与过渡、填充、深度效果（如光线和阴影）。设计师马蒂亚斯·杜尔特解释说：“与真正的纸张不同，我们的数字材质可以智能地扩大和变形。材质具有实体的表面和边缘。接缝和阴影表明组件的含义。”
webOS作为优秀的卡片式操作系统并没有销声匿迹，而是被LG在此基础上更加灵活的设计自己的智能电视操作系统，也就是如今万众瞩目的卡片式LG智能电视系统。相信以后还会有更进一步的发展。
卡片式设计的优点
1、信息系统性归纳和独立
我们可以将同类信息进行系统性的归纳，并整理到一张卡片内做为独立的单元进行展示。
需要注意的一点是作为独立的卡片单元往往要有足够的空间留白，或者可以添加一点投影增加层次感，能使阅读上更加舒适。
2、更顺畅直观的操作
生活中的卡片可以翻面、折叠、展开、堆叠。
例如：翻面可以呈现更多内容、折叠可以简述概括内容、展开可以详细展示具体内容、堆叠可以进行信息的分组归类。
卡片采用堆叠式的形式时，实际上是在暗示用户去操作，发现其感兴趣的内容。就好比实际生活中，我们拿到一叠名片去寻找自己需要的那几张。
在设计虚拟卡片时，我们同样可以运用这些特点，同时我们还可以结合动画和移动效果增强交互体验。可发挥的空间还很大，例如我们还可以在卡片中嵌入多媒体内容：比如照片、视频和音乐等。
3、整齐的栅格化排版
将文字信息、图像归类整合到一个方块里，分布成不同的卡片模块。有利于栅格化的排版。对于后期多平台的自适应提供很大的优势。
4、瀑布流的自由组合布局
虽然整齐的栅格化布局有它的优势，但是自由组合的布局给设计师和程序员提供了相当大的便利，不用再为图片比例不对需要裁剪而发愁。瀑布流的流行给用户带来了视觉的轻松和自由。
5、新的创意画布
卡片式是有创造性的新设计。它不只是仅供一看的，是一种可以创建丰富内容的用户体验的灵活布局模式。
卡片式设计的不适用性
卡片式虽然有这么多好处和优点，但同样有着不适用的场景。
1、内容过多小空间展示时
Google曾经对搜索结果页进行过AB测试。卡片式样式更加丰富多彩，但卡片式增加了滚动的深度，每页浏览的的信息仍然较少。
Material Design建议的是列表是“可快速扫描”，适合显示类似的重复的内容。
这里卡片的使用分散了用户注意力，不能快速扫描。这些列表项也不能忽略，所以把它们放在不同的卡片上是难以理解的，不利于沉浸式阅读。这里运用列表式（磁贴）的形式更为合理。
2、内容容易区分并被感知
当内容空间大量重复容易区分，容易感知的时候，卡片在图片库中没有必要使用。网格磁贴是表现图片库的干净轻量的方法。
3、卡片内容过长的界面
在信息量过大的时候，势必要增加排版的长度，这时候就要避免使用卡片式设计。因为卡片式设计对页面空间的消耗非常大，内容之间的界限非常明显。当用户进行沉浸式阅读时候，这样的界定打断了原有的阅读节奏，使人产生反感。强制使用就违背了卡片式设计信息集中，极简的设计原则。
所以当进行长文本的陈述或者强关联阅读类内容（非操作类）进行排列时，尽量避免使用卡片形式设计。（试想想，当你在念一封信的时候，把里面的每一段内容都给你重新用另一封信包装起来......)
小结
作为UI设计师，虽然我们都喜欢最新的流行趋势，但是在实际运用过程中还是要考虑好其适用场景。在运用的时候可以更加灵活，例如下面豌豆荚的搜索结果页。
虽然豌豆荚这个页面并没有使用卡片式设计，而是采用了列表式设计。但是在用户点击安装按钮的时候，磁贴发生了翻转。这似乎与常规交互不符，但是实际使用下来觉得还是比较流畅的，不失为一种创新。
例如得到app的今日学习页面，当日进入的时候会看到一张卡片，当用户上滑浏览下面的内容时，卡片会发生折叠。虽然这种运用略为生硬，但是在当天第一次进入的时候才会显示。采用现实中卡片折叠的属性，不失为一种合理性。
以上小例子仅为抛砖引玉，希望我们在设计下一个主页或归档页面时能打破原有设计思路，更好的结合和运用卡片式设计。
