设计赋能-图文展示类信息流设计样式解析

信息流是一种可以滚动浏览的内容流。这些内容会出现在外观相似、一个挨一个显示的模块中。例如,信息流可以是编辑精选的信息流(如文章或新闻列表)或产品详情(如产品列表、服务列表等)。信息流可以出现在页面上的任何位置。信息流是用户与app接触时间最长的地方之一,根据产品需求选用合适的信息流样式是提升信息展示效率,提升用户体验较快的方式。本文将对图文展示类目前常用的几种设计样式解析其优缺点和适用场景,使设计更好的赋能于产品业务。

在分析之前,先了解以下两个概念:

1⃣️ 在不同形式的信息对于人吸引力的大小顺序为:视频>图片>文字,视频和图片在大脑中是不需要进行反编译的,这也就是人们喜欢看视频,看图片,不太希望阅读大量文字的原因。

2⃣️ 在内容展现图文混排,并且不是太复杂的时候,视觉浏览线路会以“z”模式浏览,这种浏览方式注定用户在左上角和右下角的视觉最重,相反在右上角和左下角的视觉最轻,因此也把此处称为视觉盲点。

下面我们结合产品示例分析一下不同信息流样式适用场景

1、左图右文

一般左图右文在图片为经过审核或处理的图片,并且能表达自身信息的部分意义。以图片开头,吸引用户注意力,配合视觉“z”字走势,呈现信息标题及介绍。也“z”模式浏览的特点,将价格信息放在右下的位置,将信息重要性和视觉重点结合,在突出相应信息的同时还符合视觉流的流动特点,一箭双雕。这种排版方式比较适合带目的阅读,通常统一的视觉流也可帮助检索信息。

2、左文右图

一般新闻类APP比较适用的一种形式,新闻图片会因为拍摄环境质量参差不齐,甚至有些是UGC内容,图片质量可控性更低。相比较之下,文章标题的位置就更为重要,此类形式排版中要注意将标题与其他信息分开的明确一些,以确保用户视觉捕捉重要信息准确无误。

图二是一个信息量更为复杂的左图右文排版形式,在内容为UGC或PGC时,这类版式更为适合。它的标题字数变数很大,对于文字很少的标题,就需要用简介来介绍一下文章内容。同时外漏作者也是鼓励用户发帖的一种方式,此类也会根据平台对于原创者的重视程度及影响力把作者信息放置在信息流的不同位置。

3、上文下图-三图式

上文下图类图片相比左图右文会更吸引人,也更有品质,设计样式一般会和视频混排出现,保证用户在浏览时保持标题+内容的浏览顺序。上文下图也经常存在于新闻类APP,穿插在左文右图的展示样式中,会打破一下视觉左文右图的疲惫视觉,在新闻类app的沉浸式浏览中,用户目的性更弱,不需要持续的按某个浏览规律检索信息,所以不定时的出现在信息的海洋中打破视觉流,同时也起到了信息灯塔的指引效果。

4、上图下文-大图式

这类对于图片的要求已经迈到了最高级,在这种样式中,图片几乎决定了用户会不会看该信息。也正是因为图片如此的重要性,此类版式的图片都是发布者或平台精心处理才会发布。这种版式由于大图的存在会使单屏信息展示更少,因此设计时要考虑将对于该内容的操作外露,以保证用户对信息操作效率。

5、上文下图-n图式

n图式主要存在于社交类app,发布者会发布1-9张图不等图片,根据社交媒体的属性不同,对图片的处理方式也不一样。最普通的处理方式像微信,1张图会根据图片自身的宽高比给出最大宽高让图片自适应,2-9张图即按9宫格中图的大小裁切后排列,注意4张图仍是方形排列即可。而“即刻”和“苏打”会根据用户发布的无论几张图都按平台各自方式排列成方形,样式多样。两种方式中,前者展示信息更规律更有效率,后者更活泼、年轻时尚。可以根据平台自身内容属性做不同取舍展示信息。

社交类用户分享的信息中,会以用户为中心,所以在单个模块的信息可以看出,用户头像、昵称信息在第一显示,并且昵称相比发布的信息标题显眼重要。微信朋友圈的排版,不惜舍掉左侧头像之下的空间,留白区分信息,凸显发布者位置。

6、瀑布流

瀑布流形式在电商展示产品时用的比较多,信息会因为图片、标题的长度不同而呈现模块高度不同,从而出现错落有致的感觉。在旅游、家装、购物类app中经常使用,现在也有很多视频信息流中用到这类排版方式,此类方式对图片的说明性依赖很大,在本身产品图片不能设计者控制时,不推荐使用。

7、文字图片并行

这种形式在图片优质的情况下,会给人精心设计的高级感。使用时要保证图片够清晰,文字在图片上阅读性不受影响,图片在黑色浮层下展示时显示仍可以很优质。由于文字直接在图片上显示,造成了其可读性相对较差,在浏览目的性强的信息流展示中,不推荐使用。

根据自身产品的目标用户及使用场景,并且一定要结合自身产品的对信息流中想让用户获得的信息,去选择或重新定义一种信息流。在流模块偏高时,就要将流内容的操作栏前置。当图片质量不能保证时要尽量少的使用大图或多图从而尽量弥补自身平台不足。结合自身产品目的、优缺点,将信息有效排列,保证用户的阅读体验。在条件允许的情况下可以采用眼动测试、A/B测试等方式加以验证,使设计更有效的赋能产品业务。

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,721评论 1 92
  • 内容简介 本书出自国际知名的设计心理学专家之手,以创造直观而又有吸引力的设计为宗旨,讨论了设计师必须知道的100个...
    少穻阅读 2,674评论 0 7
  • 忙碌的空气充着每一缕忽深忽浅的呼吸 , 风风火火的状态似乎能让生活显得充满生机,这就是我们以后要走的路吧...
    Lydia谷木青阅读 921评论 2 3
  • 该洗头了,我不想动。我想写论文,却又打开了综艺节目。我想煮饭了,却一直坐在位置上不行动。我这是不是特别懒。 我一直...
    是不是会一直这样阅读 256评论 0 1
  • 他的学习不是多么好,只是中等,在班里是一个可有可无的人物。 数学课上老师写了一道很难的题。大家纷纷...
    甜酱吖阅读 176评论 0 0