電視應(yīng)用設(shè)計(jì)的實(shí)戰(zhàn)案例,通過(guò) TVPlayer 在 Amazon Fire TV 平臺(tái)上的設(shè)計(jì)演化,來(lái)感受 TV 應(yīng)用的設(shè)計(jì)特點(diǎn)。
設(shè)計(jì)和研發(fā)、推廣一道,是移動(dòng)應(yīng)用的成功要訣之一。定義用戶操作應(yīng)用的方式,與應(yīng)用的功能和高效的盈利模式同等重要。而且,當(dāng)涉及到為電視這樣的新交互模式設(shè)計(jì)界面,許多在智能手機(jī)和平板上有效的模式,都需要重新思考,如何利用大屏幕和遙控帶來(lái)的輸入模式。
Fire TV上的TVPlayer
這個(gè)任務(wù)并沒(méi)有嚇到TVPlayer的開(kāi)發(fā)者們,這是全英國(guó)在Fire TV和Fire TV Stick上最成功的電視應(yīng)用之一。
TVPlayer是一款A(yù)ndroid原生流媒體應(yīng)用,可以讓你在Amazon和Android設(shè)備上免費(fèi)觀看電視直播,它掌握了英國(guó)許多收視率最高的頻道。TVPlayer在2014年作為Fire TV的一部分同時(shí)發(fā)布,它的成功一直延續(xù)至2015年、2016年。
Simplestream,TVPlayer背后的研發(fā)與設(shè)計(jì)團(tuán)隊(duì),接受了打造電視優(yōu)先體驗(yàn)的艱巨任務(wù)。
我們采訪了運(yùn)營(yíng)總監(jiān)Lewis Arthur和Simplestream的Android開(kāi)發(fā)Michael Jordan,請(qǐng)他們分享Fire TV應(yīng)用設(shè)計(jì)過(guò)程中的真知灼見(jiàn),下面是他們的分享。
TVPlayer是一款A(yù)ndroid原生流媒體應(yīng)用,可以讓你在Amazon和Android設(shè)備上免費(fèi)觀看電視直播,它掌握了英國(guó)許多收視率最高的頻道。TVPlayer在2014年作為Fire TV的一部分同時(shí)發(fā)布,它的成功一直延續(xù)至2015年、2016年。
Simplestream,TVPlayer背后的研發(fā)與設(shè)計(jì)團(tuán)隊(duì),接受了打造電視優(yōu)先體驗(yàn)的艱巨任務(wù)。
我們采訪了運(yùn)營(yíng)總監(jiān)Lewis Arthur和Simplestream的Android開(kāi)發(fā)Michael Jordan,請(qǐng)他們分享Fire TV應(yīng)用設(shè)計(jì)過(guò)程中的真知灼見(jiàn),下面是他們的分享。
設(shè)計(jì)過(guò)程:從手機(jī)到電視
在登陸Fire TV前,TVPlayer已經(jīng)可以在Fire Tablets和Android設(shè)備的Amazon Appstore中下載。移動(dòng)端版本的設(shè)計(jì)師,將關(guān)注點(diǎn)聚焦于可用性與內(nèi)容的易達(dá)性。他們?cè)跉g迎界面采用了大膽醒目的圖片布局,主標(biāo)簽內(nèi)有可滾動(dòng)的直播電視頻道列表。設(shè)計(jì)師決定堅(jiān)持“淺色”主題,為了使內(nèi)容突出,也保持各平臺(tái)的主題一致。
當(dāng)進(jìn)行平板端的支持時(shí),設(shè)計(jì)師需要重新思考,更好地利用大屏幕。主體布局有所改動(dòng),在主界面上直接為用戶呈現(xiàn)更多內(nèi)容。這是個(gè)很好的策略,既能吸引用戶注意,并且為多種相關(guān)內(nèi)容提供快捷入口。
至于第一版Fire TV應(yīng)用,主界面需要呈現(xiàn)新的面貌。電視的設(shè)計(jì),與手機(jī)平板的界面和用戶體驗(yàn)設(shè)計(jì)有兩大不同,這都來(lái)源于TV自身的天性:它有巨大的顯示器,也不提供觸摸式界面,因?yàn)樗械牟僮鞫及l(fā)生在遙控器上。
Simplestream在第一版Fire TV應(yīng)用的主界面上,盡數(shù)使用了大膽醒目的圖片。“主頁(yè)”、“正在直播”和“頻道”標(biāo)簽都移到左邊,字號(hào)成倍放大,使得從遠(yuǎn)處看也清晰可辨。
第一版Fire TV應(yīng)用主界面,感覺(jué)像平板端那樣清爽,柵格布局中承載各類主要頻道。
為Fire TV開(kāi)發(fā)簡(jiǎn)單而迅速:4周就從移動(dòng)端遷移到電視
當(dāng)我們?cè)儐?wèn)Simplestream團(tuán)隊(duì),從移動(dòng)版到第一版Fire TV應(yīng)用花了多長(zhǎng)時(shí)間,他們告訴我們大約4周。由于Fire TV是一款完全成熟的Android設(shè)備,搭載了基于Android Lollipop的Fire OS 5,改版迅速而流暢:移動(dòng)端和電視版的核心組件相同,保持界面與應(yīng)用底層結(jié)構(gòu)分離,能讓開(kāi)發(fā)者擁有足夠的靈活性快速迭代,在幾周內(nèi)成就完整的電視應(yīng)用。
Fire TV的界面革新
這款Fire TV應(yīng)用發(fā)布一年多以后,從應(yīng)用數(shù)據(jù)中收集了足夠的用戶操作反饋,TVPlayer開(kāi)發(fā)者與設(shè)計(jì)師們決定,是時(shí)候?yàn)镕ire TV應(yīng)用創(chuàng)造一套新界面了。目的在于使應(yīng)用更加高效,為電視用戶提供最佳的內(nèi)容呈現(xiàn)形式,同時(shí)在應(yīng)用中加入新功能。
新的一版加入了按月訂閱的應(yīng)用內(nèi)購(gòu)——包含免費(fèi)與付費(fèi)內(nèi)容,使應(yīng)用更多樣化。Simplestream的設(shè)計(jì)師進(jìn)行了深入的競(jìng)品分析,理解流媒體應(yīng)用設(shè)計(jì)當(dāng)前的趨勢(shì),掌握了如何設(shè)計(jì)統(tǒng)一一致的界面,甚至是跨越多平臺(tái)與設(shè)備。
新的一版加入了按月訂閱的應(yīng)用內(nèi)購(gòu)——包含免費(fèi)與付費(fèi)內(nèi)容,使應(yīng)用更多樣化。Simplestream的設(shè)計(jì)師進(jìn)行了深入的競(jìng)品分析,理解流媒體應(yīng)用設(shè)計(jì)當(dāng)前的趨勢(shì),掌握了如何設(shè)計(jì)統(tǒng)一一致的界面,甚至是跨越多平臺(tái)與設(shè)備。
選用合適的配色方案,確保應(yīng)用對(duì)眼睛友好
首先,設(shè)計(jì)師決定探索Fire TV的深色配色方案。在設(shè)計(jì)上一版Fire TV應(yīng)用時(shí)就做出了個(gè)決策,不過(guò)在這版界面更新中更進(jìn)一步,把多數(shù)UI組件都加深了。深色主題主要是為了防止瀏覽內(nèi)容時(shí)眼睛疲勞,因此能創(chuàng)造更輕松的用戶體驗(yàn)。這對(duì)于應(yīng)用的啟動(dòng)界面尤其重要,把它改成黑色,避免“亮瞎眼”。
讓用戶的眼睛免于疲勞。
設(shè)計(jì)電視應(yīng)用時(shí),淺色與亮色的主題需要慎重考慮,因?yàn)槎鄶?shù)可能的使用場(chǎng)景都發(fā)生在夜晚,沒(méi)有自然光,因此明亮的界面會(huì)損害用戶體驗(yàn),久而久之導(dǎo)致應(yīng)用被拋棄。通過(guò)色彩來(lái)展現(xiàn)品牌也非常重要。對(duì)于TVPlayer,藍(lán)色作為高亮色彩,相比前一版,更有助于保持多平臺(tái)的品牌一致性。藍(lán)色表示免費(fèi)內(nèi)容,而粉色表示付費(fèi)內(nèi)容。
通過(guò)ViewPager進(jìn)行內(nèi)容翻頁(yè)
TVPlayer的開(kāi)發(fā)者們想要一套極具表現(xiàn)力的界面,但也希望保持品牌辨識(shí)度,并提供獨(dú)一無(wú)二的用戶體驗(yàn)。因此他們決定不遵循標(biāo)準(zhǔn)的Android Leanback界面,他們建立了自己的布局與導(dǎo)航系統(tǒng)。
TVPlayer的主體布局對(duì)ViewPager組件進(jìn)行了自定義。ViewPager是一種布局管理組件,可以在多頁(yè)內(nèi)容中輕松左右翻頁(yè)。在TVPlayer中,通過(guò)ViewPager的自定義運(yùn)用,實(shí)現(xiàn)了水平滾動(dòng)翻頁(yè)切換節(jié)目與頻道,每一頁(yè)都包含一系列自定義視圖。
內(nèi)容的快速入口增強(qiáng)粘性
上一版中創(chuàng)建的網(wǎng)格視圖得到了改進(jìn),每項(xiàng)有更大的間距,并且用水平滾動(dòng)替代了垂直滾動(dòng)。同時(shí)也引入了快速內(nèi)容導(dǎo)航:用戶可以選中翻頁(yè)導(dǎo)航指示器,在頁(yè)面間快速滾動(dòng)。翻頁(yè)導(dǎo)航指示器與ViewPager相關(guān)聯(lián),決定了當(dāng)前展現(xiàn)什么頁(yè)面,下一頁(yè)是什么?焖贊L動(dòng)意味著用戶能更快觸達(dá)更多內(nèi)容,因此有助于增強(qiáng)用戶粘性、加強(qiáng)記憶。
馬賽克式界面:內(nèi)容的快速入口,更加商業(yè)化
最終的結(jié)果是馬賽克式界面,能快速到達(dá)各個(gè)頻道。自定義Android視圖和Adapter的使用,讓開(kāi)發(fā)者能在一個(gè)界面中完全掌控和融合免費(fèi)與付費(fèi)內(nèi)容,改善了通向應(yīng)用內(nèi)購(gòu)的高級(jí)內(nèi)容入口,因此也創(chuàng)造了更多收入。TVPlayer從第一版完全免費(fèi)的形式,變?yōu)榘顿M(fèi)內(nèi)容的新版本。保持了干凈的用戶界面,將界面背后的邏輯與核心應(yīng)用組件分離開(kāi),使得這次改版輕松而迅速,也保證了快速迭代來(lái)創(chuàng)造優(yōu)秀的用戶體驗(yàn)和加強(qiáng)商業(yè)化。
馬上開(kāi)始創(chuàng)造Amazon Fire TV應(yīng)用吧!
Amazon Fire TV和Fire TV Stick給你提供了絕佳的機(jī)會(huì),讓你的Android或HTML5應(yīng)用能觸達(dá)更多用戶。只要遵循Amazon Appstore的開(kāi)發(fā)者文檔,把Android移動(dòng)應(yīng)用遷移到Fire TV上非常簡(jiǎn)單!這些鏈接會(huì)非常有用:
Amazon Fire TV:把應(yīng)用和游戲帶到客廳,觸達(dá)更多用戶
Amazon Fire TV應(yīng)用與游戲開(kāi)發(fā)入門
為Amazon Fire TV開(kāi)發(fā)應(yīng)用與游戲
Amazon Fire TV:把應(yīng)用和游戲帶到客廳,觸達(dá)更多用戶
Amazon Fire TV應(yīng)用與游戲開(kāi)發(fā)入門
為Amazon Fire TV開(kāi)發(fā)應(yīng)用與游戲