产品经理的自我修养——App中的图片究竟放在哪儿？

APP排版之靠左对齐

目标

1.了解APP图片排版的样式；

2.掌握APP不同图片排版样式的使用场景和优缺点。

前言

1.在如今的手机产品中，图片起着举足轻重的作用，甚至是出奇制胜的神器，网络流行语“有图有真相”就体现出图片的重要性。关于图片的设计方法论也很多很多，本次课主要讲的是列表中图片的放置和设计。例如：朋友圈、QQ空间发表的内容，有图片往往有更多人点赞。

2.大多数情况，图片和文字的组织关系主要有这几种：

1）图片靠左对齐（左对齐）

2）图片靠右对齐（右对齐）

3）图片放在上方

4）图片放在下方

5）图片作为背景

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

图片靠左对齐

1.实例1（大名鼎鼎的微信）

它的优势是什么呢？

优势1：正常情况下，用户的注意力是从左向右的（以色列等人除外），在列表中，图片放在列表开头有着无与伦比的优势：

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

2.实例2（赫赫有名的QQ）

优势2：可以吸引用户注意力，提高点击率，比如很多APP在每个栏目左边会放一个icon。

3.实例3（营销中的应用——电商）：

优势3：可以用图片内容引发用户兴趣，作为营销的手段提高转化率，
比如团购网站的美食列表经常放一些看起来很有诱惑力的美食图片，
还有一些推荐内容，例如有道词典，结合时事新闻，通过图片吸引用户观看。

4.实例4：

劣势1：如果图片与内容的相关性不高，就会增加惹眼的污染信息，影响用户的阅读速度；

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

思考

不知道大家有没有这样的感觉：现在图片PS的太严重了，有点假，不管是电商还是团购，用多了以后都会下意识的把图片自动过滤（可能是上图片的当太多了，也可能是看的太多了），直接看关心的内容：比如价格、距离多远等等？后续电商和团购会不会也慢慢把图片放到右侧去了呢？

APP排版之靠右靠上对齐

图片靠右对齐

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

2.比如常见新闻类应用：36kr 以及知识类应用：知乎等，这些应用更重要的是内容，配图只是对内容的一种补充，所以都把图片靠右放了。但是，目前，App都不会单独的使用一种图文排版方式，都是多种相结合的方式。图片更重要的话，会把图片放在左侧和上方；文字或者内容更重要的话，会把图片放在文字的右侧或者下侧。

实例（资讯、新闻类）

思考

一医药产品和网易新闻的截图，他们把图片放在了列表的左侧，这么设计是为了什么？或者说这么设计是否合理？

第一款医药产品，内容更重要，配图跟内容有时一点关系都没有，看列表的时候，会下意识的自动把图片给过滤掉，图片对我了解内容真的没有帮助。至于网易新闻，有时候图片很有吸引力，我会先看图片，看到图片后脑子会自动想象一个跟图片相关的新闻，但是跟真正的新闻经常不匹配，所以到后面我基本直接过滤图片了，直接看文字了，虽然感觉影响也不大，但是个人感觉图片更多的是对内容的补充，可以放到右侧去。

图片放在上方

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

2.例如腾讯视频、Pinterest、蘑菇街、携程：

缺点：如果一排只放一条记录，很占空间；比链表式占空间。

APP排版之背景图片

图片放在下方

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

1.QQ空间

2.朋友圈

3.知乎

图片作为背景

（大部分为旅游类的产品，提升产品质量）

图片作为背景，可以加强其沉浸感，充分利用图片唤起用户的想象，把图片的诱惑最大化以提高逼格，常用于旅游产品中。

同时利用上述几种方式

有时候为了减缓用户审美疲劳、突出某些重点部分，可以同时利用上述几种排列方式，利用不同排列方式的优势来最大化达到产品目的。

例如，今日头条：

小结

大多数情况，图片和文字的组织关系主要有这几种：

1.图片靠左对齐

2.图片靠右对齐

3.图片放在上方

4.图片放在下方

5.图片作为背景

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

课后思考

1.选择分析几款APP的图片排版样式和原因？

2.重新审视自有产品的图片排版样式是否合理？