當前位置:編程學習大全網 - 源碼下載 - 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.對品牌的塑造性

5.等等

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

  • 上一篇:各種競猜的小問題 智力的 趣味的都能提 要加油!我會加懸賞分的哦!!!!!!!!!
  • 下一篇:怎麽註冊網址域名怎麽註冊網址域名賬號
  • copyright 2024編程學習大全網