卡片式设计，如何高效运用

前言

卡片式设计广泛应用在我们日常工作中，在界面设计元素中扮演重要角色。近年来，各个互联网大厂都将卡片式设计纳入自己的设计语言，卡片设计在各大主流app中得到广泛应用。

最近，大头鱼在工作项目中也频繁用到了卡片布局，在不同的屏幕端、不同页面场景使用卡片时也有不同的方法。结合平时的一些思考，总结并归纳出一些卡片式设计的知识点，希望通过本次的总结和大家一起探讨“卡片式设计”。

文章大纲如下：

1.卡片简介&发展

2.卡片类型及使用场景

3.卡片式设计的优势

4.小结

1.卡片简介&发展

卡片（Card）是一组含有各种相关信息的“集合”，例如：关于单一主题的图片、文本和按钮，也是通往详细信息的入口;卡片也是一个容器，可将内容按逻辑进行归纳分组，帮助用户关注重要内容和进行操作。

在现实生活中，卡片无处不在，例如：银行卡、名片、服装吊牌、便利贴……这些常见物品都是以卡片式形式存在，它们具有一些共同点：a.体积小，轻便   b.信息具有关联性   c.能引起关注。 

在屏幕应用端，2014年的 Google I/O 大会推出了 Material Design之后，卡片式设计风格就逐渐流行起来，被广泛关注和使用。谷歌将它定义为“Inside Out design（由内而外式）”，它的本质是更好的处理信息集合。

在近期iOS14系列更新中，苹果也大量增加了卡片式设计应用，例如：“个人通讯录详情”界面、桌面信息组件以及“健康”模块等，卡片式设计使界面信息布局更加清晰明了，功能按钮更为凸显。

无论是Android、ios以及PC电脑端，都广泛应用了卡片式设计。

那么，卡片有哪几种类型？在界面设计区分结构层次时，卡片式设计有哪些优势？

2.卡片类型及使用场景

卡片的形态可以简单理解成：矩形+信息集合

矩形的大小、颜色可以根据信息内容调整，不同的平台设计规范对矩形的圆角、投影也有具体要求；

信息集合可能包含图片、文本、按钮等，在不同的主题页面中信息集合的结构布局也各不相同；

根据以上两个元素的搭配，卡片基本可以分为这3种类型：单体卡片、复合卡片、悬浮卡片

2.1 单体卡片

适合内容信息种类少、数量可控，卡片内展示用户想要关注的重要内容。单体卡片通常操作命令较少（3个以内），点击后能帮助用户快速获取详细信息或结果反馈。

单体式卡片是我们工作中常用到的布局控件，将信息内容按逻辑编组，通过图文编排，能呈现多样形式的页面视觉体验。

常见使用场景：

2.2 复合卡片

在同一组卡片集合中，信息内容比较多、具有相同属性和布局结构的元素整合在一起。可以理解为“多个单体卡片的结合”通常，组合式卡片会有多个操作命令，信息结构相对简单且重复可控。适合在同一主题下有多个相同属性的信息单元，重复排列布局。

在页面布局中，信息分类下面有众多的子信息排版，通常会出现在排行榜、列表清单等模块中。

常见使用场景：

2.3悬浮卡片

悬浮卡片属于临时界面控件，展示重要且及时的内容信息，需要用户主动触发或经过系列操作后退出。与模态弹窗相比，悬浮卡片可以呈现更多信息内容，在形态上比较灵活，高度可根据卡片内信息数量伸缩调节，在操作体验上一般不需要触发“用户阻断”。

模态悬浮卡片早在ios13就正式写入到ios设计指南中，半模态卡片是其演变后的效果

常见使用场景：

3.卡片式设计的优势

卡片的目的是整合信息内容，提升阅读效率和用户操作体验。那么，卡片设计的优势具体有哪些？

*便于区分和整合信息内容；

*视觉美观，操作便捷；

*增加界面空间利用率；

*响应适配多端设备；

3.1 便于区分和整合内容信息

卡片式设计将信息组织成区块，能将不同大小、不同媒介形式的内容单元按照逻辑进行分组呈现，能使界面结构更加清晰。最常见的就是图文混排，既要做到视觉上的美观，又要平衡文字和图片的强弱，这时卡片设计经常能担此大任。

3.2 视觉美观，操作便捷

卡片中的主要操作通常是卡片本身，它是一种拟物化元素，可以被覆盖、堆叠、移动、划动。这样能更好的拓展内容视觉深度和可操作性。并且增添了用户的操作兴趣，更加有趣味性，使人机交互更加紧密！

3.3 增加界面空间利用率

卡片式设计将信息组织成区块，相比传统列表式布局，在手机端只能上下滑动，但卡片式设计能更好的打破原有的框架。

比如，在ios端的相册采用卡片式的布局，在纵向的内容流里，也可以很好的增加横向滑动的内容区域，在保持整体风格一致时很好的利用了界面空间。

3.4 响应适配多端设备

卡片是自由的、可伸缩，能在屏幕尺寸杂多的情况下和响应式设计完美配合，配合响应式的断点设计。根据卡片式的这种特性，我们只需要设计一种视觉样式就可以放在不同的设备上并且保持体验上的一致性。这里主要指由于卡片可以自由编辑(横排或竖排数量，单张卡片大小)因此非常适用于不同尺寸的屏幕。

小结

总的来说，卡片是容器，合理利用卡片式设计能更好地呈现功能和处理信息集合，提升页面美观度和操作体验。卡片式设计也不是万能的，如果界面信息相对简单而且重复，用分割线设计足够可以区分不同内容，例如“通讯录列表”。本篇文章旨在帮大家梳理思路，大家有哪些具体问题和疑问可以在评论区和我聊一聊。

感谢阅读，记得收藏和点赞哦~biu

作者:大头鱼