EN BM 中文

VibeFlow

把文字告白变成读得清楚的 Instagram 图片

Instagram 是为图片而设的,告白却是文字。本文说明怎样设计一个在手机上依然清晰易读的图片模板——尺寸、字体大小、对比度、长篇帖子、多语言文字和替代文字。

VibeFlow 团队 · 发布于 · 阅读约 8 分钟

其他语言: English · Bahasa Melayu · 繁體中文

简短回答。 使用 1080 × 1080 px 的正方形图片(或 1080 × 1350 px 的直式图片),正文字体约 44 到 52 px,四边至少留 80 px 的边距,对比度达到 4.5 比 1 或更高。长篇告白要拆成轮播图,并把全文放进替代文字和说明文字里。

Facebook 上的告白专页,发一段文字就完事了。Instagram 不行:每一篇帖子都需要图片或影片。于是告白专页把文字变成图片——而大多数做得很糟。字太小,灰色的字压在渐层色上,最后三行消失在画面边缘底下,结果在几乎所有人用来看它的那个设备上,根本读不了。

本文谈的是让文字图片清晰易读的各项决定。不需要设计背景,也不依赖任何特定工具。

选定形状

Instagram 的动态消息支持几种图片长宽比。对文字帖来说,重要的有两种:

形状 常见尺寸 适合
正方形,1:1 1080 × 1080 px 短帖;沿用已久的预设做法,也是跨平台发布最稳妥的选择
直式,4:5 1080 × 1350 px 较长的帖子;在动态消息里占据更多画面

还有两点。第一,个人档案的格状排列显示的是每篇帖子裁切后的预览,而 Instagram 曾经多次更改这个预览的形状。把所有重要的东西——尤其是文字的头几行和帖子编号——放在图片正中央的范围内,以免被格状裁切切到。第二,选定一种形状就一直用下去。形状交替出现的版面看起来杂乱,而且你的模板得设计两次。

Instagram 不时会更改它支持的尺寸。在制作一个打算用上好几年的模板之前,先查一查它的说明页面。

不论选哪种形状,都以 1080 像素的宽度输出。更大的文件会被缩小。更小的会被放大,而放大后的文字边缘会变得模糊。

字体大小要照手机来定,而不是照你的电脑屏幕

这是毁掉大多数模板的错误。在笔记本电脑上,一张 1080 像素的图片显示得很大,28 像素的字看起来十分舒服。在手机上,同一张图片显示出来大约只有手掌宽,而同样的字就成了药盒上的小字。

有两个办法可以把它做对。

经验法则。 在宽 1080 像素的图片上,正文字体不应该小于大约 40 像素,44 到 52 像素会比较舒服。小于大约 32 像素的字,对许多读者来说会很吃力。

实测。 把图片发到自己的手机上,伸直手臂拿着读。如果你发现自己把手机拉近,字就太小了。每一个模板在采用之前,都要这样测试。

字大一点,一张图能放的字就少一点。接受这一点。一篇分成两张图却读得清楚的帖子,胜过挤在一张图里却读不了的帖子。

给文字留空间

  • 边距。 在 1080 像素的图片上,每一边至少留出 80 像素的空白。贴到边缘的文字显得拥挤,而且有一部分会被界面元素遮住,或在裁切时被切掉。
  • 行长。 每行大约 25 到 40 个字符。行太长,眼睛就难以找到下一行的开头。
  • 行距。 设为字体大小的 1.3 到 1.5 倍。挤在一起的行读起来很累。
  • 对齐。 超过两三行的内容,靠左对齐比置中好读。置中适合单独一句短句。
  • 段落。 保留投稿者的分段。密密麻麻的一整块文字,远比三段短文让人望而生畏。

对比度

文字必须和背后的东西清楚地区分开来。网络通用的无障碍标准 WCAG 要求一般文字与背景之间的对比度至少达到 4.5 比 1,网上有免费的检查工具,可以根据两个颜色值算出这个比例。

实际上:

  • 浅色素面背景配深色字,或深色背景配浅色字,永远行得通。 近乎黑色的字配米白色背景,是最易读的组合。
  • 渐层色有风险。 在渐层的深色一端读得清楚的字,到了浅色一端可能就看不见了。如果要用渐层,要检查对比最弱的位置,或在文字后面垫一块实色或半透明的底板。
  • 用照片当背景几乎从来行不通,除非加上很重的遮罩。文字背后的画面太花,两者都更难看清。
  • 文字不要用中间调的灰色和粉彩色。 它们在校准过的显示器上显得雅致,到了阳光下的手机上就消失了。
  • 不要只靠颜色来区分。 绿底红字,色盲的读者可能看不见。

选一款涵盖你所用语言的字体

花哨的标题字体也许很有特色,但告白是正文,而正文需要为阅读而设计的字体:字形清楚、间距疏朗、粗细适中。

对马来西亚的专页来说,还有一项很容易忽略的要求。你的投稿者用好几种文字书写。只有拉丁字母的字体,会把中文、淡米尔文或爪夷文显示成空格子,或在句子中间悄悄换成另一款毫不相干的后备字体。在决定字体之前:

  • 用一篇真实的多语言混合投稿来测试;
  • 确认中文、淡米尔文和阿拉伯字母的文字都能显示,而且粗细和大小一致;
  • 确认表情符号显示得出来,没有被切掉;
  • 至于爪夷文和阿拉伯文,要确认文字由右至左排列,字母也正确连写——有些图片生成工具会在这里出错。

那些为多种文字提供配套设计的大型开源字体家族,正是为这种情况而做的。

长篇投稿

一篇 400 字的告白,无法以读得清楚的字体大小放进一张图片。可行的做法,按优先顺序如下。

轮播图。 把文字分成几张图。在段落之间分页,不要在句子中间切开;为每张图编号(“2/4”),让读者知道后面还有;第一张图要有一个有力的开头,因为动态消息里只显示这一张。

图上放节录,全文放在说明文字里。 把开头几行放在图片上,整篇投稿放进说明文字。这适合非常长的帖子,好处是说明文字是真正的文字——可以搜索、可以翻译,屏幕阅读器也读得到。

缩小字体。 只能在限度之内。定一个最小字体,绝不低于它。一旦文字在这个最小字体下放不进去,就改用轮播图。

不要为了放得下而删减投稿,却不标明你这样做了。删掉别人的话,会改变原来的意思。

每一张图上该有什么

  • 帖子编号,大到读得清楚,每次都放在同一个位置。读者就是靠它来指称帖子的。
  • 专页名称或账号,小小的,这样即使截图被转到别处,也看得出出处。
  • 其他一概不要。 不要二维码,不要贴图,不要“追踪我们看更多”,不要花里花哨的装饰。投稿本身就是内容。

一致比巧思重要。读者应该在读到任何一个字之前,就在动态消息里认出你的帖子。

填写替代文字,并善用说明文字

使用屏幕阅读器的人看不到文字图片,除非你提供描述。Instagram 让你在发布时,到进阶设定或无障碍设定里为图片加上替代文字,也可以事后编辑帖子来补上。告白图片最合适的替代文字,就是告白的原文。

把全文同时放进说明文字,对这些读者和其他人都有帮助:它可以由应用程式翻译,可以搜索,也可以复制。这不费你任何功夫,因为文字本来就在你手上。

许多排程和发布工具,可以在流程中一并设定替代文字。如果你的图片是自动生成的,要确保整个流程会用同一份原文填入替代文字,而不是让它空着。

发布之前先检查

文字图片出的问题,只要看一眼就一目了然;不看,就什么都发现不了。每一篇帖子,或至少每次更改模板时:

  • 在手机上、伸直手臂看一看;
  • 确认底部没有东西被切掉——生成的图片最常见的毛病就是文字溢出;
  • 确认每个字符都显示出来了,没有空格子;
  • 单独看一看第一张图,因为大多数人只会看到这一张;
  • 看一看它在个人档案格状排列里的样子。

如果你的图片是由投稿自动生成的,要用极端的情况来测试生成工具:只有三个字的投稿、600 字的投稿、完全没有分段的投稿、整篇都是表情符号的投稿,以及混用三种文字的投稿。

不该出现的东西,别带进图里

图片是根据投稿生成的,所以任何本该从文字里拿掉的东西——名字、房号、电话号码——都会出现在图片里、说明文字里和替代文字里。先审核文字,再用通过审核的版本生成图片。如果帖子之后在一个平台上被编辑或移除,另一个平台也要照做。Facebook 的帖子撤下时,Instagram 上的那张图很容易被忘记。见《如何处理下架要求》。

常见问题

Instagram 的告白图片应该用什么尺寸?

短帖和跨平台发布用 1080 × 1080 px 的正方形,较长的帖子用 1080 × 1350 px 的直式。以 1080 像素的宽度输出,选定一种形状就一直用下去,并把帖子编号和头几行放在图片正中央的范围内,以免被个人档案的格状裁切切到。

Instagram 文字帖用多大的字才读得清楚?

在宽 1080 像素的图片上,正文字体不应该小于大约 40 px,44 到 52 px 会比较舒服。小于大约 32 px 的字,对许多读者来说会很吃力。测试的方法是把图片发到自己的手机上,伸直手臂拿着读。

长篇告白怎样发到 Instagram?

拆成轮播图,在段落之间分页,并为每张图编号。非常长的帖子,可以把开头几行放在图片上,整篇投稿放进说明文字。定一个最小字体并绝不低于它,也不要在没有标明的情况下删减投稿。

图片上的文字用什么颜色最好?

浅色素面背景配深色字,或深色背景配浅色字。对比度要至少达到 4.5 比 1。渐层色有风险,因为文字可能在浅色一端消失;照片需要加上很重的遮罩;中间调的灰色和粉彩色,到了阳光下的手机上就看不见了。

告白图片需要替代文字吗?

需要。屏幕阅读器读不到文字图片,除非你提供描述,而告白图片最合适的替代文字,就是告白的原文。把全文同时放进说明文字,还能让它可以搜索、翻译,也方便复制。

一份可供起步的模板规格

项目 起始数值
画布 1080 × 1080 px(或 1080 × 1350 px)
边距 四边各 90 px
正文字体 46 px,一般粗细;最小 38 px
行距 1.4
对齐 靠左
文字颜色/背景 米白底配近黑色字,或深色实底配近白色字;对比度 4.5:1 或更高
帖子编号 左上角,34 px,粗体
专页账号 右下角,26 px
文字溢出时 在段落之间拆成轮播图;每张图标上“n/总数”
替代文字 投稿全文
说明文字 帖子编号、全文,不含任何在审核时被拿掉的内容

按你专页的风格调整,然后把成品发到手机上,伸直手臂读一读。这个测试能解决的设计争论,比再多的讨论都多。

延伸阅读

  • 告白专页应该多久发一次帖?
    没有放诸四海皆准的最佳时间,也没有神奇数字。本文提供一套实用方法,帮你找出自己专页的发帖节奏——投稿量的算术、帖子的间隔、善用自己的洞察数据,以及投稿多到发不完时该怎么办。
  • 审核图片和影片——发布之前要检查什么
    一份检查清单,针对投稿里出现的照片、截图和短片——旁人、聊天截图、证件、位置线索、未成年人和经过加工的媒体。
  • 管理告白帖子的留言
    一篇仔细抹去身份线索的帖子,可能被一则留言毁掉。本文说明怎样不让留言区点名、Facebook 和 Instagram 提供了哪些管理工具、什么时候该关闭留言,以及为什么管理员要为留言负责。
  • AI 内容审核是怎样运作的——又会在哪里出错
    用浅白的话说明自动审核怎样筛查文字、图片和影片,为什么它会漏掉人一眼就看得出的东西,以及把待审投稿交给一款工具之前该问什么。

全部指南 →