社交媒体图片的版式原则
如何排版社交帖子，让人先读到该读的内容：层级、网格、留白与强调，以四个真实模板按原始尺寸演示。
我们的建议：要排好一条社交帖子，让人先读到该读的内容，就让一个元素的分量明显大于其他所有元素，然后把其余部分对齐、留出间距，让它们衬托这个元素。归结起来是四个原则：层级、网格、留白和强调。
下面的原则是我们针对社交图片的建议，建立在界面研究的基础上。凡是数字或定义来自某个来源，都附有链接。我们用 Chikaboom 引擎以 AURORA 演示品牌渲染的模板，按原始尺寸来说明每个原则。
“先读到该读的内容”到底是什么意思？
Nielsen Norman Group 把视觉层级定义为这样安排元素：让视线按预期的重要程度依次接收它们。在社交帖子上，这个顺序由你在观看者之前定好。人们是在滑动途中遇到你的图片的，所以他们视线落到的第一个元素，决定了他们是否会停下来。
NN/g 的 F 形阅读模式研究发现，网页读者会先扫过顶部一条横线，再扫过较短的第二条横线，然后沿左边向下，而且很少逐字阅读。该研究针对的是文字较多的网页，不是信息流里的图片。我们的假设（该研究并未在图片上检验过）是，同样的习惯会延续到信息流图片上：把要点放在文字块的左上角，并把重要的词放在最前面。
使用同一篇 NN/g 文章里的眯眼测试：把你的设计模糊处理，或者离屏幕远一点，看看还有什么依然突出。如果不是你想要的内容，就改版式，而不是改文案。
原则一：层级在单条帖子里如何起作用？
按我们对 NN/g 文章的总结，层级来自大小、对比和分组。NN/g 的建议是字号变化不超过三种，超大元素不超过两个。我们对 1080 px 帖子的建议是三个层级：标题、一行辅助文字和一个小标签。
在这个瑞士风格的版式里，标题是唯一的大元素。标签和元数据在尺寸上远远小于它，所以眯眼测试只剩下一团：标题。小元素并不是来争夺注意力的，它们回答的是“这是什么”和“要花多长时间”。
原则二：为什么单张图片也要用网格？
网格是一个重复的单位，决定了元素可以放在哪里。Material Design 3 的间距基于 8dp 的刻度，并区分内边距（元素内部）、间隔（元素之间）和外边距（元素外部）。把这个思路用到社交帖子上是我们的建议，而不是平台规则：选一个单位，比如在 1080 宽度下取 24 或 40 px，只使用它的倍数。
杂志式版式展示了这样做的回报。分类标签、标题和署名共用同一条左边线，它们之间的间隔也是重复的。没有任何东西看起来是凭感觉摆放的，所以视线顺着这一摞往下走，不需要来回寻找。同一条左边线也契合上面提到的从左上角开始浏览的习惯。
原则三：留白多少才够？
NN/g 把留白描述为平衡设计、让内容更容易浏览和阅读的一种方式，并建议把一致的间距系统与邻近原则结合使用。它的邻近原则文章补充说，彼此靠近的元素会被视为一组，而且这种效果可以压过颜色或形状的相似性。
对帖子来说，由此得到我们的一条简单规则：组内的间距应明显小于组与组之间的间距。一个数据和它的标签属于一起，所以要让它们靠近。把它们与脚注分开。
数据卡片把数字和它的标签放在同一组，周围留出充足的空间。脚注很小，并且与它们分开。这张卡片上的数字是版式示意，不是实测结果。
原则四：如何强调一件事而不显得吵闹？
在我们的框架里，强调就是把层级推到极致：一个元素，一种处理方式。NN/g 还建议把配色限制在几种颜色内，并且不要只依赖颜色，这对无障碍很重要。对比度数值请见社交媒体色彩对比度与 WCAG。
这张用户评价刻意做得很响亮，但它仍然只有一个响亮的元素。风格是关于分量和边缘的选择，而它下面的层级和安静的瑞士版式是一样的：一个焦点元素，加一行小号的辅助文字。关于能承载强调的字体选择，请见社交媒体帖子的字体排印。
版式快速检查清单是什么？
| 检查项 | 我们的经验法则 | 原则 |
|---|---|---|
| 眯眼测试 | 模糊后只剩一个元素 | 层级 |
| 文字字号 | 两到三种，不再多 | 层级 |
| 左边线 | 标签、标题和署名共用 | 网格 |
| 间距单位 | 一个基础单位，只用它的倍数 | 网格 |
| 组内外间隔 | 组内小于组间 | 留白 |
| 边缘 | 四边都保留边距 | 留白 |
| 强调 | 一种处理方式，只用一次 | 强调 |
| 对比度 | 符合 WCAG，不只靠颜色 | 强调 |
在定稿之前，请在社交媒体图片尺寸指南里核对你的画布尺寸和安全区。根据我们的经验，平台会在帖子上叠加它们自己的界面，所以在 1080 x 1080 下看起来没问题的版式，仍可能在边缘丢掉标签。对于 Stories 和 Reels，请见安全区详解，其中引用了 Meta 的广告安全区。
如何让整个团队的版式保持一致？
版式决定最容易靠锁定在模板里来保持，而不是靠记忆。在 Chikaboom 中，设计师一次性搭好版式，团队只需填写文字。字号、间距和字体保持固定，文字会在框内缩小而不是溢出，所以较长的标题也不会破坏层级。你可以在在线演示中试试。
在这个主题下接下来读什么？
本页是版式主题的中心页。同系列的指南涵盖字体排印、色彩与对比度和图片尺寸，它们与版式一起构成一条帖子的视觉系统。想为整个团队锁定这些决定，请阅读小团队的品牌规范；针对特定平台的应用，请见 LinkedIn 帖子设计。
常见问题
如何决定人们在社交图片上先读什么？
选定一件事，让它成为最大、对比度最高的元素。NN/g 把视觉层级定义为按预期的重要程度引导视线，我们的建议是发布前先做一次眯眼测试。
一条帖子应该用几种字号？
NN/g 建议字号变化不超过三种，超大元素最多两个。我们对社交帖子的建议是两到三种：标题、一行辅助文字和一个小标签。
留白在社交帖子里是浪费空间吗？
不是。NN/g 把留白描述为一种让内容更容易浏览和阅读的手段。根据我们的经验，留有空边的帖子比铺满边缘的读起来更快，因为视线有地方可以歇脚。
单张图片也需要网格吗？
我们的建议是需要，用一个简单的就行。Material Design 的间距基于 8dp 的刻度；像这样重复使用的单位，可以让整个信息流的边距和间隔保持一致。