Date 2026-01-25 22:49:03
我总结了一种非常实用易掌握的排版方法,给它起了一个通俗易懂的名字,叫卡片式排版法!

那么,什么是卡片式排版法呢?
它很容易理解。在页面上画几个色块来承载页面中不同的内容,色块的大小取决于内容的数量。
大概就是这种形式:

让我们来看看几个案例,让你更容易理解什么是卡片排版法。
其实这种排版方法挺常见的,比如网页设计:

移动浏览器界面设计:

接口设计:手机系统:

就连前段时间苹果发布会上也多次使用这种排版方法:


然后,魅族向过去学习:

可见这种方法的经典!
对于不同类型的页面,卡式排版有不同的功能,一般分为两类:
对于内容较多的页面,使用这种方法可以很好地规范页面中凌乱的信息,使页面看起来非常整洁。
例如下面的页面 PPT,图表有多种风格,还有一些关键数据:

虽然排版整齐,通过距离有意识地划分不同的信息区域,但看起来还是很乱。
让我们把页面的中心放在卡片中,然后看看效果:

考虑到原稿与大数据有关,我改变了深色背景的另一个版本:

这两个版本比最原稿整洁多了,对吧?
2. 信息量较少的页面
对于页面内容较少的页面,卡片排版可以使页面更加饱满,不会使页面显得单调。
同样,我们来看看一个案例:

因为内容太少,页面两侧看起来很空,对吗?
此时,我们可以考虑使用卡片布局,使页面更加丰富。我用色块画了一个大致的布局:

然后,在内容添加的布局中:

效果看起来不错!
最后,为了营造空间感,我们还可以对卡片进行三维旋转,并添加倒影:

1. 卡片之间的间距相等
这是使用这种排版方法最基本的要求。

让我们看一个例子:

间距相等,不仅要求卡片的横向间距相等,还要与横向间距保持一致:

例如,我们刚才修改了一个案例:

只有这样才能保证页面的视觉美。
2. 卡片中应有合理的空白空间
也许有些朋友不明白这是什么意思,简单地说,内部信息与卡片边界保持一定的距离。

为了让你更清楚地知道这一点,让我们再看一张对比图:

显然,左边的卡片看起来很拥挤,感觉很沮丧,没有呼吸感,阅读也很障碍。右边的卡片给人一种非常舒适的感觉。
1. 在卡片底部叠加色块或图片
通常,如果你只是简单地把内容放在卡片中,页面将不可避免地有点单调。通过叠加色块或图片,页面可以更具视觉层次。

比如下面两页 PPT,通过在卡片底部添加图片来增强页面的层次感:


很明显,让我们来看看一个实际的案例,比如下面的幻灯片:

首先,我们可以用卡片在页面上划分 3 将相应的颜色添加到图表中。

然后,为了使页面更有层次感,我们可以在卡片底部添加一层形状:

或与页面信息相关的图片:

层次感马上就出来了,对吧?
此外,为了使层次感更强,我们还可以给卡片添加阴影,就像这样:

2. 散落在卡片之间
先看一张图表对比:

显然,错落有致的页面会显得更有创意,对吧?
当然,除了创意之外,卡片的分散放置也可以合理利用页面上的空间。大卡片上的内容多,小卡片上的内容少。

例如,苹果和魅族会议 PPT,巧妙地利用这一点:


让我们来看看一个具体的案例,这是一页会议 VI 显示,由于图片大小不统一,页面摆放非常混乱。

对于这样的页面,我们可以画出更多的图片大小,首先画出卡片的排版风格:

然后,将图片填充到相应的卡片中:

到目前为止,页面已经整洁多了!因为页面上的图片本身并不出彩,为了让页面看起来更有质感,我又调整了一个深色背景的版本:

最后,再加上动画效果:

看上去还不错,对吧?
好了,以上就是关于卡片式排版法的全部内容!你掌握了吗?
更多PPT设计技巧:
好久不见,我是汤帅。
阅读文章 >欢迎关注作者微信微信官方账号:「PPT进化论」
