如何设计卡片

卡片式设计诞生背景如何进行卡片式设计什么是卡片式设计如何设计卡片01 卡片框架1.1 卡片形体1.2 圆角1.3 投影深度1.4 背景1.5 手势02 内容元素2.1 分割线2.2 字号和字重2.3 行动点03 卡片间关系3.1 信息组织方式3.2 栅格3.3 间距和留白3.4 布局为何要用卡片式设计01 设计效率的提升1.1 设计一致性1.2 适应不同尺寸设备1.3 灵活布局02 信息呈现的优化2.1 更适合图文混排2.2 聚焦关键信息2.3 提升阅读效率2.4 提升空间利用率03 人性化3.1 降低认知负荷3.2 提升可交互性3.3 方便共享何时使用卡片式设计01 对内容布局形式的考量1.1 Feed 流1.2 瀑布流1.3 左右结构布局02 从功能类型上考量2.1 提醒与引导2.2 集合型功能入口03 从情景映射上考量3.1 模拟物理行为3.2 模拟物件何时不使用卡片式设计01 长文咨询类页02 消息联系人等页03 图片陈列页04 简单入口引导页结语

随着 iOS7 扁平化和 Material Design 的流行，卡片式设计成为应用设计的趋势之一，并已深入到各个行业、领域中。相比传统的界面设计，卡片式设计提供更多个性化的用户体验。我们对此进行了相关基础研究，希望为后续开展设计工作做准备，以及跟大家一起探讨如何更好地进行卡片式设计和运用。

内容—

卡片式设计诞生背景如何进行卡片式设计为何要用卡片式设计何时使用卡片何时不使用卡片

卡片式设计诞生背景2007 年 iPhone 出现，世界进入智能手机时代。最初的智能手机作为新兴事物，为具备更佳的易用性，将现实物体搬到屏幕上，我们称之为拟物化设计。随着智能手机市场的成熟，人们对智能手机的认知已逐渐养成，拟物带来的引导性已不再重要。2010 年 Metro UI 发布；2013 年苹果推出 iOS7，拟物向扁平转变；2014 年 Google 宣布 Material Design，卡片式设计融入其中。

在这个移动端逐步占主导而桌面端设备仍主导生产力的时代，在两大平台间来回切换变得稀松平常。强调同时兼容不同屏幕的设计，是件自然而然的事，正是在这种语境下卡片式设计得到普及并不断发展。

如何进行卡片式设计对于卡片设计的方法介绍，我们会结合 Google 的 Material Design 规范进行参考阐述。

什么是卡片式设计现实世界中，卡片通常是由文字或图案组成的实体化矩形薄片，如扑克牌、银行卡。这种轻巧简洁的实物设计慢慢应用到虚拟设计中，“容器” 是卡片最重要也是必不可少的属性，其他元素都可以根据具体需求选择性的添加和使用。简而言之，界面中的卡片其实就是交互信息的承载体。

图片来源：Material Design

如何设计卡片我们将从卡片框架、内容元素、卡片间关系三个维度对卡片设计进行阐述。

01 卡片框架

1.1 卡片形体不同的卡片形体样式传达不一样的视觉感受。通常分为常规和异形样式，常规样式较为安全，适用多数场景；而异形样式，常抽象现实生活的实物，表现差异性，营造更加独特的氛围感。

1.2 圆角卡片圆角的大小往往决定整体设计风格，不同的圆角大小可以传达出不同的质感和心理感受。较大的圆角较为柔和，较小的则看起来更加硬朗。

从设计角度来看，卡片最好是圆角，看起来更像是一个内容块，不建议设计成直角。

图片来源：Material Design

1.3 投影深度投影用来呈现卡片的边界和形态，更好的将卡片与环境进行区分。通常移动端上的卡片，默认投影深度为 1dp，休息状态 0dp，悬停 4dp，拖动 8dp。阴影可辅助表现投影深度效果。

图片来源：Material Design

1.4 背景只要保证视觉上没有太多对比，卡片的背景颜色可以较为灵活。但要把握好卡片与背景的对比度，做到相对协调。这里有两点建议：1）卡片与背景色不宜太接近或使用相同色，否则影响卡片整体的空间感，弱化模块感。2）在深色背景上，尽量让卡片与背景色处在同一色系，或明度差异不要太大，提升整体协调性。

1.5 手势卡片的常用手势有滑动、选取并拖动及滚动。

1）滑动可在一张卡的任意位置执行滑动手势，应该整体被滑动，而不是部分被滑动。

图片来源：Material Design

2）选取并拖动选取并拖动手势允许用户对一堆卡片进行移动和重新排序。拖动的卡片应在所有元素的前面 (除状态栏和导航栏)，可以增加其投影深度，不要移到其他卡的后面，更不应该干扰到其他元素。

图片来源：Material Design

3）滚动超出卡高度的内容会被截断，可以通过扩展来显示，卡片高度可扩展到超过屏幕。这种情况下，卡需整体滚动，但卡内部无法滚动。

02 内容元素

2.1 分割线分割线通常是一条浅色的细长横线，用来分割卡片中各内容区域。常见有：1）全出血分割线：将内容分割为多个部分，分割线长度跨越整个布局宽度2）嵌入式分割线：分隔包含标题或头像的卡片内容，起点与标题对齐3）居中分割线：用来分割与空间相关的内容，位于整体布局的中间4）带子标题的分割线：分割线可与小标题进行组合，用来定义或辅助说明各模块的内容

图片来源：Material Design

2.2 字号和字重合理的字号和字重设计有助划分信息层级，引导科学阅读和理解。字体较小时，通常会仔细阅读；较大时，则更倾向于快速阅读。卡片标题意在帮助用户快速定位核心信息，所以字体应当适当放大并加重。

图片来源：Material Design

2.3 行动点卡片的主要操作区通常是卡片本身。补充操作一般置于卡底部，由图标、文本和 UI 控件等表示。有两个以上行动点时，采用溢出菜单，通常置于卡的右上角或右下角。卡片作为更详细信息的入口，行动点数量应控制。

图片来源：Material Design

03 卡片间关系

3.1 信息组织方式移动端的信息组织方式通常有两种：通栏式和非通栏式，通栏式可分为留白式、分割线式和间隔式。留白式，通过留出一定空间来组织信息；分割线式，使用分割线分隔信息；间隔式，通过间隔设计划分模块。非通栏式，则在四周留出边距来打造模块化效果。广义上讲，通栏式设计仅在框架层面将信息分层，本身并无表现层作用。非通栏式才是常规意义上说的卡片式设计，即本次讨论范围。

3.2 栅格卡片式设计遵循栅格规范，但卡片间隙和边距可以调整。如 Material Design 基准网格是 8dp，卡片间隙和边距可以是 8、16、24 或 40dp。

3.3 间距和留白卡片式设计注重布局和空间通透感，内容间及周围适当留白是必要的。内容较多时，建议边距变窄；内容较少时，可用宽边距。

3.4 布局多个卡片组合到一起时，默认正面朝上，并处于相同投影深度。当被选中或拖动时，可以反转或提高投影深度。有关排列顺序，通常第 1 张位于左上方，随后按从左到右、从上到下排列。

图片来源：Material Design

一般有三种布局：固定容器布局，所有卡片大小固定，排列规律；适配内容布局，根据具体内容适配卡片高度；不规则排列布局，为突显每张卡片的个性化，使用不对称的网格。

图片来源：Material Design

为何要用卡片式设计上文相信已帮我们了解了卡片式设计的基本框架，接下来将从设计效率的提升、信息呈现的优化、人性化设计三个维度说明为何卡片式设计能成为行业趋势。

01 设计效率的提升卡片式设计常以模块化的形式展现，我们只需提炼出模块的规范，并对不同类型模块整合，即可满足大多数业务场景，提升设计效率。

1.1 设计一致性卡片式设计在栅格基础上升级，将页面内容分为 N 个区域。如果业务频繁变动，设计能在不影响框架基础上，最小成本替换内容，易于迭代。

图片来源：Material Design

1.2 适应不同尺寸设备页面布局时，卡片式设计允许自定义单排数量或单张卡片尺寸，以便更好地处理多端设备界面的一致性问题，简化排布。

1.3 灵活布局比起中规中矩的布局方式，其自由组合的特性对设计师或开发来说是一种更愉悦的体验，不用再为图片比例不对、需要裁剪而头痛。

图片来源：花瓣 App

02 信息呈现的优化卡片式设计可优化信息组织方式和利用有限空间，这个思路突破了传统设计中先定框架，再填内容的桎梏，以信息内容为第一优先级，框架向内容妥协。

2.1 更适合图文混排卡片式设计能将不同大小、媒介的内容进行统一呈现。让单屏区域显示更多内容，同时合理划分空间，既尽量保持视觉一致，又平衡了文字和图片的强弱。

2.2 聚焦关键信息对分组集合而言，卡片相比传统列表项 + 分割线 + 标题的视觉效率更高。它可以概括关键信息，汇聚分散的内容，使每张卡片成为独立单元。

2.3 提升阅读效率卡片本身空间有限，不能承载过多信息，常作为入口，引导点击获取更多详细内容。

2.4 提升空间利用率传统列表常为纵向滚动模式，而卡片既可在纵向空间上使其折叠，还可利用横向空间增加区域。

0b78fmaaaaaa3uanxyq7qbpfak6daavqaaaa.f10002.mp4(817 kB)

03 人性化卡片设计来源现实物品，我们早已在生活中习惯了这些。当设备有了卡片式设计，会觉得有种熟悉感，很方便。

3.1 降低认知负荷卡片广泛存在于人们的生活中，用户早已具备卡片的阅读和使用习惯，对卡片本身并不陌生。图片来源：Apple Pay

3.2 提升可交互性作为一种拟真元素，卡片可以被堆叠、覆盖、移动和划去，这种模式拓宽了交互的多样性，符合用户的操作预期，增强了设计体验感知。

3.3 方便共享卡片因小巧、易携带等特点，天然具有社交属性，如名片。界面设计中，用户可以轻松地通过各种渠道和平台将卡片分享出去。

何时使用卡片式设计我们发现同款应用中，某些结构类似界面，有的采用卡片式而有些却没有。何时适用卡片？我们将从内容布局形式、功能类型、情景模拟三个维度进行说明。

01 对内容布局形式的考量常见的内容布局形式有 Feed 流、瀑布流、List 等。卡片更适合前 2 者这类区块相对独立、灵活组合的布局，使用户更聚焦内容，保持浏览时心流的稳定。

1.1 Feed 流Feed 流是一种承载用户主动订阅或系统推荐内容的容器，卡片将内容区块化，用户长时间浏览时更专注地阅读与筛选有效信息。如淘宝微淘的关注模块，以卡片区分不同店铺的推荐商品。

1.2 瀑布流瀑布流是一种承载连续性内容的容器，卡片上下左右灵活组合。躺平 App 的推荐页，根据不同的图片尺寸，灵活调整进行拼接。

1.3 左右结构布局卡片具有很强的动态可操作性，纵向、横向空间上均可延伸。App Store 的游戏版块，采用纵向分组、横向切换布局，帮助用户快速阅读。

02 从功能类型上考量卡片具有很强的独立性，某些相对独立且权重较高的模块，可用卡片做承载，如提醒、引导等。

2.1 提醒与引导提醒或引导类的模块，卡片能区分内容层级，强调信息权重，展示位置也更加灵活。如左图 1 弹层提示地址变更；左图 2 会员卡强调权益；右图 1 采用卡片内嵌方式，外层卡分类，内层卡展示待办事项。图片来源：左 1.2 口碑 App 右 1 Teambition

2.2 集合型功能入口卡片可作为一种承载多入口的容器。淘宝 App 的功能集合页，入口样式差异较大，通过卡片组合打包作区分，使页面更有秩序感。

03 从情景映射上考量情景映射是指在界面中模拟出与物理世界相似元素的设计方式，其元素可以是物品样式、场景、氛围、行为习惯等，其中一些映射可以通过卡片本身设计或组合效果实现。

3.1 模拟物理行为卡片的拟物属性，映射现实世界中切换、分发、选择等动作。如网易云音乐 App 的切换歌曲，即模拟一种物件，也模拟了一种物理行为。

3.2 模拟物件卡片是映射现实世界的方形物件，如果希望用户将内容与现实物件产生关联，提升代入感，可采用该设计。

图片来源：(从左至右) 天猫会员中心 & 口碑 & 云闪付

何时不使用卡片式设计如果界面需要展示一些关联性较强、形式相对统一的内容，就不太适合采用卡片式设计。

01 长文咨询类页资讯类应用，用户多以浏览为主，不会过多操作。列表展示能让用户浏览时，视觉动线始终聚焦标题等核心信息，不会被过多的留白所中断。

图片来源：网易新闻 App

02 消息联系人等页消息列表页、联系人页更适合用列表，这类界面每个模块的信息布局相对统一，无需划分区域。使用卡片不仅浪费空间，而且降低查找效率。

图片来源：（左）淘宝消息 （右）微博消息

03 图片陈列页典型的图片陈列页如相册，因图片自带卡片属性，区块感强，无需再刻意设计成卡片样式。

图片来源：VSCO

04 简单入口引导页类似设置页，聚合了不同功能入口，在信息权重和样式上无很强的优先级区分，建议采用列表。

图片来源：（左）支付宝 （右）口碑

结语希望大家已经明白为什么卡片式设计越来越流行，以及基本掌握如何设计及运用卡片的技巧。不同的卡片设计带来不一样的表现效果，请根据实际情况选择是否使用。不管如何，请以用户为中心，不要因为卡片式设计流行，担心被冠以 “落伍” 而设计！

参考—Material Design 中 Cards 设计指导的章节：https://www.material.io/components/cards/