【编者按】文章来自百度MUX翻译小组，应作者要求，如文章已获雷锋网(公众号：雷锋网)授权转载，也请保留原标题。

Facebook仍是内容驱动型卡片设计的优秀案例，并将继续引领更多基于新闻和博客的功能设计。

译者注：本文译自UXPin出品的电子书的第六章Bite-Sized Cards。这本电子书结合丰富案例讲述了年间重要的移动设计趋势，共含6章节：灵巧的手势操作、层级化的移动界面、隽永的字体排印、扁平化设计、愉悦的微交互、小卡片。本文将来分享小卡片设计。注：以下图片全部来自UXPin。

对于APP设计，2015俨然是卡片设计年。从网站到移动应用，不同屏幕尺寸的卡片无处不在，卡片展现形式与实物相似。通过手指滑动，用户可以轻松地在卡片容器中翻阅。

无论你是否意识到这一点，卡片会长期存在下去。

坦白说，卡片式风格似乎只是为APP而生。你无法想象现在有多少APP正在使用卡片式设计。让我们做一个小实验：拿起你的手机，打开你看到的前10个应用，有多少用了卡片设计呢？

我们已经知道卡片式设计统治了移动端，接下来让我们深入了解如何实际使用它们吧。

卡片式布局将信息分布在一系列矩形卡片容器中，如图像、文本、按钮、链接等。这些卡片可以分层或移动，并依据屏幕尺寸自适应适配，如果你将手机横竖屏切换，卡片将堆叠降落为新的卡片队列。

卡片是整齐的信息容器。正如电子书《Web UI现状和未来趋势：卡片设计模式》中所言，最好把每个卡片视为单一的想法或基本动作。

让我们来看看苹果设备上常见的AirDrop功能。当有数据传入时，一个卡片式通知会弹出，你可以选择接受或拒绝传输数据。无论是手机、平板电脑或笔记本电脑，云传输功能均以同样的交互模式实现，这意味着用户很容易对操作行为有一定预期，知道如何使用。

虽然卡片最近才流行开来，这个设计倒并不新。Pinterest奠定了卡片作为主要设计模式的地位，而很多其他公司紧随其后实践卡片设计。

卡片式设计越来越流行的原因之一，在于它与手机屏幕的兼容性。根据屏幕尺寸自适应卡片大小，与大多数移动用户场景都完美匹配，而矩形的审美也符合UI设计。

细想卡片的设计，它几乎完美适配了手机屏幕的大小和形状。由于存在多种不同型号的屏幕尺寸，所以这里的卡片尺寸并不是一个精确的数值，而是一个极具代表性的长宽比。

卡片式设计的精髓在于桌面端和移动设备的交集设计，在互动性和可用性之间寻求平衡点。正如我们在《移动界面模式》中首次描述过的，跨越不同的设备，卡片式设计创建了一个更为一致的体验。在响应式设计中尤其是这样，卡片作为“内容容器”可以轻松地放大缩小（像重新堆叠摆放箱子一样）。

卡片式设计的两种不同用途

对于卡片，它们普遍有2种用途：作为界面或作为界面流的中断（通常以广告的形式）。

有时你甚至看不到卡片的设计形态，因为它们和屏幕完美重合。但如果你仔细看，仍然可以识别出它采用卡片式设计。

卡片式界面通常整体作为一个可触元素。无论点击或滑动屏幕上任意位置，都可进行操作。在游戏界面中应用卡片式设计也是一个亮点。

以流行的Trivia Crack举例，主屏幕用一系列的卡片承载每场比赛和对手信息，它还巧妙的嵌入了一个卡片广告。某种程度上，这些卡片提升了游戏的境界层次。采用卡片堆叠的方式，让游戏容易使用和理解。

2. 卡片作为界面流的中断

卡片式设计也经常以向下滑动覆盖屏幕的方式，用于移动端或APP内广告。与界面式卡片不同的是，这些卡片包含两种链接——强链接和弱链接。点击强链接跳转产品广告页。点击弱链接返回上一个界面，一般来说弱链接很难被点击。

让我们以Trivia Crack为例。跳转页面后，包含静态图像、声音、视频和各种信息的卡片广告充满屏幕，促使你购买这些付费应用。

从用户体验来看，广告与整体界面的和谐度比较高。虽然这样广告会占满屏幕，但并不会给用户造成太多困扰，因为你仅仅在屏幕卡片顶端叠加了广告卡片，你可以关闭或者忽略它。

卡片帮助用户快速浏览信息，用视觉风格一致的广告提供直接的商业价值。

卡片是可容纳几乎任何内容的设计“容器”。 卡片可以承载不同类型的内容，因而成为内容型网站和APP的完美容器——这种通用的框架不会拒绝任何内容。

用卡片承载内容信息层次简单易懂，让用户易于浏览滑动。典型布局中的卡片，就像上文举例的Card Star，屏幕中每张卡片地位相等，不存在一个卡片主导其他的情况。多张卡片井然有序排列，用户自主选择他们想点击的卡片进行操作。

卡片最适宜拇指操作。这听起来非常原始，对不对？但这却是移动端卡片设计流行和易用的最重要原因。

用户认为卡片简单易懂的原因在于数字界面卡片来源于实物卡片。想想你如何玩扑克牌，你可以堆叠、展开、翻转、折叠它们，并把他们放在另一个容器里。 数字卡片具有同样行为方式，用户不必考虑事情如何发生，自然而然的创建舒适的用户体验。

在数字领域的应用程序中，卡片式设计提升了操作行为体验。这个隐喻实现了现实和虚拟的无缝衔接。

根据UI设计师Chris Tse的关于卡片的演讲所说，当用户与卡片进行交互时，可以分成几种行为模式。卡片通常会做三件事：记录信息、用信息吸引用户或提醒用户信息。根据卡片内容元素，将卡片进一步细化为不同类型容器：

•  叙述：卡片以瀑布流形式出现，同时创建事件发展的时间轴。

想想Medium如何使用卡片快速浏览，然后采用线性流程交付故事的细节。     

• 发现：卡片能让相关内容自然地呈现出来。

采用网格或瀑布流布局时，使用淡入效果展现卡片，会让用户觉得好玩和身在其中。看看下面Spotify的卡片模式：当你向左或向右滑动，展现符合你口味的歌曲。

• 对话：由于卡片是相对独立的，他们能够完美展示正在进行的对话。

在下面的WeChat示例中，请注意界面如何使用接近性原则创建卡片，靠得非常近的用户头像和文本自然地形成了一张张卡片。这两个元素并没有相连，但通过物体间的相对距离，我们认为互相靠近的两个元素看起来属于一组。

• 工作流：卡片可以将待办事项快速归类。

例如，用Evernote你可以创建不同笔记或待办事项的卡片。当你删除它们时，剩余的卡片按照初始顺序重新排列。

现在，让我们从多设备视角考虑卡片。在应用中，卡片作为承载内容的容器存在，不同用户可以在其他应用、设备上浏览查看。回想一下AirDrop的示例中，用户之间可以传输信息卡片。

就像现实世界中的卡片一样，对设计师和用户而言，卡片很容易组织。当你设计卡片时，需要做一些重要的决定：卡片用什么尺寸合适？你希望营造哪种视觉风格？

说到容器尺寸，通用的几个选择有：小尺寸、摘要形式的卡片；中等尺寸的卡片（在屏幕中占有相当一部分面积或者允许在一屏内展现多张卡片）；全屏卡片；叠在其他界面元素之上的弹出式卡片。

Yahoo! Fantasy应用中，几种卡片形式都有。首屏展现球员名单，每个球员的名字是一张小卡。点击人名会弹出一张几乎全屏大小的卡片，这张新卡上有详尽的球员信息。切换到新闻流标签页可以看到全屏的卡片流，在这里用户能看到他关心的联盟或球队的最新头条。

这些不同的卡片方便的让用户了解他们在阅读什么类型的内容、他们正处于应用中的什么位置。举个例子，弹出式卡片可被理解为额外信息，比如之前提到的详细球员信息卡。

卡片在视觉美观度上也在进化。尽管总体趋势是在减少视觉“噱头”，理解设计的演化过程以及为什么一些设计模式一直存活下来，依然非常重要。

• 瀑布流的形式起源于Pinterest，现在仍非常流行，但这种形式通常在视觉上缺乏辨识度。

• 微软的Metro风格、扁平化卡片是最早针对APP和移动设备的设计尝试之一。Metro风格现在并不常见了，但扁平化这一趋势继续发扬光大，并演化成为一种受欢迎的卡片样式。

• 宫格是一种有效的经典布局，卡片被整齐封装在容器中，这样保证了很大的灵活性。

• 杂志风格卡片开始在更多应用中涌现，尤其在新闻网站或需要展现大量文本的应用中。Flipboard、CNN和Newsify都使用这种风格。

最后，能让卡片真正行之有效的，是良好的设计和可用性。由于卡片式设计能够承载各种类型的内容，你需要精通从色彩到图像应用等方方面面内容。在规划和设计这种类型界面时，设计理论就是你最好的朋友。

UX设计师Erik D. Kennedy在一篇超赞的文章中以实用的方式详解了设计理论基础。以下是我们认为最适用于卡片设计模式的原则：

仔细考虑如何利用阴影和渐变让元素感觉“像真的一样”，这在卡片设计中尤为重要。如果阴影投在所有边和角上，那可就把卡片载体的物理感毁了。

• 确保UI在黑白灰单色调中也能看清。

首先在没颜色的条件下开展设计，这样会让你聚焦在最重要的东西上——可用性和内容本身。按Kennedy所述，你应该最后一步增添颜色，并且是有意识有目的地增加。

先给卡片一些空间呼吸，然后慢慢缩小。正如我们在《网页设计留白之禅》一书中所描述的，在组织和分隔元素时，留白是设计师的利器。

这可能稍微有点棘手。一定要选用清晰锐利的图片作为背景。为了让文本看起来足够清楚，你可以在文本下使用深色蒙层、把文本放在一个框里、或者把背景作模糊处理。

• 了解如何利用文字排版创造对比。

利用大号粗体和小号稍细文本的对比吸引用户的注意力。卡片设计中，简单的文字排版效果通常最好，比如使用一组无衬线字体，在卡片标题使用粗体、卡片正文使用常规体。

通过给卡片一些美感上的润色，你的卡片会看上去既熟悉又富有创意。诸如阴影之类的元素，在很大程度上能帮助用户联想到实体卡片。

移动卡片设计的下一步趋势是什么？

你可能能感受到卡片式设计越来越受欢迎，而且这一趋势并不会很快终结。这意味着会有更多卡片风格的应用和界面，包括使用更多的层级化卡片的设计、长得不那么像卡的卡片、扁平化卡片的复兴、重内容型网站大量使用卡片设计等等。

Material Design特色的层级化卡片设计将作为主力扑面而来。层级化会以两种形式出现：

• 分层作为精巧的容器分隔元素，比如阴影元素，能够把卡片从背景中分离出来。

• 分层使得卡片元素可堆叠，这样用户可以一张张翻过去，而不是传统地滚动。

Google Maps利用层级化的卡片帮助用户浏览。在上面左图的示例中，有一张展现位置的底图，界面上下分别有一张卡片：顶部的卡片标示出当前的地理位置，底部的卡片通过向上滑动，覆盖于底图之上，展开承载这一位置的详细信息（右图）。

设计师还会寻求一些新方式让卡片变得不那么像卡片。较常见的视觉模式是：一张大图或视频缩略图，紧跟着是标题和摘要，把这些作为一个整体的大卡片。

卡片式设计很有可能会吸纳其它的设计趋势而演化，如使用英雄头图或在图像上增加按钮。

卡片的轮廓和框架会保留，设计却会不断变化，特别是大卡片的设计。一些应用已经开始这样做了，比如上图示例的Shazam，把卡片与其它元素（如文本和按钮）在同一容器中堆叠。这样设计很潮，同时可用性也很好。

扁平化设计从未过时，这种风格的演化持续影响着卡片设计。扁平化风格的卡片将使用大量色彩、流线型的文字排版、精巧的设计来帮助用户浏览内容。

7-Minute Workout应用就具备这种特色，它用一行行彩色卡片来展现。每张小卡都可以展开成一张大卡，承载涵盖图片、文字、视频的运动练习指导。

更多的内容导向型网站可能会迁移到卡片风格的界面。这是目前组织大量内容的最好方式。这种封装方式几乎是“类报纸的”，每条内容都呈现在一个小格子里，随时可供用户浏览查看。

Facebook仍是内容驱动型卡片设计的优秀案例，并将继续引领更多基于新闻和博客的功能设计。作为人们获取大量信息内容的主要平台之一，不出意外地，他们的卡片风格界面和模式会鼓励其它产品跟随。

最后，卡片化趋势会保持下去，并继续成为移动应用的经典设计模型。诀窍在于，在通用设计语言基础上开始寻求更有趣的方式，来把卡片融合到应用中去。

以下是干货：资源和工具

译文仅作学习用途，如有其它用途请联系原作者。译文转载请注明：本文来自MUX原创翻译，雷锋网发布，译文作者：MUX翻译小组。

雷锋网原创文章，未经授权禁止转载。详情见。