列表的布局常見于新聞?lì)怉pp。其布局形式的特點(diǎn)在于能夠在較小的屏幕中顯示多條信息，用戶通過上下滑動(dòng)的手勢(shì)能獲得大量的信息反饋。而列表也是一種非常容易理解的展示形式。關(guān)于App中列表、卡片和雙欄卡片的布局你思考了多少？

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

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

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

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

布局背后的行為邏輯

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

我們回歸到用戶需求和行為模式來思考這個(gè)問題。

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

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

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

基于這樣的行為模式，要求布局形式：

1. 在一屏能內(nèi)能展示足夠多的內(nèi)容；
2. 能讓用戶方便地對(duì)比內(nèi)容。

同時(shí)，對(duì)內(nèi)容本身也有要求：

1. 內(nèi)容本身是能被快速理解。
2. 內(nèi)容本身具有可比性。

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

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

由以上場(chǎng)景可以說明，用戶在使用這款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)該如下：

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

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

總結(jié)

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

• 當(dāng)用戶的行為模式更傾向于高效，迅速地篩選信息，列表是一個(gè)非常好的選擇。
• 當(dāng)用戶的行為需要反復(fù)對(duì)比信息，或者需要在單屏內(nèi)獲得更多信息，可以嘗試用雙欄卡片式布局。
• 當(dāng)用戶不僅僅需要消費(fèi)所展示的內(nèi)容，更愿意地對(duì)其內(nèi)容進(jìn)行互動(dòng)，那么卡片式的布局可以優(yōu)先考慮。

最后反思

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

1. 各布局形式視覺流特點(diǎn)（列表是自上而下的”I”型視覺流，雙欄卡片是上下左右跳動(dòng)的”z”型視覺流）
2. 信息傳達(dá)的優(yōu)先性（列表更適用于文字傳達(dá)，卡片式更適合圖片傳達(dá)）
3. 布局的可延展性
4. 對(duì)品牌的塑造性

等等

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

作者：genrry

來源：簡(jiǎn)書

文章鏈接：http://www.jianshu.com/p/d3fb1ec271bb

版權(quán)：人人都是產(chǎn)品經(jīng)理遵循行業(yè)規(guī)范，任何轉(zhuǎn)載的稿件都會(huì)明確標(biāo)注作者和來源，若標(biāo)注有誤，請(qǐng)聯(lián)系主編QQ：419297645