Facebook仍是内容驱动型卡片设计的优秀案例，并将继续引领更多基于新闻和博客的功能设计。
注：本文译自UXPin出品的Mobile Design Book of Trends 2015&2016的第六章Bite-Sized Cards。这本结合丰富案例讲述了2015-2016年间重要的移动设计趋势，共含6章节：灵巧的手势操作、层级化的移动界面、隽永的字体排印、扁平化设计、愉悦的微交互、小卡片。本文将来分享小卡片设计。注：以下图片全部来自UXPin。
对于APP设计，2015俨然是卡片设计年。从网站到移动应用，不同屏幕尺寸的卡片无处不在，卡片展现形式与实物相似。通过手指滑动，用户可以轻松地在卡片容器中翻阅。
坦白说，卡片式风格似乎只是为APP而生。你无法想象现在有多少APP正在使用卡片式设计。让我们做一个小实验：拿起你的手机，打开你看到的前10个应用，有多少用了卡片设计呢？
卡片式布局将信息分布在一系列矩形卡片容器中，如图像、文本、按钮、链接等。这些卡片可以分层或移动，并依据屏幕尺寸自适应适配，如果你将手机横竖屏切换，卡片将堆叠降落为新的卡片队列。
卡片是整齐的信息容器。正如《Web UI现状和未来趋势：卡片设计模式》中所言，最好把每个卡片视为单一的想法或基本动作。
让我们来看看苹果设备上常见的AirDrop功能。当有数据传入时，一个卡片式通知会弹出，你可以选择接受或传输数据。无论是手机、平板电脑或笔记本电脑，云传输功能均以同样的交互模式实现，这意味着用户很容易对操作行为有一定预期，知道如何使用。
虽然卡片最近才流行开来，这个设计倒并不新。Pinterest奠定了卡片作为主要设计模式的地位，而很多其他公司紧随其后实践卡片设计。
卡片式设计越来越流行的原因之一，在于它与手机屏幕的兼容性。根据屏幕尺寸自适应卡片大小，与大多数移户场景都完美匹配，而矩形的审美也符合UI设计。
细想卡片的设计，它几乎完美适配了手机屏幕的大小和形状。由于存在多种不同型号的屏幕尺寸，所以这里的卡片尺寸并不是一个精确的数值，而是一个极具代表性的长宽比。
卡片式设计的精髓在于桌面端和移动设备的交集设计，在互动性和可用性之间寻求平衡点。正如我们在《移动界面模式》中首次描述过的，跨越不同的设备，卡片式设计创建了一个更为一致的体验。在响应式设计中尤其是这样，卡片作为“内容容器”可以轻松地放大缩小（像重新堆叠摆放箱子一样）。
有时你甚至看不到卡片的设计形态，因为它们和屏幕完美重合。但如果你仔细看，仍然可以识别出它采用卡片式设计。
卡片式界面通常整体作为一个可触元素。无论点击或滑动屏幕上任意，都可进行操作。在游戏界面中应用卡片式设计也是一个亮点。
以流行的Trivia Crack举例，主屏幕用一系列的卡片承载每场比赛和对手信息，它还巧妙的嵌入了一个卡片广告。某种程度上，这些卡片提升了游戏的境界层次。采用卡片堆叠的方式，让游戏容易使用和理解。
卡片式设计也经常以向下滑动覆盖屏幕的方式，用于移动端或APP内广告。与界面式卡片不同的是，这些卡片包含两种链接——强链接和弱链接。点击强链接跳转产品广告页。点击弱链接返回上一个界面，一般来说弱链接很难被点击。
让我们以Trivia Crack为例。跳转页面后，包含静态图像、声音、视频和各种信息的卡片广告充满屏幕，促使你购买这些付费应用。
从用户体验来看，广告与整体界面的和谐度比较高。虽然这样广告会占满屏幕，但并不会给用户造成太多困扰，因为你仅仅在屏幕卡片顶端叠加了广告卡片，你可以关闭或者忽略它。
卡片是可容纳几乎任何内容的设计“容器”。 卡片可以承载不同类型的内容，因而成为内容型网站和APP的完美容器——这种通用的框架不会任何内容。
用卡片承载内容信息层次简单易懂，让用户易于浏览滑动。典型布局中的卡片，就像上文举例的Card Star，屏幕中每张卡片地位相等，不存在一个卡片主导其他的情况。多张卡片井然有序排列，用户自主选择他们想点击的卡片进行操作。
卡片最适宜拇指操作。这听起来非常原始，对不对？但这却是移动端卡片设计流行和易用的最重要原因。
用户认为卡片简单易懂的原因在于数字界面卡片来源于实物卡片。想想你如何玩扑克牌，你可以堆叠、展开、翻转、折叠它们，并把他们放在另一个容器里。 数字卡片具有同样行为方式，用户不必考虑事情如何发生，自然而然的创建舒适的用户体验。
根据UI设计师Chris Tse的关于卡片的所说，当用户与卡片进行交互时，可以分成几种行为模式。卡片通常会做三件事：记录信息、用信息吸引用户或提醒用户信息。根据卡片内容元素，将卡片进一步细化为不同类型容器：
采用网格或瀑布流布局时，使用淡入效果展现卡片，会让用户觉得好玩和身在其中。看看下面Spotify的卡片模式：当你向左或向右滑动，展现符合你口味的歌曲。
在下面的WeChat示例中，请注意界面如何使用接近性原则创建卡片，靠得非常近的用户头像和文本自然地形成了一张张卡片。这两个元素并没有相连，但通过物体间的相对距离，我们认为互相靠近的两个元素看起来属于一组。
例如，用Evernote你可以创建不同笔记或待办事项的卡片。当你删除它们时，剩余的卡片按照初始顺序重新排列。
现在，让我们从多设备视角考虑卡片。在应用中，卡片作为承载内容的容器存在，不同用户可以在其他应用、设备上浏览查看。回想一下AirDrop的示例中，用户之间可以传输信息卡片。
就像现实世界中的卡片一样，对设计师和用户而言，卡片很容易组织。当你设计卡片时，需要做一些重要的决定：卡片用什么尺寸合适？你希望营造哪种视觉风格？
说到容器尺寸，通用的几个选择有：小尺寸、摘要形式的卡片；中等尺寸的卡片（在屏幕中占有相当一部分面积或者允许在一屏内展现多张卡片）；全屏卡片；叠在其他界面元素之上的弹出式卡片。
Yahoo! Fantasy应用中，几种卡片形式都有。首屏展现球员名单，每个球员的名字是一张小卡。点击人名会弹出一张几乎全屏大小的卡片，这张新卡上有详尽的球员信息。切换到新闻流标签页可以看到全屏的卡片流，在这里用户能看到他关心的联盟或球队的最新头条。
这些不同的卡片方便的让用户了解他们在阅读什么类型的内容、他们正处于应用中的什么。举个例子，弹出式卡片可被理解为额外信息，比如之前提到的详细球员信息卡。
卡片在视觉美观度上也在进化。尽管总体趋势是在减少视觉“噱头”，理解设计的演化过程以及为什么一些设计模式一直存活下来，依然非常重要。
微软的Metro风格、扁平化卡片是最早针对APP和移动设备的设计尝试之一。Metro风格现在并不常见了，但扁平化这一趋势继续发扬光大，并演化成为一种受欢迎的卡片样式。
风格卡片开始在更多应用中涌现，尤其在新闻网站或需要展现大量文本的应用中。Flipboard、CNN和Newsify都使用这种风格。
最后，能让卡片真正行之有效的，是良好的设计和可用性。由于卡片式设计能够承载各种类型的内容，你需要精通从色彩到图像应用等方方面面内容。在规划和设计这种类型界面时，设计理论就是你最好的朋友。
UX设计师Erik D. Kennedy在一篇超赞的文章中以实用的方式详解了设计理论基础。以下是我们认为最适用于卡片设计模式的原则：
仔细考虑如何利用阴影和渐变让元素感觉“像真的一样”，这在卡片设计中尤为重要。如果阴影投在所有边和角上，那可就把卡片载体的物理感毁了。
首先在没颜色的条件下开展设计，这样会让你聚焦在最重要的东西上——可用性和内容本身。按Kennedy所述，你应该最后一步增添颜色，并且是有意识有目的地增加。
先给卡片一些空间呼吸，然后慢慢缩小。正如我们在《网页设计留白之禅》一书中所描述的，在组织和分隔元素时，留白是设计师的利器。
这可能稍微有点棘手。一定要选用清晰锐利的图片作为背景。为了让文本看起来足够清楚，你可以在文本下使用深色蒙层、把文本放在一个框里、或者把背景作模糊处理。
利用大号粗体和小号稍细文本的对比吸引用户的注意力。卡片设计中，简单的文字排版效果通常最好，比如使用一组无衬线字体，在卡片标题使用粗体、卡片正文使用常规体。
通过给卡片一些美感上的润色，你的卡片会看上去既熟悉又富有创意。诸如阴影之类的元素，在很大程度上能帮助用户联想到实体卡片。
你可能能感受到卡片式设计越来越受欢迎，而且这一趋势并不会很快终结。这意味着会有更多卡片风格的应用和界面，包括使用更多的层级化卡片的设计、长得不那么像卡的卡片、扁平化卡片的复兴、重内容型网站大量使用卡片设计等等。
Material Design特色的层级化卡片设计将作为主力扑面而来。层级化会以两种形式出现：
Google Maps利用层级化的卡片帮助用户浏览。在左图的示例中，有一张展现的底图，界面上下分别有一张卡片：顶部的卡片标示出当前的地理，底部的卡片通过向上滑动，覆盖于底图之上，展开承载这一的详细信息（右图）。
设计师还会寻求一些新方式让卡片变得不那么像卡片。较常见的视觉模式是：一张大图或视频缩略图，紧跟着是标题和摘要，把这些作为一个整体的大卡片。
卡片的轮廓和框架会保留，设计却会不断变化，特别是大卡片的设计。一些应用已经开始这样做了，比如上图示例的Shazam，把卡片与其它元素（如文本和按钮）在同一容器中堆叠。这样设计很潮，同时可用性也很好。
扁平化设计从未过时，这种风格的演化持续影响着卡片设计。扁平化风格的卡片将使用大量色彩、流线型的文字排版、精巧的设计来帮助用户浏览内容。
7-Minute Workout应用就具备这种特色，它用一行行彩色卡片来展现。每张小卡都可以展开成一张大卡，承载涵盖图片、文字、视频的运动指导。
更多的内容导向型网站可能会迁移到卡片风格的界面。这是目前组织大量内容的最好方式。这种封装方式几乎是“类的”，每条内容都呈现在一个小格子里，随时可供用户浏览查看。
Facebook仍是内容驱动型卡片设计的优秀案例，并将继续引领更多基于新闻和博客的功能设计。作为人们获取大量信息内容的主要平台之一，不出意外地，他们的卡片风格界面和模式会鼓励其它产品跟随。
最后，卡片化趋势会保持下去，并继续成为移动应用的经典设计模型。诀窍在于，在通用设计语言基础上开始寻求更有趣的方式，来把卡片融合到应用中去。
仅作学习用途，如有其它用途请联系原作者。转载请注明：本文来自MUX原创翻译，雷锋网发布，作者：MUX翻译小组。
百度移户体验部(Baidu Mobile User Experience Department)成立于2009年，简称百度MUX，是百度移动服务事业群组核心部门之一。自成立以来，一直以用户为中心并持续提升产品体验为终极。始终追求着“简单极致”的设计，负责百度所有移动产品的视觉、交互和用户研究方面的工作，致力于设计行业内最优秀、体验最好的移动产品。MUX官网
推荐：