1.前言

前几日好友吐槽卡片设计流行到“烂大街”，一时间各大 App 的改版中都将卡片设计纳入自己的设计语言当中。当然卡片设计的流行绝非偶然，从最早的 Palm WebOS 再到 Material Design，卡片设计的优点得到了充分的认证，接下来和大家分享一下卡片设计的定义以及为何如此流行的原因。

2.卡片设计的定义

早在2009年 Palm 公司在拉斯维加斯电子展销会上发布了 Palm WebOS 系统应用了卡片设计，后来到2014 Google I/O 开发者大会上发布了量子纸（Quantum Paper）的概念，对卡片设计有了初步的概念，在后续的 Material Design 中物质是隐喻的设计理念对齐进行了更加系统的解释。

2.1 Material Design 的卡片定义

在 Material Design 中对卡片做出了明确定义： 

卡片设计是包含有关单个主题的内容和动作。 

单个主题的内容包括文本信息和图形或图形元素，动作则是指交互操作。

2.2.卡片设计设计原则

优秀的卡片设计首先要保证信息层级（图像、文本信息、功能按钮等）的清晰，保证用户易于扫描以获取相关可操纵的信息。

对于卡片设计大家可以参考 Material Design 提出了卡片设计的三原则：

a.承载性

卡片可以作为独立承载内容的单元。例如我们日常见到的 feed 流或瀑布流的中应用的卡片都是独立承载内容的表现

b.独立性

卡片可以独立放置，而不必依赖周围的元素作为背景。 仔细观察我们能发现卡片往往能够被应用于多场景中，正是因为卡片的独立性，不必依赖于周围的元素。

c.个体性

卡片是一个独立的个体，一张卡片不能和另一张卡片合并，同时也不能分成多张卡片。

卡片无法像细胞一样分裂或者融合，每张卡片所独立承载的内容无法与其他卡片融合，也无法拆分成多张卡片。

3.卡片的优势

3.1.隐喻性

在用户的认知中大部分卡片是可点击的，借助 Material Design 物质是隐喻的设计概念，我们现实生活常常用到卡片（例如名片、银行卡、会员卡等等），所以在用户潜意识中认为卡片是可操作的，降低了用户的认知成本。

3.2.组织信息 划分页面

a.组织信息

借助卡片的承载性，可以将零散的信息根据产品的业务逻辑组织到一起，形成相对独立的各业务模块，卡片的独立性能够很好的将各业务模块进行划分，使页面形成一定的秩序。

b.划分内容

卡片设计能很好的划分页面的信息层级、建立页面内的秩序，这依赖于卡片的独立性。卡片设计具有明显的边界，借助圆角可以加强卡片与周围环境的差异性，促使用户更易识别。

许多产品中经常会借鉴卡片设计来划分内容，例如我们经常看到在 Feed 流、瀑布流等场景，

3.3.交互

卡片设计之所以在交互上如此受欢迎，除了在交互上能够帮助设计师对信息进行很好的归纳，更多是源自卡片设计低门槛的交互成本和在交互形式上极强的可塑性。

a.低门槛的交互成本

隐喻性

卡片来源于现实世界，借助 Material Design 物质具备隐喻性的概念，卡片设计在潜意识上给用户的感觉是可点击、可操作性的，无形之中降低了卡片的交互成本。

简易性

一张卡片只能被分配执行一个交互动作，且卡片内部不能在添加交互动作。例如在 Material Design Cards 中移动案例。

图片源自 Material Design

一张卡片只能分配一个滑动动作，卡片中不得包含其它可滑动内容（例如图像轮播或分页），滑动手势也不应导致部分卡在滑动时脱落。

关联性

卡片在交互时具备关联性，当卡片在执行交互动作时会影响到周边其他卡片。例如在 Material Design Cards 中移动案例，用户在移动卡片时其他卡片会自动排序。

图片源自 Material Design

b.交互可塑性强

卡片设计借助父子集的概念和 Material Design 中物质的空间属性造就了卡片在交互设计上的极强的可塑性

父子级

卡片可以借助父子级的概念，通过卡片的扩展转场显示或隐藏更多信息。

空间属性

卡片附带空间属性，首先卡片设计来源于现实物理世界，所以在设计当中除了对 X 、 Y 轴的表达意外，还有对 Z 轴-空间纵深的表达。

例如豆瓣的影音档案则是利用 Z 轴的空间纵深来隐藏显示用户历史影音。

其次在  Material Design - Cards 中也提到 - “海拔”的属性，即高度。在移动设备上，卡片的默认高度为1dp，抬高的拖动高度为8dp。比较常见的场景就是我们在自定义页面拖动某一模块的时候，可以看到该模块明显高于其他模块。

4.划重点

1. 卡片设计是包含单个主题的内容和动作

2. 卡片设计的三原则是：承载性、独立性、个体性

3. 卡片设计的优势：卡片具备隐喻性、低门槛的交互成本、极强的交互可塑性

参考链接

http://33s.co/tYeL
http://33s.co/tYe2
http://33s.co/tYeq

Powered by Froala Editor