编者按：可以说现如今的移动端UI设计中，卡片式设计撑起了半壁江山，它随性自由又充满了逻辑和组织性，它不仅流行着，而且还正在变得更加流行。它长盛不衰的秘密到底何在？读下去~

个性化的顾客体验是现在网页和APP设计的大趋势。个性化的新体验大多建立在单独信息的聚合体之上，而多类型的信息想要聚合起来，卡片式的界面则是较合适的载体。如今你所看到的UI界面设计，卡片式设计差不多无处不在，从新闻类站点到游戏界面，从物流APP到社交媒体，等等等等。今天的文章将会详细解释卡片式设计相对设计师的意义，以及常见的卡片式设计的基本功能与特性。

什么是卡片式设计

咋们在每个APP中经常见到的那些承载着图片、文字等信息的矩形区块便是咋们所说的卡片，它们作为不同类型信息的入口而存在，当你点击它的时候可以看到看到越来越多详细的信息。卡片是对这种信息容器的较形象的称谓，它们和现实世界中的卡片特别相似。

在卡片正是“入侵”顾客界面以前，各式各样的卡片存在于咋们周围：银行卡，身份证，名片，乃至连方便贴都算是卡片。故此，咋们相对卡片有着极为直观的认知，它存在于咋们周围，每天都和咋们打交道。当咋们面对卡片式界面的时候，会下意识地接受它们形同卡片的属性，当然地与界面开展“卡片式”的交互。

棒球卡便是现实生活中较常见的一种卡片，卡片的一边是棒球运动员的形象和姓名、球队，翻过来之后可以看到越来越多更加详细的信息和信息。

卡片的特点

当卡片从现实生活走进移动端界面之后，它开始成为真正强大的工具，信息以卡片为载体，化作更简单为顾客所消化的信息。顾客可以更为轻松方便地选取并获得他们想要的信息，下边的几个实例可以为你揭示卡片适合在UI中使用的原因：

信息块

卡片将信息以区块的形式组织到一起，顾客也喜欢阅读成块的信息，由于它们更为集中更适合阅读：这种设计让信息不可能以长篇大论的形式出现，防止由于信息太长让顾客产生畏惧心理，简单明快的信息更简单引起顾客兴趣，顾客也因此可以选择能否要继续阅读下去。卡片将信息提取、优化为有意义的区块，而且不同类型、属性的信息可以在卡片上组合称为有机的、连贯的聚合体。

易于挖掘

卡片也是承载故事的工具，信息在卡片中更简单为顾客所消化，顾客可以轻松地浏览感兴趣的信息，以自个想要的方法参与进来。

顾客可以迅速的扫视、翻看卡片。

视觉上的愉悦感

基于卡片的设计通常会严重依赖于视觉设计。而事实上，图片的使用也确实是卡片式设计的强项。研究表明，好的图片可以极大的提高APP和网站的视觉，让顾客获得愉悦感。卡片式设计在图片素材上的强调使得它更加具有诱惑力。

兼容不同尺寸的屏幕

卡片较突出的特性便是它在可操作性上有着近乎无穷的可能性。这也使得它称为了响应式设计的较好选择，由于卡片可大可小，是自由可控的信息容器。也正是这一特性，使得卡片成为了跨设备跨屏幕的UI设计的优选元素，它能提供一致的体验。

以人为本的设计

说卡片式设计是以人为本的并不为过，由于它特别适合移动端小屏幕和手指操作，它近乎是为你的手指而定制的存在。简单易用，和物理世界的一致性，以及易于理解的交互模式全是它的特点。

较佳案例

卡片式设计正处于桌面度和移动端设计的交叉点，它弥合了两种界面在可用性和交互性上的沟壑。不过胜利的卡片式设计必须要具备清爽干净的美学特征，并且能让顾客直接轻松地交互。

卡片流

卡片可以构成信息流，创建事件流和時间轴。比如Facebook 的 Feed 就用卡片来承载事件的迅速预览，Facebook 采用的是无限滚动加载的模式，每个卡片全是单独的，这使得其中的信息更易于承载，也更简单分享。这种交互模式促使顾客在平台上越来越多地分享信息。

发现与探索

卡片式设计允许相应的信息当然地显示出来，让顾客可以更加深入地清楚自个感兴趣的信息，著名的设计创意社区Behance 便是这么做的。

Tinder 则是另外一个值得学习的案例。这样的应用借助卡片式设计的这种探索发现的机制，让顾客习惯性探索越来越多信息，从而推进这样的产品成为较流行的移动端应用。Tinder 的这种机制并不复杂，喜欢的话，向左滑，不喜欢则向右滑。这种有趣而简单的交互令人上瘾，尤其是当这种交互可以行之有效地赞助顾客找到更感兴趣的信息。

工作流

卡片式设计可以赞助顾客更好地开展列表归类。Trello 的任务列表就采用了卡片式设计，它很好地作用于顾客，赞助顾客管理任务和工作。

对话框

卡片不仅是信息的容器，它一样也是操作和交互的载体，通常它的基本功能和对话框类似。苹果设备上的 AirDrop 服务就将卡片作为顾客操作和交互的载体。当有数据传输的请求之时，系统会弹出一个卡片，你可以在卡片上选择接受信息或者拒绝。这种卡片可以承载多种不同的交互和信息，相当的实用。

控制面板

当卡片用来组织不同来源的信息的时候，它有着极高的处置精度。使用卡片你能将信息聚合成契合逻辑的分组，乃至可以依据特定的上下文和背景开展有效的排序。来自不同来源的信息依据规则被整合成不同的分组，这也是卡片式设计的特点。

基于卡片的设计语言

2010年的时候，微软推出了Metro设计语言。这种设计语言的一个关键原则便是关注应用的信息，而这通常是通过扁平化的元素、排版和卡片来实现的。一个Metro卡片不仅仅是单纯的设计元素，它还承载了信息和必要的交互。

谷歌所提出的Material Design设计则采用了纸的隐喻，一样是一种典型的卡片式设计，现在仍然是主流的设计语言。Material Design和 Metro 有着很多共通之处，它也更加接近于扁平化2.0的设计特征。

简约

当你开始采用卡片式设计的时候，简约应当是你始终牢记的一个原则。Carrie Coucins 对此有个很好的建议：一个卡片元素可以包含多个元素，不过较好每次都专注于其中的一个信息或者信息。这样子的设计可以让顾客开展更加有效的选择，也使得信息可以更加有效地消费和分享。

响应式设计

咋们都很清楚如今响应式设计的重要性，要让自个的应用和页面可以在不同尺寸的屏幕上正常的使用。当咋们为不同的屏幕设计的时候，应当充分清楚屏幕特征和所用的卡片与信息的属性，这样子才能依据屏幕的大小迅速、轻松地调整信息。卡片式设计呈现出了与响应式框架良好的兼容性，它可以轻松适应不同的屏幕尺寸和响应式设计的断点。

数字化之后的卡片可以以不同的方法开展操控，这也是它的一大特点。横向或者纵向排列，堆叠，排列等等等等。

卡片与排版

卡片上的一切信息都应该拥有良好的可读性：

·选择简单且易于识别的字体，以及拥有良好对比度的配色方案
·尝试控制字体的数量，相对绝大多数的项目，单个字体就好

结语：

相对绝大多数的人而言，很难理解为何卡片式设计为何如此受欢迎，并且人气还在持续增长中。相信我，这种趋势并不可能那么快结束的，卡片式设计将会是UI设计的大势索取，并持续很长時间。卡片式设计的强大可用性是它的生命力来源，简约的设计和多样的承载形式将会让卡片式设计走的更远。