10
| 本文作者： 訾竣喆 | 2015-11-20 11:14 |
【编者按】本文编译自thenextweb，原文作者CARRIE COUSINS
如今，全屏化的卡片式设计几乎无处不在，这种设计语言有其独特的美感。不管你是如何看待卡片式设计这个概念的，卡片化都已成为了当今应用程序设计的潮流趋势。卡片式设计似乎天生就是为了应用程序而存在着的一种独特的设计风格。如今，绝大部分的应用程序都在使用卡片式设计，而这种卡片式设计也自有其在移动端领域的绝对优势。
让我们做一个小实验：拿起您的手机，打开排列靠前的十个应用程序，看看其中有多少采用了卡片式设计呢？
现在就让我们深入分析，看看在实际应用下它们是如何被合理使用的。
卡片式的布局能够把信息、图像、文本、按钮、链接等一系列数据整合到各种矩形方框中。这些模块可以分层或移动，并都倾向于调整到全屏幕尺寸。如果你把它滑动到手机的一侧，它就会和其它的卡片堆叠在一起。
卡片能够合理利用空间，清爽的列出全部信息。而就像“2015年和2016年手机设计流行趋势”所指出的那样，最好的设计思路其实就是把每个卡片作为一个独立整体来设计。
接下来我们看看实例。首先，我们来看看苹果设备的AirDrop功能。当用户有数据传入时，手机会弹出一个卡片式的通知，用户可以选择接受或拒绝——无论用户做出何种选择，只需要一个操作即可。这种操作逻辑与平板电脑或计算机都是相通的，而这就意味着用户能够很容易地理解这种操作逻辑。
卡片式设计在最近一段时间已经可以用“泛滥”来形容了。在Pinterest第一次给用户带来了这种清爽的卡片式设计之后，很多公司都紧随其后推出了自己的卡片式交互设计，于是这股卡片化主导的设计潮流就这么火了起来。
而卡片式设计能够成为流行趋势的一个最重要的原因就是——卡片式设计能够完美利用手机屏幕的空间，不但界面清爽，内容也一目了然。在大多数的交互场景下，卡片式设计与移动应用程序简直是绝配。而矩形的设计也能够完美体现出UI设计的简洁美。
我们可以试着脑补一下，看看还有能跟卡片式设计一样，与手机屏幕完美匹配的其他设计语言吗？
卡片式设计可以说就是桌面设备和移动设备之间的设计交点，能够将可交互性和可用性完美融合在一起。
无论是何种设备，卡片式设计都能提供一致的体验感受。在响应式设计思维方面，因为卡片式设计是作为“内容存储的介质”，所以可以轻松地向上或向下扩展，而在与之交互时，这种优势便能够淋漓尽致地体现出来。
卡片式设计有两种最常见的形式——卡片式界面以及卡片式嵌入内容。
有时候，虽然软件使用的是卡片式设计，但其实你根本无法察觉到——因为它们已经被全屏化了。但是如果你仔细观察的话，还是可以看出其中卡片式设计的一些特征。
卡片式界面通常会融合单点式触控设计的元素，也就是说，点击或滑动屏幕上的任何地方都会做出相应的动作。因此，卡片式设计也经常被用于游戏界面上。
以最近在美区APP Store比较流行的小游戏Trivia Crack（益智闯关类小游戏）为例，主界面其实就是由许多卡片构成，卡片上面显示了游戏中的一些比赛以及竞争对手。仔细看的话，还能发现它在顶部还嵌入了一个广告（巧妙地伪装成了卡片），而且，在这款游戏中，卡片收集也是游戏中的一个重要的部分。这种卡片式设计使得游戏更容易操作，并且从玩家角度来讲也更容易理解。
卡片式嵌入广告在移动应用程序中也是很常见的，一般会随着程序中的某个动作触发并下拉覆盖大部分或是整个屏幕。
与卡片式界面风格所不同的是，这种卡片式广告包含两个链接，一种所占面积非常大，另一种则非常小。点击到覆盖面积大的那个链接，它就会带你到广告中的产品那里去——一般都是跳转到网页链接上，如果是iOS系统的话还会继续跳转到APP Store中；而那个占地比较小而且极为不起眼的区域（一般就是个小的×号）就会带你回到原来的界面中（当然，还有些比较恶心的广告不管用户点击哪里都会跳转到广告中的产品，甚至是直接跳转到下载链接自动下载，这种我们暂时先不予讨论）。
我们继续以Trivia Crack为例。在你成功触发广告后，广告会占满整个屏幕。这就是卡片式设计的应用之一（虽然用户会很反感）。这些广告窗口可以包含任何图像、声音、视频以及文字信息，用以说服你点击广告上的推荐产品。
从一个用户的体验的角度来看，这种卡片式广告感觉更像是集成在了界面之中。即使广告可能占据整个屏幕，这也不会打破程序内部整体的协调性，因为这其实就相当于在应用程序顶层新打开了一个卡片。
卡片式设计能够帮助用户快速浏览信息，这种在视觉上“能够和应用程序内部基调保持一致”的广告能够直接带来更加可观的商业价值。
使用卡片式设计的优势就在于——这一“容器”几乎可以容纳所有类型的内容。卡片可以与不同类型的内容进行搭配，而这种设计语言对于那些以内容为主的网站和应用程序简直称得上是绝配。因为没有什么内容是卡片所装不进去的。
卡片所能容纳的内容元素真的非常多，比如：照片、文本、视频、优惠券、音乐、付款信息、注册表格、游戏数据、社交媒体流、共享文件、奖励信息以及链接等等等等…
卡片式设计能够把这些内容有机的结合起来。而且对于用户而言，这种卡片也易于快速浏览和阅读。毕竟谁也不会盯着一个广告看上半天，广告商所能把握的时机只有那一瞬间的转眸。
卡片是用来翻阅的。这听起来似乎是理所当然的对吧？但这看似平常的逻辑却是卡片能够在现实社会普及开来的关键原因，同时这也是卡片式设计在移动应用领域的最大优势所在。
作为2015年的移动设计趋势，这股潮流很可能继续蔓延到2016年。就像UXPin所说的那样，卡片式设计能够方便用户使用的根本原因就是——卡片化的数字界面能够在现实中得到映射，用户很容易就能够融入其中。试想一下，在现实中你是如何玩扑克牌的——你可以将它们摞起来、铺展开、翻转、折叠，或是放在扑克牌盒子里。
而卡片化的数字界面具有着与现实中的卡片相同的性质，这是一种天然的优势，这能够给用户带来一个舒适的体验。因为用户不必再思考到底该如何操作了，手到擒来。
设计者也能够充分利用用户的这种现实中的思维惯性来设计操作逻辑，从而实现在应用中的无缝连接与转换。而当用户与卡片进行交互时，他们就会自然融入到这种固有的行为模式之中。
以上这些就是著名的UI设计师Chris Tse所说的，卡片式设计能够做的三件事：记录信息、用信息挑逗用户、或者用信息提醒用户。
那么，我们进一步分解来看看，不同类型的内容元素是如何放到这些卡片中的：
如何使卡片在数据流中进行推送的过程中，形成一种自然的“时间轴”对于用户体验而言是很重要的。先使用卡片来做一个吸引人的概括，之后再把故事的细节娓娓道来是一种不错的思路。
卡片可以把想要推送的相关内容，非常自然的呈现在用户眼前。如果能把广告加入淡入的效果，给人以出牌的这种感觉的话，用户肯定不会像现在这样对广告感到如此反感。我们可以看看Spotify的卡片效果：用户只需要向左或向右滑动，就可以找到符合口味的歌曲，这种酣畅的感觉能够给使用者以一种愉悦的享受。
由于卡片是能够自成一体的，所以他们能够完美地把正在进行的对话容纳进去。接下来我们以微信为例，我们可以看到其中包含了多个矩形窗口用于对话，虽然各个对话框之间的间距非常小，但是它们之间并没有相接，就在这点滴之间蕴含着一种十分微妙的美学。（虽然两人的头像各在屏幕的一边，但是我们的心已经靠在了一起）
卡片能够非常轻松地把待办事项进行归类。在这里我们拿Evernote举例，用户可以给不同的待办事宜选项卡里创建不同的注释。当你把某个小卡片删除后，剩余的“牌”将自动重新回到原来的位置。
现在，让我们再从多设备的角度来看看卡片式设计。虽然这种卡片内容经常会被限定在一个特定的应用程序内，但是其实卡片也是可以在应用、设备甚至用户之间移动的。在这里我们可以回想一下苹果的AirDrop应用是如何把数据从一个用户发送给另一个用户的。
在现实中也是一样，卡片很容易设计和使用。当涉及到卡片的实际设计时，你有时需要做一些重要的取舍。在这里我们可以拿SIM卡举例，就你而言，你觉得SIM卡设计成多大尺寸是比较合适的？又该以怎样的设计语言去设计SIM卡的外观呢？
我们再回到移动应用程序领域。当考虑到的卡片大小尺寸的问题时，目前最流行的选择无非三种：小尺寸卡片，用于对内容进行简单的描述；中等尺寸，占屏幕的一部分，可允许多个卡片显示在屏幕中;全尺寸卡片，覆盖整个屏幕，可以弹出覆盖在其他元素的顶部。
Yahoo! Fantasy这一应用就充分利用了所有的这三种卡片尺寸。第一个画面显示了一个球员名单，其中每个球员的名字都是一张牌。点击其中一个名字，就会弹出一个几乎占满整个屏幕的新卡片，卡片中有该球员详细的资料。进入到新闻界面时，应用就会全屏展开最近该球队在联赛中的新闻。这些不同尺寸的卡片能够让用户清楚的了解到他们正在看哪类的内容。
卡片化设计同样蕴含着美学。微软的Metro界面就是用扁平式卡片把应用程序展现在用户面前。虽然微软在Win10中不再那么依赖Metro风格的卡片了，但是这股卡片式设计的潮流却丝毫没有退却。应用程序里也开始出现了各类杂志风格的卡片，特别是在新闻网站这种包含有大量的文字信息的地方，比如Flipboard、CNN和Newsify。
那么，为什么说卡片的设计感十足且十分易于使用的呢？这是由于如果设计者想要使用卡片式设计的话，就必须有能力对所有能够放进卡片中的内容加以修饰和润色——从文字的排版到颜色的搭配再到图片的使用，都必须能够称得上专家才可以驾驭。而设计理论就是设计师在规划和制作这种卡片时的良师益友。
UX的设计师Erik D. Kennedy写了一篇非常棒的文章（一共分为两部），这篇文章打破了许多传统的设计观念。以下是我们认为在这篇文章中最适用于卡片式设计的几条规则：
了解光线的物理性质：设计师应仔细考虑如何使用阴影和渐变，使元素看起来更加真实。这对于卡片式设计而言是非常重要的，因为它涉及到了卡片的“真实感”。如果阴影投在各个角落边上的话，这种卡片式的体验可能就会被破坏掉。
确保UI在黑白两色下能够正常使用：设计的第一步就是要抛弃颜色。这将能够让你明确地把设计重点放在实用性和内容上。根据Kennedy的说法，设计师应该在设计的最后一步再添加颜色，颜色对UI设计只是起到点缀的作用。
不要吝啬使用留白：请先给你的卡片一些空白的空间，之后再去慢慢缩减这部分空白。正如我们在“网页设计中留白的禅学”中所描述的那样，“负空间”是帮助你“组织和分离各种必要与不必要元素”的良师益友。
掌握分层文字的艺术：这可能并不是那么容易掌握的。一定要使用一个明确的、清晰的图像作为背景。为了确保文本看起来效果更好一些，你可以使用一个黑暗的色调来进行叠加——把文字放进一个“盒子”里，或者是尝试虚化背景图。
知道如何创建与排版对比：无论是犹豫用大卡片还是小卡片，或是纠结用更多的文字还是更少的文字进行组合，其实最重要的是要把这些元素有机的配合起来，达到吸引用户注意这一最终目标。其实，在卡片式设计上简单的排版往往效果最好。通过给卡片加以美化润色，来使得用户对卡片更加熟悉，而且这种方式也并不失创意。例如，把阴影元素加进卡片中的话就会使用户感到更加亲切自然。
你可能已经感觉到卡片式的设计在移动领域越来越流行，而且这股潮流并不会在短时间内消失。这意味着更多的应用程序会出现卡片式界面，更多的开始使用有层次的卡片来设计。
谷歌地图就使用了分层卡片式设计来帮助用户浏览。我们可以来看下面的例子，左图中包含一个位于顶层的地址输入框和位于下层的全屏化地图。右图中位于顶端（或者说底部）的卡片显示的是该地方的实景图，帮助你确定你所搜索的位置，而屏幕下方（或者说顶层）的卡片则扩展显示了地址的具体细节。
设计人员如今的目标是找寻新的方式来进一步简化卡片的数量。第一种方式就是把一些常见的美学图案融合进图片、视频或标题之中，第二种方式就是通过将主文本堆叠起来，来使元素之间相互覆盖。
卡片式设计也可能还会有其他的设计趋势，例如在标题或图片上添加按钮。
虽然扁平化的设计从来没有真正的走出风格过，但是它的发展将激励卡片式设计继续发展。卡片式设计将更多的加入颜色的碰撞、流线型的排版以及更精妙的小设计，以帮助用户更好的浏览内容。
而那些以内容为主的网站很可能也会渐渐开始应用卡片式界面。因为，就目前而言，卡片式设计对于信息量比较大的内容都是绝配，没有之一。
Facebook仍然是内容驱动型卡片设计的一个范例。而且，Facebook将继续领导卡片式设计的潮流，并与更多的新闻和博客交流合作，并能够最终促使它们也使用这种设计语言。作为业界领袖，人们能够在Facebook里发现大量的卡片式设计语言，这并不奇怪，因为Facebook本身就是以内容为主的应用程序，而它的卡片式界面和模式将会鼓励越来越多的应用程序相继效仿。
相关阅读：
雷峰网原创文章，未经授权禁止转载。详情见转载须知。
