各布局形式的特點(diǎn)

列表的布局常見(jiàn)于新聞?lì)怉pp。其布局形式的特點(diǎn)在于能夠在較小的屏幕中顯示多條信息，用戶(hù)通過(guò)上下滑動(dòng)的手勢(shì)能獲得大量的信息反饋。而列表也是一種非常容易理解的展示形式。

卡片式布局常見(jiàn)于微博、Facebook等社交類(lèi)App，也出現(xiàn)于其他不同類(lèi)的App中，形式非常靈活。其特點(diǎn)在于，每張卡片的內(nèi)容和形式都可以相互獨(dú)立，互不干擾，所以可以在同一個(gè)頁(yè)面中出現(xiàn)不同的卡片承載不同的內(nèi)容。而由于每張卡片都是獨(dú)立存在的，其信息量可以相對(duì)列表更加豐富，而且可以讓用戶(hù)對(duì)其進(jìn)行評(píng)論、點(diǎn)贊等等操作、省去了跳轉(zhuǎn)到詳情頁(yè)面的步驟。但由于卡片的信息很多，在小屏幕上并不能顯示多個(gè)卡片，一屏內(nèi)卡片數(shù)很少會(huì)超過(guò)3個(gè)。

而雙欄卡片的布局形式，比較常見(jiàn)于以圖片信息為主導(dǎo)的App。例如Pinterest，一些商城的商品陳列頁(yè)面。這種形式與卡片式類(lèi)似，但它能在一屏里顯示更多的內(nèi)容，至少4張卡片。同時(shí)，由于分開(kāi)左右兩欄的顯示，用戶(hù)可以更加方便地對(duì)比左右兩欄卡片的內(nèi)容。

布局背后的行為邏輯

然而，為什么新聞?lì)惖亩嗖捎昧斜?，社交?lèi)多采用卡片，圖片類(lèi)多采用雙欄卡片？

我們回歸到用戶(hù)需求和行為模式來(lái)思考這個(gè)問(wèn)題。

當(dāng)我們?cè)跒g覽新聞的時(shí)候，我們的需求是什么？大部分人的需求都是，一方面想要知道最近發(fā)生的一些事情，這是量的需求；另一方面，想要深入了解這一事情是什么，這是深度閱讀的需求。而量的需求往往具有先行性，深度閱讀是在其后的。基于這樣的需求，用戶(hù)在瀏覽新聞時(shí)候的行為模式大概如下：快速大量瀏覽→篩選→判斷→快速大量瀏覽，如下：

由上圖看出，用戶(hù)在瀏覽新聞時(shí)，需要快速地處理大量的信息，而且高頻地在極短時(shí)間內(nèi)進(jìn)行決策。因此，高效性就極為重要，假如在一屏中只顯示一兩條信息顯然是不合適的。除此之外，展示形式的高度一致性和對(duì)展示內(nèi)容的信息量進(jìn)行嚴(yán)格控制也及其重要。高度一致性可以讓用戶(hù)快速理解展示形式，從而能自主選擇自己想要的內(nèi)容，便于篩選和判斷?？刂菩畔⒘磕軠p少信息干擾，從而提高效率。由于這樣的限制，列表就成為了新聞?wù)故镜暮侠硇问健?/span>

同理，在用Pinterest時(shí)，我們究竟是想要什么？是找到最適合的圖片。最適合，就會(huì)存在唯一性，就會(huì)有對(duì)比，取舍，選擇。這也意味著，用戶(hù)不是一張張按順序?yàn)g覽，而是反復(fù)地對(duì)比瀏覽，如下圖：

基于這樣的行為模式，要求布局形式：1.在一屏能內(nèi)能展示足夠多的內(nèi)容；2.能讓用戶(hù)方便地對(duì)比內(nèi)容。同時(shí)，對(duì)內(nèi)容本身也有要求：1.內(nèi)容本身是能被快速理解。2.內(nèi)容本身具有可比性。

以廚房故事為例，這是一個(gè)款學(xué)習(xí)西餐的App，跟Pinterest毫無(wú)關(guān)聯(lián)，卻用著同樣的布局。除了視覺(jué)美觀這樣感性的解釋之外，我們可以從別的角度來(lái)理解。

假設(shè)這樣一個(gè)場(chǎng)景，飯點(diǎn)到了，今天我想吃吃西餐，所以打開(kāi)了每日廚房，挑其中一款來(lái)作為今晚的晚餐。因?yàn)?，可能我這周就做這么一頓西餐，所以這次的選擇必須精挑細(xì)選，既要好吃，還要顏值高，更要操作簡(jiǎn)單。在每日廚房的首屏中展示了各種成品的圖片，這很好，我可以通過(guò)比較顏值來(lái)挑選我想要的。還有每款菜的收藏?cái)?shù)，這大概能體現(xiàn)這款菜的綜合評(píng)價(jià)，這也幫助我降低了選擇的難度。很快，經(jīng)過(guò)幾番的對(duì)比，我最終選擇了肉醬意面作為今晚的晚餐...

由以上場(chǎng)景可以說(shuō)明，用戶(hù)在使用這款A(yù)pp時(shí)，由于只能選擇一次，所以他不得不對(duì)比內(nèi)容。同時(shí)，易于理解的圖片和數(shù)據(jù)促成了對(duì)比這一行為。所以，雙欄卡片這樣的布局是一個(gè)很好的承載方式。

以同樣的思路，當(dāng)我們?cè)谒⑽⒉┑臅r(shí)候，我們的需求又是什么？更加便捷地跟好友或者是關(guān)注的人進(jìn)行互動(dòng)。而進(jìn)行互動(dòng)的前提是，要對(duì)內(nèi)容進(jìn)行理解性地閱讀，而不是快速地跳讀。所以在瀏覽好友動(dòng)態(tài)時(shí)的行為模型應(yīng)該如下：

上圖說(shuō)明，在展示形式至少要滿(mǎn)足2個(gè)條件。第一，需要承載致少兩個(gè)緯度的信息，一是讓用戶(hù)理解的內(nèi)容信息，二是讓用戶(hù)互動(dòng)的操作信息；第二，在當(dāng)前頁(yè)用戶(hù)可以對(duì)內(nèi)容進(jìn)行操作，甚至能在當(dāng)前頁(yè)把操作完成。然而，這還不能完全說(shuō)明卡片式的布局是最合理的。這需要把微博內(nèi)容的易理解性，信息的復(fù)雜度等因素綜合考慮，卡片式的布局是一個(gè)比較好的解決方案。

由于卡片式的設(shè)計(jì)形式非常多樣和靈活，適用范圍也極為廣泛。且不在這里作深入的探討。

總結(jié)

結(jié)合各布局形式的特點(diǎn)和背后的行為邏輯，我們可以得出以下結(jié)論:

當(dāng)用戶(hù)的行為模式更傾向于高效，迅速地篩選信息，列表是一個(gè)非常好的選擇。

當(dāng)用戶(hù)的行為需要反復(fù)對(duì)比信息，或者需要在單屏內(nèi)獲得更多信息，可以嘗試用雙欄卡片式布局。

當(dāng)用戶(hù)不僅僅需要消費(fèi)所展示的內(nèi)容，更愿意地對(duì)其內(nèi)容進(jìn)行互動(dòng)，那么卡片式的布局可以?xún)?yōu)先考慮。

最后反思

本文僅僅是通過(guò)個(gè)布局形式的特點(diǎn)和背后的行為邏輯去思考布局的適用范圍，顯然，這種單一維度的思考，在實(shí)際案例中是不合適的。除了用戶(hù)的行為模式意外，需要考慮到的因素可以有：

1.各布局形式視覺(jué)流特點(diǎn)（列表是自上而下的"I"型視覺(jué)流，雙欄卡片是上下左右跳動(dòng)的"z"型視覺(jué)流）

2.信息傳達(dá)的優(yōu)先性（列表更適用于文字傳達(dá)，卡片式更適合圖片傳達(dá)）

3.布局的可延展性

4.對(duì)品牌的塑造性

5.等等

而針對(duì)每個(gè)場(chǎng)景，每個(gè)App，每個(gè)頁(yè)面，每個(gè)考慮因素的比重也是不一樣的，這需要具體問(wèn)題問(wèn)題具體分析。但無(wú)論怎樣，設(shè)計(jì)的結(jié)果可以千變?nèi)f化，但設(shè)計(jì)背后的邏輯必須是可以追本溯源的。

分享干貨我們是認(rèn)真的，更多干貨盡在愛(ài)盈利！