幾種常見的Web端Feed設(shè)計模式

2 評論 10399 瀏覽 48 收藏 13 分鐘

本文總結(jié)了常見Web端Feed的設(shè)計模式,以及對此的一些思考。

Feed流:Feed,投喂,指向用戶提供內(nèi)容以供消費;流,持續(xù),指這種內(nèi)容的提供是持續(xù)的,源源不斷的。

Feed多用于內(nèi)容型產(chǎn)品中。廣義上的內(nèi)容型產(chǎn)品,可以粗略分為:圖文流、視頻流、電商流。

  • 圖文流中包括:新聞類,如今日頭條;社區(qū)類,如知乎、微博、最右;社交類:如微信朋友圈。
  • 視頻流,如抖音、快手、網(wǎng)易云音樂。
  • 電商流:如天貓、淘寶、京東。

總體來說一個Feed會包含以下元素:內(nèi)容標(biāo)題、內(nèi)容正文、輔助信息、用戶名、用戶頭像、圖片/視頻、標(biāo)簽、話題、按鈕等。

輔助信息包括:來源、發(fā)布時間、分類、觀看/點贊/評論/收藏數(shù)、作者介紹等;嚴(yán)格來說:作者昵稱、作者頭像、標(biāo)簽、話題等也屬于輔助信息,只是由于業(yè)務(wù)需要而被強(qiáng)化顯示,單獨成了一類元素。

一般而言,一個Feed的設(shè)計目標(biāo)包括以下幾點:傳遞信息、誘導(dǎo)點擊查看詳情、誘導(dǎo)互動;不同類型產(chǎn)品,設(shè)計目標(biāo)側(cè)重有所不同;這種不同,通過各類元素的有無以及視覺層級來體現(xiàn)。

設(shè)計Feed時,以用戶關(guān)注度和業(yè)務(wù)重要性來決定各元素的視覺層級。

  • 文字內(nèi)容視覺層級的影響因素包括:字重(粗>細(xì))、字號(大>小)、字體(特殊字體>系統(tǒng)默認(rèn))、字色(背景色補(bǔ)色>背景色)、位置(左上>右下)、背景色(背景色補(bǔ)色>背景色)、間距(疏>密)等;
  • 圖片內(nèi)容視覺層級的影響因素包括:色相(暖色>冷色>黑白灰)、大小、位置等。

一、Web端Feed的設(shè)計模式

1. 圖文流

Web端Feed設(shè)計模式

2. 視頻流

Web端Feed設(shè)計模式

3. 電商流

Web端Feed設(shè)計模式

二、一些思考

1)圖/文作為內(nèi)容載體的差異:相較于文字,圖片更容易吸引注意力、表現(xiàn)力更豐富、信息傳達(dá)效率更高(識別圖片的反應(yīng)時小于識別文字)、信息傳達(dá)準(zhǔn)確性較低。

2)左右排布的Feed,一個Feed一行,用戶閱讀時視覺流呈“Z”字型;上下排布的Feed,多個Feed一行,用戶閱讀時視覺流呈倒“N”字型。

3)一般而言,一個Feed的設(shè)計目標(biāo)包括以下三點:傳遞信息、誘導(dǎo)點擊查看詳情、誘導(dǎo)互動。Feed采用什么模式,取決于何種模式能更好地達(dá)成設(shè)計目標(biāo)。

1. 問題一

Web端,單個Feed中圖文位置包括左圖右文、左文右圖、上文下圖、上圖下文、前文后圖共五種模式,分別適用于什么產(chǎn)品?

回答:

1)五種圖文模式,根本差異在于圖/文作為內(nèi)容載體的差異。

結(jié)合中文環(huán)境中從左到右、從上到下的閱讀順序,對于一個Feed,越強(qiáng)調(diào)信息傳遞的準(zhǔn)確性,文本的視覺層級就應(yīng)越高,圖片的視覺層級越低,表現(xiàn)為純文無圖、大文小圖、左文右圖;越強(qiáng)調(diào)表現(xiàn)力,不太在意信息傳遞的準(zhǔn)確性,文本的視覺層級就越低,圖片的視覺層級越高,表現(xiàn)為純圖無文、大圖小文、左圖右文。

2)上下排布與左右排布

雖然不同網(wǎng)站在單圖和多圖時的排列規(guī)則不盡相同,但總體來說,因為要兼顧Feed的美觀和平衡、以及頁面的利用率,當(dāng)圖文上下排布時,圖片會比左右排布時更大,在一個feed中面積占比更大。又因為圖片更容易吸引注意力,因此上下排布的Feed流,用戶會不自覺地注視圖片,較難聚焦文本。

又因為圖片表現(xiàn)力豐富、傳遞信息效率高、準(zhǔn)確性低,所以更適用于瀏覽和欣賞(比如電商網(wǎng)站、攝影社區(qū)),不適用于信息的檢索(比如搜索結(jié)果頁、新聞網(wǎng)站)。

舉例:電商網(wǎng)站中,用戶看到圖片就知道這是襯衫或者手機(jī),此為效率高;但這個襯衫的材質(zhì)、尺寸等信息,用戶要通過文本了解,此為傳遞準(zhǔn)確信息效率低。

因為電商網(wǎng)站需要誘導(dǎo)用戶查看商品購買商品,所以圖片的效率和表現(xiàn)力更重要,這也是無論web端還是移動端,電商Feed都是上圖下文或者左圖右文,圖為主文為輔的模式。

3)前文后圖的模式是一種創(chuàng)新,將圖文排列的模式從XY軸擴(kuò)展到Z軸,在保持Feed總面積不變的情況下擴(kuò)大了圖片的面積。

4)以上分析指出了不同模式之間的差別,但不意味著不同模式不可共存。因為一個Feed流網(wǎng)頁的設(shè)計不僅要考慮信息的傳遞,還要考慮整體布局的美觀度、用戶閱讀時的節(jié)奏等等。

2. 問題二

同為新聞資訊類網(wǎng)站,為什么有的是左圖右文,有的是左文右圖?

回答:

1)雖然是同類產(chǎn)品,但不代表他們的產(chǎn)品優(yōu)勢、產(chǎn)品定位、發(fā)展策略等方面也完全相同。沒有最好的模式,只有最適合的模式。如果他們的設(shè)計契合他們的定位,能助力業(yè)務(wù)發(fā)展,那就是好設(shè)計。比如一個社區(qū)產(chǎn)品,內(nèi)容方面不如競品,想通過豐富有趣的圖片殺出重圍,那么它的Feed中圖片就應(yīng)該有更高的視覺層級,排版上可以采用上圖下文或者前文后圖或者其他更突顯圖片的設(shè)計。

2)視覺流。用戶閱讀左右排布的Feed流網(wǎng)頁,視覺流呈“Z”字型。由于圖片吸引注意力的能力比文字更強(qiáng),因此,一般情況下,左圖右文會更符合視覺流。

3)產(chǎn)品定位。以掘金為例:一個前端開發(fā)社區(qū),更強(qiáng)調(diào)文字內(nèi)容,同時要求程序員上傳高質(zhì)量圖片也比較難,因此它的首頁Feed就采用了左文右圖的設(shè)計,且圖片面積很小,加粗著重顯示標(biāo)題。

而一些左圖右文的新聞產(chǎn)品,可能對圖片的把控比較嚴(yán)格,這樣排布就像電商APP一樣,既能通過圖片快速傳達(dá)給讀者這是一篇關(guān)于川普的政經(jīng)新聞還是關(guān)于烤串的美食訊息,同時能發(fā)揮圖片表現(xiàn)力和吸引注意力的優(yōu)勢,再通過閱讀文本獲取準(zhǔn)確信息,過程流暢。

相反,如果一個新聞產(chǎn)品,圖片質(zhì)量參差不齊,采用左圖右文的模式,就有可能造成用戶先看了圖,不明所以,又讀了標(biāo)題,哦知道了。

這里的圖片,就降低了信息攝入的效率,如果用戶又返回頭再看了一遍那張圖,效率就更低了。這樣不如把圖片去掉,或者放在右邊,盡量降低其負(fù)面影響;盡管初期可能用戶會先被圖片吸引,視覺流不再是“Z”字型的;但稍有經(jīng)驗,他們就會自動忽視右邊的圖了,回憶我們看有的網(wǎng)頁,右邊的廣告是不是都會選擇性忽視。

4)也有可能是問題一回答第4點中提到的原因,不能一概而論。

3. 問題三

為什么有的Feed是標(biāo)題+正文,有的只有標(biāo)題?

回答:

1)這個問題可以引申為:“為什么不同的網(wǎng)站,F(xiàn)eed包含的元素不一樣?”——再一步引申為:“在設(shè)計一個Feed時,要包含哪些元素?”

2)Feed的功能包含兩個:

  1. 傳遞信息。新聞類網(wǎng)站的首頁,無需點擊查看詳情就能大概知道每天的新聞,因為Feed的標(biāo)題就是新聞內(nèi)容的概括。
  2. 快速區(qū)分,誘導(dǎo)點擊。理想狀態(tài),首頁展示的內(nèi)容應(yīng)該都是用戶想要進(jìn)一步閱讀的,但很難做到,做到也不一定好。這樣首頁Feed中的信息,幫助用戶快速區(qū)分這個內(nèi)容要不要進(jìn)一步查看,誘導(dǎo)用戶點擊查看詳情,繼而增加用戶使用時長。

3)回答問題。

根據(jù)剃刀理論:有無正文取決于正文能否承擔(dān)起上面提到的兩個作用。

模式舉例中,有正文的Feed中,人人和36氪是人工編輯的摘要,知乎是截取顯示正文的開頭,根據(jù)知乎先說結(jié)論的社區(qū)文化,也可以認(rèn)為是正文的摘要。這些摘要都是有信息價值的,首頁中呈現(xiàn)是可以的;但具體有多大價值(表現(xiàn)在對單個Feed打開率,平均單次使用時長的影響),是個未知數(shù),希望相關(guān)人員能做個調(diào)研。

模式舉例中,無正文的Feed中,頭條、網(wǎng)易新聞、虎嗅、澎湃、掘金都是只有標(biāo)題,原因在于:

  • 標(biāo)題本身就能承擔(dān)傳遞足夠的信息供用戶篩選。
  • 可能是無法提供有信息價值的摘要作為正文露出。

4)其他輔助信息。

輔助信息包括:來源、發(fā)布時間、分類、觀看/點贊/評論/收藏數(shù)、作者介紹等(廣義來說,也包括作者昵稱、作者頭像、標(biāo)簽、話題等)。

輔助信息,價值更多體現(xiàn)在幫助用戶快速篩選內(nèi)容和誘導(dǎo)用戶點擊。包含哪些輔助信息,各個輔助信息在Feed中的視覺層級等等問題,因產(chǎn)品而異。

比如,微博的Feed,會展示作者頭像和姓名,個人分析原因可能包括:

A.擬人化。頭像是個人在網(wǎng)絡(luò)中的化身,普通用戶發(fā)表微博后,連同頭像一起顯示,卷入感會更深(昵稱、個性簽名同理)。其他用戶閱讀微博時,有頭像也會更真實。偏社交的產(chǎn)品在首頁Feed流設(shè)計中基本都會顯示頭像和昵稱。

B.頭像為關(guān)注服務(wù)。微博單個Feed內(nèi)容短,基本無需點擊查看詳情。這就方便在Feed中顯示關(guān)注按鈕,用戶在發(fā)現(xiàn)感興趣的內(nèi)容后可以立刻關(guān)注作者;此時有頭像這種擬人化的顯示,體驗會比只有干巴巴的昵稱更好。

對比B站,雖然也有鼓勵用戶多多關(guān)注UP主的傾向,但用戶僅僅根據(jù)一個視頻封面和標(biāo)題,不會貿(mào)然關(guān)注,因此顯示昵稱即可。

在鼓勵關(guān)注、提升關(guān)注體驗這一點上,B站是沒必要在首頁顯示UP主頭像的。實際工作中,可以通過用戶研究和數(shù)據(jù)監(jiān)測的反饋,決定輔助信息的取舍和視覺層級。平時也可以多思考不同產(chǎn)品設(shè)計差異的原因,盡管不一定對。

 

本文由 @Tzufeng 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 學(xué)習(xí)了

    來自上海 回復(fù)
  2. 6

    回復(fù)