WhatsApp→
系列 · 轮播图排版 · 2026年5月19日

Instagram 和 TikTok 轮播图排版 2026:5 条具体规则

A
Andrei Toader i-vory Studio 创始人 · ·
要点

为什么排版比什么都出力

2026 年的 TikTok 和 Instagram,划走还是读下去,0.8 秒内定完。眼睛先读页面的形状,再读词。排版在那一刻没喊出“值得停下”,那些词就永远没人读。

下面 5 条规则,出自 i-vory 在 2025 和 2026 年做的 50 多组轮播图。一部分来自留存稳在 60% 以上——TikTok 进 For You 分发的门槛——的组,一部分来自掉到 40% 以下的组。

规则 1:第 1 页层级清楚

1
每页最多三个视觉层级

层级的意思是,读者知道先看哪、再看哪、最后看哪。每个词都一样重,眼睛没处落,拇指继续划。

第 1 页:一个大标题(40-60px),一个中等副标题(24-32px),需要的话一个小标签(14-18px)。静态页超过 3 层,免谈。

UrbanCat 第 1 页就是这么排的:56px 大标题“如果它们会说话,一定跟你抬杠”。26px 副标题“一份简短的肢体语言指南”。页面上再无其他。

排版层级清楚的示例:UrbanCat 16.4 万浏览轮播图第 1 页,Instagram 和 TikTok 排版指南

规则 2:正文对比度高于 7:1

2
18px 以上的文字,对比度达 WCAG AAA 的 7:1 以上

人们读轮播图的光线是不由选的:电车上、大街上、晚上 11 点的被窝里。低于 4.5:1——WCAG AA 的底线——阳光一照屏幕,字就没了。

i-vory 的标准:#FFF 白字配 #0a0a14 深底,或 #1a1a2e 深字配 #fff4d9 淡黄底。两种都超过 12:1。

快速测试:截个图,用滤镜转成黑白。字还清清楚楚,对比度就站得住。字糊进背景里,就站不住。

规则 3:超过一行的文字,行高 1.3

3
行距决定留存

行高就是“读着顺”和“第二行就放弃”之间的差距。Photoshop 和 Figma 默认 1.0 或 1.1。放在给人读的页面上,太挤。

我们 2026 年在轮播图上的设置:正文、副标题和段落,行高 1.3。超过 60px 的大字可以降到 1.15,不会散。

原因:眼睛在词与词之间要跳(眼跳),得给它地方。1.0 的时候这些跳步挤在一起,眼睛累,留存掉。

规则 4:每页最多 12 个词

4
12 个词以内是页面。超过 12 个词是一堵字墙。

在 TikTok 和 Instagram 上没人“读”,都是扫。一页只有 1 到 2 秒;2 秒里一个人能吃进 8 到 12 个词,而且是真懂。

整组留存都在 60% 以上的轮播图,平均每页 7.3 个词(i-vory 数据,2026 年一季度,47 组轮播图)。压在 12 以内,这条规矩自动成立。

一个例外:短问题加短答案的 FAQ 页可以到 15 到 18 个词,只要眼睛能把它当成两块来读。

规则 5:整个系列只用 2-3 个色阶

5
连续性是把人带到第 5、6、7 页的东西

大多数在第 4、5 页上掉崖的轮播图,配色都在乱跳。第 1 页青色,第 2 页粉色,第 3 页黄色,第 4 页紫色。每次换色都像一次重启。读者每页都从头开始,从头开始最累。

i-vory 的标准:整个系列2 个主色加 1 个强调色。UrbanCat 16.4 万那组用深灰做底、奶油色做字、橙色标重点。三个颜色,七页。

连续性让一组系列读起来像一本有章节的书,而不是一堆散卡。章节会被读完。散卡会被划走。

2026 年靠得住的字体搭配

三组搭配,我们在 i-vory 的作品集里测过,主要在罗马尼亚受众上,但这里没有一条跟语言绑定:

搭配 1(经典高级):标题用衬线 Fraunces,正文用无衬线 Inter。全部静态文字,零动画。适合生活方式、时尚、室内设计。

搭配 2(现代、响亮):标题用重磅 Geist 无衬线,正文用常规 Geist。唯一的差别是字重:800 对 400。适合科技、商业、创始人内容。

搭配 3(温暖消费品):全线 Plus Jakarta Sans,各种字重。一个字族,只靠字号和字重区分。适合美食、宠物、家庭内容。

一组轮播图里,字族永远不超过 2 个。第三个出现就像噪音,留存往下掉。

想让我们看看你最近 10 组轮播图的排版吗?

免费 30 分钟审计。把这 5 条规则套在你自己的页面上,逐条说出要改什么。

在 WhatsApp 上联系我们 在 Calendly 上预约

3 条结论

  1. 排版决定留存。在第 1 页,头 0.8 秒。它停不住滑动的手指,算法就把整组埋了。
  2. 5 条具体规则:层级清楚、对比度 7:1、行高 1.3、每页最多 12 个词、整个系列 2-3 个色阶。
  3. UrbanCat 16.4 万那组五条全占。那不是运气。怎么用轮播图拿到 16.4 万 TikTok 自然浏览。

想要能跑出去的轮播图?我们在布加勒斯特这样做 TikTok 自然流量。

常见问题

2026 年你们的轮播图用哪些排版规则?

第 1 页层级清楚,正文对比度高于 7:1,行高 1.3,每页最多 12 个词,每组配色 2-3 个颜色。

一页轮播图放多少个词?

最多 12 个。再多的文字在手机上读着费劲,人就放弃了。