几种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.同时利用上述几种方式

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,400评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 一不小心,又拖到26号来写25号的东西了!忽然脑子一片空白,昨天发生了些什么呢?肯定也是在一半卖力一半偷懒的工作当...
    兮兮0225阅读 193评论 0 0
  • 要解决中国社会的问题,一定要解决农村问题,因为当时中国农民占了人口总数的80%,研究中国平民的生活,一定要研究农民...
    竹子的CO阅读 415评论 0 0
  • 不是很清楚是几岁的时候,大概是小学三四年级的时候,具体什么事也不是很清楚了,大概是家里的长辈们开玩笑,当时的感受却...
    叶芷cy阅读 170评论 1 0