这次我们聊聊关于卡片式设计的原理与作用...

大家有玩过扑克牌的经验吗？就算没玩过也一定看过！卡片式设计的概念和外型都跟扑克牌非常相似。

卡片式设计本身是一种UI设计模式，它能把相关的资讯群组在一个大小可伸缩的容器里。

这样说好像太复杂了，其实卡片式设计不是什么新奇的玩意，除了扑克牌，还有两个经典作品都用到了卡片，那就是库洛魔法里所使用的库洛牌和游戏王里的游戏王卡，我相信这个对于90后一定不陌生。

库洛牌上的资讯较少，涵盖「卡牌名（汉字和英文）、插图」。游戏王卡上的资讯就多了，涵盖「卡牌名、插图、属性、效果、攻击值、防守值」两者皆把相关的资讯群组在同一个版面里。

再来举一个UI实例，下方是高高手的线上课程资讯，典型的卡片式设计。

这张小卡片里除了涵盖「课程封面、课程名称、关键词、章节、参加人数、课程费用、作者」以外，也有着交互后的阴影展示，暗示这张卡片可以被点击。

好了，我们粗浅地了解什么是卡片式设计以后，我们在来点深入的内容。

一、卡片式设计的四个特点

1、有着和扑克牌相似的外型

卡片会利用框线或者和背景底色呈明显对比来凸显它的存在，也会透过轻微的阴影暗示它可以被点击。

2、弹性的版面

文章开头我提到卡片式设计就是把相关的资讯群组在大小可伸缩的容器里，以花瓣网站为例，基本的资讯构成都差不多，但卡片高度会随着图片高度而有所不同，不过宽度仍然是统一的。

3、群组相关资讯

卡片承载了不同但相关的资讯在同一个版面上，应用非常广泛。可以是作品展示网站的一个作品、购物网站的一个产品、食谱网站的一个食谱。

例：站酷    例：京东    例：美食杰

4、详细资讯页面的进入点

卡片上的资讯都只是简短的摘要，如果要取得更多深入的内容必须透过点击卡片跳转到详细资讯页面。

以刚刚举的三个例子来说（红色部分为连结到详细资讯页面点击范围）京东和美食杰的卡片都是你随便点随便中的概念，而站酷 则是另外放置了第二链接（作者姓名）在内。

这么大的点击区域其实运用到了一个由美国心理学家Paul Fitts提出的认知心理学法则—— 费兹定律

（这里普及一下费兹定律的基础概念：其目标物离使用者的距离越近、或是目标物的面积越大，使用者移动游标的时间就越短，换言之就是操作速率越快。）

接下来我再说一下关于卡片式设计在心理学上的原理

二、卡片式设计的心理学原理

格式塔的接近律认为人脑会把位置相近的物体视为一个群体，并认为他们是相关的。所以以下图来说，我们不会直觉反应这是六个圆形，而是两个群体(2和3 , 4和5) 和两个落单的个体(1，6)。

这里需要提及一点得是，设计师必需运用留白保留适当的距离，才能创造不同物体间的关联性。

我们会把在同一个区域内的物体视为一个群体。即使2和3 , 4和5 彼此相近，也会觉得他们是独立的个体，分别在不同的群体里。卡片式设计的用意在于提供设计师不同的资讯群组方式，同时达到节省留白空间的效果。

而打破接近律的是同域原则和方法很简单，只要让它们处于相同的区域就好。于是除了留白以外，我们还有其他群组物体的方式——使用框线或加上底色。

接下来是不单纯是关于卡片式设计的内容，里面还包含关于和清单式设计的对比

三、卡片和清单的区别与运用

卡片式设计的应用相当广泛，能够依据内容灵活伸缩，还有着大面积的点击范围，处处都能看到它。不过若是为了提升画面的丰富性而盲目使用，反而会干扰使用者的视线。在特定的场合，清单会是比卡片还要更合适的设计。

我们以新闻网站为例，在同样画面大小的情况下，采用清单式设计能够展示更多的文章数，使用者也可以在快速扫视下获取更多的资讯量。

同样的道理，百度搜寻结果若用卡片方式呈现，使用者的阅读动线会很不顺畅。因此在使用者需要大量扫视资料的场合（新闻网站、搜寻结果）清单会是比较好的选择。

最后一个概念就是卡片式设计的使用的四种基础场合

四、适合使用卡片的四种场合

1、信息流

新浪微博上的信息会随着滚动无限加载，卡片把这些信息群组成独立个体，让我们可以在无止尽的浏览中方便对个别信息做不同的动作（按赞、留言、分享）也更好消化大量资讯。

2、发现探索

Dribbble利用卡片式设计展示作品，让使用者可以在这些卡片堆中找寻自己感兴趣的内容。

3、工作流程

Trello把清单和任务独立成一张张卡片，使用者可以用直觉的拖拉方式更有效率地管理工作。

4、仪表板

Salesforce的仪表板有不同型态却互相关联的资讯，使用卡片式设计可以让这些资讯同时呈现在同一个页面上而不互相干扰。

最后我来讲一下关于卡片式设计的要点

五、卡片的设计要点

卡片只有一个必须的设计要素——最基本的容器，其余资讯可以自行安排（注意只要放必要资讯就好，尽可能简短！）

这里我以较简单的构成案例做个示范：

• 媒体素材
• 主要标题
• 次要标题
• 摘要文字

1、明确的视觉层级

视觉层级，即是传达资讯。如何组织、排序内容，让接受者能够尽可能轻易地理解资讯。卡片若没有搭配明确的视觉层级，承载的资讯就无法清楚地传达给使用者，也失去了卡片式设计的用意。

左边的卡片犯了什么错：

• 主标、副标、摘要、字级和颜色都一样，看不出资讯的重要性

• 图片比文字区域小，抓不到使用者的目光

• 文字过于贴近容器边缘，阅读吃力，没有留白的喘息空间

右边的卡片做了哪些改变：

• 将重要性较高的主标字级放大并加粗，重要性较低的次标颜色调淡
• 图片调整至适当大小，一眼就能吸引目光
• 文字和容器边缘有一定距离，阅读起来较舒适

2、单一连结

前面讲到费兹定律：点击目标越大，使用者的操作速率越快。由于整张卡片是详细资讯页面的进入点，注意减去不必要的链接，或是不要有其他链接。

左边的卡片犯了什么错：

• 摘要文字包含了超链接文字，降低使用者跳转到详细资讯页面的转化率，视觉上也较杂乱

右边的卡片做了哪些改变：

• 整张卡片就是唯一可点击的链接（详细资讯页面的进入点）
• 适当的微互动如收藏等，可以提高使用者体验

• 总结

我们早就在生活中看过各式各样的卡片（扑克牌、游戏王卡、名片等）因此应用在界面设计中，使用者可以轻易地和过去的经验连结，也能和它们产生良好的互动。除了熟悉的外型，卡片还有诸多优点：可以灵活弹性伸缩、大面积的点击范围。不过，不能盲目地使用它，在需要大量扫视的场合，清单会是比较好的选择。

Thank.

Powered by Froala Editor