不看后悔！五款主流視頻應(yīng)用主界面交互模式對比橫評！

橙橙橙子丶 · 發(fā)表于 2017-9-12 20:22

　　導(dǎo)讀：首頁是APP設(shè)計的核心區(qū)塊，也是內(nèi)容和用戶運營的兵家必爭之地，通過對競品首頁進行分析，還能從中一窺各家的設(shè)計理念、運營策略及至目標(biāo)戰(zhàn)略等。

　　互聯(lián)網(wǎng)電視已然成為現(xiàn)在智能家庭的標(biāo)配，以互聯(lián)網(wǎng)電視業(yè)務(wù)為核心的OTT(Over The Top)業(yè)務(wù)已越來越多地深入到日常應(yīng)用中，圍繞著“電視”這一塊覆蓋家庭的大屏，各大內(nèi)容服務(wù)商也是卯足了勁兒，想要在用戶的“客廳”分一杯羹，主流的視頻應(yīng)用基本都已進駐大屏，BAT資本的入局，也讓電視端視頻應(yīng)用的競爭更加激烈。

　　以下對電視端視頻影音應(yīng)用做一個簡單的競品分析。俗話說，看人先看臉，對于一個APP來講，首頁就是臉面，也是用戶打開應(yīng)用的第一印象，據(jù)數(shù)據(jù)統(tǒng)計，首頁跳出率在15%-25%，也就是說這部分用戶來到首頁后，沒有繼續(xù)下一步動作，當(dāng)然，原因可能是多樣化的，但首頁不吸引人，用戶找不到所需內(nèi)容等，則會很容易造成用戶的流失，特別是在這么一個“來去無情”的互聯(lián)網(wǎng)用戶時代，用戶翻臉離開的速度絕對比翻書要快得多。

　　所以說，首頁是APP設(shè)計的核心區(qū)塊，也是內(nèi)容和用戶運營的兵家必爭之地，通過對競品首頁進行分析，還能從中一窺各家的設(shè)計理念、運營策略及至目標(biāo)戰(zhàn)略等。

　　本文選取的應(yīng)用包括：云視聽(騰訊)、奇異果(愛奇藝)、優(yōu)酷、芒果、小米、樂視及電視貓等。

　一、首頁形態(tài)競品分析

　　1、導(dǎo)航—標(biāo)簽式導(dǎo)航 VS 抽屜式導(dǎo)航

　　任何APP的組織信息都需要以某種導(dǎo)航框架固定起來，合適的導(dǎo)航框架，決定了產(chǎn)品之后的延伸和擴展。不同的產(chǎn)品需求和商業(yè)目標(biāo)決定了不同的導(dǎo)航框架的設(shè)計模式。導(dǎo)航設(shè)計首先需要將APP解構(gòu)，為組織信息分層，做好信息層級的扁平化，一般情況下，將最核心、最穩(wěn)固、最根本的功能要素放在第一層頁面，其他得內(nèi)容收在第二層、第三層、甚至更深，然后根據(jù)層級的歸納來確定導(dǎo)航設(shè)計的模式。

　　OTT電視端應(yīng)用，本質(zhì)上跟移動端差不多，只是屏幕大小和呈現(xiàn)方式有所不同，操作方式無非就是遙控器“上下左右”幾個按鍵操控進行翻頁、切屏等，局限較大，但也更為簡單。目前電視端視頻應(yīng)用，多采取標(biāo)簽式和抽屜式這兩種比較常見的導(dǎo)航模式。

　　標(biāo)簽式：

　　即常見的tab式導(dǎo)航，這類信息優(yōu)先級較高、用戶使用頻繁，彼此之間相互獨立，通過標(biāo)簽式導(dǎo)航的引導(dǎo)，用戶可以迅速的實現(xiàn)頁面之間的切換且不會迷失方向，簡單而高效。還可細分為底部tab式導(dǎo)航、頂部tab式導(dǎo)航、側(cè)邊欄tab式導(dǎo)航等，不同應(yīng)用出于信息呈現(xiàn)及操作方式考慮，采用不同的導(dǎo)航設(shè)計。

　　(1)底部導(dǎo)航：云視聽(騰訊)，共有12個導(dǎo)航標(biāo)簽(這也是大屏端的優(yōu)勢，移動端標(biāo)簽數(shù)量一般會控制在5個以內(nèi)，而電視端屏幕則有更大的選擇空間)，依次是：我的、頻道、精選、VIP、電視劇、少兒、電影、綜藝、動漫、新聞、游戲、體育，首屏定位在第三個標(biāo)簽即“精選”上，從標(biāo)簽排列的先后順序上，我們也能看出騰訊的內(nèi)容戰(zhàn)略布局，重視會員用戶，主打影視及少兒等內(nèi)容。

不看后悔！五款主流視頻應(yīng)用主界面交互模式對比橫評！

　　(2)頂部導(dǎo)航：比如愛奇藝、芒果TV、小米盒子launch界面等，標(biāo)簽個數(shù)也都在10個左右，我們對比一下它們的標(biāo)簽排列，也能大概看出其內(nèi)容側(cè)重：

不看后悔！五款主流視頻應(yīng)用主界面交互模式對比橫評！

　　愛奇藝：輪播、首頁、VIP會員、酷玩一夏、電視劇、電影、綜藝、兒童、動漫、游戲、分類;首屏為“首頁”標(biāo)簽;

不看后悔！五款主流視頻應(yīng)用主界面交互模式對比橫評！

　　芒果：芒果電視、精選、電視劇、綜藝、VIP、電影、少兒、動漫、音樂、全部頻道、我的、設(shè)置;首屏為“芒果電視”;

不看后悔！五款主流視頻應(yīng)用主界面交互模式對比橫評！

　　可以看出，愛奇藝更為重視會員的運營，同時會做一些精細化的主題運營，而芒果，得益于獨特的自制劇及自制綜藝，在這兩塊可以說是獨占鰲頭，并以此圈住一大批的年輕用戶，所以電視端也是主推電視和綜藝。特別的是，芒果不同于愛奇藝，芒果背靠湖南衛(wèi)視，有衛(wèi)視頻道加持，多了電視直播內(nèi)容，打開芒果TV的APP，立即會進入芒果電視的全屏播放，所見即所播，比較符合傳統(tǒng)的家庭電視打開模式。

不看后悔！五款主流視頻應(yīng)用主界面交互模式對比橫評！

　　(3)側(cè)邊欄導(dǎo)航：比如優(yōu)酷、天貓魔盒launch界面等。這種側(cè)邊導(dǎo)航的形式，與頂部、底部差不多，只是在交互方式上做了調(diào)整，也是有利有弊，側(cè)邊導(dǎo)航布局更為清晰，用戶一目了然，也更符合當(dāng)下瀑布流式的信息呈現(xiàn)方式，但在具體操作上，左右鍵及上下鍵切換會較頻繁，用戶的思考成本高。

　　抽屜式：

　　經(jīng)常和頂部/底部tab式導(dǎo)航結(jié)合使用的抽屜式導(dǎo)航，也可以稱之為優(yōu)雅的隱喻。抽屜式導(dǎo)航將部分信息內(nèi)容進行隱藏，突出了應(yīng)用的核心功能，特別是當(dāng)產(chǎn)品的信息層級有非常多的頁面和內(nèi)容，難以在一屏內(nèi)顯示全部內(nèi)容，tab導(dǎo)航太多標(biāo)簽太多會顯得臃腫，使用戶難以點擊，這個時候，抽屜式導(dǎo)航是個不錯的選擇。

　　在OTT視頻應(yīng)用里，采用這種導(dǎo)航方式的，例如：電視貓、微視聽、華數(shù)TV等，都是將部分推薦內(nèi)容在首頁展示，頻道分類則全部收到抽屜里去。

不看后悔！五款主流視頻應(yīng)用主界面交互模式對比橫評！

　　這么做的好處是，整體頁面非常的簡潔，重點信息突出，首頁推薦內(nèi)容更為重要，而對于各頻道來講，被放入一視同仁的籃子中，整齊歸納在一處，用戶在使用查找的時候，能夠快速定位到自己喜歡的頻道，但這是對于已經(jīng)有一定的使用習(xí)慣的用戶，對于新用戶，這種導(dǎo)航方式的弊端也是顯而易見的：首先，頻道內(nèi)容都被折疊成一個一個抽屜入口，內(nèi)里優(yōu)質(zhì)內(nèi)容無透出，用戶一眼看不到，會造成內(nèi)容少、沒什么片子的印象，而且層級深、操作路徑長，每多一步就會造成用戶的流失，為頁面帶來干凈的設(shè)計的同時，也讓用戶忽視隱藏的信息，導(dǎo)致了隱藏在抽屜欄內(nèi)的信息內(nèi)容用戶點擊率下降，參與感降低。

　　總結(jié)一下：

　　如果應(yīng)用有不同的視圖，且他們是平級的，需要用戶同等地對待，采用標(biāo)簽式導(dǎo)航較好;

　　如果應(yīng)用主要的功能和內(nèi)容都在一個頁面里面。只是一些用戶設(shè)置這類低頻操作內(nèi)容需要顯示在其他頁面里。為了讓主頁面看上去干凈美觀，可以把這些輔助功能放在抽屜欄里。

　　兩種方式各有利弊，可以根據(jù)產(chǎn)品的核心功能目標(biāo)選擇，或者結(jié)合起來使用，例如可以將部分優(yōu)質(zhì)頻道做tab標(biāo)簽，其他低頻點播頻道可以收入抽屜。畢竟現(xiàn)在，酒香也怕巷子深，好的內(nèi)容就該讓用戶一眼看到，而不是尋寶般地去挖掘。

　　2、布局及交互—延展&切屏

　　前面提及到，電視端的APP應(yīng)用由于受到操作設(shè)備、操作距離等限制，交互方式與移動端略有不同，要稍微簡單一些，基本是圍繞著遙控器的“上下左右”鍵進行交互，操控頁面的滑動、翻頁和切換屏幕，而如何有效分配和利用遙控器鍵值，使用戶操作更加便捷流暢，則是產(chǎn)品及交互設(shè)計師需要考慮的問題。

　　為了能在一屏上展示更多的信息，產(chǎn)品設(shè)計上一般會考慮延展的方式，即不局限于屏幕上所看到的坑口位置，而是可以不停地向下或左右滑動，給用戶內(nèi)容源源不斷的感覺，同時輔以切屏的方式，例如當(dāng)一屏內(nèi)容加載完時，再按右鍵，則切換到下一屏去，打破邊界感，減少操作碰壁的挫折感。以以下應(yīng)用為例：

不看后悔！五款主流視頻應(yīng)用主界面交互模式對比橫評！

　　可以看出，首頁的布局方式一般有三種：單頁面上下延展、單頁面左右延展、切屏，通常應(yīng)用會采取三選二的自由組合，利用頁面空間呈現(xiàn)更多內(nèi)容的同時，交互簡單整齊。需要注意的是，如果方式組合不當(dāng)或想要兼顧齊全，則很容易造成頁面混亂，增加用戶的思考和操作成本，這在電視端是一大忌諱，用戶會直接表達為“不好用”，從而離開。

　　3、視覺設(shè)計—多元標(biāo)準(zhǔn)件組合

　　好的視覺設(shè)計承載著三個使命：①引起別人的注意;②給人留下深刻的視覺印象;③信息溝通;要達到前面兩種目的，最好的辦法就是視覺沖擊力，而當(dāng)用戶的注意力在你的作品中有足夠的停留時間，信息才能有效溝通。影響視覺效果的，一般有這么幾個因素：尺寸變化、顏色運營及對比。

　　對于視頻應(yīng)用來講，圖片的視覺沖擊力遠高于文字，如何從圖片設(shè)計開始就拿下用戶，設(shè)計師們也各出奇招，從上圖來看，幾家的APP應(yīng)用也是各有特色。首先看首頁設(shè)計標(biāo)準(zhǔn)件的運用，即圖片尺寸的變化，采用多種標(biāo)準(zhǔn)尺寸組合的方式，使頁面看起來不那么呆板和單調(diào)，稍稍統(tǒng)計了下各家標(biāo)準(zhǔn)件數(shù)量：騰訊6個，愛奇藝6個，芒果6個，優(yōu)酷8個，小米則有11中，圖片尺寸變化多，也會使內(nèi)容看起來更豐富。除了標(biāo)準(zhǔn)件的組合運營，各家也會采取比如：輪播圖、GIF圖、異形圖等，動靜結(jié)合，再加上高清高亮的資產(chǎn)海報，為用戶在享受視頻盛宴之前，提供一道美味的甜品。

　　4、推薦位設(shè)計—以多取勝

不看后悔！五款主流視頻應(yīng)用主界面交互模式對比橫評！

　　推薦位的數(shù)量設(shè)計，是不是越多越好，在哪個區(qū)段里會有最優(yōu)的效果：提升點播量又不增加運營成本，現(xiàn)在都沒有明確的定論，但可以看出，核心的都是：最好的內(nèi)容最先呈現(xiàn)，然后給用戶盡可能多的選擇。

　　產(chǎn)品設(shè)計的衣柜理論

　　做產(chǎn)品就好比做衣柜，是內(nèi)容和信息的載體，衣柜里的衣物就是產(chǎn)品所搭載的信息。如何設(shè)計一個好用的衣柜，讓用戶能夠高效便捷實用，并愛上這個衣柜?怎么考慮這個衣柜是雙開門的、還是推拉門的?兩層還是三層？需要鞋柜和衣帽架嗎？

　　衣柜若沒做好：太小，東西放不下;太大，浪費空間;太亂，沒有層次感;太繁，操作較復(fù)雜;等等;產(chǎn)品的設(shè)計理念亦然，如何讓內(nèi)容有序呈現(xiàn)，如何讓用戶高效使用，都需要深入地摸索探析，以上僅對各產(chǎn)品首頁做了皮毛的分析，也希望能從中總結(jié)出一些經(jīng)驗，從成熟的產(chǎn)品中學(xué)習(xí)方法。

橙橙橙子丶 · 發(fā)表于 2017-9-12 20:38

ZNDS的教程簡直男默女淚啊！

不難懂 · 發(fā)表于 2017-9-22 11:48

又見一個好帖，果斷先馬克mark收藏了!

1554661283 · 發(fā)表于 2019-6-22 14:24

66666666666666666666666

wx_NB9eABAb · 發(fā)表于 2019-6-27 10:44

謝謝樓主

› 綜合交流 / 資源分享區(qū) › 綜合交流大區(qū)