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

5 評論 24753 瀏覽 136 收藏 10 分鐘

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

各布局形式的特點

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

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

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

布局背后的行為邏輯

然而,為什么新聞類的多采用列表,社交類多采用卡片,圖片類多采用雙欄卡片?

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

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

APP1

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

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

APP2

基于這樣的行為模式,要求布局形式:

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

同時,對內(nèi)容本身也有要求:

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

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

APP3

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

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

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

APP4

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

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

總結(jié)

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

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

最后反思

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

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

等等

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

 

作者:genrry

來源:簡書

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 看了這個設(shè)計邏輯,對微信朋友圈的設(shè)計有那么一點理解了。

    來自廣東 回復(fù)
  2. 照抄別人的有意思嗎

    來自廣東 回復(fù)
  3. 這方面,的確有困惑,釋疑有幫助

    來自本機地址 回復(fù)
  4. 贊一個,產(chǎn)品背后的邏輯 ??

    來自本機地址 回復(fù)
  5. 作為一個UI設(shè)計師~ 以前思考的太過片面了,一直停留在怎樣設(shè)計讓界面看起來更好看更簡潔??催^這篇文章有了一些領(lǐng)悟,不同類型的app應(yīng)用,不同的使用場景,不同的用戶群,這里面更重要的是用戶心理分析,這個對于界面設(shè)計更為重要。一個好的APP不是界面設(shè)計最美觀的,但一定是最貼合用戶需求滿足用戶心理的設(shè)計。不僅僅能用,易用,更好用~ :mrgreen: :mrgreen:

    來自本機地址 回復(fù)