把文字告白变成读得清楚的 Instagram 图片
Instagram 是为图片而设的,告白却是文字。本文说明怎样设计一个在手机上依然清晰易读的图片模板——尺寸、字体大小、对比度、长篇帖子、多语言文字和替代文字。
其他语言: 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/总数” |
| 替代文字 | 投稿全文 |
| 说明文字 | 帖子编号、全文,不含任何在审核时被拿掉的内容 |
按你专页的风格调整,然后把成品发到手机上,伸直手臂读一读。这个测试能解决的设计争论,比再多的讨论都多。