如何图文布局-小细节定视觉

在信息流item中，有的标题在左图片在右，而有的是图片在左标题在右，这两种形式看似区别不大，但是

。

接下来从两个方面来说，左文右图还是左图右文

左文右图的样式普遍出现在新闻资讯产品中，其中包括今日头条、腾讯新闻、UC浏览器信息流以及我们的vivo浏览器信息流等等，现在就让我们从资讯平台作为切入点，对左文右图的形式进行分析。

按照已知经过验证的理论，即F阅读顺序（尼尔森的用户阅读视线模型），用户浏览页面的顺序是从左往右自上而下，因此左上角的信息最早触达用户。

然而至文字诞生以来，多数情况下，人类普遍通过文字来获取信息，我们不否定，通常情况下图片的易识别性远优于文字，但是从信息传递的准确性以及丰富性上来说，文字的优势是远大于图片的。

所以在资讯类产品中我们更倾向于优先通过文字来识别内容，而将图片作为辅助信息，因此根据我们从左往右自上而下阅读习惯，将文字放在左边更有利于用户获取信息。我们通过一个案例来分别了解一下左图右文与左文右图的

是什么样的。

在下面的案例中，左图右文用户的阅读路径偏长，并且常常出现视线的折返。

左文右图用户的阅读路径较短，不会有视线的折反。因此，基于效率和阅读习惯的角度来说，左文右图优势更明显。

但或许这里就会有人提出疑问“

，但是在前面我们也提到，图片的易识别性是远高于文字的，因此哪怕是将图片放在文字后面，对于图片的“魅力”的影响是在可接受范围内的。

在资讯信息流中，为了信息展示的多样性，避免单一的信息流结构使用户感到单调，在样式上除了左文右图的样式，往往还会搭配三图、大图及视频的样式出现，而在这样多种穿插样式的情况下，左文右图能够为用户的双眼提供了一个扫读时候的基准位置，在大量、长时间阅读的过程中，极大地减小了阅读压力。

资讯流中除了左文右图的样式，还会搭配三图、大图及视频的样式出现，因此我们不仅仅要考虑单个信息流样式的阅读体验，更要保持持整体信息流阅读先后顺序的一致性，这能够为用户提供较好的沉浸式体验。

左图右文的的形式在标题文字较短的情况下，item右上角就会出现视觉上的缺角，这会破坏页面整体的工整性，而左文右图的形式就很好的避免了这个问题。

格式塔原理对闭合的研究中提到，人的大脑无论看见什么东西,都喜欢去将它们想象成为一个整体，如果元素太过杂乱大脑无法将其归类成为一个整体，那么视觉感受就是非常不佳的。

资讯流中除了左文右图的样式，还会搭配三图、大图及视频的样式出现，因此我们不仅仅要考虑单个信息流样式的阅读体验，更要保持持整体信息流阅读先后顺序的一致性，这能够为用户提供较好的

。

在内容形式的吸引力上，视频>图片>文字，并且前面我们提到，图片的易识别性是高于文字的，因此一张高质量的图片往往能够在第一时间触达用户并形成转化

然而至文字诞生以来，多数情况下，人类普遍通过文字来获取信息，我们不否定，通常情况下图片的易识别性远优于文字，但是从信息传递的准确性以及丰富性上来说，文字的优势是远大于图片的。

例如主打品质时政新闻的澎湃新闻以及学习类产品星阵围棋，其推荐的内容都来自专业团队的输出，对内容图片的质量有较好的掌控力，因此采用了左图有文的形式优先给用户展示图片信息，以提升用户对内容的兴趣。

在用户带有明确目的场景时进行信息阅读时，用户往往对内容已经有了一个大致的预期，所以这个时候如果我们能让用户第一时间识别图片，能够大大的提升用户的操作效率。

例如用户在查找一篇曾经看过的文章时，当曾经阅读过那篇文章的封面出现屏幕中时，用户便能立刻作出判断，这会比在众多文字标题中查找更为便捷。

1.通常情况下，我们优先通过文字来获取讯息，因此在一般的信息流中，更青睐采用左文右图的方式，以提升效率；

2.左文右图能够为用户提供统一的阅读基准位置，在用户长时间浏览时减少阅读压力；更好的满足格式塔闭合原理，使信息流整体的页面更加工整。

左图右文常被用来承载PGC的内容。在能够确保图片质量的情况下，图片在左侧，更容易引起用户对帖子的兴趣；

在带有明确目的阅读场景下，例如查找历史内容、搜索等，左图右文的形式效率更高。

格式塔心理学诞生于1912年，是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的：我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知形状、图形和物体，而不是只看到互不相连的边、线和区域。“形状”和“图形”在德语中是Gestalt,因此这些理论也称做视觉感知的格式塔原理。

这里要注意一点，相近性作为格式塔的首要原则，它的影响非常大，大到可以抵消其他原则，比如上图的圆形添加颜色，甚至改变其形状，人们也会把相近的事物当成一个整体。

这里要注意一点，颜色作为相似性的参照依据要强于形状，因为相较于形状，醒目的颜色更能吸引人的注意力。比如上图中我们会首先将绿色的图标归为一个整体，其次再根据圆形的轮廓确定将上下两行功能图标归为一类。这样设计的好处是能让设计重点更加突出，同时又不破坏整体感。

比如上面这张图，你首先会意识到这是一个圈、三条直线和一条曲线，我们从小就知道直线、圈和曲线，所以当我们看到这张图的时候，知觉上会弱化这些线条分割所带来的“块”，而依然意识到是由三条直线、一个圆、一条曲线组成的。

格式塔原理是视觉设计中普遍采用的一种构图方法，是在格式塔心理学派完形心理学基础上发展而来的