几种APP图片排版样式对比

作者: 纯白V | 来源:发表于2016-03-09 21:28 被阅读7211次

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

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

1.图片靠左对齐

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

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

图1

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

图2

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

图3

缺点

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

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

2.图片靠右对齐

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

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

图4


3.图片放在上方

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

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

图5

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

4.图片放在下方

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

图6


5.图片作为背景

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

图7


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

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

相关文章

  • 几种APP图片排版样式对比

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

  • 让新媒体人欲罢不能的五大工具

    1.微信公众号排版 第三方排版工具①135编辑器:样式丰富,支持、收藏样式和颜色、图片素材编辑、图片水印、一键排版...

  • 如何使用PPT蒙版制作出有创意的PPT?

    PPT图文排版时,很多人会因为图片或者文字内容的限制,导致排版缺乏思路,排版样式很平淡。比如: 排版虽然很整齐,但...

  • PPT排版

    排版四原则:对齐、对比、重复、亲密 对齐: 对比:轻重原则 亲密:靠近和归属 重复:相同字体、配色、图片风格 PP...

  • 15天PPT第八天之3秒搞定多图自动排版

    15天PPT第八天之3秒搞定多图自动排版 一、3秒搞定多图自动排版 (一)选中所有的图片 (二)设定图片的样式 (...

  • Bootstrap:文字排版与图片样式

    Bootstrap4 文字排版 默认设置:Bootstrap 4 默认的 font-size 为 16px, li...

  • 【iOS】图片的显示样式 ContentModel

    今天整理了一下图片常用的几种显示样式 ContentModel 主要包括

  • android异步生成图片

    下面来说说在Android上如果异步生成图片,通过xml布局用View排版好图片样式,在子线程生成一张图片,以满足...

  • 2018-11-21

    bootstrap大纲: 1、css样式 1)栅格系统 2)排版 3)代码 4)表格 5)表单 6)按钮 7)图片...

  • 测试一下

    简洁明了的设计排版,很喜欢。图片发自简书App测试

网友评论

    本文标题:几种APP图片排版样式对比

    本文链接:https://www.haomeiwen.com/subject/pixtlttx.html