信息流是一種可以滾動(dòng)瀏覽的內(nèi)容流。這些內(nèi)容會(huì)出現(xiàn)在外觀相似秃症、一個(gè)挨一個(gè)顯示的模塊中银亲。例如，信息流可以是編輯精選的信息流（如文章或新聞列表）或產(chǎn)品詳情（如產(chǎn)品列表盖矫、服務(wù)列表等）丽惭。信息流可以出現(xiàn)在頁(yè)面上的任何位置。信息流是用戶與app接觸時(shí)間最長(zhǎng)的地方之一辈双，根據(jù)產(chǎn)品需求選用合適的信息流樣式是提升信息展示效率责掏，提升用戶體驗(yàn)較快的方式。本文將對(duì)圖文展示類目前常用的幾種設(shè)計(jì)樣式解析其優(yōu)缺點(diǎn)和適用場(chǎng)景湃望，使設(shè)計(jì)更好的賦能于產(chǎn)品業(yè)務(wù)换衬。

在分析之前，先了解以下兩個(gè)概念：

1?? 在不同形式的信息對(duì)于人吸引力的大小順序?yàn)椋阂曨l>圖片>文字证芭，視頻和圖片在大腦中是不需要進(jìn)行反編譯的冗疮，這也就是人們喜歡看視頻，看圖片檩帐，不太希望閱讀大量文字的原因术幔。

2?? 在內(nèi)容展現(xiàn)圖文混排，并且不是太復(fù)雜的時(shí)候湃密，視覺(jué)瀏覽線路會(huì)以“z”模式瀏覽诅挑，這種瀏覽方式注定用戶在左上角和右下角的視覺(jué)最重，相反在右上角和左下角的視覺(jué)最輕泛源，因此也把此處稱為視覺(jué)盲點(diǎn)拔妥。

下面我們結(jié)合產(chǎn)品示例分析一下不同信息流樣式適用場(chǎng)景

1、左圖右文

一般左圖右文在圖片為經(jīng)過(guò)審核或處理的圖片达箍，并且能表達(dá)自身信息的部分意義没龙。以圖片開(kāi)頭，吸引用戶注意力缎玫，配合視覺(jué)“z”字走勢(shì)硬纤，呈現(xiàn)信息標(biāo)題及介紹。也“z”模式瀏覽的特點(diǎn)赃磨，將價(jià)格信息放在右下的位置筝家，將信息重要性和視覺(jué)重點(diǎn)結(jié)合，在突出相應(yīng)信息的同時(shí)還符合視覺(jué)流的流動(dòng)特點(diǎn)邻辉，一箭雙雕溪王。這種排版方式比較適合帶目的閱讀腮鞍，通常統(tǒng)一的視覺(jué)流也可幫助檢索信息。

2莹菱、左文右圖

一般新聞?lì)怉PP比較適用的一種形式移国，新聞圖片會(huì)因?yàn)榕臄z環(huán)境質(zhì)量參差不齊，甚至有些是UGC內(nèi)容道伟，圖片質(zhì)量可控性更低桥狡。相比較之下，文章標(biāo)題的位置就更為重要皱卓，此類形式排版中要注意將標(biāo)題與其他信息分開(kāi)的明確一些裹芝，以確保用戶視覺(jué)捕捉重要信息準(zhǔn)確無(wú)誤。

圖二是一個(gè)信息量更為復(fù)雜的左圖右文排版形式娜汁，在內(nèi)容為UGC或PGC時(shí)嫂易，這類版式更為適合。它的標(biāo)題字?jǐn)?shù)變數(shù)很大掐禁，對(duì)于文字很少的標(biāo)題怜械，就需要用簡(jiǎn)介來(lái)介紹一下文章內(nèi)容。同時(shí)外漏作者也是鼓勵(lì)用戶發(fā)帖的一種方式傅事，此類也會(huì)根據(jù)平臺(tái)對(duì)于原創(chuàng)者的重視程度及影響力把作者信息放置在信息流的不同位置缕允。

3、上文下圖-三圖式

上文下圖類圖片相比左圖右文會(huì)更吸引人蹭越，也更有品質(zhì)障本，設(shè)計(jì)樣式一般會(huì)和視頻混排出現(xiàn)，保證用戶在瀏覽時(shí)保持標(biāo)題+內(nèi)容的瀏覽順序响鹃。上文下圖也經(jīng)常存在于新聞?lì)怉PP驾霜，穿插在左文右圖的展示樣式中，會(huì)打破一下視覺(jué)左文右圖的疲憊視覺(jué)买置，在新聞?lì)恆pp的沉浸式瀏覽中粪糙，用戶目的性更弱，不需要持續(xù)的按某個(gè)瀏覽規(guī)律檢索信息忿项，所以不定時(shí)的出現(xiàn)在信息的海洋中打破視覺(jué)流蓉冈，同時(shí)也起到了信息燈塔的指引效果。

4轩触、上圖下文-大圖式

這類對(duì)于圖片的要求已經(jīng)邁到了最高級(jí)寞酿，在這種樣式中，圖片幾乎決定了用戶會(huì)不會(huì)看該信息怕膛。也正是因?yàn)閳D片如此的重要性熟嫩，此類版式的圖片都是發(fā)布者或平臺(tái)精心處理才會(huì)發(fā)布秦踪。這種版式由于大圖的存在會(huì)使單屏信息展示更少褐捻，因此設(shè)計(jì)時(shí)要考慮將對(duì)于該內(nèi)容的操作外露掸茅，以保證用戶對(duì)信息操作效率。

5柠逞、上文下圖-n圖式

n圖式主要存在于社交類app昧狮，發(fā)布者會(huì)發(fā)布1-9張圖不等圖片，根據(jù)社交媒體的屬性不同板壮，對(duì)圖片的處理方式也不一樣逗鸣。最普通的處理方式像微信，1張圖會(huì)根據(jù)圖片自身的寬高比給出最大寬高讓圖片自適應(yīng)绰精，2-9張圖即按9宮格中圖的大小裁切后排列撒璧，注意4張圖仍是方形排列即可。而“即刻”和“蘇打”會(huì)根據(jù)用戶發(fā)布的無(wú)論幾張圖都按平臺(tái)各自方式排列成方形笨使，樣式多樣卿樱。兩種方式中，前者展示信息更規(guī)律更有效率硫椰，后者更活潑繁调、年輕時(shí)尚“胁荩可以根據(jù)平臺(tái)自身內(nèi)容屬性做不同取舍展示信息蹄胰。

社交類用戶分享的信息中，會(huì)以用戶為中心奕翔，所以在單個(gè)模塊的信息可以看出裕寨，用戶頭像、昵稱信息在第一顯示派继，并且昵稱相比發(fā)布的信息標(biāo)題顯眼重要帮坚。微信朋友圈的排版，不惜舍掉左側(cè)頭像之下的空間互艾，留白區(qū)分信息试和，凸顯發(fā)布者位置。

6纫普、瀑布流

瀑布流形式在電商展示產(chǎn)品時(shí)用的比較多阅悍，信息會(huì)因?yàn)閳D片、標(biāo)題的長(zhǎng)度不同而呈現(xiàn)模塊高度不同昨稼，從而出現(xiàn)錯(cuò)落有致的感覺(jué)节视。在旅游、家裝假栓、購(gòu)物類app中經(jīng)常使用寻行，現(xiàn)在也有很多視頻信息流中用到這類排版方式，此類方式對(duì)圖片的說(shuō)明性依賴很大匾荆，在本身產(chǎn)品圖片不能設(shè)計(jì)者控制時(shí)拌蜘，不推薦使用杆烁。

7、文字圖片并行

這種形式在圖片優(yōu)質(zhì)的情況下简卧，會(huì)給人精心設(shè)計(jì)的高級(jí)感兔魂。使用時(shí)要保證圖片夠清晰，文字在圖片上閱讀性不受影響举娩，圖片在黑色浮層下展示時(shí)顯示仍可以很優(yōu)質(zhì)析校。由于文字直接在圖片上顯示，造成了其可讀性相對(duì)較差铜涉，在瀏覽目的性強(qiáng)的信息流展示中智玻，不推薦使用碧注。

根據(jù)自身產(chǎn)品的目標(biāo)用戶及使用場(chǎng)景愕够，并且一定要結(jié)合自身產(chǎn)品的對(duì)信息流中想讓用戶獲得的信息暂刘，去選擇或重新定義一種信息流玉转。在流模塊偏高時(shí)杆查，就要將流內(nèi)容的操作欄前置祥得。當(dāng)圖片質(zhì)量不能保證時(shí)要盡量少的使用大圖或多圖從而盡量彌補(bǔ)自身平臺(tái)不足订歪。結(jié)合自身產(chǎn)品目的佳簸、優(yōu)缺點(diǎn)滔韵，將信息有效排列逻谦，保證用戶的閱讀體驗(yàn)。在條件允許的情況下可以采用眼動(dòng)測(cè)試陪蜻、A/B測(cè)試等方式加以驗(yàn)證邦马，使設(shè)計(jì)更有效的賦能產(chǎn)品業(yè)務(wù)。