1.大圖布局，2.多圖布局

3.左圖右文，4.右圖左文，5.卡片列表

一、大圖布局

新聞列表中一般不會(huì)在整個(gè)頁面中采用大圖布局，因?yàn)樾侣勔话銛?shù)量較多且具有時(shí)效性，采用大圖布局會(huì)降低瀏覽效率，如果是比較重要的新聞或者是希望用戶注意到的內(nèi)容則會(huì)采用大圖布局。更多情況下，大圖布局和其他布局會(huì)混合使用，在大量新聞中，用大圖布局的方式突出某條新聞引起用戶注意。

擴(kuò)展

大圖布局也被運(yùn)用于多種場景中，大圖除了吸引用戶還能展現(xiàn)更多圖片細(xì)節(jié)，在很多以圖片為主的產(chǎn)品如設(shè)計(jì)師靈感庫都采用大圖布局的方式。airbnb同樣采用大圖布局列表向用戶展示符合條件的民宿，我們能發(fā)現(xiàn)預(yù)定酒店時(shí)列表往往是以小圖布局配合更多文字信息的布局方式，因?yàn)榫频攴块g大致相同，沒有更多的風(fēng)格或特色，人們關(guān)注酒店的品牌星級價(jià)格或設(shè)施等。而民宿和酒店不一樣，民宿往往各有特色，以其獨(dú)居風(fēng)格的裝飾來吸引住客，干凈舒適和富有特色的民宿圖片能一下子吸引用戶點(diǎn)擊，通過瀏覽大圖用戶就能了解民宿的大體環(huán)境，而不需要再次點(diǎn)擊查看，能提高用戶瀏覽查找民宿的效率。

二、多圖布局

多圖布局中每行內(nèi)容主要為標(biāo)題 三張圖片，通過對比發(fā)現(xiàn)，大部分的新聞產(chǎn)品中，娛樂新聞都是以這種方式布局的，為什么呢？娛樂新聞中圖片是較為重要的內(nèi)容，也更能吸引用戶的注意，在列表中展示更多的圖片能夠滿足用戶的好奇心，也能提高用戶瀏覽娛樂新聞的效率，通過圖片就能判斷是否為自己感興趣的內(nèi)容。除了娛樂新聞，社會(huì)新聞也采用這種布局方式。同樣也是用圖片來吸引用戶，或通過圖片即可了解大概的新聞內(nèi)容。

擴(kuò)展

大家對多圖布局方式一定非常熟悉了，我們每天都用的微信還有微博也是采用多圖布局的方式，這種方式可以讓用戶短時(shí)間內(nèi)了解所有圖片的大致信息，利于用戶快速瀏覽。很多旅游APP旅游攻略也采用多圖布局的方式，旅游攻略中經(jīng)常用大量的圖片來展示某個(gè)旅游景點(diǎn)，用戶往往更關(guān)注圖片也更容易被好看的旅游圖片所吸引，和朋友圈微博的多圖布局方式稍微有些不同的是，旅游攻略會(huì)選擇一張最重要最吸引用戶的圖片以大圖方式展示，其他的圖片則以小圖方式展示，這種布局方式既能讓用戶看清楚重要圖片的細(xì)節(jié)，也能對攻略的內(nèi)容有個(gè)大概的了解。

三、左圖右文

圖文列表是最常見的一種列表樣式，一般用于更關(guān)注文字信息的科技、財(cái)經(jīng)、時(shí)事政治等新聞，按照用戶的閱讀習(xí)慣，左圖右文會(huì)讓用戶先看到圖片再閱讀標(biāo)題，如果你希望用戶更關(guān)注圖片信息，那么就可以采用左圖右文的樣式。

四、右圖左文

同樣適用于更關(guān)注文字信息的新聞，與左圖右文相比，將圖片的優(yōu)先級降到最低，讓用戶更關(guān)注新聞內(nèi)容本身。除此之外，圖片的大小及標(biāo)題承載的文字?jǐn)?shù)量也值得思考，下面的例子中，36氪的圖片最小，給了標(biāo)題更多的空間并且將標(biāo)題加粗。36氪主要以科技新聞為主，對于這類新聞，用戶更關(guān)注標(biāo)題和新聞內(nèi)容，完整的標(biāo)題可以提高用戶的瀏覽效率，通過標(biāo)題就判斷是否為自己感興趣的內(nèi)容。

擴(kuò)展

大多數(shù)以文字信息為主的內(nèi)容都是以左圖右文/右圖左文的信息展示。左圖右文的樣式看起來更加整齊，且用戶瀏覽界面的順序一般呈F型或Z型，左圖右文能讓用戶更加流暢的瀏覽列表，而右圖左文使文字信息和圖片信息分離開，用戶瀏覽列表時(shí)相對來說沒有那么流暢。但如果用戶更關(guān)注文字信息而不是圖片信息，則以右圖左文的樣式能使瀏覽效率更高。

五、卡片列表

和前兩種樣式大體一致，但是用了卡片來承載內(nèi)容，并且將圖片信息放到最大，用戶在關(guān)注標(biāo)題的同時(shí)，也能清晰地看到圖片信息。目前來看，很少產(chǎn)品會(huì)使用這種布局，我覺得可能是因?yàn)榭ㄆ瑯邮綍?huì)讓整體的分割性更強(qiáng)，降低了閱讀的效率，但是卡片樣式相比前面幾種布局方式更規(guī)整，具體哪一種更好，還需要通過一定的數(shù)據(jù)做支撐。

擴(kuò)展

大部分大圖列表實(shí)際上也是以卡片列表的樣式呈現(xiàn)（看大圖列表擴(kuò)展）而小圖加文字信息列表以卡片樣式呈現(xiàn)的例子并不是很多，我找到兩個(gè)產(chǎn)品案例。第一個(gè)是一個(gè)收集了全世界藝術(shù)展館/展覽信息的APP，你也可以找到所在城市的藝術(shù)展，列表采用小卡片的形式，突出展覽名字，一個(gè)頁面中可以承載大概八個(gè)展覽，提高用戶瀏覽效率。為什么藝術(shù)展覽列表的圖片采用小圖而不是大圖來吸引用戶，我覺得有兩個(gè)原因：1.產(chǎn)品更希望用戶能到現(xiàn)場去看展覽，所以沒有采用大圖呈現(xiàn)更多細(xì)節(jié)，給用戶留下可探索的空間。2.在沒有了解相關(guān)背景前，通過圖片很難了解到是什么展覽，這種情況下文字信息比圖片信息更有效。第二個(gè)產(chǎn)品是好奇心日報(bào)，將列表中的圖片信息都被放到最大，讓圖片呈現(xiàn)更多細(xì)節(jié)，但整體來看，會(huì)覺得”太滿“，增加視覺負(fù)擔(dān)。

總結(jié)

本文一共分析了五種新聞的布局方式，這些布局方式不僅僅運(yùn)用于新聞列表，在以列表形式呈現(xiàn)的界面中我們都能看到。在做列表設(shè)計(jì)時(shí)，我們需要分析列表的內(nèi)容和展示列表的目的，是要吸引用戶關(guān)注還是要提高用戶的閱讀效率，根據(jù)具體的內(nèi)容和目的再選擇合適的布局方式。

總結(jié)一下五種布局方式：

第一種大圖布局，如果希望重點(diǎn)突出的新聞，或者希望引起用戶的注意，可以使用大圖布局方式。

第二種多圖布局，如果是娛樂新聞、社會(huì)新聞等以圖片為主的內(nèi)容可以使用多圖布局方式，通過圖片可以引起用戶注意，并可以通過圖片了解新聞的大致內(nèi)容。

第三種左圖右文，如果是以文字信息為主的新聞如科技新聞、財(cái)經(jīng)新聞等，同時(shí)希望用戶關(guān)注圖片信息的時(shí)候，可采用左圖右文的布局方式。

第四種右圖左文，當(dāng)更關(guān)注文字信息的新聞可采用右圖左文的布局方式，標(biāo)題的優(yōu)先級最高，盡量保持標(biāo)題的完整性。第五種卡片列表，如果標(biāo)題和圖片同等重要的時(shí)候，可采用這種布局方式，將圖片最大化。

作者：Joley，公眾號ID：Microinteraction