起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)愛奇藝、優(yōu)酷、騰訊視頻同類型產(chǎn)品差異化設(shè)計(jì)
編輯導(dǎo)語：相信大家的手機(jī)里都有視頻APP，在工作之余看電視劇、看電影來休閑放松一下，其中又以愛奇藝、優(yōu)酷和騰訊視頻為主。本文作者通過對(duì)這三款軟件進(jìn)行實(shí)際使用，分析總結(jié)了其差異化設(shè)計(jì)，希望大家一起討論交流。
本次分享的內(nèi)容是關(guān)于愛奇藝、優(yōu)酷、騰訊視頻三個(gè)第一梯隊(duì)的同類型在線播放產(chǎn)品部分功能的差異化產(chǎn)品設(shè)計(jì)，看看在線播放類產(chǎn)品有哪些可以學(xué)習(xí)借鑒之處，是如何打造自己的生態(tài)和差異化競(jìng)爭(zhēng)的。
一、首頁
功能布局上同類產(chǎn)品差異很小，基本上遵從從上至下依次是導(dǎo)航欄–運(yùn)營(yíng)區(qū)–內(nèi)容區(qū)。
愛奇藝「推薦」類目下拉可以跳轉(zhuǎn)至二樓放映廳，騰訊視頻「精選」類目下拉可以跳轉(zhuǎn)至游戲模塊；愛奇藝導(dǎo)航欄有產(chǎn)品logo、搜索框、歷史記錄、UGC聚合入口、類目Tab、類目編輯入口，另外個(gè)別類目增加有篩選功能。
logo的加入提升愛奇藝這一品牌感知和視覺認(rèn)知，加深品牌在用戶側(cè)的印象。
另外，這里尤其要提一下搜索功能的設(shè)計(jì)。
圓角矩形接近于背景色的設(shè)計(jì)，整體和諧統(tǒng)一且更加聚焦。搜索框內(nèi)字段一般會(huì)根據(jù)近期歷史搜索、和近期熱搜進(jìn)行關(guān)鍵詞推送輪播，千人千面的推廣，提升流量分發(fā)效率。
同時(shí)，在右側(cè)增加搜索的icon，點(diǎn)擊icon，可以直接根據(jù)當(dāng)前輪播的關(guān)鍵詞跳轉(zhuǎn)至搜索結(jié)果頁面。交互上極大的縮短了搜索步幅，通過減少路徑提升搜索效率。
下拉至二樓刷新的同時(shí)，背景有自動(dòng)生成的炫光可以緩解用戶等待的焦慮，并且傳遞一種未來感，感覺很酷～歷史觀看入口可以讓用戶從首頁直接進(jìn)入觀看歷史，這其實(shí)是符合用戶心理預(yù)期的一種設(shè)計(jì)手段。
根據(jù)用戶的使用場(chǎng)景做預(yù)判，用戶不管是在觀影、觀劇階段，很容易被外界噪音所打斷。再次打開App可以直接從首頁進(jìn)入觀看歷史找到該劇進(jìn)行觀看，可以提升用戶體驗(yàn)。
運(yùn)營(yíng)Banner除了影視新劇廣告投放，還加入了外部廣告鏈接，Banner分為「vip」和「廣告」兩類標(biāo)簽。
雖然外部廣告在某種程度上會(huì)引起用戶的反感，但是利用標(biāo)簽提示可以降低用戶誤入點(diǎn)擊率，降低用戶厭惡情緒。
個(gè)人認(rèn)為這種加入外部廣告的營(yíng)銷推廣是產(chǎn)品商業(yè)變現(xiàn)的一種方式，已經(jīng)有越來越多的產(chǎn)品里面有看到商業(yè)廣告，這是產(chǎn)品發(fā)展到一定時(shí)期的一種商業(yè)變現(xiàn)常態(tài)。
這一點(diǎn)在騰訊視頻和優(yōu)酷都有看到，但也都給出相應(yīng)的關(guān)閉方案，降低用戶的厭惡。
作為設(shè)計(jì)師，在產(chǎn)品設(shè)計(jì)初期就應(yīng)該要考慮到為后期加入的廣告預(yù)留商業(yè)入口和設(shè)計(jì)策略，以免后期造成產(chǎn)品模塊功能混亂的局面，增加用戶對(duì)產(chǎn)品功能的理解門檻。
在視頻內(nèi)容區(qū)部分標(biāo)題交互上點(diǎn)擊可以直接觸達(dá)該模塊具體內(nèi)容展示頁面，增加模塊觸達(dá)的交互方式，提高模塊頁面分發(fā)效率。
愛奇藝模態(tài)彈窗有三種樣式：一種是直接下拉在圖標(biāo)附近展示氣泡彈窗，另一種是在底部彈出抽屜樣式，第三種就是產(chǎn)品升級(jí)常規(guī)的提示彈窗，這一類暫且不談。
從產(chǎn)品層面來看前兩種樣式分類區(qū)別，圖標(biāo)附近下拉的樣式彈窗是基于平臺(tái)自身將用戶有行為結(jié)果的功能聚合呈現(xiàn)；另一種是針對(duì)于外部廣告群體，作為用戶情緒聲音的收集渠道。
個(gè)人猜想應(yīng)該是這兩種彈窗所在的業(yè)務(wù)屬性而做的區(qū)分。
Feed流設(shè)計(jì)上，愛奇藝和優(yōu)酷的做法更接近，類似于電商類產(chǎn)品首頁的千人千面設(shè)計(jì)，可以給無目的瀏覽的用戶一次性展示更多，提升用戶留存。
而騰訊視頻的做法是通欄劃分為兩張卡片，以卡片的形式推送影片。右側(cè)前置支持瀏覽該影片精彩片段，個(gè)人猜測(cè)這樣的設(shè)計(jì)方式可以提前讓用戶了解該影片的大致劇情，引起用戶的Aha點(diǎn)，讓用戶可以駐足，然后留下更多的時(shí)間追片。
一屏推送的影片限制在三個(gè)以內(nèi)，應(yīng)該是為了減少同類型影片封面對(duì)用戶的視覺噪音，提升用戶的點(diǎn)擊率，這里想提一下的地方是這三種feed流中的廣告卡片設(shè)計(jì)。
愛奇藝和優(yōu)酷都在Feed流中還巧妙的加入外部廣告，這種設(shè)計(jì)占比小不易于發(fā)現(xiàn)。既不會(huì)過多的影響用戶的觀感以及沉浸式的體驗(yàn)，也能提升廣告盈利效率。
而騰訊視頻的廣告推送，一屏空間占比太大，再加上一屏只有三個(gè)以內(nèi)的影片推送，極大的可能會(huì)引起用戶的體驗(yàn)感。
騰訊視頻的頻道區(qū)別于其他兩個(gè)產(chǎn)品。
愛奇藝和優(yōu)酷的頻道類目以列表方式下拉，支持個(gè)人配置，F(xiàn)型瀏覽模式對(duì)用戶來說更加友好高效；騰訊視頻的則是矩陣式排版，Z型瀏覽模式容易造成用戶視覺疲勞，降低用戶的使用頻率。
愛奇藝和優(yōu)酷在標(biāo)題前加入icon，可以提升用戶對(duì)模塊類目的理解，降低學(xué)習(xí)成本。另外，icon的設(shè)計(jì)手法也是值得學(xué)習(xí)的，用色干凈明快，給單調(diào)的界面增加了美感。
搜索模塊大體上是差不多的，雖然三者都在搜索框里有語音搜索的入口，但愛奇藝和優(yōu)酷另外在該頁面底部鍵盤上方也提供了顯著的語音搜索入口，顯得更加貼心。
即使在搜索結(jié)果頁面，愛奇藝和優(yōu)酷的設(shè)計(jì)策略也是一致的。優(yōu)先級(jí)最高的還是搜索功能，都使用與品牌一致的色塊來強(qiáng)調(diào)功能；而騰訊的策略是弱化搜索框，以任務(wù)結(jié)果為中心，突出內(nèi)容區(qū)信息。
二、個(gè)人中心
個(gè)人中心三者共性就是將使用頻次最高的個(gè)人主頁優(yōu)先級(jí)置于頂部，內(nèi)容區(qū)的設(shè)計(jì)策略差異點(diǎn)還是挺多的。
愛奇藝保持了導(dǎo)航欄的品牌色漸變，內(nèi)容區(qū)以常規(guī)的列表從上至下展示，沒有過多的視覺噪音。用戶屬性使用頻次較高的優(yōu)先級(jí)最高，平臺(tái)業(yè)務(wù)相關(guān)屬性的靠后，降低用戶學(xué)習(xí)成本的同時(shí)提升其他業(yè)務(wù)流量的分發(fā)。
騰訊視頻將「觀看歷史」模塊前置在個(gè)人中心，無需跳轉(zhuǎn)，交互上可以通過左右滑動(dòng)的交互選擇歷史影片。
這一設(shè)計(jì)策略是通過融入具體的用戶場(chǎng)景挖掘到的深層次需求，減少場(chǎng)景變化，優(yōu)化行為交互，縮短了用戶查看歷史影片的步幅，提升效率獲得用戶好感，與其他同類型平臺(tái)形成差異化競(jìng)爭(zhēng)。
另外，個(gè)人中心增加了騰訊生態(tài)強(qiáng)勁的游戲+動(dòng)漫頻道入口，這應(yīng)該是騰訊的生態(tài)布局，各產(chǎn)品之間形成流量互相分發(fā)的導(dǎo)流模型，達(dá)成場(chǎng)景互通和流量互補(bǔ)的效果。
優(yōu)酷的設(shè)計(jì)以圓角卡片為主，頭部除了個(gè)人主頁入口，增加UGC+社交屬性數(shù)據(jù)展示，建立價(jià)值認(rèn)知。
個(gè)人猜測(cè)應(yīng)該也是一種生態(tài)布局的打法，一方面是為了教育用戶，培養(yǎng)用戶在平臺(tái)發(fā)布個(gè)人創(chuàng)作相關(guān)作品的習(xí)慣；另一方面，作為頭部之一的產(chǎn)品，高層眼前的格局應(yīng)該不止于同類型競(jìng)品愛奇藝和騰訊，應(yīng)該還包含了近兩年強(qiáng)勁的B站。
三、會(huì)員中心
會(huì)員中心的設(shè)計(jì)策略大同小異，都是圍繞用戶付費(fèi)轉(zhuǎn)化，加深會(huì)員價(jià)值感知，延長(zhǎng)用戶生命周期而設(shè)計(jì)。但是三個(gè)平臺(tái)也都有不同的差異化設(shè)計(jì)策略。
愛奇藝會(huì)員中心以深灰+金色為主色調(diào)，頭部的金色卡片質(zhì)感，凸顯會(huì)員價(jià)值。
卡面使用漸變+底紋的設(shè)計(jì)手法提升卡面設(shè)計(jì)感，簡(jiǎn)約又不失大氣。卡面提供「立即開通」VIP入口。隨后從上至下的模塊功能依次是等級(jí)-任務(wù)-權(quán)益-服務(wù)-特權(quán)，都是圍繞用戶個(gè)人屬性打造。
交互上下滑至屏幕二分之一處，底部會(huì)淡入滑出「立即開通」按鈕入口。
▲ 愛奇藝會(huì)員
愛奇藝VIP開通頁面分為VIP會(huì)員和所有會(huì)員兩個(gè)模塊，承載會(huì)員服務(wù)和用戶付費(fèi)功能。
VIP會(huì)員模塊從上至下依次是黃金VIP會(huì)員模塊和星鉆VIP模塊兩個(gè)Tab-優(yōu)惠方式-支付方式-更多類型VIP-VIP套餐-VIP特權(quán)-會(huì)員協(xié)議-常見問題入口。
所有的模塊功能都是圍繞促進(jìn)用戶付費(fèi)轉(zhuǎn)化，通過打通決策鏈降低用戶對(duì)VIP會(huì)員的認(rèn)知，從而提升在用戶側(cè)的價(jià)值認(rèn)知進(jìn)行轉(zhuǎn)化，提升平臺(tái)黏性。
所有會(huì)員模塊主要是根據(jù)活躍用戶定位而設(shè)計(jì)的，拓寬不同人群的付費(fèi)渠道，這一做法在外賣產(chǎn)品也曾看到。
▲優(yōu)酷會(huì)員
優(yōu)酷VIP模塊使用黑金的配色，大氣優(yōu)雅，會(huì)員卡面標(biāo)有優(yōu)酷logo×88VIP的標(biāo)示，利用阿里大生態(tài)圈的標(biāo)簽logo加深用戶對(duì)會(huì)員的價(jià)值認(rèn)知。
在開通VIP的頁面底部一直有賬單金額和立即支付的召喚按鈕，通過顏色對(duì)比，提升立即支付的優(yōu)先級(jí)從而促使用戶付費(fèi)轉(zhuǎn)化。
▲騰訊視頻會(huì)員
騰訊視頻會(huì)員延續(xù)產(chǎn)品品牌主色，使用了更具有活力陽光的暖黃色，這應(yīng)該是根據(jù)產(chǎn)品活躍用戶的人群選擇的色彩傾向。
▲ 退出愛奇藝會(huì)員
▲ 退出騰訊視頻會(huì)員
愛奇藝和騰訊視頻在退出VIP頁面的時(shí)候都會(huì)出現(xiàn)用戶利益點(diǎn)相關(guān)的代金券和特權(quán)屬性標(biāo)示挽留彈窗，這種設(shè)計(jì)從某種程度上可以降低用戶流失率。
▲ 愛奇藝會(huì)員成長(zhǎng)體系
▲ 騰訊視頻會(huì)員成長(zhǎng)體系
▲ 優(yōu)酷會(huì)員成長(zhǎng)體系
愛奇藝、騰訊視頻和優(yōu)酷三個(gè)產(chǎn)品都有自己的VIP會(huì)員成長(zhǎng)體系。
一方面通過VIP體系呈現(xiàn)用戶等級(jí)享受的特權(quán)，提升新手用戶的轉(zhuǎn)化率；另一方面通過特權(quán)和其他優(yōu)惠刺激手段，激勵(lì)現(xiàn)有留存用戶續(xù)費(fèi)，延長(zhǎng)用戶生命周期。核心目標(biāo)是拉升付費(fèi)用戶比例，從而達(dá)到商業(yè)變現(xiàn)的終極目的。
四、播放
愛奇藝、騰訊視頻和優(yōu)酷三個(gè)產(chǎn)品的常規(guī)播放頁面也是保持大同小異的設(shè)計(jì)策略，愛奇藝和優(yōu)酷在當(dāng)前頁面都預(yù)留了發(fā)送彈幕入口，可以縮短用戶發(fā)送彈幕的路徑。
從上至下播放窗口-視頻信息-推薦視頻，在愛奇藝、優(yōu)酷的劇集播放進(jìn)度中，當(dāng)前劇集選擇框都有微動(dòng)效，通過動(dòng)效強(qiáng)化UI界面的功能和用戶情感之間的傳遞。
由于現(xiàn)在三個(gè)不同產(chǎn)品都處于成熟期，都在走商業(yè)變現(xiàn)的“康莊大道”。有些劇集是需要開通VIP的，在劇集選擇框中都會(huì)有相應(yīng)的標(biāo)簽提示用戶需要進(jìn)行付費(fèi)才能觀看。
都有自己平臺(tái)的評(píng)論區(qū)，一方面是通過自身平臺(tái)評(píng)價(jià)體系來打通社交生態(tài)，另一方面通過社區(qū)來活躍用戶，通過用戶互動(dòng)來傳遞情緒。
五、全屏播放
▲ 愛奇藝全屏播放
愛奇藝和優(yōu)酷在全屏觀影狀態(tài)下的功能相對(duì)騰訊視頻比較全。
基于用戶真實(shí)使用場(chǎng)景的需求，都有進(jìn)度條、觀看倍速、視頻源清晰度、選集，彈幕主頁設(shè)置。并且都有提供影片截圖和GIF的本地存儲(chǔ)，可以有效的幫助用戶進(jìn)行分享。
▲優(yōu)酷全屏播放
愛奇藝和優(yōu)酷都提供提供發(fā)送彈幕的入口，愛奇藝和優(yōu)酷在發(fā)送彈幕的時(shí)候，播放會(huì)有暫停，基于考慮到用戶的觀影過程是不想被打斷和錯(cuò)過的立場(chǎng)，這一功能設(shè)計(jì)的很巧妙。
其次，個(gè)人感覺優(yōu)酷的設(shè)計(jì)策略更勝一籌，前置預(yù)判提供字段，提高發(fā)送彈幕的效率。
▲ 騰訊視頻全屏播放
騰訊視頻全屏播放的界面目前相對(duì)來看，功能單薄了一點(diǎn),但核心功能還都是保留的。
六、彩蛋-趣味設(shè)計(jì)
▲ 優(yōu)酷
優(yōu)酷在評(píng)價(jià)模塊中加入了一些有趣的設(shè)計(jì)，通過用戶不同的評(píng)分刷新左側(cè)emoji的表情，提升趣味性。再加上不同評(píng)分的文案推送，加強(qiáng)產(chǎn)品與用戶之間的情感互動(dòng)。
七、最后
由于產(chǎn)品體量功能龐大，個(gè)人也是花了半個(gè)月的時(shí)間研究出的一些體驗(yàn)分享，分享的模塊可能會(huì)比較散，希望個(gè)人的一些體驗(yàn)可以對(duì)正在從業(yè)產(chǎn)品設(shè)計(jì)的同學(xué)有所啟發(fā)和幫助。
大家感興趣的話也可以進(jìn)行體驗(yàn)研究，有任何的想法和心得都可以在評(píng)論區(qū)留言，進(jìn)行更多產(chǎn)品層面的討論和挖掘。
本文由 @禪悅 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于 CC0 協(xié)議
很喜歡此類對(duì)比同類型app的文章，您寫的也比較細(xì)致，有一點(diǎn)小建議希望跟您一起探討。
– 是否可以在全文的開頭大概有一個(gè)總結(jié)，對(duì)比 愛奇藝 騰訊和優(yōu)酷 總體上有什么區(qū)別，給讀者一個(gè)大概的印象
– 每個(gè)section 可以分不同維度進(jìn)行對(duì)比，如在播放section，可以細(xì)分 4 個(gè)點(diǎn)進(jìn)行分別討論：
播放窗口設(shè)計(jì)，頁面排版、彈幕區(qū)設(shè)計(jì)、評(píng)論區(qū)設(shè)計(jì)
你好，有興趣寫一篇招聘app的產(chǎn)品差異化設(shè)計(jì)的文章嘛！
頻道那頁的圖配錯(cuò)啦！
已改，謝謝提醒～
您好，冒昧打擾了～我是「edc設(shè)計(jì)研究中心」公眾號(hào)的小編，您的這篇文章實(shí)在是太棒了！看完之后迫不及待的想與更多人分享！請(qǐng)問是否可以讓我們轉(zhuǎn)載這篇文章呢？我們會(huì)標(biāo)明出處鏈接以及和您的id～
祝工作愉快！
好的，可以的，從公眾號(hào)分享吧～謝謝
你有騰訊的vip會(huì)員
哈哈哈哈哈哈哈哈……身體很誠(chéng)實(shí)嘛，說明豐富的內(nèi)容版權(quán)才是視頻平臺(tái)的核心競(jìng)爭(zhēng)力