关于卡片设计的分析与思考

子牧先生 2023-07-24 04:50:21

卡片是移动端产品常见的设计形式，广泛用在各类产品和场景中。卡片自带分割属性，让它成为了页面布局中的利器。但是卡片也并不是万能的，分割带来的间距影响了阅读场景的沉浸式体验，同时也会增加整个页面的长度，因此需要根据场景和内容确定展现形式。

一、常见的卡片形式

在移动端产品中，承载着图片、文字等内容的矩形区块，就是我们所说的卡片。根据展现形式，卡片基本可以分为3大类。

悬浮卡片主要用于功能集合或者页面内容扩展场景，目的是提升页面的操作效率。例如微信聊天界面下拉出现的小程序卡片，高德地图首页卡片,或者iOS系统随时可以调用的系统控制卡片和消息卡片。

通栏卡片只保留上下边距，通常不会增加阴影，边框线等样式。主要用于页面内容分组，提升内容的可识别性。

卡片可以通过边框线、阴影、背景色等特征形成独立内容结构，通过边距与其他内容区分，从而形成其独有的设计优势。主要包括以下几个方面：

相较于无边框设计或者分割线布局，卡片可以进行信息归纳组合，划分出更加清晰的组织结构，实现复杂内容的简化处理。

例如“我的淘宝”页面，在老版本中采用了通栏卡片，整个页面信息结构已经比较清晰了。但是随着页面内容的增多，在新版本中页面内容全部采用了边距卡片的形式，并且融合了横版卡片和竖版卡片两种方式，增强了内容的独立性，层级更加清晰。

同时边距卡片形式有利于场景的拓展，例如“我的淘宝”频道在618期间，插入了618活动楼层，在视觉表现上毫无违和感。

卡片设计最大的优势就是通过边界塑造出来的整体性。一方面可以让用户感知到内容的归属层级，另一方面，可以通过卡片背景色，加强用户对内容的感知。

例如网易严选、天猫会员店的开卡福利，都采用了更加鲜亮的背景色，相对其他模块更加突出，能够快速抓住用户注意力。

卡片作为一个独立的信息集合容器，具有XYZ三个方向的内容扩展和叠加特性，可以提高空间的利用率。

由于移动端页面设计主要为纵向的信息流，通常卡片主要为X方向的交互操作，例如左右滑动等。Y方向主要为“点击”操作实现卡片内容的扩展，避免与纵向的滑动手势操作产生冲突。

Z轴方向主要是内容叠加展示，用户只能看到一个卡片内容，完成一个卡片操作后，才能查看下方的卡片内容。

例如知乎中“回答问题”中的卡片设计。用户除了按钮操作，可以左右滑动快速忽略卡片内容。交互方式简单有趣，可以带给用户比较强烈的挑选快感，不过卡片内容挑选是一次性的，如果用户选择忽略或者放弃卡片后，内容是无法再次查看的。

因此理论上讲，Z轴的交互形式可以叠加无数的的卡片内容，扩展性更强。但是不可逆的操作方式，需要考虑到对产品目标的影响。

卡片作为独立的模块，可以融入各种交互方式，为用户提供更加快捷的操作。

例如今日头条中的信息卡片，集合了转发、评论、点赞等操作功能。此外卡片本身也可以增加交互操作，例如微信中卡片左滑和长按，可以激活级联操作选项。

卡片内容也支持多种展现方式，能够主动为用户呈现更多的信息，引导用户关注。例如商品横向和纵向的自动滚动、放大展示等。

卡片设计会影响到页面整体的信息层级以及视觉动线变化。

例如通过支付宝首页改版前后对比，我们可以看到改版后，金刚区去除了白色背景，提升了icon在整个页面中的视觉层级，从而强化了用户对新增功能的感知。

原来的通栏卡片变成了边距卡片，整个页面层级更加清晰，用户对界面内容定位更加准确，减轻了用户在浏览过程中的认知负担。

在实际设计工作中，我们如何判断是否要采用卡片形式，以及采用何种卡片形式呢？

除了遵守系统设计规范外，最基本的原则就是“形式跟随内容”。

卡片受到形式、尺寸所限，通常只是作为页面组成元素，承载功能入口的作用。在不同的场景中，卡片的表现形式是不一样的，需要依据内容和目标定位来确定表现形式。

我们可以大概总结下主要的形式：

列表式卡片列表式卡片通常用在设置页面或者“我的”页面，主要采用通栏卡片形式。内容大多采用“icon+功能名称“的列表方式。主要目的是引导用户定位功能入口，辅助展示内容状态即可，不需要承载更多的信息。
九宫格卡片九宫格卡片同样采用“icon+功能名称”的形式，通常用在功能数量不多的场景，相比较列表式卡片，信息可读性更强，更容易识别。