悬浮卡片主要用于功能集合或者页面内容扩展场景，目的是提升页面的操作效率。

例如苹果iOS 14系统里的来电小窗，采用的悬浮卡片设计，当来电或唤醒时，不再占用全屏幕的使用，提升了页面的使用效率。

3、通栏卡片

三 为什么要用卡片式设计

1、有利于信息分层和整合

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

需要注意的一点是作为独立的卡片单元往往要有足够的空间留白，可以添加一点投影增加层次感，能使阅读上更加舒适。

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

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

2、整齐的栅格化排版，适配性强

将文字信息、图像归类整合到一个容器里，分布成不同的卡片模块。内容通过卡片整合梳理更易理解呈现给用户。不仅有利于栅格化的排版，还对于后期多平台的响应式设计提供很大的优势，卡片可以更方便地扩展收缩内容，并且在保证跨平台设备之间的统一性及其美感时更为便捷。

3、提高空间利用率

使用传统列表时，需要保持垂直向下滚动才能获取更多内容，并且显示的内容有限。使用卡片式设计，可以通过XYZ三个方向的进行内容扩展和叠加，提升了空间利用率，即使在垂直内容流中，也可以通过水平滑动来显示更多内容。

比如脉脉首页纵向的信息流里增加了横向的滑动内容，Y方向主要为“点击”操作实现卡片内容的扩展，避免与纵向的滑动手势操作产生冲突。

Z轴可以叠加无数的的卡片内容，实际上是在暗示用户去操作，发现其感兴趣的内容，扩展性更强。就好比实际生活中，我们拿到一叠名片去寻找自己需要的那几张。

4、能够提升界面的可操作性

5、能够提升视觉体验

卡片设计会影响到页面整体的信息层级以及视觉动线变化。卡片式设计通常很依赖视觉元素，很强的视觉元素正是卡片式设计的一种优势。

有研究确认图片能够提升网站和APP的设计质量，因为图片可以快速有效的吸引用户的注意力。

比如我们熟知的Dribble和Behance，面向设计师等创意类作品的人群，提供作品在线服务，供网友查看的交流类网站。要展示这类内容，基于卡片的设计是再合适不过的选择了。

卡片设计的基础规则，相信大家多多少少都有所了解，不同平台的规范差异性不会有太大本质上的区别，更多的差异主要在处理技巧和方式上，这里分享下卡片式设计的方法。

1、圆角的规则

圆角的设定实际上没有太多的原则问题，只要符合整体的风格调性即可。当然不同的圆角也能表达出不同的质感，大圆角表达柔和、小圆角表达硬朗。

以卡片的圆角作为基础的参考值往内推算整体的圆角使用规范，卡片与卡内的元素形成合理的比例规则。

2、投影深度

投影的视觉效果会直接影响着整体卡片的质感，太深太大的投影会显得整体卡片过于厚重，太浅太小的投影则显得过度生硬，因此合理的数值比例则可以让卡片看起来自然有质感。给大家分享一组数值规律，我们可以按1:2或1:3，例如Y轴偏移10px，模糊度则设定为20或30px，这样成比例的数值出来的效果会较为自然，如下图：

3、边距的设定

在设定卡片式的边距时可以适当应用删格系统，删格系统解决了一些基础的板式问题，有助于提升设计的规范性，让设计更加有迹可循。让边距与内容形成固定的关系，这样可以帮助整体的卡片设计更加具有细节和规则。

4、标题文字大小和重量

标题主要用于简短的说明每个模块的内容，并且在长页面浏览中起到引导和定位的作用。但当字体较小时，用户会倾向于“细读”；而字体较大时，用户更倾向于“跳读”。如果字体粗细使用错误，会影响可用性和美观性。

标题与正文字号大小差异建议在6-10px，这样可以更好的拉开差异，让标题更具有标题感。

卡片式设计会给人一种视觉上的享受，也能对于界面具有层次感。但不能为了卡片式设计而卡片式设计，要能更好的应用到界面场景中。

1、避免过多层级

从整体来说，卡片式的设计本身就是增加了基础背景的层级表现，为了保证内容展示和浏览体验，不建议在卡片上再二次叠加块状式设计。特别是单个卡片中，避免多个卡片并排展示，造成内容展示过于碎片化，增加用户的浏览负担。

如果在项目中遇到内容层级需要多层级的表现，我们可以通过利用拉通分割线和利用浅色背景底色，这两种方法来区分内容层级。

由于卡片必须要增加上下间距形成独立空间，会导致页面的长度增加。因此对于内容结构相似的模块，如非必须，不要盲目采用卡片形式。例如通讯录，微信朋友圈、商品搜索列表页面等，采用了简单的分割线进行内容区分。既避免了页面空间的浪费，又提高了用户的浏览效率。

3、信息要简单

当你想到卡片式设计时，简洁一定是其精髓。“每张卡片只承载一个信息”你可以把卡片设计囊括了各种元素，但每张卡片只能包含一个信息或者内容，这可以让用户选择自己想要的内容去阅读或者分享 。

4. 把握好界面的分区，避免过于拥挤的排版

卡片设计具有独特的视觉空间感，但卡片与卡片之间也会有分隔，因此在设计时更应该对内容进行归纳，避免产生过多的小块卡片而导致排版过于拥挤、凌乱或者内容不够宽度展现的情况。

六  总结