如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

 来源：UI中国

在现在这个信息大爆炸的时代，网页和app所需要展示的内容越来越多。以前那种简单堆砌式的页面设计已经无法满足现在用户的需求了。用户见的越多，也变的越来越“挑剔”。对于一款app来说，他们除了要求界面好看之外，也要易于操作，简单易懂。那么我们如何在注重保障用户体验的前提下还能表现如此繁杂的内容呢？卡片式设计应运而生了。

什么是卡片式设计？

卡片式设计的“卡片”其实是交互信息的载体，通常以矩形的形式呈现。这种样式很像我们日常生活中用到的卡片，比如名片、信用卡和球星卡等。所以我们形象的称这种设计风格为卡片式设计。

这张球星卡正反两面印有这名球员的基本信息。

卡片式设计理念

卡片式设计具有很强的兼容性。在新闻类网站和美食类app，你都可以看到它的身影。那么卡片式设计究竟有着什么样的魅力让它如此的受欢迎呢？

内容整合

卡片式设计将内容划分到不同的卡片上，每一张卡片代表着同一逻辑类型的内容。卡片的矩阵形排布可以很好的引导用户的视线。传统的列表设计模式，我们只可以纵向的浏览内容，但是卡片式设计可以让用户沿着纵向和横向有序的进行浏览。这种浏览方式更加的，用户可以更快的发现他们感兴趣的内容。

卡片就是一个承载信息的“容器”

简洁明了

我曾经说过一款app或者一个网站其实就是一本书。我们设计师就是这本书的作者，我们要让这本书为读者(用户)所接受，首先我们就应该让它通俗易懂。现在这种快节奏的生活方式，人们不愿意静下心来读大部头。卡片式设计就将页面的内容进行分割整合，用户一眼就能看明白。

当我们说到卡片式设计的时候，简洁这个词应该第一个想到。Carrie Cousins说过“一张卡片一条信息”。一个卡片上可以展示多条信息，但是要做到有侧重，每张卡片要突出表现一条信息或者内容。

美观

卡片式设计中卡片其实就是带有文字与图像的矩形。研究表明，图像的使用可以有效的吸引用户的注意力。带有图片的页面对于用户来说，远比通篇文字的新闻通稿式页面有吸引力的多。

我们应该使用简单的字体和易读的配色。（文字应该是最显眼了，选用一个足够对比度的纯色作为背景）

不要使用过多的字体。大部分情况下，一个卡片中一种字体就足够了。

易操作

现实生活中，你接住别人递给你的名片，你将信用卡从pos机中刷过，你将酒店房卡插进卡槽。这一切都是需要手指来完成。现实的卡片设计的很适合手指操作，虚拟的卡片也同样如此。我们可以点击卡片来获取更多信息，滑动卡片来看下一条内容，这些操作手指都很容易实现。

适合响应式设计

我们都知道你的app和网站在不同的设备下保持适配是一件很重要的工作。而卡片式设计就能很好的帮助我们来完成这一点。卡片式设计从根本上来说就是将页面内容进行分解，然而再整合一个无法再进行分解的元素。而响应式设计要求的就是我们可以根据屏幕尺寸的大小对页面内容就行调整。卡片式设计就可以对页面内容进行分割重组来适应不同的屏幕。比如这个Google在手机设备上显示一个卡片，pad端显示两个卡片。

而卡片本身还具有很强的伸缩性，可大可小。卡片式设计可以在不同大小的屏幕中仍保持视觉风格的统一。传统的列表排布模式很难做到适配不同屏幕的情况下还保持视觉风格的统一。卡片的高度可以根据屏幕尺寸进行相应的调整。

卡片式设计的经典案例

Facebook

Facebook中好友的每条动态都是以一张卡片的形式展现的。用户可以很快的完成对页面信息的读取。你可以不断的往下滑查看更多的好友动态。你也可以看到多少人点赞，多少人评论与分享。这些功能诱导用户积极参与互动，增加传播性。

Tinder

Tinder是一款交友软件，其页面设计的很简单但是很精致。主体就是一张附近用户的照片，你如果喜欢可以就向右滑动卡片，不喜欢就想左划，就是这么简单。很适合拇指操作。

Trello

卡片式设计很适合任务列表类的页面。Trello就是一个很出色的例子，在这里做了一个卡片式的任务面板，其中每张卡片代表着一个独立的任务。

AirDrop

卡片可以用来承载内容，也可以用来表示动作。Apple的AirDrop功能，当对方想给你传送文件的时候，你就会收到一个请求。我们可以做一个卡片式的弹出框来完成这个交互事件。

Behance

卡片式设计使页面如此的简单，所以用户的注意力都放在内容上面了，内容也会更容易的引起用户的注意力。Behance就是一个卡片式设计的网站，每张卡片代表了一个作品，里面提供了作者姓名，多少浏览者点击了这张卡片，多少人转载了它。

微软

2010年，微软推出了Metro UI。微软将原本拟物化设计统统拍扁，阴影，高光，质感一律不要。这种扁平化的设计风格使整个页面简洁而美观，用户将更多的注意力放在页面内容上。在这里卡片不仅仅是一个设计元素，还是为页面交互打下基础。

总结

卡片式设计不仅仅体验在页面外观上，它为我们提供了一种灵活的布局方式，流畅的用户体验。当然以上只是我的一家之言。每个人对卡片式设计都会有自己的看法与理解。在我看来，卡片式设计依旧会流行一段时间，继续在app与网页设计中占有一席之地。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务