最近一段時間，基本都在負(fù)責(zé)愛奇藝短視頻產(chǎn)品的設(shè)計(jì)。這個產(chǎn)品的基本形態(tài)，是feed流，也是現(xiàn)在應(yīng)用很廣泛的一種產(chǎn)品形態(tài)。今天總結(jié)了在設(shè)計(jì)時的一些需要注意的問題，跟大家分享。

一、Feed流

Feed這個概念，最早出現(xiàn)在網(wǎng)頁時代，它是指“RSS中用來接收信息來源更新的接口”，最早應(yīng)用在RSS閱讀器中。

什么是RSS閱讀器？

這種工具太久遠(yuǎn)了，我在網(wǎng)上查了一下，簡單來說，就是一個可以收集你關(guān)心的網(wǎng)站更新內(nèi)容的一個應(yīng)用。比如說：你很關(guān)心韓寒的博客，也很喜歡某科技網(wǎng)站的新聞。你就可以在RSS閱讀器中，加入這兩個網(wǎng)站的網(wǎng)址；當(dāng)它們有更新的時候，你就可以在RSS閱讀器中集中看到這兩個網(wǎng)站的更新內(nèi)容，而不用分別打開兩個網(wǎng)頁了。

在這一階段，feed是以類似郵件那樣的列表進(jìn)行呈現(xiàn)，還沒有完全流動起來。

真正讓Feed流動起來的，是Facebook：它提供了一種新的思路，將好友或者關(guān)注的對象作為信息源，此時的feed即是好友的動態(tài)，如好友發(fā)布的內(nèi)容以及他們在Facebook上的社交行為。用戶只需輕松地上下滑動，就可將好友發(fā)生的事情一覽無余，很多人對此無法自拔。

這一階段的feed流，用戶必須先關(guān)注好友，然后才能看到他們發(fā)布的內(nèi)容和社交行為。后來，隨著feed流這種形式逐漸普及和創(chuàng)新，feed流中的內(nèi)容已經(jīng)不局限在用戶必須先關(guān)注才能看到，而是變成“持續(xù)更新并呈現(xiàn)給用戶的內(nèi)容都叫做feed流”，最典型的例子比如今日頭條，它會根據(jù)用戶的興趣不斷推送各種新聞。

Feed流這種類型的產(chǎn)品有個顯著特點(diǎn)：內(nèi)容是從上到下依次排列的，隨著屏幕小得多的手機(jī)的普及，一個問題凸顯出來：動態(tài)（feed）太多，但屏幕大小有限，該怎么有效展現(xiàn)這些動態(tài)？

feed流示意

為了解答這個問題，feed流產(chǎn)品的設(shè)計(jì)產(chǎn)生了兩個核心問題：

1. 應(yīng)該展示給用戶什么內(nèi)容？
2. 這些內(nèi)容應(yīng)該如何排序？

關(guān)于第一點(diǎn)，產(chǎn)品展現(xiàn)的內(nèi)容主要由產(chǎn)品的定位決定。

關(guān)于第二點(diǎn)，主要有三種內(nèi)容排序的方法：

1. 時間排序法；
2. 重力排序法；
3. 智能算法排序法。

下面依次介紹。

1. 時間排序法

這種排序法最簡單粗暴，就是按照內(nèi)容發(fā)布的時間先后進(jìn)行排序，最典型的案例就是微信朋友圈。

對于朋友圈來說，feed流的兩個核心問題如下：

1. 應(yīng)該展示給用戶什么內(nèi)容：用戶好友發(fā)的內(nèi)容；
2. 這些內(nèi)容應(yīng)該如何排序：按照發(fā)布時間先后順序。

時間排序有一個致命的缺點(diǎn)：內(nèi)容呈現(xiàn)效率最低。運(yùn)用這種排序，需要內(nèi)容的提供方非?？酥?，同時也需要用戶對這些內(nèi)容足夠關(guān)注。

朋友圈剛好滿足這兩點(diǎn)：

1. 內(nèi)容是微信好友發(fā)布，注定不會大量更新（微商除外）；
2. 微信好友大多是熟人關(guān)系，能夠引起用戶足夠的關(guān)注。

2. 重力排序法

什么是重力排序法？

它是由重力和拉力，共同決定feed流中內(nèi)容的排序。所謂的“重力”，是持續(xù)讓內(nèi)容在feed流往下掉的力，即時間；而拉力，即讓內(nèi)容排序往前的力。這個拉力，由應(yīng)用根據(jù)自己關(guān)注的參數(shù)來決定，比如豆瓣小組的回應(yīng)、貼吧的回復(fù)。

也就是說，在知乎上被贊得多的帖子，或者貼吧里得到更多回復(fù)的帖子會更靠前?？梢钥闯?，重力排序法其實(shí)是在時間排序法上增加了拉力這個因素。

對于feed流產(chǎn)品的兩個核心問題，使用重力排序法的產(chǎn)品，是以下規(guī)則：

1. 應(yīng)該展示給用戶什么內(nèi)容：一群用戶表現(xiàn)出喜好的內(nèi)容推給某個用戶；
2. 這些內(nèi)容應(yīng)該如何排序：按時間衰減和內(nèi)容受歡迎程度綜合排序。

一個典型的運(yùn)用重力排序的例子，是豆瓣中“我的小組”里小組的排序：這里的拉力，是帖子的回復(fù)。有最新回復(fù)的小組，會被放在feed流的頂端展示。

值得注意的是，在重力排序法中，由于知乎的贊、帖子的回復(fù)，都是別的用戶的行為，所以用戶本人看到的feed流，實(shí)際上會受到大家的影響，其中包含許多熱度較高的內(nèi)容。

3. 智能算法排序法

相信大家對這種排序法不陌生，現(xiàn)在各大應(yīng)用都在競相使用，比如今日頭條、知乎、微博，當(dāng)然，也有我們愛奇藝； Facebook是最早開始使用這種算法，而且使用后據(jù)稱效果拔群，于是越來越多的社交網(wǎng)絡(luò)放棄使用時間排序法，轉(zhuǎn)而投入智能推薦排序的懷抱。

以Facebook早期的EdgeRank算法為例，影響feed流排序，主要有三個因素：

1. 親密度（Affinity Score）：考慮該信息的來源者和你之間交流是否頻繁密切。例如你女朋友發(fā)的一條狀態(tài)肯定比某個不太熟的同學(xué)發(fā)的要重要。
2. 生產(chǎn)成本（Edge Weight）：成本越高權(quán)重越大，例如好友發(fā)布了9張圖片的成本比起發(fā)了9個字成本高，前者就會被優(yōu)先推薦；又例如發(fā)布的成本遠(yuǎn)高于點(diǎn)贊，所以原創(chuàng)內(nèi)容的優(yōu)先級高于因?yàn)楹糜腰c(diǎn)贊而被你獲知的消息。
3. 新鮮程度（Time Decay）：越近發(fā)生的事越容易被推薦，一般都是用一個指數(shù)衰減函數(shù)來量化動態(tài)的新舊程度。

這三種因素通過一個公式，計(jì)算出每一條feed對用戶的價值分?jǐn)?shù)，然后排序后呈現(xiàn)在用戶面前。后續(xù)Facebook又引入機(jī)器學(xué)習(xí)，通過圖像識別、語義分析等去預(yù)估新鮮事的質(zhì)量，同時引入更多判斷維度，例如：閱讀時長、視頻內(nèi)容、用戶反饋等，去綜合判斷一條消息的價值分?jǐn)?shù)，使得算法更加聰明，更懂用戶。

可以看出，智能推薦排序法，將用戶關(guān)心的內(nèi)容進(jìn)行了更加細(xì)化的測量，從而將用戶本人更感興趣的內(nèi)容推送出來，而不是重力排序法中，那些熱門的內(nèi)容。

然而，智能推薦也并不是十全十美。這種排序法，對算法的質(zhì)量要求較高。如果一些技術(shù)比較差的公司，冒然使用智能排序法，反倒會起到反作用。另一方面，由于智能排序的不透明性和擴(kuò)展性，過度的商業(yè)化容易成為用戶體驗(yàn)的頭號兇手。

總結(jié)一下，對于以上3種排序法，使用時需要注意以下的問題：

1. 如果選擇時間排序法，那么就需要考慮用戶關(guān)注的內(nèi)容是否足夠有吸引力。
2. 如果選擇重力排序法，那么就需要考慮該如何選擇參數(shù)保證最后的展示效果。
3. 如果選擇智能推薦排序法，那么就需要考慮是否有足夠的技術(shù)實(shí)力和產(chǎn)品自制力。

以上介紹了feed流這種產(chǎn)品的特點(diǎn)，下面介紹在為這種產(chǎn)品做設(shè)計(jì)時的一些心得。

二、一些心得

1. 對于feed流類產(chǎn)品，卡片高度很重要

首先說一個簡單粗暴的事實(shí)：減小卡片高度能立竿見影得提高feed流數(shù)據(jù)！

上面也介紹過，對于feed流類的產(chǎn)品，屏幕有限，內(nèi)容又很多，因此效率就變得尤為重要。上面介紹的3種排序法，也是在解決內(nèi)容展示的效率問題。

而對于feed流這種產(chǎn)品中，每個feed的卡片高度，就決定了一屏中能展示幾個feed內(nèi)容。下面展示的是通過精簡內(nèi)容、改變排版等方法，將卡片高度縮小了30%后得到的新方案：

該方案上線后，各項(xiàng)關(guān)鍵指標(biāo)均有明顯上漲，其中播放次數(shù)和播放時長均上漲20%以上。

2. 根據(jù)場景優(yōu)化feed流的卡片

卡片優(yōu)化了之后，很開心得把推薦和關(guān)注兩個tab都變成了新的卡片，但是很快，關(guān)注tab出現(xiàn)一個問題：由于這個tab里都是用戶關(guān)注的愛奇藝號發(fā)出的內(nèi)容，因此會出現(xiàn)所有卡片都有個“已關(guān)注”按鈕，用戶點(diǎn)擊這個按鈕，就會取消關(guān)注。但是，我們并不想用戶這么輕易的取關(guān)啊。

怎么辦？再改。

考慮到關(guān)注tab是用戶主動關(guān)注的愛奇藝號發(fā)布的內(nèi)容，對用戶吸引力更大，因此希望用戶能在這個tab里有更多的互動（點(diǎn)贊、評論、分享）。同時，為了突出愛奇藝號作者的信息，將之放在頂部，于是得到下面的優(yōu)化方案。

可以看到這個卡片跟最之前的卡片很相似，但這個卡片的確更適合關(guān)注tab，而不適合推薦tab。所以，要針對不同產(chǎn)品的特點(diǎn)來設(shè)計(jì)適合的卡片。

3. 主動出擊，體現(xiàn)交互的價值

做一款產(chǎn)品，要盡可能多地使用自己的產(chǎn)品，這樣才有可能更理解產(chǎn)品，同時也能發(fā)現(xiàn)一些優(yōu)化點(diǎn)。例如：以下是在一次使用全屏模式觀看短視頻時，發(fā)現(xiàn)視頻結(jié)束后會自動回到feed流。由于使用全屏模式后，手機(jī)橫置，而回到feed流模式，需要把手機(jī)豎過來，體驗(yàn)上比較打斷，因此跟產(chǎn)品提出優(yōu)化，在全屏模式中加入選集功能，方便用戶在手機(jī)橫置時可以使用橫屏一直觀看視頻。

全屏模式觀看視頻結(jié)束時返回feed流

另一個例子，是在做視頻播放頁時，與產(chǎn)品討論播放頁中評論和視頻列表到底應(yīng)該采取何種樣式進(jìn)行設(shè)計(jì)。筆者在研究了競品，分析了兩種頁面形式之后，發(fā)現(xiàn)這兩種頁面，有著不同的產(chǎn)品目標(biāo)。

在騰訊視頻的第二個底部標(biāo)簽“熱點(diǎn)”中，用戶點(diǎn)擊某個視頻卡片中交互欄的空白處，則會從右向左出現(xiàn)一個新頁面，即播放頁。

如下圖中第二張圖所示：

騰訊視頻app中短視頻播放頁示意

在該播放頁中，點(diǎn)擊標(biāo)題下方的評論按鈕，會從下向上出現(xiàn)一個浮層，其中展示“全部熱評”；浮層的頂部有評論的輸入框，點(diǎn)擊可以輸入評論；“為你推薦”部分展示的是一張張寬度和屏幕相同的、與熱點(diǎn)標(biāo)簽feed流中完全一樣的視頻卡片。點(diǎn)擊某個視頻，則視頻在當(dāng)前位置直接播放。

在西瓜視頻的“首頁”標(biāo)簽中，同樣點(diǎn)擊某個視頻卡片中交互欄的空白處，則視頻封面移動到頁面頂部，同時從上向下展開播放頁的其它內(nèi)容。在這個頁面中，標(biāo)題下方那些推薦的視頻，以列表的形式展現(xiàn)，點(diǎn)擊某個視頻，則頂部的播放器開始播放新視頻的內(nèi)容，同時頁面其它信息也更新為新視頻內(nèi)容。

而評論部分，是接在推薦的視頻的下方：即用戶不斷向上滑動，就可以看到。在頁面底部，有常駐的評論輸入框，點(diǎn)擊后即可輸入評論。

西瓜視頻app中短視頻播放頁示意

將這兩個播放頁抽象出來，得到如圖所示的信息結(jié)構(gòu)示意圖：

騰訊視頻和西瓜視頻播放頁對比

從上圖可以看出，騰訊視頻在播放頁強(qiáng)調(diào)的是推薦的視頻內(nèi)容，推測其產(chǎn)品目標(biāo)是提升視頻播放量；西瓜視頻在播放頁強(qiáng)調(diào)的是評論互動，推測其產(chǎn)品目標(biāo)是提升播薦率、評論率等互動指標(biāo)。

從上面的分析對比中可以看出，不同的方案，會將產(chǎn)品引向不同的數(shù)據(jù)結(jié)果。有了這樣的對比，和產(chǎn)品討論方案也變得有理有據(jù)了許多。

以上跟大家分享了自己在支持短視頻類產(chǎn)品的一些心得，總結(jié)一下有以下幾點(diǎn)：

1. Feed流類的產(chǎn)品，需要考慮兩個核心問題：應(yīng)該展示給用戶什么內(nèi)容、這些內(nèi)容應(yīng)該如何排序。
2. Feed流的排序有3種方法：時間排序、重力排序、智能算法排序
3. Feed流里，卡片的高度很重要。要盡可能減小卡片的高度。
4. 不能盲目套用卡片到不同的產(chǎn)品中，要跟進(jìn)產(chǎn)品的特點(diǎn)和場景來使用不同的卡片。
5. 作為交互設(shè)計(jì)師，要多體驗(yàn)自己支持的產(chǎn)品，跟產(chǎn)品提出優(yōu)化點(diǎn)，贏得更多主動。
6. 分析不同交互方案對產(chǎn)品，尤其是對產(chǎn)品數(shù)據(jù)的影響。

歡迎留言討論，共同進(jìn)步。

#專欄作家#

沐風(fēng)，微信公眾號：“沐風(fēng)與體驗(yàn)設(shè)計(jì)”。人人都是產(chǎn)品經(jīng)理專欄作家，2017年度作家評選最佳人氣獎。愛奇藝Phone和PC端交互團(tuán)隊(duì)負(fù)責(zé)人。留德海龜，曾任職騰訊微生活、網(wǎng)易、宜信。6年交互設(shè)計(jì)經(jīng)驗(yàn)，專注設(shè)計(jì)領(lǐng)域，歡迎關(guān)注。

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

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