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

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

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

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

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

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

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

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

　　1、導航—標簽式導航 VS 抽屜式導航

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

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

　　標簽式：

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

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

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

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

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

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

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

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

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

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

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

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

　　抽屜式：

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

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

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

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

　　總結一下：

　　如果應用有不同的視圖，且他們是平級的，需要用戶同等地對待，采用標簽式導航較好;

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

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

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

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

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

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

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

　　3、視覺設計—多元標準件組合

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

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

　　4、推薦位設計—以多取勝

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

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

　　產品設計的衣柜理論

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

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

橙橙橙子丶 · 發(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ū)