App中列表、卡片和雙欄卡片的布局思考 | 人人都是產品經理

列表的布局常見於新聞類App。其布局形式的特點在於能夠在較小的屏幕中顯示多條信息，用戶通過上下滑動的手勢能獲得大量的信息反饋。而列表也是一種非常容易理解的展示形式。關於App中列表、卡片和雙欄卡片的布局你思考了多少？

各布局形式的特點

列表的布局常見於新聞類App。其布局形式的特點在於能夠在較小的屏幕中顯示多條信息，用戶通過上下滑動的手勢能獲得大量的信息反饋。而列表也是一種非常容易理解的展示形式。

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

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

然而，為什麼新聞類的多採用列表，社交類多採用卡片，圖片類多採用雙欄卡片？

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

當我們在瀏覽新聞的時候，我們的需求是什麼？大部分人的需求都是，一方面想要知道最近發生的一些事情，這是量的需求；另一方面，想要深入了解這一事情是什麼，這是深度閱讀的需求。而量的需求往往具有先行性，深度閱讀是在其後的。基於這樣的需求，用戶在瀏覽新聞時候的行為模式大概如下：快速大量瀏覽→篩選→判斷→快速大量瀏覽，如下：

由上圖看出，用戶在瀏覽新聞時，需要快速地處理大量的信息，而且高頻地在極短時間內進行決策。因此，高效性就極為重要，假如在一屏中只顯示一兩條信息顯然是不合適的。除此之外，展示形式的高度一致性和對展示內容的信息量進行嚴格控制也及其重要。高度一致性可以讓用戶快速理解展示形式，從而能自主選擇自己想要的內容，便於篩選和判斷。控制信息量能減少信息干擾，從而提高效率。由於這樣的限制，列表就成為了新聞展示的合理形式。

同理，在用Pinterest時，我們究竟是想要什麼？是找到最適合的圖片。最適合，就會存在唯一性，就會有對比，取捨，選擇。這也意味著，用戶不是一張張按順序瀏覽，而是反覆地對比瀏覽，如下圖：

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

1. 在一屏能內能展示足夠多的內容；
2. 能讓用戶方便地對比內容。

同時，對內容本身也有要求：

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

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

假設這樣一個場景，飯點到了，今天我想吃吃西餐，所以打開了每日廚房，挑其中一款來作為今晚的晚餐。因為，可能我這周就做這麼一頓西餐，所以這次的選擇必須精挑細選，既要好吃，還要顏值高，更要操作簡單。在每日廚房的首屏中展示了各種成品的圖片，這很好，我可以通過比較顏值來挑選我想要的。還有每款菜的收藏數，這大概能體現這款菜的綜合評價，這也幫助我降低了選擇的難度。很快，經過幾番的對比，我最終選擇了肉醬意麵作為今晚的晚餐...

由以上場景可以說明，用戶在使用這款App時，由於只能選擇一次，所以他不得不對比內容。同時，易於理解的圖片和數據促成了對比這一行為。所以，雙欄卡片這樣的布局是一個很好的承載方式。

以同樣的思路，當我們在刷微博的時候，我們的需求又是什麼？更加便捷地跟好友或者是關注的人進行互動。而進行互動的前提是，要對內容進行理解性地閱讀，而不是快速地跳讀。所以在瀏覽好友動態時的行為模型應該如下：

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

由於卡片式的設計形式非常多樣和靈活，適用範圍也極為廣泛。且不在這裡作深入的探討。

總結

結合各布局形式的特點和背後的行為邏輯，我們可以得出以下結論：

最後反思

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

1. 各布局形式視覺流特點（列表是自上而下的"I"型視覺流，雙欄卡片是上下左右跳動的"z"型視覺流）
2. 信息傳達的優先性（列表更適用於文字傳達，卡片式更適合圖片傳達）
3. 布局的可延展性
4. 對品牌的塑造性

等等

而針對每個場景，每個App，每個頁面，每個考慮因素的比重也是不一樣的，這需要具體問題問題具體分析。但無論怎樣，設計的結果可以千變萬化，但設計背後的邏輯必須是可以追本溯源的。

作者：genrry

來源：簡書

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

版權：人人都是產品經理遵循行業規範，任何轉載的稿件都會明確標註作者和來源，若標註有誤，請聯繫主編QQ：419297645