列表流、卡片流、瀑布流、Feed流的區(qū)別
發(fā)布時(shí)間:2021-12-15 08:56 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: hh71427-2 閱讀: 4186

可以講解下表流、瀑布流、卡片流、Feed 流幾個(gè)詞的含義與區(qū)分么?這幾個(gè)詞看到的頻率很高,但對(duì)其認(rèn)識(shí)有點(diǎn)模糊不清。

列表流、卡片流、瀑布流、Feed流,你能分清嗎?

這個(gè)問(wèn)題比較典型,相信很多小伙伴都有過(guò)類(lèi)似經(jīng)歷。這些概念放在一起看,肯定容易混亂,關(guān)鍵是理清它們之間的區(qū)別和聯(lián)系,才能更好地在設(shè)計(jì)中使用。

先把這四個(gè)概念分為兩組,列表流和卡片流為一組,瀑布流和 feed 流為一組。

接下來(lái)咱們就展開(kāi)說(shuō)說(shuō)為什么要這樣分組,分組的依據(jù)、目的。如果你對(duì)這些概念也有點(diǎn)模糊不清,就一起來(lái)看看吧~


列表流與卡片流


1. 列表流

說(shuō)到列表,首先想到的就是一行一行的內(nèi)容排列形式,列表流其實(shí)就是一種以文字為主導(dǎo)的布局形式,內(nèi)容以列表的形式表現(xiàn)出來(lái),最典型的例子就是手機(jī)里的信息,進(jìn)入之后會(huì)看到一行行的信息列表。

列表流、卡片流、瀑布流、Feed流,你能分清嗎?

除了信息這種以文字為主的布局形式,列表流常見(jiàn)的形式還包括圖文并排的布局,圖文的位置可以很靈活,左圖右文、左文右圖、上文下圖都是常見(jiàn)的布局方式。

列表流、卡片流、瀑布流、Feed流,你能分清嗎?

列表流多用在新聞、信息、資訊類(lèi)產(chǎn)品中,以文字內(nèi)容為主導(dǎo)的布局形式既能快速突出重點(diǎn),又能讓用戶(hù)瀏覽起來(lái)很方便。

列表流、卡片流、瀑布流、Feed流,你能分清嗎?

除了使用單一的布局方式,多種布局形式的混合使用變得越來(lái)越流行,混合使用能夠打破單一的布局,讓頁(yè)面變得有節(jié)奏,通過(guò)布局的穿插變化讓頁(yè)面和內(nèi)容更加多元化。

2. 卡片流

無(wú)論在 APP 上還是網(wǎng)頁(yè)上,卡片流都是最常用的布局形式。卡片式設(shè)計(jì)采用圖像與文字相結(jié)合的方式將信息傳達(dá)給受眾,在有限的矩形空間中建立了無(wú)限的可能性。

對(duì)比列表流來(lái)看,卡片流相當(dāng)于把圖片尺寸放大,內(nèi)容圖文結(jié)合以卡片的形式展現(xiàn)出來(lái)。

列表流、卡片流、瀑布流、Feed流,你能分清嗎?

公眾號(hào)就是一個(gè)很標(biāo)準(zhǔn)的卡片式設(shè)計(jì),以卡片流的形式來(lái)推送內(nèi)容,一行只有一個(gè)卡片,并且每個(gè)卡片尺寸都是固定大小。

列表流、卡片流、瀑布流、Feed流,你能分清嗎?

除了標(biāo)準(zhǔn)的單列卡片流,雙列卡片流在產(chǎn)品中用的更多,每個(gè)卡片在寬度上相等,但高度上有可能不一樣,而且卡片流中每個(gè)卡片不一定要嚴(yán)格地水平對(duì)齊。

列表流、卡片流、瀑布流、Feed流,你能分清嗎?

卡片流除了可以承載以圖片為主的內(nèi)容,層級(jí)結(jié)構(gòu)清晰的文字內(nèi)容也可以靈活使用卡片式設(shè)計(jì),簡(jiǎn)單清晰地展示信息。

小總結(jié):通過(guò)前面的介紹能夠看出來(lái),列表流、卡片流都是設(shè)計(jì)形式的變化。

比如列表設(shè)計(jì)的寬一點(diǎn)、卡片設(shè)計(jì)的大一點(diǎn)或小一點(diǎn)等等,直接呈現(xiàn)出直觀的視覺(jué)效果,帶給我們最直觀的視覺(jué)感受。而且兩者并不是對(duì)立存在的,而是可以相互聯(lián)系、相互搭配使用,比如一個(gè)頁(yè)面上可以結(jié)合使用多種形式,在使用列表流的時(shí)候我可以穿插使用一些卡片流,兩者的混合使用往往能產(chǎn)生 1+1>2 的效果。


瀑布流與 Feed 流

為什么將這兩個(gè)概念放一塊說(shuō)呢?大家可以根據(jù)上面講到的列表流和卡片流的特點(diǎn),一起來(lái)對(duì)比思考下。

1. 瀑布流

瀑布流是指在滑動(dòng)頁(yè)面的時(shí)候,內(nèi)容會(huì)源源不斷地刷新出來(lái),感覺(jué)一直滑不到底,Pinterest 大家應(yīng)該都很熟悉,有網(wǎng)友提到 Pinterest 是最早使用了瀑布流設(shè)計(jì)。

列表流、卡片流、瀑布流、Feed流,你能分清嗎?

瀑布流代表了內(nèi)容呈現(xiàn)的方式,呈現(xiàn)的內(nèi)容可以是源源不斷的列表,也可以是源源不斷的卡片,看到這里,大家是不是有點(diǎn)明白瀑布流跟列表流、卡片流的根本區(qū)別了。

另外需要注意的一點(diǎn)是,瀑布流只負(fù)責(zé)展現(xiàn)內(nèi)容,并不會(huì)對(duì)內(nèi)容進(jìn)行干預(yù),會(huì)把內(nèi)容無(wú)差別地展示給用戶(hù)。

列表流、卡片流、瀑布流、Feed流,你能分清嗎?

在 500px 網(wǎng)站的圖片中,無(wú)論用戶(hù)是否登錄網(wǎng)站、有什么喜好,網(wǎng)站都不會(huì)干預(yù)內(nèi)容的呈現(xiàn),所有的用戶(hù)都會(huì)看到相同的圖片內(nèi)容。

2. Feed 流

和瀑布流不同,F(xiàn)eed 流在呈現(xiàn)內(nèi)容的時(shí)候,會(huì)對(duì)內(nèi)容進(jìn)行干預(yù),會(huì)根據(jù)用戶(hù)的喜好來(lái)更新和推薦內(nèi)容。在算法加持下,可以說(shuō)所有人都是透明的,產(chǎn)品會(huì)記住每一位用戶(hù)的喜好,為用戶(hù)匹配相應(yīng)的內(nèi)容。所以 Feed 流經(jīng)常跟推薦這個(gè)詞一起使用,組成 Feed 流推薦系統(tǒng),會(huì)通過(guò)數(shù)據(jù)算法為不同用戶(hù)推薦他們感興趣的內(nèi)容,吸引用戶(hù)長(zhǎng)時(shí)間的留存。

列表流、卡片流、瀑布流、Feed流,你能分清嗎?

淘寶、小紅書(shū)這類(lèi)產(chǎn)品都是依托算法推薦,根據(jù)用戶(hù)畫(huà)像、用戶(hù)興趣推送特定的內(nèi)容,以達(dá)到千人千面的效果。這種推薦模式現(xiàn)在已經(jīng)成為主流,基本上大多數(shù)的頭部產(chǎn)品都逃不過(guò)這樣的設(shè)計(jì)。

小總結(jié):把瀑布流和 Feed 流放一起對(duì)比能發(fā)現(xiàn),瀑布流側(cè)重頁(yè)面和信息布局,自上而下滑動(dòng)的過(guò)程中會(huì)不斷加載頁(yè)面內(nèi)容,呈現(xiàn)的內(nèi)容并不會(huì)針對(duì)不同的用戶(hù)做出調(diào)整。

Feed 流則側(cè)重于內(nèi)容分發(fā),會(huì)依據(jù)用戶(hù)的訂閱和習(xí)慣推送不同的內(nèi)容。


最后


通過(guò),再多說(shuō)幾句我的一些想法和思考。很多時(shí)候我們都會(huì)遇到概念、問(wèn)題,模糊不清或者容易搞混的情況,尤其是多個(gè)看起來(lái)相似的概念、問(wèn)題碰在一起。

為什么說(shuō)看起來(lái)呢,因?yàn)槲覀兂36际潜贿@種看起來(lái)相似搞混了,比較兩個(gè)看起來(lái)相似但實(shí)際意義卻完全不同的概念或問(wèn)題,只會(huì)造成越看越亂的情況。所以最根本的做法是抓住內(nèi)核,去探究問(wèn)題或概念的本質(zhì),別被表面事物蒙蔽了思考。

UI設(shè)計(jì)之Figma系列教程
我要自學(xué)網(wǎng)商城 ¥50 元
進(jìn)入購(gòu)買(mǎi)
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類(lèi)選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫(huà) 程序開(kāi)發(fā) 網(wǎng)頁(yè)設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC