2021-9-1 資深UI設(shè)計者
編輯導(dǎo)語：在當(dāng)今內(nèi)容為王的時代，傳統(tǒng)的信息流無法承載日益豐富的產(chǎn)品內(nèi)容，一種個性化的內(nèi)容推薦方式-feed流逐漸孕育而生。本篇文章中作者分析了feed流的組成元素，以及常見的feed流樣式。推薦對feed流感興趣的朋友們閱讀。
在這個內(nèi)容為王的時代，各個類型的產(chǎn)品都開始圍繞著自己所處的賽道營造豐富的信息流，傳統(tǒng)的信息流不再能承載當(dāng)下豐富多樣的內(nèi)容，信息流也不再單純屬于信息類以及文娛類產(chǎn)品，許多金融類產(chǎn)品甚至是工具類產(chǎn)品都開始有了社區(qū)，不同類型的內(nèi)容開始進(jìn)入用戶的視野。
因此傳統(tǒng)的信息流無法承載日益豐富的產(chǎn)品內(nèi)容，逐漸一種個性化的內(nèi)容推薦方式-feed流逐漸孕育而生，其樣式豐富，其中包括大卡流、雙列流、沉浸流、動態(tài)流、文本流、動態(tài)流、櫥窗流…..筆者將在本文中分析feed流的組成部分，以及使用場景和設(shè)計要點(diǎn)。
筆者調(diào)研了不同類型的feed流，發(fā)現(xiàn)feed流主要由以下幾個部分組成。如下圖：
筆者為大家挑選了幾個比較常見的元素為大家進(jìn)行分析。
在大多出產(chǎn)品的feed流中，占最大面積的就是圖片或視頻。相較于文字，圖片更能夠激發(fā)用戶點(diǎn)擊的欲望，在帶有社區(qū)屬性的產(chǎn)品中，設(shè)計師還需要考慮如何適配橫屏以及豎屏封面。
其次是如果該位置出現(xiàn)的是視頻。在常見的視頻產(chǎn)品中，當(dāng)系統(tǒng)識別出該內(nèi)容處于用戶界面的中間區(qū)域，則會自動進(jìn)行預(yù)告播放。在1-2秒的時間內(nèi)，用戶能夠快速瀏覽視頻中最精彩的部分。在展現(xiàn)方式上通常使用帶有圓角的距形進(jìn)行展示，圓角一般設(shè)置為：8、10、12、14、16、20PX。
在feed的設(shè)計中，標(biāo)題是最不可缺少的部分，在字體的設(shè)計上，大多數(shù)采用黑色字體。在排布方式上在一行至兩行，如出現(xiàn)標(biāo)題字?jǐn)?shù)過多，可以用「 … 」的方式進(jìn)行呈現(xiàn)。其次需要限制產(chǎn)品的創(chuàng)作者以及運(yùn)營在配置標(biāo)題時，注意文案應(yīng)該簡明扼要，不要過于累贅。
該區(qū)域可以叫做文案區(qū)域或二級標(biāo)題區(qū)域，在該區(qū)域的設(shè)計中，字體顏色建議大多數(shù)采用灰色進(jìn)行展示。在文案的編寫上可以加入更帶有引導(dǎo)性的詞匯用于引導(dǎo)用戶點(diǎn)擊。
標(biāo)簽的出現(xiàn)目的主要有兩個方面，第一個方面是幫助用戶能夠快速的區(qū)分內(nèi)容的種類如：預(yù)告、獨(dú)播、直播、精選、推薦等。用戶可以在眾多feed流中通過快速查看標(biāo)簽進(jìn)行篩選，從而快速找到自己想看的內(nèi)容。
第二個方面主要是幫助產(chǎn)品進(jìn)行更加精準(zhǔn)的流量分發(fā)，產(chǎn)品會根據(jù)用戶的操作習(xí)慣進(jìn)行分群，再根據(jù)用戶興趣給每個群體打上相對應(yīng)標(biāo)簽。而這些標(biāo)簽則是對應(yīng)了不同群體的用戶，因此也就有了淘寶商城中千人千面的推薦形式。
輔助信息主要是為了滿足不同產(chǎn)品的信息呈現(xiàn)，如在視頻平臺中，輔助信息可以承載電影評分、電視劇的集數(shù)、播放量、綜藝的更新日期、點(diǎn)贊數(shù)、評論等，甚至?xí)尤胂嚓P(guān)的快捷操作如靜音。輔助信息在設(shè)計中，不易做的過于突出，需要清晰單個feed的信息層級，挑選必要的信息進(jìn)行展現(xiàn)。
操作區(qū)域的目的是為了產(chǎn)品的算法更加了解用戶的偏好，因為用戶的興趣是會發(fā)生變化的，如果用戶在某段時間突然特別不想看到某些內(nèi)容，就可以通過點(diǎn)擊操作將內(nèi)容進(jìn)行「不喜歡」或「減少相關(guān)內(nèi)容」的操作，這樣也能給予用戶對于feed流一定的自定義。
在交互形式上，點(diǎn)擊操作區(qū)域后，建議采用較為輕量的交互方式，如點(diǎn)擊后出現(xiàn)底部彈窗或氣泡的形式。
僅僅了解了feed的組成部分是不夠的。單個的feed流其實(shí)就像是英語學(xué)習(xí)中的單個單詞一樣，單獨(dú)的去死記硬背某個單詞其實(shí)意義是不大的，feed流的設(shè)計也同樣如此。
我們還需要擁有能夠?qū)⑶懊嫣岬降慕M成元素，拆開和重組的能力，因為不同的產(chǎn)品業(yè)務(wù)屬性不同，所需要給用戶提供的內(nèi)容也就不同。接下來筆者就給大家介紹一下常見的feed流形式。
介紹：文字流多在信息類產(chǎn)品如知乎、百度，或產(chǎn)品的用戶評論區(qū)當(dāng)中。此類樣式可以運(yùn)用在以文字為主的feed流設(shè)計中，并且還可以與動態(tài)流（下文會提到）之間搭配使用。
由于適配度高，可容納更多的操作按鈕，因此可以服務(wù)與以UGC內(nèi)容為主的產(chǎn)品，UGC產(chǎn)品需要強(qiáng)調(diào)用戶之間的互動，需要將互動類快捷操作外露。
如下圖：
使用場景：以文字為主的信息類產(chǎn)品，新聞資訊類產(chǎn)品、評論區(qū)、產(chǎn)品發(fā)現(xiàn)頁/社區(qū)
設(shè)計要點(diǎn)：在文本流的設(shè)計中，需要注意的是區(qū)分信息的優(yōu)先級，其中標(biāo)題可以采用大字號加粗的方式進(jìn)行區(qū)分，正文則可以采用黑色常規(guī)的字體。
操作區(qū)域以及輔助信息可以布置在正文的下方，灰色處理，頭像以及標(biāo)簽可以作為一個整體進(jìn)行布局。在交互上，可以將分享/評論/點(diǎn)贊等按鈕外露，從而降低用戶的互動成本。
介紹：該樣式主要服務(wù)與以圖片/視頻信息為主要內(nèi)容的feed流。以淘寶為例，在淘寶2020年提出“逛淘寶”的理念后，不再一味的追求交易的最短路徑，而是讓用戶在首頁點(diǎn)擊了某件商品之后，進(jìn)入的是一系列同類商品的feed流，而不是商品的詳情頁?？梢钥闯?，大卡流非常適用于圖片/視頻信息的展示。如下圖：
使用場景：以圖片為主的內(nèi)容且需要搭配相關(guān)操作，如評論/進(jìn)入詳情/分享/點(diǎn)贊等。劣勢是單排僅顯示一條feed，所需空間較大，在首頁不適合單獨(dú)使用，需要和其他feed樣式進(jìn)行搭配。
設(shè)計要點(diǎn)：在大卡流的設(shè)計中，由于空間較大，需要注意標(biāo)題和操作區(qū)域的擺放位置，其次是需要把控創(chuàng)作者或合作媒體上傳的圖片質(zhì)量。最重要的是需要考慮適配橫屏和豎屏的封面，由于圖片比例的不同，會涉及到相關(guān)操作交互一致性以及視覺一致性的統(tǒng)一。
介紹：筆者認(rèn)為將雙列流帶到用戶視野的產(chǎn)品非小紅書莫屬，從小紅書發(fā)布之初到現(xiàn)在一直采用雙列流的形式。它的好處是能夠最大限度的將以圖片為主的feed內(nèi)容呈現(xiàn)給用戶。
樣式最初以長卡樣式為主，主要用于適配豎屏圖片，但隨著現(xiàn)階段UGC內(nèi)容的發(fā)展，雙列流也開始適配橫屏封面。如優(yōu)酷的首頁feed，則是采用了雙卡流中的短卡樣式，也不乏將長卡和短卡搭配使用的情況。
使用場景：主要適用于需要以圖片為主的UGC產(chǎn)品，非常適合用于首頁，但不推薦與其他feed樣式結(jié)合使用，容易打破雙列流左右兩則的排布節(jié)奏。對于相關(guān)操作按鈕從數(shù)量上有局限性，不建議外露過多按鈕，可以探索長按吊起更多操作的交互方式。在具體的設(shè)計樣式上，建議參考小紅書，僅將創(chuàng)作者與點(diǎn)贊數(shù)的操作進(jìn)行外露。
設(shè)計要點(diǎn)：在設(shè)計雙列流的過程中需要考慮左右兩列之間以及上下兩行之間的間距，由于內(nèi)容與內(nèi)容之間圖片的高度不同，標(biāo)題字?jǐn)?shù)不同，因此需要制定良好的規(guī)范，從而保證用戶在瀏覽內(nèi)容的過程中保證兩列內(nèi)容之間的節(jié)奏感。其次是控制操作按鈕的個數(shù)，需要根據(jù)產(chǎn)品實(shí)際需求，僅將最總要的操作進(jìn)行外露。
對于沉浸流的使用最具有代表性的是抖音以及快手，隨著各個產(chǎn)品賽道都加入了短視頻以及直播間的模塊，該類樣式幾乎能夠在所有頭部產(chǎn)品中見到。如在淘寶的商品詳情頁以及首頁都加入了直播的模塊，點(diǎn)擊進(jìn)入后可以沉浸的了解電子產(chǎn)品的測評或是服裝的實(shí)際上身效果，從信息傳達(dá)上會比單一的圖片更加多元更具有沉浸感。
使用場景：該類樣式主要適用于短視頻、直播間
設(shè)計要點(diǎn)：由于在不同產(chǎn)品中，短視頻起到作用不同。
比如在淘寶，短視頻的目的是給予用戶更直接的效果展示，讓用戶能夠快速的了解到產(chǎn)品的優(yōu)點(diǎn)，從而下單。
因此短視頻在淘寶詳情頁中的作用就是激勵用戶購買，所以會在左下角加入購買的鏈接。再比如在視頻類產(chǎn)品中，如優(yōu)酷則是提供相關(guān)的電影片段，那么目的就是為了給產(chǎn)品中的電影播放區(qū)導(dǎo)流，因此在設(shè)計過程中也會有相應(yīng)的改變。
在使用沉浸流的過程中，需要結(jié)合實(shí)際項目需求，不能將抖音快手的設(shè)計方式直接照搬到自己的產(chǎn)品中，這樣容易導(dǎo)致產(chǎn)品功能割裂的情況。
其次是需要將功能進(jìn)行分區(qū)展示，如可以將同類的相關(guān)操作聚合放置在固定的區(qū)域，由于沉浸流功能按鈕會非常多，因此對用戶容易造成干擾，容易找不到想要操作的按鈕。
介紹：微博和微信朋友圈是筆者認(rèn)為將動態(tài)流使用的最為廣泛的產(chǎn)品，由于在這兩款產(chǎn)品中，內(nèi)容過于豐富，不僅需要適配橫屏或豎屏的圖片/視頻，還需要考慮適配不同數(shù)量。
并且需要將所有圖片展現(xiàn)給用戶，其中還不乏動圖。因此對于feed的兼容性提出了極高的要求。
使用場景：動態(tài)流可以運(yùn)用在主打UGC的社區(qū)類產(chǎn)品當(dāng)中，以及單個產(chǎn)品中的社區(qū)模塊。
設(shè)計要點(diǎn)：由于發(fā)布內(nèi)容的主題是合作的媒體以及用戶用于記錄個人生活，因此動態(tài)流的優(yōu)勢非常明顯，可以適配不同數(shù)量的圖片以及用戶的自定義標(biāo)簽，因此動態(tài)流很難說是呈現(xiàn)以圖片/視頻為主的內(nèi)容，還是以文字為主的內(nèi)容，需要設(shè)計師與業(yè)務(wù)冊進(jìn)行協(xié)商，找到feed對于產(chǎn)品的定位是什么。
劣勢則是用戶難以抓住單條內(nèi)容中的重點(diǎn)。因此設(shè)計師在設(shè)計的過程中，需要明確制定相關(guān)規(guī)范，靈活適配單數(shù)或雙數(shù)的圖片數(shù)量，從視覺上保證平衡。
介紹：櫥窗流在近兩年越來越多的出現(xiàn)在各大產(chǎn)品中，由于頭部產(chǎn)品都在往超級APP的方向進(jìn)行發(fā)展。
前面筆者給大家介紹的各種feed樣式之間都存在著各自的優(yōu)勢和劣勢，但是依然無法滿足現(xiàn)在日益豐富的產(chǎn)品內(nèi)容，因此櫥窗流誕生了。其樣式可以理解為將不同樣式的feed進(jìn)行排列組合，給予用戶矩陣式的內(nèi)容推薦。
使用場景：多用于產(chǎn)品首頁金剛區(qū)的下方，作為產(chǎn)品中某項功能或服務(wù)的入口進(jìn)行承載，如新品首發(fā)、現(xiàn)實(shí)搶購、正片回顧等。其次是運(yùn)用在某類內(nèi)容的聚合場景下。如將某一類視頻形成一個組合的片單，或者是將某一類書籍形成書單，但是由于內(nèi)容過多，封面難定的問題，此時可以采用櫥窗流的方式進(jìn)行承載。
設(shè)計要點(diǎn)：雖然說櫥窗流能夠承載豐富的內(nèi)容，容易烘托產(chǎn)品氛圍。但是設(shè)計師在設(shè)計過程中需要對視覺進(jìn)行整體進(jìn)行把控，由于單個區(qū)域中，可能會出現(xiàn)過多個內(nèi)容，容易造成頁面混亂對情況。因此不宜把單個feed設(shè)計對過于出跳，這樣容易影響產(chǎn)品的流量分發(fā)。
其次是需要區(qū)分單個feed之間對樣式差異，由于在櫥窗流中，單個feed屬于內(nèi)容的集合，因此需要注意區(qū)分不同feed之間的樣式。
在本文中，筆者粗略的分析了feed流的組成元素，以及常見的feed流樣式。其中不同的樣式各有利弊，并沒有某一種萬能的樣式，因此在設(shè)計過程中，需要結(jié)合業(yè)務(wù)目標(biāo)以及用戶目標(biāo)進(jìn)行分析，分別分析對于標(biāo)簽/圖片/文字/操作的需求，從而設(shè)計出最適合產(chǎn)品需求的feed。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.bouu.cn