當前位置:吉日网官网 - 紀念幣收藏 - 對App中列表、卡片和雙欄卡片布局的思考

對App中列表、卡片和雙欄卡片布局的思考

每種布局形式的特征

列表的布局在新聞應用中很常見。它的布局特點是可以在壹個小屏幕上顯示多條信息,用戶通過上下滑動可以獲得大量的信息反饋。而且列表也是壹種非常容易理解的展示形式。

卡片布局常見於微博、臉書等社交app,也以非常靈活的形式出現在其他不同的app中。它的特點是每張卡片的內容和形式可以相互獨立,互不幹擾,所以不同的卡片可以出現在同壹個頁面上承載不同的內容。因為每張卡片都是獨立存在的,所以它的信息可以比列表更豐富,用戶可以評論它,喜歡它,省去了跳轉到詳情頁的步驟。但是由於卡片的信息量很大,在壹個小屏幕上無法顯示多張卡片,壹個屏幕的卡片數量也很少超過三張。

雙欄卡片的布局形式在以圖片信息為主的app中較為常見。比如Pinterest,壹些商場的商品展示頁面。這種形式類似於卡片,但它可以在壹個屏幕中顯示更多的內容,至少4張卡片。同時,由於左右兩欄分開顯示,用戶可以更方便地比較左右兩欄卡片的內容。

布局背後的行為邏輯

但是,為什麽新聞類用列表,社會類用卡片,圖片用雙欄卡片呢?

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

當我們瀏覽新聞時,我們的需求是什麽?大多數人的需求是:壹方面想了解壹些最近發生的事情,這是量的需求;另壹方面,如果妳想知道這個東西是什麽,那就是深度閱讀的需求。但是,對數量的需求往往是第壹位的,深度閱讀是第二位的。基於這種需求,用戶在瀏覽新聞時的行為模式如下:快速海量瀏覽→篩選→判斷→快速海量瀏覽,如下:

從上圖可以看出,用戶在瀏覽新聞時,需要快速處理大量信息,在極短的時間內高頻率地做出決策。所以效率極其重要,壹屏只顯示壹兩條信息顯然是不合適的。此外,在展示形式上要有高度的壹致性,並嚴格控制展示內容的信息量,也是非常重要的。高度的壹致性可以讓用戶快速理解呈現形式,從而選擇適合自己的內容,便於篩選和判斷。控制信息量可以減少信息幹擾,從而提高效率。由於這樣的限制,列表成了新聞展示的合理形式。

同樣,在使用Pinterest時,我們到底想要什麽?就是找到最合適的圖片。最適合的,會有唯壹性,會有比較,取舍,選擇。這也意味著用戶不是按順序壹個壹個瀏覽,而是反復比較瀏覽,如下圖:

基於這種行為模式,需要布局形式:1。壹屏可以顯示足夠的內容;2.它允許用戶方便地比較內容。同時對內容本身也有要求:1。內容本身也能很快理解。2.內容本身就有可比性。

以廚房故事為例,這是壹款學習西餐的App,和Pinterest沒有任何關系,但是使用了相同的布局。除了視覺美感等感性解釋,我們還可以從其他角度去理解。

假設這樣壹個場景,該吃飯了,今天想吃西餐,於是打開日常廚房,選了壹個今晚的晚餐。因為,可能這周我就要做這樣的西餐了,所以這個選擇壹定要精挑細選,不僅好吃,而且價值高,操作簡單。日常廚房的第壹屏,展示了各種成品的圖片,很不錯。我可以通過比較顏值來選擇我想要的。還有每道菜的收藏號,大概能反映出這道菜的綜合評價,也幫助我降低了選擇的難度。很快,幾經比較,我最終選擇了肉醬意大利面作為今晚的晚餐。...

從上面的場景可以看出,用戶在使用這個App的時候,因為只能選擇壹次,所以不得不對內容進行比較。同時,通俗易懂的圖片和數據有助於比較的行為。所以雙柱卡的布局是壹種很好的承載模式。

同理,我們在畫微博的時候,我們的需求是什麽?和朋友或者關註的人互動更方便。互動的前提是全面閱讀內容,而不是快速跳過。所以瀏覽好友動態時的行為模型應該是這樣的:

上圖顯示,顯示的形式至少要滿足兩個條件。第壹,它至少需要承載兩個緯度的信息,壹個是用戶能看懂的內容信息,壹個是用戶能互動的運營信息;第二,用戶可以操作當前頁面的內容,甚至可以完成當前頁面的操作。但是,這並不能完全說明卡片的布局是最合理的。這就需要綜合考慮微博內容的可理解性和信息的復雜性,卡片布局是較好的解決方案。

由於卡片設計形式非常多樣和靈活,適用範圍也非常廣泛。而我在這裏就不深入討論了。

摘要

結合每種布局形式的特點及其背後的行為邏輯,可以得出以下結論:

當用戶的行為模式傾向於高效快速地過濾信息時,列表是非常好的選擇。

當用戶的行為需要反復對比信息,或者需要在單個屏幕中獲取更多信息時,可以嘗試使用雙欄卡片布局。

當用戶不僅需要消費顯示的內容,還希望與其內容進行交互時,那麽卡片布局可以優先考慮。

最後反思

本文只是通過壹個版面形式的特點及其背後的行為邏輯來思考版面的適用範圍。顯然,這種單維度的思維在實際案例中是不合適的。除了意外的用戶行為模式,需要考慮的因素可能包括:

1.各種布局形式下視覺流的特點(列表為自上而下的“I”型視覺流,雙欄卡片為上下跳動的“Z”型視覺流)

2.信息傳輸的優先級(列表更適合文本傳輸,卡片更適合圖片傳輸)

3.布局的可擴展性

4.塑造品牌

等待

對於每壹個場景,每壹個App,每壹個頁面,每壹個考慮因素所占的比重也是不壹樣的,需要具體問題具體分析。但無論如何,設計的結果可以千變萬化,但設計背後的邏輯必須有跡可循。

  • 上一篇:古代“贈人玫瑰,手有余香”的例子
  • 下一篇:如何清洗舊銅錢
  • copyright 2024吉日网官网