将文字投稿转化为易于阅读的 Instagram 图片
Instagram是为图片而生,而告白是文字。如何设计一个在手机上保持清晰可读的图片模板——尺寸、字体大小、对比度、长帖、多语言文本和替代文本。
Also in: Bahasa Melayu · 简体中文 · 繁體中文
简短回答。 使用 1080 × 1080 像素的正方形图片(或 1080 × 1350 像素的竖向图片),正文文字大小约 44 至 52 像素,边距至少 80 像素,对比度至少 4.5:1。将长篇告白拆分成轮播图,并将全文放在替代文本和说明中。
Facebook上的告白页面可以发布一段文字就完事。但Instagram不接受这样:每个帖子都需要图片或视频。所以告白页面会将文字转成图片——而大多数都做得不好。字体太小,灰色背景上渐变,最后三行消失在画面边缘之下,结果在几乎所有人都用来看帖子的设备上都无法阅读。
本指南涵盖了使文字图片清晰可读的决定。它不要求设计培训,也不需要特定的工具。
选择形状
Instagram的动态消息支持多种图片宽高比。对于文字帖子来说,重要的两种是:
| 形状 | 典型尺寸 | 适合 |
|---|---|---|
| 正方形,1:1 | 1080 × 1080 像素 | 短帖;长期以来的默认设置,也是跨平台发布的最佳选择 |
| 竖向,4:5 | 1080 × 1350 像素 | 较长的帖子;在动态消息中占据更多屏幕空间 |
还有两点。首先,个人资料网格会显示每个帖子的裁剪预览,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 像素的正方形图片,长篇帖子则使用 1080 × 1350 像素的竖向图片。导出时宽度为 1080 像素,选择一种形状并保持一致,并将帖子编号和首行文字保持在中心位置,以免个人资料网格裁剪时将其截断。
Instagram 文字帖子的字体大小多少才可读?
在 1080 像素宽的图片上,正文文字不应小于约 40 像素,44 至 52 像素会更舒适。小于约 32 像素的文字对许多读者来说阅读困难。通过将图片发送到您的手机并保持一定距离阅读来测试。
如何在 Instagram 上发布长篇告白?
将其拆分成轮播图,在段落边界处断开并为幻灯片编号。对于非常长的帖子,将开头几行放在图片上,并将整个内容放在说明中。确定最小字体大小,绝不低于此大小,并且在未标记的情况下不要删减内容。
图片上的文字什么颜色效果最好?
浅色纯背景上的深色文字,或深色背景上的浅色文字。目标对比度至少为 4.5:1。渐变有风险,因为文字在浅色端可能会消失,照片需要强烈的叠加层,而中灰色和柔和色在阳光下的手机上会消失。
告白图片应该有替代文本吗?
是的。文字图片对于屏幕阅读器来说是不可见的,除非您提供描述,而告白图片的正确替代文本就是告白内容本身。将全文也放在说明中,可以使其可搜索、可翻译且易于复制。
一个可供参考的模板规范
| 元素 | 起始值 |
|---|---|
| 画布 | 1080 × 1080 像素(或 1080 × 1350 像素) |
| 边距 | 四边90像素 |
| 正文类型 | 46 像素,常规粗细;最小 38 像素 |
| 行距 | 1.4 |
| 对齐 | 左 |
| 文字颜色/背景 | 米白色上的近黑色,或深色实底上的近白色;对比度 4.5:1 或更高 |
| 帖子编号 | 左上角,34 像素,粗体 |
| 页面句柄 | 右下角,26 像素 |
| 溢出 | 在段落中断处拆分为轮播;每张幻灯片显示“n/总数” |
| 替代文本 | 提交内容的完整文本 |
| 标题 | 帖子编号、完整文本,以及未被审核的内容 |
根据您页面的特点进行调整,然后将结果发送到您的手机,并保持手臂距离阅读。这个测试比任何讨论更能解决设计上的争议。