几种APP图片排版样式对比

APP中的图片究竟放在哪儿？是左边还是右边？是上边还是下边？关于图片的设计方法论有很多，这里主要针对列表中图片的放置和设计。

先来理一下图片和文字的组织关系：

1.图片靠左对齐

正常情况下，用户的注意力从左向右（当然不否定特例的），图片放在列表开头的优势：

a.可以增加识别度，加快用户对该记录的识别速度，比如通讯录左侧头像、IM消息列表头像；

图1

b.可以吸引用户注意力，提高点击率，比如很多APP在每个栏目左边会放一个icon；

图2

c.可以用图片内容引发用户兴趣，作为营销的手段提高转化率，比如团购网站的美食列表经常放很有诱惑力的美食图片。

图3

缺点：

a.如果图片与内容没啥关系，就会增加惹眼的污染信息，影响用户的阅读速度；

b.如果图片主要是以营销为目的的，久而久之用户就会下意识自动过滤左侧的图片，图片就成了无用的障碍信息。

2.图片靠右对齐

如果列表中，每条记录的内容比图片更重要或者该内容很难用相应的图片进行表达，同时又想充实页面提高页面美观度，又或者想用图片对文字进行补充说明的，可以考虑图片放在右侧；

比较常见新闻类应用：今日头条、腾讯新闻、36Kr等，以及知识类应用：知乎等。这些应用更重要的是内容，配图只是对内容的一种补充，所以都把图片靠右放了。

图4

3.图片放在上方

一般都是类似瀑布流列表的处理方式。此时图片的重要程度比放在左侧还要高的多，基本每条记录的主要信息都靠配图来呈现，也主要靠图片来吸引用户，文字仅起到辅助作用。这种处理方式主要利用在视频网站、图片社交、部分购物网站、旅游网站上。

比如：腾讯视频、Pinterest、蘑菇街、携程（用图勾引，给你描绘一种面朝大海心暖花开的景象）

图5

缺点：如果一排只放一条记录，很占空间。

4.图片放在下方

主要利用于社交的状态列表中，比如朋友圈、微博、空间，主要的优势：可以把文字和图片的结合优势充分发挥出来，文字简要陈诉，图片带你身临其境，还原真实情况。

图6

5.图片作为背景

图片作为背景，可以加强其沉浸感，充分利用图片唤起用户的想象，把图片的诱惑最大化以提高逼格，常用于旅游产品中（让用户对旅游地感兴趣，如果用于营销的，会让用户产生点进去看看具体信息的行为）。

图7

6.同时利用上述几种方式

有时候为了减缓用户审美疲劳，或者突出某些重点部分。利用不同排列方式的优势来最大化达到产品的目的，但缺点是给用户的第一感觉是“乱”，所以这种方式很少用。