2015年是卡片设计年，APP设计中卡片式风格为何如此受欢迎？
Facebook依旧是内容驱动型卡片设计里出色的实例，并且会持续引领更多以新闻以及博客为依据的功能设计。
译者注明，本文翻译自UXPin所出品的电子书Mobile Design Book of Trends 2015&2016当中的第六章Bite - Sized Cards，这本电子书借助丰富案例阐述了2015至2016年间重要的移动设计趋势，总共包含6个章节，分别是灵巧的手势操作、层级化的移动界面、隽永的字体排印、扁平化设计、愉悦的微交互以及小卡片，本文接下来会分享小卡片设计，注明一下，以下图片全都源自UXPin。
2015年，对于APP设计而言，那简直就是卡片设计之年。卡片在从网站到移动应用的各处，于不同屏幕尺寸下，皆是无处不在的。卡片所呈现的展现形式，和实物是相类似的。借助手指进行滑动，用户能够轻轻松松地在卡片容器当中去翻阅 。
（Photo credit: Trello）
无论你是否意识到这一点，卡片会长期存在下去。
说实在的，那种卡片样式的风格好像唯有在APP里才会出现，你怎能想象得到目前正有好多好多的APP运用着卡片式的设计呢，咱们来开展一个小试验，把你的手机拿起来，将你所看到的前面10个应用给打开，其中有多少是采用了卡片设计的呀？
已知卡片式设计在移动端占据主导，接下来深入对怎样在实际当中运用它们展开了解 。
卡片式界面入门课
有着一系列矩形卡片容器的卡式布局，会用于分布像图像、以文本形式存在者、按钮、链接等这样一类别的信息，这些卡片能够分层或者进行移动，并且会依据屏幕尺寸实现适宜化的对应，如果把手机从纵向切换为横向的屏幕情况，诸卡片将会堆叠并落为新一系列的卡片队列 。
每个卡片被当作单一的想法，又作为基本动作，这恰如电子书《Web UI现状和未来趋势：卡片设计模式》中所说，而卡片是整齐的信息容器 。
（Photo credit: Apple AirDrop）
有请我们来瞧一瞧苹果设备那儿经常能见到的AirDrop功能。一旦有数据传进来的时候，会弹出一个具备卡片样式的通知，你能够挑选接受或者拒绝传输数据。不管是手机，还是平板电脑，又或者是笔记本电脑，这个云传输功能都是按照相同的交互模式达成的，这表明用户特别容易能够对操作行为存有一定预期，晓得怎样去使用 。
虽说卡片是近些时候才开始流行起来的，然而这个设计却并非是全新的，Pinterest确立了卡片作为主要设计模式的地位，随后有许多其他公司跟着去实践卡片设计 。
（Photo credit: Tinder）
其一呢，卡片式设计那般越来越流行的缘由当中存在着一个方面，那便是它跟手机屏幕具备的兼容性，能依据屏幕尺寸去自觉适应地调整卡片大小，跟大多数移动用户所身临的场景呈现一种完美匹配状，而且那个矩形的审美恰好是符合UI设计要求的啊。
去仔细琢磨卡片的设计，它近乎完美地适配了手机屏幕的大小以及形状。因为存在着多种不一样型号的屏幕尺寸，所以在这里卡片的尺寸并非是一个精准的数值，而是一个极具代表性的长宽比。
卡片式策划的要素在于桌面和移动装置的交汇策划，于互动型与可用型之间寻觅均衡点。就像我们于《移动界面模式》里首次阐述的那般，横跨各异的装置，卡片式策划构建了一种更为统一的感受；在响应式策划里尤为如此，卡片作为“内容容器”能够很轻易地放大缩小（类似重新堆叠放置箱子那样）。
卡片式设计的两种不同用途
对于卡片，它们存在着普遍的两种用途，一种用途是作为界面，另一种用途是作为界面流当出现中断情况时（这种中断通常是以广告的形式呈现的）。
1. 卡片作为界面
有时，你连卡片的设计形态都没法看到，那是由于它们跟屏幕完美地重合了。然而，要是你仔细去看，依旧能够识别出它运用的是卡片式设计。
卡片式的界面，一般而言整体当作一个能够触摸的元素，不管是点击屏幕上的任何一处位置，还是滑动屏幕上的任意一处地方，都能够开展操作，在游戏的界面里运用卡片式形态的设计，同样属于一个突出的点。
（Photo credit: Trivia Crack）
拿流行的Trivia Crack来说，主屏幕借助一系列卡片来承载每场比赛以及对手的信息，它还巧妙地嵌入了一个卡片广告。在某种程度上，这些卡片使得游戏的境界得到了提升层次。采用的是卡片堆叠的方式，让游戏具备容易使用以及理解的特点。
2. 卡片作为界面流的中断
那种卡片式设计，常常使用向下滑动从而覆盖屏幕的办法，在移动端或者APP里面当作广告使用。和界面式卡片不一样的地方在于，这类卡片有着两种链接，也就是强链接以及弱链接。点击强链接会跳转至产品广告页。点击弱链接则返回上一个界面，通常来讲弱链接是很难被点击的。
图片来源归属为，趣 trivia Crack 应用程序内广告处显示的内容 ，句号。
拿Trivia Crack来举例，页面转移之后，卡片广告布满屏幕，那些卡片广告含有静态图像、声音、视频以及各种不同的信息，进而促使你去买下这些需要付费的应用程序。
考虑到用户体验方面，广告同整体界面的和谐程度相对较高。虽说如此这般广告会将屏幕占满，然而却不会给用户带来过多困扰，原因在于你只是单纯在屏幕卡片的顶端叠加了广告卡片，而且你能够对其进行关闭又或者予以忽略它这件事 。
用于帮助用户的卡片，能让其快速浏览信息，它以视觉风格一致的广告，来提供直接的商业价值。
卡片内容至上
卡片，作为一种设计“容器”，具备容纳几乎任何内容的特性，它能够承载不同类型的内容，所以成为内容型网站以及APP的完美容器，而这种通用框架不会拒绝任何内容。
（Photo credit: Card Star）
卡片的元素可以包含：
• 照片
• 文本
• 视频
• 优惠券
• 音乐
• 付款信息
• 注册或表单
• 游戏数据
• 社交媒体流或分享
• 奖励信息
• 链接
• 以上元素的组合
使用卡片去承载内容信息层次，使其简单易懂，使得用户易于浏览滑动。典型布局当中的卡片，就如同上文所举例的Card Star，在屏幕里每张卡片的地位都是相等的，不存在致使一个卡片主导其他卡片的情形。多张卡片会井然有序地排列，用户能够自主选择他们想要去点击的卡片来进行操作。
卡片和行为模式
卡片，最适合拇指去进行操作，这样子听上去，是不是特别原始？然而，这正是移动端卡片设计能够流行起来，且被广泛应用，以至于获得易用性的，最为关键重要的原因所在。
用户觉得卡片易于理解只因数字界面的卡片源于实物卡片，想一想你玩扑克牌时怎样操作，你能够将它们堆叠、展开、翻转、折叠，还能把它们放置到另外一个容器之中，数字卡片有着相同的行为模式，用户无需去思索事情会怎样呈现，自然而然就能构建出舒适的用户体验 。
卡片式设计，在数字领域应用程序里，提升了操作行为体验。这个隐喻，让现实与虚拟，实现了无缝衔接。
照片的归功之处，在于这个地方叫：汤博乐，它在左边，而右边的那个归功于此的是谷歌启动器 。
根据名为Chris Tse的UI设计师所作的、关于卡片的那次演讲来讲，当用户同卡片开展交互的时候，能够划分成几种行为模式。卡片通常情况下会做三件事情，分别是记录信息，运用信息去吸引用户，或者提醒用户相关信息。依据卡片内容元素，把卡片进一步细致化为不同类型容器：
思索一下Medium运用卡片进行快速浏览的方式，接着采取呈现故事细节的那种线性流程交付，然后做出这样行动。
（Photo credit: Medium）
于采用网格或者瀑布流布局之际，借助淡入效果去展现卡片，那能使用户觉着好玩且仿若置身其中。现瞅瞅下面Spotify的卡片模式：当你朝着左边或者右边滑动之时，便会展现出契合你口味的歌曲。
（Photo credit: Spotify Android App）
在下面这个WeChat示例里，要注意界面运用接近性原则去创建卡片的方式，用户头像与文本靠得极为接近，它们自然而然地构成了一张张卡片。这两个元素并未相连，然而借助物体之间的相对距离，我们判定互相靠近的两个元素看上去属于一组。
（ Photo credit: WeChat）
打个比方，借助Evernote这一工具，你能够去创建不一样的笔记卡片，或者是待办事项卡片。而当你将它们进行删除操作的时候，那剩余下来的卡片会依照初始设定的顺序再次进行排列。
（Photo credit: Evernote）
现如今，咱们来从多个设备所构成的视角去思索卡片。于应用里边，卡片是以充当承载内容的容器而存在的，不同的用户能够在别的应用、设备之上进行浏览查看。回忆一下AirDrop的示例当中，用户相互间能够传输信息卡片。
卡片更容易组织
好比现实世界里的卡片那般，对于设计师以及用户来讲，卡片极易进行组织。当你来设计卡片的时候，要做出一些重要的决定：卡片选用怎样的合适尺寸？你期望营造出哪一种视觉风格？
讲到容器的那些尺寸，常见的几种选择是，有小尺寸的、呈现为摘要样式的卡片，还有中等尺寸且特点是在屏幕里占据了相当一部分面积或者能够让多张卡片在一屏之内得以展现的卡片，再有就是全屏卡片，以及那种堆叠在其他诸般界面元素之上的弹出式卡片。
图片来源：雅虎幻想体育，（此为）图片的出处说明 。
在Yahoo! Fantasy该应用里头，存在着几种卡片形式，当中首屏会展现出球员名单，其中每个球员的名字呈现为一张小卡，当点击人名时，就会弹出一张几乎占据全屏大小了的卡片，此张新卡之上具备着详尽的球员信息，要是切换到新闻流标签页，便能够看到全屏的卡片流，于这里用户可有机会看到他关切的联盟还是球队的最新头条 。
用户借助这些各异的卡片，能便利地知晓自身阅读的是何种类型的内容，以及自身于应用里所处的位置。比如说，弹出式卡片可被视作额外信息，但像前边提及的详细球员信息卡，也属于这种卡片 。
（Photo credit: CNN）
卡片于视觉美观度方面同样处于进化状态，虽然总体走向是在削减视觉“噱头”，但去领会设计的演化进程，以及明白为何一些设计模式始终存续下来，这依旧极为关键。
（Photo credit: Pinterest）
（Photo credit: Order Ahead）
（Photo credit: Hotel Tonight）
（Photo credit: Flipboard）
从美学角度来思考
最后，会发现那个让实体卡片当真能够切实发挥效用的，乃是具备优良品质特质和顺畅可用性能体验的设计。鉴于卡片样式的设计具备载纳各类不同性质内容的能力，所以你得在从代表视觉元素重要组成之一的色彩关联到作为视觉传达的图像部分应用等诸多方面所涉及的内容上成为极为精通的状态。在对这类带有特定风格样式界面进行规划以及设计的过程当中，设计理论就成为了你最为得力的辅助工具。
UX设计师Erik D. Kennedy在一篇极其出色无与伦比的文章里，以一种切实可行极具实用性的方式，详细阐释说明了设计理论基础。以下这些是我们认定觉得最适宜适用用于卡片设计模式的原则：
要审慎思考怎样借助阴影以及渐变使得元素具备“仿若真实一般”的感觉，这于卡片设计里是格外关键的。要是阴影投射在全部的边以及角上面，那就会将卡片载体的物理质感给破坏掉了 。
第一，于不存在颜色的状况之下着手开展设计，如此这般会使得你将注意力汇聚于最为关键重要的事物之上，也就是可用性以及内容自身。第二，按照Kennedy所讲述的那般，你应当在最后一步去增添颜色，而且是带着意识怀抱着目的去进行增加 。
把一定空间给予卡片，使其得以呼吸，接着缓缓缩小。我们在《网页设计留白之禅》这本书里有这样一番描述，在构建以及划分元素之际，留白属于设计师的有效工具 。
稍有棘手，需选用清晰度及锐利度合适的图片当作背景，为使文本清晰呈现，在下使用深色蒙层、将文本置于框内、弄模糊背景等方式可供选择。
凭借大号字体且加粗、小号字体稍细这种对比，来将用户专注力给吸引住。于卡片设计当中，那些简单的文字排版效果一般而言是良好的，就像运用一组呈现无修饰线这类字体，在卡片标题部位采用强调字体、在卡片正文部分采用常规字体。
将卡片进行一些美感方面的润色处理，你的卡片就会呈现出既有着熟悉感又具备创意性的样子。比如像阴影这类元素，在相当大的程度上能够助力用户联想到实体卡片。
移动卡片设计的下一步趋势是什么？
你大概有可能体会到卡片式设计愈发受到欢迎，并且这一趋向是不会很快就终止的。这也就是说会存在更多卡片风格的应用以及界面，涵盖运用更多层级化卡片的设计，有着并非特别像卡模样的卡片，扁平化卡片的再度兴起，重内容型网站大规模运用卡片设计等等 。
具有Material Design特色的，呈现为主力扑面而来形势的层级化卡片设计，层级化会以两种形式出现：
（Photo credit: Google Maps）
Google Maps借助层级化的卡片助力用户浏览，左图上面的示例里，存在一张呈现位置的底图，界面的上方与下方各有一张卡片，顶部的卡片标明当前的地理位置，底部的卡片通过向上滑动，覆盖到底图之上，展开承载该位置的详细信息，如右图所示。
设计师会去探寻一些新的方式，以此来使得卡片变得不相似于卡片，较为常见的视觉模式是，有一张大图或者是视频缩略图，紧接着存在标题以及摘要，将这些当作一个整体的大卡片存在。 。
（Photo credit: Shazam）
很有可能卡片式设计会吸纳其余别的设计趋势进而做出演化，像是能够使用英雄头图，或者在图像之上增添按钮 。
卡片的轮廓以及框架会被保留下来，但其设计却会持续不断地发生变化，尤其是大卡片的设计。有一些应用已经着手按照这样去做了，就像上图所示例的Shazam，它将卡片与其他元素（诸如文本以及按钮）在同一个容器当中进行堆叠。如此这般的设计十分潮流，与此同时其可用性也相当不错。
将使用大量色彩，以及流线型文字排版，还有精巧设计的扁平化风格卡片，其演化持续影响着卡片设计，这种风格从未过时，用以帮助用户浏览内容。
具有这种特色的是7 - Minute Workout应用，它借助一行行彩色卡片予以展现，每张小卡能够展开成为一张大卡，大卡承载着包含图片、文字、视频的运动练习指导。
可能会有更多内容导向型网站迁移到卡片风格界面，这是当下组织大量内容的最佳方式，这种封装的方式近乎“类报纸的”，每一条内容都呈现在一个小格子里，随时能供用户浏览查看 。
（Photo credit: Facebook）
在内容驱动型卡片设计方面，Facebook依旧是出色的实例，并且会持续带动更多基于新闻以及博客的功能设计向前发展。作为人们获取海量信息内容的主要平台当中的一个，毫无意外地，他们那种卡片风格的界面以及模式将会促使其他产品去效仿 。
最终，卡片化的这种趋势将会持续地保持下去，并且会继续转变成移动应用的那种经典设计模型。而其中的诀窍在于，要在通用设计语言的根基之上，着手去寻觅更为有趣的方式，用于把卡片融进应用当中去 。
以下是干货：资源和工具
可嵌入的卡片运行库，卡片堆栈开源啦，它是开源的 ，是可嵌入的 ，是卡片运行库 ，是卡片堆栈相关的 。
2. 由Design Shack所创作的“The Complete Guide to an Effective Card - Style Interface Desig”， 。
3.
“Card Architecture and Card Design”，这是由Taylor Davidson撰写的 ，4。
5. 由Khoi Vinh作的卡片用户界面图库存于Pinterest上 ， 。
6. 《用于创建华丽用户界面的七条规则》，作者是Erik D. Kennedy，。
7. 案例研究：《卫报》如何运用容器模型以及卡片，且卡片是复数形式 . 这是一个关于《卫报》的案例研究，它涉及到如何运用容器模型和卡片 ，这里是特指复数的卡片 。
8. 移动界面设计模式，移动界面的那种设计模式，有关移动界面的设计模式 。
来自杰里·曹为《下一个网》创作了一篇名为《卡片如何主导网页设计》的文章，其中谈到了，卡片，在，网页设计，方面，所，发挥，的，作用，占据主导地位，这一情况，是如何得以，实现，究竟，是，怎样，达成，的。
10. Boring Cards Free UI Kit
来自《2015及2016移动设计趋势手册》 ，对，就是它，肯定是它，绝对是它 。
请小编喝杯咖啡吧！