編輯導(dǎo)語：相信大家的手機里都有視頻APP，在工作之余看電視劇、看電影來休閑放松一下，其中又以愛奇藝、優(yōu)酷和騰訊視頻為主。本文作者通過對這三款軟件進行實際使用，分析總結(jié)了其差異化設(shè)計，希望大家一起討論交流。

本次分享的內(nèi)容是關(guān)于愛奇藝、優(yōu)酷、騰訊視頻三個第一梯隊的同類型在線播放產(chǎn)品部分功能的差異化產(chǎn)品設(shè)計，看看在線播放類產(chǎn)品有哪些可以學(xué)習(xí)借鑒之處，是如何打造自己的生態(tài)和差異化競爭的。

一、首頁

功能布局上同類產(chǎn)品差異很小，基本上遵從從上至下依次是導(dǎo)航欄–運營區(qū)–內(nèi)容區(qū)。

愛奇藝「推薦」類目下拉可以跳轉(zhuǎn)至二樓放映廳，騰訊視頻「精選」類目下拉可以跳轉(zhuǎn)至游戲模塊；愛奇藝導(dǎo)航欄有產(chǎn)品logo、搜索框、歷史記錄、UGC聚合入口、類目Tab、類目編輯入口，另外個別類目增加有篩選功能。

logo的加入提升愛奇藝這一品牌感知和視覺認知，加深品牌在用戶側(cè)的印象。

另外，這里尤其要提一下搜索功能的設(shè)計。

圓角矩形接近于背景色的設(shè)計，整體和諧統(tǒng)一且更加聚焦。搜索框內(nèi)字段一般會根據(jù)近期歷史搜索、和近期熱搜進行關(guān)鍵詞推送輪播，千人千面的推廣，提升流量分發(fā)效率。

同時，在右側(cè)增加搜索的icon，點擊icon，可以直接根據(jù)當前輪播的關(guān)鍵詞跳轉(zhuǎn)至搜索結(jié)果頁面。交互上極大的縮短了搜索步幅，通過減少路徑提升搜索效率。

下拉至二樓刷新的同時，背景有自動生成的炫光可以緩解用戶等待的焦慮，并且傳遞一種未來感，感覺很酷～歷史觀看入口可以讓用戶從首頁直接進入觀看歷史，這其實是符合用戶心理預(yù)期的一種設(shè)計手段。

根據(jù)用戶的使用場景做預(yù)判，用戶不管是在觀影、觀劇階段，很容易被外界噪音所打斷。再次打開App可以直接從首頁進入觀看歷史找到該劇進行觀看，可以提升用戶體驗。

運營Banner除了影視新劇廣告投放，還加入了外部廣告鏈接，Banner分為「vip」和「廣告」兩類標簽。

雖然外部廣告在某種程度上會引起用戶的反感，但是利用標簽提示可以降低用戶誤入點擊率，降低用戶厭惡情緒。

個人認為這種加入外部廣告的營銷推廣是產(chǎn)品商業(yè)變現(xiàn)的一種方式，已經(jīng)有越來越多的產(chǎn)品里面有看到商業(yè)廣告，這是產(chǎn)品發(fā)展到一定時期的一種商業(yè)變現(xiàn)常態(tài)。

這一點在騰訊視頻和優(yōu)酷都有看到，但也都給出相應(yīng)的關(guān)閉方案，降低用戶的厭惡。

作為設(shè)計師，在產(chǎn)品設(shè)計初期就應(yīng)該要考慮到為后期加入的廣告預(yù)留商業(yè)入口和設(shè)計策略，以免后期造成產(chǎn)品模塊功能混亂的局面，增加用戶對產(chǎn)品功能的理解門檻。

在視頻內(nèi)容區(qū)部分標題交互上點擊可以直接觸達該模塊具體內(nèi)容展示頁面，增加模塊觸達的交互方式，提高模塊頁面分發(fā)效率。

愛奇藝模態(tài)彈窗有三種樣式：一種是直接下拉在圖標附近展示氣泡彈窗，另一種是在底部彈出抽屜樣式，第三種就是產(chǎn)品升級常規(guī)的提示彈窗，這一類暫且不談。

從產(chǎn)品層面來看前兩種樣式分類區(qū)別，圖標附近下拉的樣式彈窗是基于平臺自身將用戶有行為結(jié)果的功能聚合呈現(xiàn)；另一種是針對于外部廣告群體，作為用戶情緒聲音的收集渠道。

個人猜想應(yīng)該是這兩種彈窗所在的業(yè)務(wù)屬性而做的區(qū)分。

Feed流設(shè)計上，愛奇藝和優(yōu)酷的做法更接近，類似于電商類產(chǎn)品首頁的千人千面設(shè)計，可以給無目的瀏覽的用戶一次性展示更多，提升用戶留存。

而騰訊視頻的做法是通欄劃分為兩張卡片，以卡片的形式推送影片。右側(cè)前置支持瀏覽該影片精彩片段，個人猜測這樣的設(shè)計方式可以提前讓用戶了解該影片的大致劇情，引起用戶的Aha點，讓用戶可以駐足，然后留下更多的時間追片。

一屏推送的影片限制在三個以內(nèi)，應(yīng)該是為了減少同類型影片封面對用戶的視覺噪音，提升用戶的點擊率，這里想提一下的地方是這三種feed流中的廣告卡片設(shè)計。

愛奇藝和優(yōu)酷都在Feed流中還巧妙的加入外部廣告，這種設(shè)計占比小不易于發(fā)現(xiàn)。既不會過多的影響用戶的觀感以及沉浸式的體驗，也能提升廣告盈利效率。

而騰訊視頻的廣告推送，一屏空間占比太大，再加上一屏只有三個以內(nèi)的影片推送，極大的可能會引起用戶的體驗感。

騰訊視頻的頻道區(qū)別于其他兩個產(chǎn)品。

愛奇藝和優(yōu)酷的頻道類目以列表方式下拉，支持個人配置，F(xiàn)型瀏覽模式對用戶來說更加友好高效；騰訊視頻的則是矩陣式排版，Z型瀏覽模式容易造成用戶視覺疲勞，降低用戶的使用頻率。

愛奇藝和優(yōu)酷在標題前加入icon，可以提升用戶對模塊類目的理解，降低學(xué)習(xí)成本。另外，icon的設(shè)計手法也是值得學(xué)習(xí)的，用色干凈明快，給單調(diào)的界面增加了美感。

搜索模塊大體上是差不多的，雖然三者都在搜索框里有語音搜索的入口，但愛奇藝和優(yōu)酷另外在該頁面底部鍵盤上方也提供了顯著的語音搜索入口，顯得更加貼心。

即使在搜索結(jié)果頁面，愛奇藝和優(yōu)酷的設(shè)計策略也是一致的。優(yōu)先級最高的還是搜索功能，都使用與品牌一致的色塊來強調(diào)功能；而騰訊的策略是弱化搜索框，以任務(wù)結(jié)果為中心，突出內(nèi)容區(qū)信息。

二、個人中心

個人中心三者共性就是將使用頻次最高的個人主頁優(yōu)先級置于頂部，內(nèi)容區(qū)的設(shè)計策略差異點還是挺多的。

愛奇藝保持了導(dǎo)航欄的品牌色漸變，內(nèi)容區(qū)以常規(guī)的列表從上至下展示，沒有過多的視覺噪音。用戶屬性使用頻次較高的優(yōu)先級最高，平臺業(yè)務(wù)相關(guān)屬性的靠后，降低用戶學(xué)習(xí)成本的同時提升其他業(yè)務(wù)流量的分發(fā)。

騰訊視頻將「觀看歷史」模塊前置在個人中心，無需跳轉(zhuǎn)，交互上可以通過左右滑動的交互選擇歷史影片。

這一設(shè)計策略是通過融入具體的用戶場景挖掘到的深層次需求，減少場景變化，優(yōu)化行為交互，縮短了用戶查看歷史影片的步幅，提升效率獲得用戶好感，與其他同類型平臺形成差異化競爭。

另外，個人中心增加了騰訊生態(tài)強勁的游戲+動漫頻道入口，這應(yīng)該是騰訊的生態(tài)布局，各產(chǎn)品之間形成流量互相分發(fā)的導(dǎo)流模型，達成場景互通和流量互補的效果。

優(yōu)酷的設(shè)計以圓角卡片為主，頭部除了個人主頁入口，增加UGC+社交屬性數(shù)據(jù)展示，建立價值認知。

個人猜測應(yīng)該也是一種生態(tài)布局的打法，一方面是為了教育用戶，培養(yǎng)用戶在平臺發(fā)布個人創(chuàng)作相關(guān)作品的習(xí)慣；另一方面，作為頭部之一的產(chǎn)品，高層眼前的格局應(yīng)該不止于同類型競品愛奇藝和騰訊，應(yīng)該還包含了近兩年強勁的B站。

三、會員中心

會員中心的設(shè)計策略大同小異，都是圍繞用戶付費轉(zhuǎn)化，加深會員價值感知，延長用戶生命周期而設(shè)計。但是三個平臺也都有不同的差異化設(shè)計策略。

愛奇藝會員中心以深灰+金色為主色調(diào)，頭部的金色卡片質(zhì)感，凸顯會員價值。

卡面使用漸變+底紋的設(shè)計手法提升卡面設(shè)計感，簡約又不失大氣?？嫣峁噶⒓撮_通」VIP入口。隨后從上至下的模塊功能依次是等級-任務(wù)-權(quán)益-服務(wù)-特權(quán)，都是圍繞用戶個人屬性打造。

交互上下滑至屏幕二分之一處，底部會淡入滑出「立即開通」按鈕入口。

▲ 愛奇藝會員

愛奇藝VIP開通頁面分為VIP會員和所有會員兩個模塊，承載會員服務(wù)和用戶付費功能。

VIP會員模塊從上至下依次是黃金VIP會員模塊和星鉆VIP模塊兩個Tab-優(yōu)惠方式-支付方式-更多類型VIP-VIP套餐-VIP特權(quán)-會員協(xié)議-常見問題入口。

所有的模塊功能都是圍繞促進用戶付費轉(zhuǎn)化，通過打通決策鏈降低用戶對VIP會員的認知，從而提升在用戶側(cè)的價值認知進行轉(zhuǎn)化，提升平臺黏性。

所有會員模塊主要是根據(jù)活躍用戶定位而設(shè)計的，拓寬不同人群的付費渠道，這一做法在外賣產(chǎn)品也曾看到。

▲優(yōu)酷會員

優(yōu)酷VIP模塊使用黑金的配色，大氣優(yōu)雅，會員卡面標有優(yōu)酷logo×88VIP的標示，利用阿里大生態(tài)圈的標簽logo加深用戶對會員的價值認知。

在開通VIP的頁面底部一直有賬單金額和立即支付的召喚按鈕，通過顏色對比，提升立即支付的優(yōu)先級從而促使用戶付費轉(zhuǎn)化。

▲騰訊視頻會員

騰訊視頻會員延續(xù)產(chǎn)品品牌主色，使用了更具有活力陽光的暖黃色，這應(yīng)該是根據(jù)產(chǎn)品活躍用戶的人群選擇的色彩傾向。

▲ 退出愛奇藝會員

▲ 退出騰訊視頻會員

愛奇藝和騰訊視頻在退出VIP頁面的時候都會出現(xiàn)用戶利益點相關(guān)的代金券和特權(quán)屬性標示挽留彈窗，這種設(shè)計從某種程度上可以降低用戶流失率。

▲ 愛奇藝會員成長體系

▲ 騰訊視頻會員成長體系

▲ 優(yōu)酷會員成長體系

愛奇藝、騰訊視頻和優(yōu)酷三個產(chǎn)品都有自己的VIP會員成長體系。

一方面通過VIP體系呈現(xiàn)用戶等級享受的特權(quán)，提升新手用戶的轉(zhuǎn)化率；另一方面通過特權(quán)和其他優(yōu)惠刺激手段，激勵現(xiàn)有留存用戶續(xù)費，延長用戶生命周期。核心目標是拉升付費用戶比例，從而達到商業(yè)變現(xiàn)的終極目的。

四、播放

愛奇藝、騰訊視頻和優(yōu)酷三個產(chǎn)品的常規(guī)播放頁面也是保持大同小異的設(shè)計策略，愛奇藝和優(yōu)酷在當前頁面都預(yù)留了發(fā)送彈幕入口，可以縮短用戶發(fā)送彈幕的路徑。

從上至下播放窗口-視頻信息-推薦視頻，在愛奇藝、優(yōu)酷的劇集播放進度中，當前劇集選擇框都有微動效，通過動效強化UI界面的功能和用戶情感之間的傳遞。

由于現(xiàn)在三個不同產(chǎn)品都處于成熟期，都在走商業(yè)變現(xiàn)的“康莊大道”。有些劇集是需要開通VIP的，在劇集選擇框中都會有相應(yīng)的標簽提示用戶需要進行付費才能觀看。

都有自己平臺的評論區(qū)，一方面是通過自身平臺評價體系來打通社交生態(tài)，另一方面通過社區(qū)來活躍用戶，通過用戶互動來傳遞情緒。

五、全屏播放

▲ 愛奇藝全屏播放

愛奇藝和優(yōu)酷在全屏觀影狀態(tài)下的功能相對騰訊視頻比較全。

基于用戶真實使用場景的需求，都有進度條、觀看倍速、視頻源清晰度、選集，彈幕主頁設(shè)置。并且都有提供影片截圖和GIF的本地存儲，可以有效的幫助用戶進行分享。

▲優(yōu)酷全屏播放

愛奇藝和優(yōu)酷都提供提供發(fā)送彈幕的入口，愛奇藝和優(yōu)酷在發(fā)送彈幕的時候，播放會有暫停，基于考慮到用戶的觀影過程是不想被打斷和錯過的立場，這一功能設(shè)計的很巧妙。

其次，個人感覺優(yōu)酷的設(shè)計策略更勝一籌，前置預(yù)判提供字段，提高發(fā)送彈幕的效率。

▲ 騰訊視頻全屏播放

騰訊視頻全屏播放的界面目前相對來看，功能單薄了一點,但核心功能還都是保留的。

六、彩蛋-趣味設(shè)計

▲ 優(yōu)酷

優(yōu)酷在評價模塊中加入了一些有趣的設(shè)計，通過用戶不同的評分刷新左側(cè)emoji的表情，提升趣味性。再加上不同評分的文案推送，加強產(chǎn)品與用戶之間的情感互動。

七、最后

由于產(chǎn)品體量功能龐大，個人也是花了半個月的時間研究出的一些體驗分享，分享的模塊可能會比較散，希望個人的一些體驗可以對正在從業(yè)產(chǎn)品設(shè)計的同學(xué)有所啟發(fā)和幫助。

大家感興趣的話也可以進行體驗研究，有任何的想法和心得都可以在評論區(qū)留言，進行更多產(chǎn)品層面的討論和挖掘。

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

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