如何设计分析?推荐设计分析的4大思考

卡片是APP常见的设计形式，它既有好处也有弊端，因此需要根据场景和内容确定展现形式。本文从四个方面对卡片设计展开分析，推荐给对卡片设计感兴趣的童鞋阅读。

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

一、常见的卡片形式

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

1. 边距卡片

边距卡片在页面设计中应用更加广泛，通常采用带圆角形式，利用阴影以及四周的边距形成页面留白，从而产生更加强烈的“存在感”，同时增加了页面的层次感，让页面更加灵动。

2. 悬浮卡片

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

3. 通栏卡片

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

二、卡片设计价值分析

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

1. 建立更加清晰的页面结构

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

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

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

2. 重点信息突出展示

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

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

3. 多层嵌套提高空间利用率

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

由于移动端页面设计主要为纵向的信息流，通常卡片主要为X方向的交互操作，例如左右滑动等。Y方向主要为