一个案例带你轻松搞定图文排版

无论是网页还是App，图片与文字总是相辅相成地出现在主要界面中，无论是左图右文，上图下文，还是图文重合，它们之间都有着千丝万缕的关系，构成了UI设计最基本的要素。

下图是某新闻类App常用的右图左文的列表界面，虽然只是简单的排版：仅有图片、标题和描述性文字三种元素，其中却包含了极其丰富的细节，运用了多种版式设计的原则，本文将通过这个案例来一一拆解，彻底搞定图文混排这件事儿！

亲疏性

该界面的左右边距为40px，图片距离标题20px，这是非常典型的疏远与亲密距离。标题字号为32px，其行距为16px，即1.5倍，（文字排版1.5-2倍为最佳行间距）标题与描述间的距离为40px，与标题行距也形成了疏远和亲密距离。

根据亲密性原则来组织复杂信息，将彼此相关的元素靠近，归组在一起形成从属关系，接着远离不相关的元素，这样才可以清晰地区分每一组信息，大大提高可读性。图片和标题更近，它引导用户的视线流呈水平方向；而如果抛开亲密性原则，图片和标题的距离与边距相同，就会因为图片的视觉占比最大，导致用户的视线流呈垂直方向。

水平视线流                                                                垂直视线流

接着我们试着将标题与描述文字的亲密性原则也打破，发现相同的大行距会导致两行标题不再连贯，而是给人独立的两个标题的错觉；而相同的小距离行距则导致排版过于紧凑，可读性随之变差。

标题不连贯                                                                  可读性变差

对比性

当你遇到一些排版混乱，可读性比较差的界面，你的视线就不知道集中在哪儿，为什么会有这种情况的发生呢？都是因为界面内容对比不明显造成的。重要信息和次要信息需要有非常强烈的大小、轻重对比，才会让浏览者的视线聚焦在主要内容上，从而获取有用信息。

本文里的这个案例就通过标题与描述文字字体粗细、字号大小、颜色进行了对比，把最有用的信息直观地呈现在用户面前。在这里，标题是吸引用户关注的关键，而下面的阅读量只是作为资讯热度的参考的辅助性信息，毕竟很少有人会因为阅读量高而点开一篇连标题都不感兴趣的文章吧。如果不讲究对比，标题与辅助性文字同样粗细、大小，阅读视线就会情不自禁地被辅助信息所干扰。

有对比                                                                            无对比

规则性

简洁的设计让界面有着良好的呼吸与秩序感，大间距或是无分割线的设计，可以减少对视觉的干扰，让用户的浏览变得轻松。考察界面的设计尺寸，我们会发现该界面以20px为单元进行栅格设计：左右边距为40px，上下图片的间距是40px，图片与标题间距是20px，图片的尺寸是200*140px，这些统统都是20的倍数，简单的规则是美的，同时也提高了设计工作的效率。

但这里需要把握好一个度，过小的行距会让所有列表挤成一团，而行距过大，页面就会显得松散，同时也会降低浏览效率。因此恰到好处的间距和留白才能让信息层级变得清晰明了，要做到这一点就需要大家日常不断地练习来积累经验。

平衡性

图文左右排列让列表在视觉上保持了一定的平衡性，带给用户心理上的和谐感。在本文的案例中，标题与辅助性文字都没有顶格，没有与图片上下齐平，而是留有了一定的空隙。（如下左图所示）这又是为什么呢？

原来是因为这里没有分割线来区隔行，而图片是规则的矩形，更容易成为视觉的重心，通过图片水平方向延伸建立起一个视觉矩形，在此矩形内部的内容与之形成从属关系。如果标题和描述性文字与图片上下齐平，就会感觉文字要溢出来，脱离与图片的从属关系。还有另外一个更小的细节是：标题上方与图片的间距要比描述文字下方与图片的间距大一些，那是因为标题本身字号更大的关系，正如字号越大它默认的行间距也越大，如果小字号也使用同样的间距就会显得不协调。

上面讲的平衡关系精髓全在细节，掌握这些细节设计才能让你的界面更加精致，脱颖而出。

合理性

最后要讲讲这个案例为什么采用了右图左文，这样更合理吗？还是左图右文也可以。我们在设计图文列表的时候常常就会有这样的选择困扰，如果拿市面上成熟的App作参考，不同的产品也往往会有不同的选择，这里面到底有什么规律呢？

要解决这个问题，就得考虑到人的阅读习惯。我们知道人阅读时视线往往是从左至右、从上至下的顺序，那么不言而喻，应该把重要的内容放左侧。同时考虑到使用移动设备的场景，我们通常是右手持手机浏览，在上下滚动屏幕时右手拇指有时会遮挡屏幕的右侧边缘，因此把次要的内容放在右侧更为合适。

对新闻资讯类App来说，图片所透露出来的信息没有文字标题那样快速直接，因此图片就处在次要位置。相反的，标题才是吸引用户点击进去的关键因素，因此在这里右图左文比左图右文更为合适。

不太合适                                                                        合适

在电商类应用中，相比产品名称、介绍性文字、价格等，产品图片能够直观地展示产品的外观、尺寸、颜色等信息，这些都是用户最先关心的要素。因此电商类App如天猫采用了左图右文的排版方式。凤凰新闻是资讯类应用，因此采用了右图左文的排版方式，让用户首先关注到文字内容。

    天猫                                                       凤凰新闻

总结一下：

本文用了一个右图左文的案例来拆解图文排版的要点，既要关注排版的基本原则：利用亲疏与对比性原则来构建清晰的视觉层级结构，同时可以采用栅格系统让间距规则变得简单而统一，而在细节处我们还要关注视觉平衡性，当然在大的方面更需要清楚在什么样的场景下，怎样处理图文位置关系才最为合理。

只有同时做到以上几点，才能让看似简单的图文页面布局清晰而合理。掌握这些原理后，还需大量的日常练习与思考，并由此运用到更多如：上图下文、图文重合的场景中，才算是真正将图文排版这个技能做到了举一反三、运用自如。