什么視頻軟件主界面交互模式好看？當(dāng)然是這五款主流！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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