一個(gè)取悅視覺(jué)的界面是美的界面兄墅，一個(gè)無(wú)需學(xué)習(xí)就能自然操作的界面是實(shí)用的界面熙尉。這次的目標(biāo)是兼顧美和實(shí)用干旁，為智能電視應(yīng)用設(shè)計(jì)一個(gè)優(yōu)秀的排行榜养渴。

為什么要做排行榜

智能電視通過(guò)遙控器完成操控，這使得在電視機(jī)上輸入內(nèi)容成為非常糟糕的體驗(yàn)难咕。輸入內(nèi)容的不便導(dǎo)致在PC/移動(dòng)端常用的搜索和長(zhǎng)列表太繁瑣而不適合在電視上使用课梳，所以需要有一種不那么繁瑣方式提供用戶(hù)需要內(nèi)容，也就是內(nèi)容推薦余佃。
最好的情況是應(yīng)用通過(guò)對(duì)我們喜好暮刃、習(xí)慣、環(huán)境爆土、狀態(tài)等信息的感知沾歪，個(gè)性化推薦我們這時(shí)最想要的內(nèi)容。但現(xiàn)在的技術(shù)不能達(dá)到這樣的高度雾消，個(gè)性化推薦比較雞肋灾搏。非個(gè)性化推薦通過(guò)覆蓋廣泛的需求來(lái)使大多數(shù)人可以從中獲取想要的內(nèi)容，當(dāng)個(gè)性化推薦不能很好地作用時(shí)不失為值得使用的方式立润。
排行榜是一種很常見(jiàn)的非個(gè)性化內(nèi)容推薦狂窑，通過(guò)對(duì)排名的比較，用戶(hù)能明確的得知排行榜的分類(lèi)下桑腮，哪個(gè)更好泉哈、哪個(gè)更熱。并且排行本身就是由用戶(hù)的行為產(chǎn)生的，天生就是覆蓋了大多數(shù)人群喜好的內(nèi)容推薦方式丛晦。

排行榜的元素

通過(guò)對(duì)主要視頻網(wǎng)站的排行榜進(jìn)行研究奕纫，得出排行榜的元素大致有五個(gè)：

• 排行榜分類(lèi)：選擇分類(lèi)。
• 排序方式：最多播放烫沙、最多評(píng)論匹层、最受歡迎等，滿(mǎn)足不同維度的需求锌蓄。
• 排名信息：提供排名升筏，排名提供了對(duì)內(nèi)容好壞的一種參考。
• 排行榜項(xiàng)：排行榜的內(nèi)容瘸爽。
• 視頻信息：播放數(shù)您访、評(píng)分、簡(jiǎn)介等剪决。在排名之外提供另一種參考灵汪。

考慮到遙控器操作不便，我們需要對(duì)這些元素做一些簡(jiǎn)化柑潦。

首先排行榜分類(lèi)不應(yīng)過(guò)多识虚，因?yàn)闈L動(dòng)長(zhǎng)列表在遙控器上意味著連續(xù)按N次方向鍵，顯然是不好的體驗(yàn)妒茬。根據(jù)艾瑞咨詢(xún)的數(shù)據(jù)，電視劇蔚晨、電影乍钻、綜藝是覆蓋人數(shù)最多的三種內(nèi)容，另外第四名動(dòng)漫與前三差距不大铭腕∫瘢考慮到收看動(dòng)漫內(nèi)容的人群較少收看其他類(lèi)型內(nèi)容，為了更好地覆蓋這些群體累舷，將動(dòng)漫也加入排行榜分類(lèi)浩考。于是最終我們得到了四項(xiàng)排行榜分類(lèi)：電視劇、電影被盈、綜藝析孽、動(dòng)漫。

電視劇只怎、電影和綜藝覆蓋了絕大多數(shù)人群

在同一分類(lèi)下的內(nèi)容具有很大的差異袜瞬，用戶(hù)往往只對(duì)其中一部分內(nèi)容感興趣。這要求我們對(duì)分類(lèi)下的內(nèi)容再進(jìn)行一次細(xì)分身堡。細(xì)分的標(biāo)準(zhǔn)主要有按地區(qū)和按類(lèi)型兩種邓尤。由于按類(lèi)型進(jìn)行細(xì)分的標(biāo)準(zhǔn)比較模糊，并且地區(qū)本身就包含一些類(lèi)型上的暗示，我們采用按地區(qū)進(jìn)行細(xì)分汞扎。對(duì)于可能存在的跨地區(qū)瀏覽需求季稳，這種細(xì)分后的內(nèi)容應(yīng)該可以連續(xù)瀏覽。

排行榜項(xiàng)澈魄，同樣基于遙控器操作的特點(diǎn)景鼠，不應(yīng)太多。采用10項(xiàng)能提供較多的內(nèi)容同時(shí)避免讓用戶(hù)喪失注意力一忱，也比較符合用戶(hù)的預(yù)期莲蜘。

排序方式，排序方式給產(chǎn)品帶來(lái)了不必要的復(fù)雜性帘营。很少有用戶(hù)在排行榜中有切換排序方式的需求票渠。選用一種最常用的排序方式進(jìn)行排序，不再提供其他排序方式的選擇芬迄。觀(guān)察數(shù)據(jù)發(fā)現(xiàn)按熱度進(jìn)行排名是最常用的方式问顷。

視頻信息，不應(yīng)該在以一種方式排序的排行榜中引入其他含有排序意味的視頻信息（如評(píng)分）禀梳，這樣會(huì)使用戶(hù)困惑杜窄。典型的例子便是一些熱播電視劇的低評(píng)分∷阃荆可以提供描述性的信息來(lái)輔助用戶(hù)判斷塞耕。可以通過(guò)一段簡(jiǎn)介文字來(lái)提供描述性的信息嘴瓤，這種方式合并了在排行榜找視頻-到影評(píng)網(wǎng)站判斷是否觀(guān)看視頻兩個(gè)步驟扫外，減少了跳轉(zhuǎn)和操作。

最后我們選用的元素為：
電視劇廓脆、電影筛谚、綜藝、動(dòng)漫四個(gè)一級(jí)分類(lèi)
按地區(qū)的二級(jí)分類(lèi)
十項(xiàng)排行榜項(xiàng)
視頻對(duì)應(yīng)的簡(jiǎn)介

交互設(shè)計(jì)

一個(gè)取悅視覺(jué)的界面是美的界面停忿，一個(gè)無(wú)需學(xué)習(xí)就能自然操作的界面是實(shí)用的界面驾讲。我們的目標(biāo)就是兼顧美和實(shí)用，做出一個(gè)優(yōu)秀的界面席赂。

Google的一篇文章指出吮铭，用戶(hù)在0.05秒內(nèi)就對(duì)一個(gè)頁(yè)面的美觀(guān)度形成一個(gè)第一印象。這個(gè)第一印象主要由復(fù)雜程度和標(biāo)準(zhǔn)程度兩個(gè)因素來(lái)獲得颅停，復(fù)雜程度越低沐兵，標(biāo)準(zhǔn)程度越高，用戶(hù)就認(rèn)為這個(gè)頁(yè)面越美便监。之前對(duì)元素的選擇扎谎，我們控制了頁(yè)面的復(fù)雜程度碳想，接下來(lái)我們會(huì)通過(guò)對(duì)頁(yè)面元素的排布來(lái)優(yōu)化頁(yè)面的標(biāo)準(zhǔn)程度。

復(fù)雜程度越低毁靶，標(biāo)準(zhǔn)程度越高胧奔，用戶(hù)就認(rèn)為這個(gè)頁(yè)面越美

隨著越來(lái)越多的網(wǎng)絡(luò)使用，用戶(hù)對(duì)元素的位置已經(jīng)有了一定的心理預(yù)期预吆。導(dǎo)航應(yīng)該在頁(yè)面上部或者左側(cè)龙填，主要內(nèi)容位于中間靠下的區(qū)域，使用說(shuō)明在頁(yè)面的下部等心理預(yù)期已經(jīng)建立拐叉，不應(yīng)為了標(biāo)新立異或者視覺(jué)效果而打破這些心理預(yù)期岩遗，尤其是這種行為還會(huì)破壞給用戶(hù)的第一印象。
例如企鵝云視聽(tīng)選擇將導(dǎo)航置于下側(cè)凤瘦，便違反了導(dǎo)航應(yīng)該在上部的用戶(hù)心理預(yù)期宿礁，導(dǎo)致了較低的標(biāo)準(zhǔn)程度；另外簡(jiǎn)介在內(nèi)容上部也可能造成迷惑蔬芥；還有梆靖，如之前所說(shuō)，在排名中添加評(píng)分也可能產(chǎn)生迷惑笔诵。

企鵝云視聽(tīng)將導(dǎo)航放在下側(cè)

排行榜的主要形式有入口式返吻、頁(yè)面式和展板式，但是考慮到入口式排行榜操作步驟較多乎婿、頁(yè)面式排行榜過(guò)于復(fù)雜测僵，最終使用展板式的排行榜并遵循下面規(guī)律：

• 在頁(yè)面上部或左側(cè)放置導(dǎo)航
• 主要內(nèi)容放置在頁(yè)面中部
• 對(duì)內(nèi)容的說(shuō)明放置在內(nèi)容下側(cè)

入口式

頁(yè)面式

展板式

當(dāng)然還有其他更多的形式，在這里不再贅述谢翎，但我想展示一個(gè)例子：

蜜蜂視頻的排行榜捍靠，焦點(diǎn)移到內(nèi)容時(shí)左側(cè)導(dǎo)航隱藏

初看不錯(cuò)，頁(yè)面感覺(jué)很舒服岳服，使用了比較流暢的動(dòng)效交代了導(dǎo)航與內(nèi)容的關(guān)系，但是忽略了智能電視的一個(gè)特點(diǎn)：使用遙控器操作希俩。
試想一下吊宋，如果你在電影分類(lèi)下瀏覽到了第10項(xiàng)，然后想看電視劇分類(lèi)下的內(nèi)容颜武，你需要怎樣操作璃搜？不是在移動(dòng)端上，屏幕左側(cè)優(yōu)雅地右劃來(lái)調(diào)出導(dǎo)航鳞上，而是按10次左方向鍵这吻。如果這個(gè)列表再長(zhǎng)一點(diǎn)，20項(xiàng)篙议、甚至50項(xiàng)唾糯，這樣的操作你能接受嗎怠硼？
在這個(gè)問(wèn)題解決之前，最好不要在電視上使用這種縱橫交錯(cuò)的導(dǎo)航方式移怯，尤其是導(dǎo)航欄在頁(yè)面一側(cè)時(shí)香璃。
現(xiàn)在來(lái)看這個(gè)問(wèn)題有兩種解決方式，其一是讓焦點(diǎn)在內(nèi)容區(qū)域移動(dòng)便可以切換分類(lèi)舟误，這種方式需要一定的引導(dǎo)讓用戶(hù)去學(xué)習(xí)葡秒。我想這個(gè)解決方式蜜蜂視頻考慮過(guò)，但是蜜蜂視頻的內(nèi)容區(qū)域有一個(gè)『播放』的元素嵌溢，按方向鍵上下眯牧，焦點(diǎn)會(huì)移動(dòng)到播放上，如果再按方向鍵上下切換分類(lèi)赖草，這種同一種操作的不同響應(yīng)會(huì)讓用戶(hù)非常迷惑学少。
另一種方式來(lái)自于PSP，固定焦點(diǎn)疚顷，讓導(dǎo)航和內(nèi)容移動(dòng)到焦點(diǎn)上旱易。

PSP的界面

在對(duì)PSP的解決方式進(jìn)行改進(jìn)后笆檀，我決定在展板式排行榜的基礎(chǔ)上忌堂，同一層級(jí)的內(nèi)容用左右鍵切換，不同層級(jí)的內(nèi)容用上下鍵切換酗洒。這對(duì)層級(jí)的清晰提出了比較高的要求士修，而我們選用的排行榜元素確實(shí)具有很清晰的層級(jí)。

• 一級(jí)：節(jié)目分類(lèi)：電視劇樱衷、電影棋嘲、綜藝、動(dòng)漫
• 二級(jí)：地區(qū)分類(lèi)：大陸矩桂、歐美沸移、港臺(tái)、日韓
• 三級(jí)：排行榜內(nèi)容以及內(nèi)容簡(jiǎn)介

最終侄榴，排行榜的設(shè)計(jì)采用了這種方式

排行榜

• 不需要頻繁切換入口雹锣，瀏覽行為在一個(gè)頁(yè)面內(nèi)完成，不產(chǎn)生頁(yè)面跳轉(zhuǎn)
• 用方向鍵上下來(lái)使焦點(diǎn)在層級(jí)間切換癞蚕，左右來(lái)使焦點(diǎn)在同一層級(jí)內(nèi)切換
• 焦點(diǎn)移動(dòng)到分類(lèi)上保持一段時(shí)間后切換分類(lèi)蕊爵，切換分類(lèi)不需按確定鍵，也可以按確定鍵來(lái)加快這個(gè)時(shí)間
• 在內(nèi)容上按確定鍵可以播放
• 每個(gè)一級(jí)分類(lèi)的內(nèi)容為一個(gè)長(zhǎng)列表桦山，焦點(diǎn)在二級(jí)分類(lèi)移動(dòng)時(shí)攒射，內(nèi)容長(zhǎng)列表快速滾動(dòng)到二級(jí)分類(lèi)的第一項(xiàng)
• 當(dāng)焦點(diǎn)在內(nèi)容區(qū)域移動(dòng)到電影-大陸的最后一項(xiàng)時(shí)醋旦，繼續(xù)移動(dòng)將會(huì)移動(dòng)到電影-歐美的第一項(xiàng)，這時(shí)二級(jí)分類(lèi)的選擇項(xiàng)變?yōu)闅W美匆篓，焦點(diǎn)向上移動(dòng)也移到歐美
• 為保證可見(jiàn)性浑度，在非焦點(diǎn)內(nèi)容的封面上添加遮罩顯示視頻名