本文對多款OTT視頻應用的首頁導航展開分析，希望能夠給你帶來一些思考與啟發。

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

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

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

本文選取的應用包括：雲視聽（騰訊）、奇異果（愛奇藝）、優酷、芒果、小米、樂視及電視貓等。

一、首頁形态競品分析

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

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

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

标簽式：

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

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

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

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

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

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

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

抽屜式：

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

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

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

總結一下：

• 如果應用有不同的視圖，且他們是平級的，需要用戶同等地對待，采用标簽式導航較好；
• 如果應用主要的功能和内容都在一個頁面裡面。隻是一些用戶設置這類低頻操作内容需要顯示在其他頁面裡。為了讓主頁面看上去幹淨美觀，可以把這些輔助功能放在抽屜欄裡。
• 兩種方式各有利弊，可以根據産品的核心功能目标選擇，或者結合起來使用，例如可以将部分優質頻道做tab标簽，其他低頻點播頻道可以收入抽屜。畢竟現在，酒香也怕巷子深，好的内容就該讓用戶一眼看到，而不是尋寶般地去挖掘。

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

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

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

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

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

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

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

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

推薦位的數量設計，是不是越多越好，在哪個區段裡會有最優的效果：提升點播量又不增加運營成本，現在都沒有明确的定論，但可以看出，核心的都是：最好的内容最先呈現，然後給用戶盡可能多的選擇。

産品設計的衣櫃理論

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

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

作者：懶懶羊羊，OTT産品經理，新人小白，關注互聯網産品設計及用戶體驗

本文由 @懶懶羊羊 原創發布于人人都是産品經理。未經許可，禁止轉載。

題圖來自PEXELS，基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部