2019设计趋势 - 卡片式设计

今年最火的设计趋势之一仍然是卡片式设计. 根据 NNG group NNG group 是美国认知科学家 Don Norman 创立的 UX 组织的定义：

卡片式设计 (card) 是一种 UI 设计模式 (UI design pattern)，把相关的资讯群组在一个大小可伸缩的容器 (container) 里。

这张小卡片里涵盖屋主头像、房屋封面、房屋名称、评价、评价人数、价格, 设定了格式化, 方便设计及使用者观看。

粗浅地了解什么是卡片式设计以后，就来点深入的内容吧！

1. 卡片式设计的三个特点

A. 弹性的版面  (flexible layouts)

Pinterest 为例，基本的资讯构成都差不多，但卡片高度会随着图片高度而有所不同，不过宽度仍然是统一的。

B. 群组相关资讯 (grouping information)

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

图片来源 uiplace.com

C. 详细资讯页面的进入点 (linked entry point to further details)

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

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

图片来源 uiplace.com

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

目标物离使用者的距离越近、或是目标物的面积越大，使用者移动游标的时间就越短，换言之就是操作速率越快。

2. 卡片式设计的心理学原理

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

设计师必需运用留白 (negative space) 保留适当的距离，才能创造不同物体间的关联性。

接近律 Law of Proximity

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

同域原则 common-regions principle：使用框线

同域原则 common-regions principle：使用底色

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

3. 卡片或清单？

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

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

各种新闻网站，上方三个采用卡片式设计，下方三个采用清单式设计

卡片和清单的新闻文章数量比较

分析结果是比起卡片，清单可以呈现近乎两倍的文章数。虽然卡片让画面看起来更加丰富，但也占据了更多空间，更压缩了资讯量。

4. 卡片的设计要点

卡片只有一个必须的设计要素——最基本的容器 (container)，其余资讯可以自行安排（注意只要放必要资讯就好，尽可能简短！）这里以较简单的构成做示范：

- 媒体素材 Media
- 主要标题 Header Text
- 次要标题 Subhead Text
- 摘要文字 Supporting Text

A. 明确的视觉层级 (provide visual hierarchy)

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

图片来源 uiplace.com

左边的卡片犯了什么错：

「主标、副标、摘要」字级和颜色都一样，看不出资讯的重要性
图片比文字区域小，抓不到使用者的目光
文字过于贴近容器边缘，阅读吃力，没有留白的喘息空间
右边的卡片做了哪些改变：

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

B. 单一连结 (singular link)

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

左边的卡片犯了什么错：

摘要文字包含了超连结文字，降低使用者跳转到详细资讯页面的转化率，视觉上也较杂乱
右边的卡片做了哪些改变：

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

總結

我們早就在生活中看過各式各樣的卡片（撲克牌、遊戲王卡、名片等）因此應用在介面設計中，使用者可以輕易地和過去的經驗連結，也能和它們產生良好的互動。除了熟悉的外型，卡片還有諸多優點：可以靈活彈性伸縮、大面積的點擊範圍。不過，不能盲目地使用它，在需要大量掃視的場合，清單會是比較好的選擇。

谢谢大家!!!记得关注喔 ^.^

点击进入UI Place网页  https://uiplace.com

获得免费模板mockup哦！