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