APP列表页配图，放左边好呢，还是右边好？

一开始可能大家都没关注这一点，大家默契的采取左图右文的布局，只是从视觉上觉得这样好看一点，但随着人们越来越重视交互设计、用户体验，我们发现有些APP不适合左图右文，比如那些图片质量不高的新闻资讯类APP，通过一张图片表达不清楚我们的主题。 我们今天就讨论一下设计师如何运用左文右图和左图右文两种布局，怎样才能将自己的设计有理有据的讲给产品和开发听呢？ 我觉得可以从一下三点入手： 1、用户的浏览习惯 2、列表展示的内容和目的 3、确定标题和配图的主次关系

无论是网页、书籍还是APP，人的浏览习惯是从左到右，从上往下；我之前看过一篇关于网页设计布局的文章，提到了经典的F式布局，根据人在浏览页面时的眼动热点，分析用户浏览页面的视觉轨迹，呈一个F型；

（图片来自网络） 从这张图中，我们可以看到用户在浏览页面时，视觉重心在左边，而且越往下深入浏览，重心越往左；所以我们应该把重要的，最想让用户看的展示在左边。 那么我们就要考虑我们要展示什么内容，目的是什么；如何确定主次关系？

为什么会采用图文结合的布局，是因为版式美观、表达更直观；试想如果只有文字，那样看起来多累；如果只有图片，有时候又看不懂什么意思。

下面是我截得ZAKER的一张图，把图片去掉后，也能看，就像当年读报纸似的，但是总感觉页面太单薄，不够生动，不符合现在的富媒体时代；

下面这张图是原始的ZAKER页面，采用左文右图的布局；大家明显可以看出单单一张图片，没有标题的话，根本看不懂内文究竟要讲的是什么；根据用户的从左到右的浏览习惯，他把标题放在左边，突出内容，在阅读信息的时候，不会收到图像的干扰。

试试把图片放在左边看一下，乱了，用户的视觉被一些看不懂的图片干扰，严重影响阅读。

上面讲的是新闻资讯类的APP，再来看看产品类APP；首先美观性上就不用说了，阅读性上，用户的视觉重心在左侧图片上，图片能更直观的传递内容的信息，不需要一个字一个字的读完标题，延左侧图片快速浏览就能快速筛选出自己想要的内容；

下面分享下自己的一点小总结：

如果APP以内容为主（主要是娱乐资讯类APP、新闻类APP），这里分两种情况： 1、娱乐资讯类的APP，展示的大多数是娱乐八卦、时尚搞笑类的内容，我们希望通过图片吸引用户点击，标题只是帮助理解图片；配图放在标题前面能够更直观的传达出内容的含义，从而缩短用户理解文字标题的时间，让用户的时间顺着右侧的图片向下快速浏览，起到快速筛选的目的。所以这类APP列表布局可以采用左图右文的形式，把重点放在图片和视觉上，对图片的质量要求高。 2、新闻类APP，这些APP以实事新闻为主，内容为王，内容质量高，实效性强，用户更关注的是内容，配图往往表达不清楚主题，根据用户的浏览习惯，配图在左边就会影响用户获取信息的效率，这个时候文章标题更能全面准确的表达内容；这样标题和配图的主次关系就确定了，标题比配图更重要，所以要把重点放在想一个好的标题上；这类APP把配图放在右边更合适。

如果是用来展示产品的一类APP，比如电商APP、外卖APP等，用图片来展示产品更直观更生动，更能吸引用户的视线，图片展示产品的信息量比文章更丰富，文字只能作为辅助；这个时候图片的作用明显比文章更重要，所以这样的APP，列表配图最好放在左边。