設(shè)計和研發(fā)、推廣一道，是移動應(yīng)用的成功要訣之一。定義用戶操作應(yīng)用的方式，與應(yīng)用的功能和高效的盈利模式同等重要。而且，當(dāng)涉及到為電視這樣的新交互模式設(shè)計界面，許多在智能手機和平板上有效的模式，都需要重新思考，如何利用大屏幕和遙控帶來的輸入模式。

Fire TV上的TVPlayer

 

 

這個任務(wù)并沒有嚇到TVPlayer的開發(fā)者們，這是全英國在Fire TV和Fire TV Stick上最成功的電視應(yīng)用之一。

TVPlayer是一款A(yù)ndroid原生流媒體應(yīng)用，可以讓你在Amazon和Android設(shè)備上免費觀看電視直播，它掌握了英國許多收視率最高的頻道。TVPlayer在2014年作為Fire TV的一部分同時發(fā)布，它的成功一直延續(xù)至2015年、2016年。

Simplestream，TVPlayer背后的研發(fā)與設(shè)計團隊，接受了打造電視優(yōu)先體驗的艱巨任務(wù)。

我們采訪了運營總監(jiān)Lewis Arthur和Simplestream的Android開發(fā)Michael Jordan，請他們分享Fire TV應(yīng)用設(shè)計過程中的真知灼見，下面是他們的分享。

設(shè)計過程：從手機到電視

在登陸Fire TV前，TVPlayer已經(jīng)可以在Fire Tablets和Android設(shè)備的Amazon Appstore中下載。移動端版本的設(shè)計師，將關(guān)注點聚焦于可用性與內(nèi)容的易達性。他們在歡迎界面采用了大膽醒目的圖片布局，主標(biāo)簽內(nèi)有可滾動的直播電視頻道列表。設(shè)計師決定堅持“淺色”主題，為了使內(nèi)容突出，也保持各平臺的主題一致。

 

 

 

 

當(dāng)進行平板端的支持時，設(shè)計師需要重新思考，更好地利用大屏幕。主體布局有所改動，在主界面上直接為用戶呈現(xiàn)更多內(nèi)容。這是個很好的策略，既能吸引用戶注意，并且為多種相關(guān)內(nèi)容提供快捷入口。

 

 

至于第一版Fire TV應(yīng)用，主界面需要呈現(xiàn)新的面貌。電視的設(shè)計，與手機平板的界面和用戶體驗設(shè)計有兩大不同，這都來源于TV自身的天性：它有巨大的顯示器，也不提供觸摸式界面，因為所有的操作都發(fā)生在遙控器上。

Simplestream在第一版Fire TV應(yīng)用的主界面上，盡數(shù)使用了大膽醒目的圖片。“主頁”、“正在直播”和“頻道”標(biāo)簽都移到左邊，字號成倍放大，使得從遠處看也清晰可辨。

 

 

第一版Fire TV應(yīng)用主界面，感覺像平板端那樣清爽，柵格布局中承載各類主要頻道。

為Fire TV開發(fā)簡單而迅速：4周就從移動端遷移到電視

當(dāng)我們詢問Simplestream團隊，從移動版到第一版Fire TV應(yīng)用花了多長時間，他們告訴我們大約4周。由于Fire TV是一款完全成熟的Android設(shè)備，搭載了基于Android Lollipop的Fire OS 5，改版迅速而流暢：移動端和電視版的核心組件相同，保持界面與應(yīng)用底層結(jié)構(gòu)分離，能讓開發(fā)者擁有足夠的靈活性快速迭代，在幾周內(nèi)成就完整的電視應(yīng)用。

Fire TV的界面革新

這款Fire TV應(yīng)用發(fā)布一年多以后，從應(yīng)用數(shù)據(jù)中收集了足夠的用戶操作反饋，TVPlayer開發(fā)者與設(shè)計師們決定，是時候為Fire TV應(yīng)用創(chuàng)造一套新界面了。目的在于使應(yīng)用更加高效，為電視用戶提供最佳的內(nèi)容呈現(xiàn)形式，同時在應(yīng)用中加入新功能。

新的一版加入了按月訂閱的應(yīng)用內(nèi)購——包含免費與付費內(nèi)容，使應(yīng)用更多樣化。Simplestream的設(shè)計師進行了深入的競品分析，理解流媒體應(yīng)用設(shè)計當(dāng)前的趨勢，掌握了如何設(shè)計統(tǒng)一一致的界面，甚至是跨越多平臺與設(shè)備。

 

 

選用合適的配色方案，確保應(yīng)用對眼睛友好

首先，設(shè)計師決定探索Fire TV的深色配色方案。在設(shè)計上一版Fire TV應(yīng)用時就做出了個決策，不過在這版界面更新中更進一步，把多數(shù)UI組件都加深了。深色主題主要是為了防止瀏覽內(nèi)容時眼睛疲勞，因此能創(chuàng)造更輕松的用戶體驗。這對于應(yīng)用的啟動界面尤其重要，把它改成黑色，避免“亮瞎眼”。

讓用戶的眼睛免于疲勞。

設(shè)計電視應(yīng)用時，淺色與亮色的主題需要慎重考慮，因為多數(shù)可能的使用場景都發(fā)生在夜晚，沒有自然光，因此明亮的界面會損害用戶體驗，久而久之導(dǎo)致應(yīng)用被拋棄。通過色彩來展現(xiàn)品牌也非常重要。對于TVPlayer，藍色作為高亮色彩，相比前一版，更有助于保持多平臺的品牌一致性。藍色表示免費內(nèi)容，而粉色表示付費內(nèi)容。

通過ViewPager進行內(nèi)容翻頁

TVPlayer的開發(fā)者們想要一套極具表現(xiàn)力的界面，但也希望保持品牌辨識度，并提供獨一無二的用戶體驗。因此他們決定不遵循標(biāo)準(zhǔn)的Android Leanback界面，他們建立了自己的布局與導(dǎo)航系統(tǒng)。

TVPlayer的主體布局對ViewPager組件進行了自定義。ViewPager是一種布局管理組件，可以在多頁內(nèi)容中輕松左右翻頁。在TVPlayer中，通過ViewPager的自定義運用，實現(xiàn)了水平滾動翻頁切換節(jié)目與頻道，每一頁都包含一系列自定義視圖。

內(nèi)容的快速入口增強粘性

上一版中創(chuàng)建的網(wǎng)格視圖得到了改進，每項有更大的間距，并且用水平滾動替代了垂直滾動。同時也引入了快速內(nèi)容導(dǎo)航：用戶可以選中翻頁導(dǎo)航指示器，在頁面間快速滾動。翻頁導(dǎo)航指示器與ViewPager相關(guān)聯(lián)，決定了當(dāng)前展現(xiàn)什么頁面，下一頁是什么。快速滾動意味著用戶能更快觸達更多內(nèi)容，因此有助于增強用戶粘性、加強記憶。

 

 

馬賽克式界面：內(nèi)容的快速入口，更加商業(yè)化

最終的結(jié)果是馬賽克式界面，能快速到達各個頻道。自定義Android視圖和Adapter的使用，讓開發(fā)者能在一個界面中完全掌控和融合免費與付費內(nèi)容，改善了通向應(yīng)用內(nèi)購的高級內(nèi)容入口，因此也創(chuàng)造了更多收入。TVPlayer從第一版完全免費的形式，變?yōu)榘顿M內(nèi)容的新版本。保持了干凈的用戶界面，將界面背后的邏輯與核心應(yīng)用組件分離開，使得這次改版輕松而迅速，也保證了快速迭代來創(chuàng)造優(yōu)秀的用戶體驗和加強商業(yè)化。

 

 

馬上開始創(chuàng)造Amazon Fire TV應(yīng)用吧!

Amazon Fire TV和Fire TV Stick給你提供了絕佳的機會，讓你的Android或HTML5應(yīng)用能觸達更多用戶。只要遵循Amazon Appstore的開發(fā)者文檔，把Android移動應(yīng)用遷移到Fire TV上非常簡單!這些鏈接會非常有用：

Amazon Fire TV：把應(yīng)用和游戲帶到客廳，觸達更多用戶

https://developer.amazon.com/public/solutions/devices/fire-tv/overview/developing-apps-and-games-for-amazon-fire-tv

Amazon Fire TV應(yīng)用與游戲開發(fā)入門

https://developer.amazon.com/public/solutions/devices/fire-tv/overview/getting-started-developing-apps-and-games-for-amazon-fire-tv

為Amazon Fire TV開發(fā)應(yīng)用與游戲

https://developer.amazon.com/public/solutions/devices/fire-tv/overview/developing-apps-and-games-for-amazon-fire-tv