短視頻類產品設計解析

20 評論 13393 瀏覽 114 收藏 18 分鐘

最近一段時間,基本都在負責愛奇藝短視頻產品的設計。這個產品的基本形態,是feed流,也是現在應用很廣泛的一種產品形態。今天總結了在設計時的一些需要注意的問題,跟大家分享。

一、Feed流

Feed這個概念,最早出現在網頁時代,它是指“RSS中用來接收信息來源更新的接口”,最早應用在RSS閱讀器中。

什么是RSS閱讀器?

這種工具太久遠了,我在網上查了一下,簡單來說,就是一個可以收集你關心的網站更新內容的一個應用。比如說:你很關心韓寒的博客,也很喜歡某科技網站的新聞。你就可以在RSS閱讀器中,加入這兩個網站的網址;當它們有更新的時候,你就可以在RSS閱讀器中集中看到這兩個網站的更新內容,而不用分別打開兩個網頁了。

在這一階段,feed是以類似郵件那樣的列表進行呈現,還沒有完全流動起來。

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

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

Feed流這種類型的產品有個顯著特點:內容是從上到下依次排列的,隨著屏幕小得多的手機的普及,一個問題凸顯出來:動態(feed)太多,但屏幕大小有限,該怎么有效展現這些動態?

feed流示意

為了解答這個問題,feed流產品的設計產生了兩個核心問題:

  1. 應該展示給用戶什么內容?
  2. 這些內容應該如何排序?

關于第一點,產品展現的內容主要由產品的定位決定。

關于第二點,主要有三種內容排序的方法:

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

下面依次介紹。

1. 時間排序法

這種排序法最簡單粗暴,就是按照內容發布的時間先后進行排序,最典型的案例就是微信朋友圈。

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

  1. 應該展示給用戶什么內容:用戶好友發的內容;
  2. 這些內容應該如何排序:按照發布時間先后順序。

時間排序有一個致命的缺點:內容呈現效率最低。運用這種排序,需要內容的提供方非??酥疲瑫r也需要用戶對這些內容足夠關注。

朋友圈剛好滿足這兩點:

  1. 內容是微信好友發布,注定不會大量更新(微商除外);
  2. 微信好友大多是熟人關系,能夠引起用戶足夠的關注。

2. 重力排序法

什么是重力排序法?

它是由重力和拉力,共同決定feed流中內容的排序。所謂的“重力”,是持續讓內容在feed流往下掉的力,即時間;而拉力,即讓內容排序往前的力。這個拉力,由應用根據自己關注的參數來決定,比如豆瓣小組的回應、貼吧的回復。

也就是說,在知乎上被贊得多的帖子,或者貼吧里得到更多回復的帖子會更靠前??梢钥闯觯亓ε判蚍ㄆ鋵嵤窃跁r間排序法上增加了拉力這個因素。

對于feed流產品的兩個核心問題,使用重力排序法的產品,是以下規則:

  1. 應該展示給用戶什么內容:一群用戶表現出喜好的內容推給某個用戶;
  2. 這些內容應該如何排序:按時間衰減和內容受歡迎程度綜合排序。

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

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

3. 智能算法排序法

相信大家對這種排序法不陌生,現在各大應用都在競相使用,比如今日頭條、知乎、微博,當然,也有我們愛奇藝; Facebook是最早開始使用這種算法,而且使用后據稱效果拔群,于是越來越多的社交網絡放棄使用時間排序法,轉而投入智能推薦排序的懷抱。

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

  1. 親密度(Affinity Score):考慮該信息的來源者和你之間交流是否頻繁密切。例如你女朋友發的一條狀態肯定比某個不太熟的同學發的要重要。
  2. 生產成本(Edge Weight):成本越高權重越大,例如好友發布了9張圖片的成本比起發了9個字成本高,前者就會被優先推薦;又例如發布的成本遠高于點贊,所以原創內容的優先級高于因為好友點贊而被你獲知的消息。
  3. 新鮮程度(Time Decay):越近發生的事越容易被推薦,一般都是用一個指數衰減函數來量化動態的新舊程度。

這三種因素通過一個公式,計算出每一條feed對用戶的價值分數,然后排序后呈現在用戶面前。后續Facebook又引入機器學習,通過圖像識別、語義分析等去預估新鮮事的質量,同時引入更多判斷維度,例如:閱讀時長、視頻內容、用戶反饋等,去綜合判斷一條消息的價值分數,使得算法更加聰明,更懂用戶。

可以看出,智能推薦排序法,將用戶關心的內容進行了更加細化的測量,從而將用戶本人更感興趣的內容推送出來,而不是重力排序法中,那些熱門的內容。

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

總結一下,對于以上3種排序法,使用時需要注意以下的問題:

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

以上介紹了feed流這種產品的特點,下面介紹在為這種產品做設計時的一些心得。

二、一些心得

1. 對于feed流類產品,卡片高度很重要

首先說一個簡單粗暴的事實:減小卡片高度能立竿見影得提高feed流數據!

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

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

該方案上線后,各項關鍵指標均有明顯上漲,其中播放次數和播放時長均上漲20%以上。

2. 根據場景優化feed流的卡片

卡片優化了之后,很開心得把推薦和關注兩個tab都變成了新的卡片,但是很快,關注tab出現一個問題:由于這個tab里都是用戶關注的愛奇藝號發出的內容,因此會出現所有卡片都有個“已關注”按鈕,用戶點擊這個按鈕,就會取消關注。但是,我們并不想用戶這么輕易的取關啊。

怎么辦?再改。

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

可以看到這個卡片跟最之前的卡片很相似,但這個卡片的確更適合關注tab,而不適合推薦tab。所以,要針對不同產品的特點來設計適合的卡片。

3. 主動出擊,體現交互的價值

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

全屏模式觀看視頻結束時返回feed流

另一個例子,是在做視頻播放頁時,與產品討論播放頁中評論和視頻列表到底應該采取何種樣式進行設計。筆者在研究了競品,分析了兩種頁面形式之后,發現這兩種頁面,有著不同的產品目標。

在騰訊視頻的第二個底部標簽“熱點”中,用戶點擊某個視頻卡片中交互欄的空白處,則會從右向左出現一個新頁面,即播放頁。

如下圖中第二張圖所示:

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

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

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

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

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

將這兩個播放頁抽象出來,得到如圖所示的信息結構示意圖:

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

從上圖可以看出,騰訊視頻在播放頁強調的是推薦的視頻內容,推測其產品目標是提升視頻播放量;西瓜視頻在播放頁強調的是評論互動,推測其產品目標是提升播薦率、評論率等互動指標。

從上面的分析對比中可以看出,不同的方案,會將產品引向不同的數據結果。有了這樣的對比,和產品討論方案也變得有理有據了許多。

以上跟大家分享了自己在支持短視頻類產品的一些心得,總結一下有以下幾點:

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

歡迎留言討論,共同進步。

#專欄作家#

沐風,微信公眾號:“沐風與體驗設計”。人人都是產品經理專欄作家,2017年度作家評選最佳人氣獎。愛奇藝Phone和PC端交互團隊負責人。留德海龜,曾任職騰訊微生活、網易、宜信。6年交互設計經驗,專注設計領域,歡迎關注。

本文原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 每一篇都有收獲~謝謝~期待更新 ?? ??

    來自福建 回復
    1. 感謝支持 ??

      來自北京 回復
  2. 感謝作者!這篇文對我產生實質性的幫助。

    來自北京 回復
    1. 哈哈哈,“實質性幫助”,感覺很硬核了 ??
      順便打個廣告:歡迎關注我的公眾號“沐風與體驗設計”,及時收取文章 ??

      來自北京 回復
  3. 干貨滿滿!想問下,抖音這種全屏形式的卡片高度,是為什么會流行起來的呢?

    來自浙江 回復
    1. 這種卡片省去了用戶選擇的過程,直接在當前頁播放內容,操作簡單,體驗比較沉浸。但對于內容的質量和對用戶興趣的把握要求也比較高。

      來自北京 回復
  4. 很厲害啊,只是想問為什么關注頁要突出作者頭像信息放在視頻上方?如果放下面,把已關注字符去掉呢?這樣卡片高度不就能壓縮?這是怎么權衡的?

    回復
    1. 這里主要是想突出作者信息,所以放在卡片上面。

      來自北京 回復
  5. 痛快淋漓

    回復
    1. 歡迎下次再來

      來自北京 回復
  6. 人人都是產品經理上少有的不談空洞理論,深刻易懂的文章,獲益匪淺 ^_^

    來自廣東 回復
    1. 謝謝支持 ??

      來自北京 回復
  7. 干貨很棒,好奇為什么騰訊視頻和西瓜視頻是出于怎樣的整體產品目標作出的這樣的選擇

    回復
    1. 他們應該有自己產品最關心的指標吧

      來自北京 回復
  8. 滿滿的干貨

    來自陜西 回復
    1. 必須的,哈哈哈

      來自北京 回復
  9. 請求內推啊哈哈哈哈

    來自北京 回復
    1. 加我微信mufengdesigner,幫你內推 ??

      來自北京 回復
  10. 干貨好評

    來自重慶 回復
    1. 堅持輸出干貨 ??
      歡迎關注公眾號“沐風與體驗設計” ??

      來自北京 回復