[ 平面理論教程 ] 為電視做UI設計系列教學之實戰經驗總結- 設計教程 - 骨子愛創意

教學主題: 為電視做UI設計系列教程之實戰經驗總結

大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

今天的這個教學主題是: 為電視做UI設計系列教程之實戰經驗總結

這教學的重點為這幾點 [ 實戰,經驗,總結,教程,系列,設計,電視,應用,Fire,T ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

當涉及到為電視這樣的新交互模式設計界面時，許多在智能手機和平板上有效的模式，都需要重新思考，如何利用大屏幕和遙控帶來的輸入模式。今天這篇譯文採訪了英國最成功的TVPlayer背後的研發與設計團隊，讓高手來教你。

當涉及到為電視這樣的新交互模式設計界面時，許多在智能手機和平板上有效的模式，都需要重新思考，如何利用大屏幕和遙控帶來的輸入模式。今天這篇譯文採訪了英國最成功的TVPlayer背後的研發與設計團隊，讓高手來教你。

Fire TV上的TVPlayer

這個任務並沒有嚇到TVPlayer的開發者們，這是全英國在Fire TV和Fire TV Stick上最成功的電視應用之一。

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

Simplestream，TVPlayer背後的研發與設計團隊，接受了打造電視優先體驗的艱巨任務。

我們採訪了運營總監Lewis Arthur和Simplestream的Android開發Michael Jordan，請他們分享Fire TV應用設計過程中的真知灼見，下面是他們的分享。

設計過程：從手機到電視

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

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

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

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

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

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

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

Fire TV的界面革新

這款Fire TV應用發布一年多以後，從應用數據中收集了足夠的用戶操作反饋，TVPlayer開發者與設計師們決定，是時候為Fire TV應用創造一套新界面了。目的在於使應用更加高效，為電視用戶提供最佳的內容呈現形式，同時在應用中加入新功能。

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

選用合適的配色方案，確保應用對眼睛友好

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

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

通過ViewPager進行內容翻頁

TVPlayer的開發者們想要一套極具表現力的界面，但也希望保持品牌辨識度，並提供獨一無二的用戶體驗。因此他們決定不遵循標準的Android Leanback界面 ，他們建立了自己的布局與導航系統。

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

內容的快速入口增強粘性

上一版中創建的網格視圖得到了改進，每項有更大的間距，並且用水平滾動替代了垂直滾動。同時也引入了快速內容導航：用戶可以選中翻頁導航指示器，在頁面間快速滾動。翻頁導航指示器與ViewPager相關聯，決定了當前展現什麼頁面，下一頁是什麼。快速滾動意味着用戶能更快觸達更多內容，因此有助於增強用戶粘性、加強記憶。

馬賽克式界面：內容的快速入口，更加商業化

最終的結果是馬賽克式界面，能快速到達各個頻道。自定義Android視圖和Adapter的使用，讓開發者能在一個界面中完全掌控和融合免費與付費內容，改善了通嚮應用內購的高級內容入口，因此也創造了更多收入。TVPlayer從第一版完全免費的形式，變為包含付費內容的新版本。保持了乾淨的用戶界面，將界面背後的邏輯與核心應用組件分離開，使得這次改版輕鬆而迅速，也保證了快速迭代來創造優秀的用戶體驗和加強商業化。

馬上開始創造Amazon Fire TV應用吧。

Amazon Fire TV和Fire TV Stick給你提供了絕佳的機會，讓你的Android或HTML5應用能觸達更多用戶。只要遵循Amazon Appstore的開發者文檔，把Android移動應用遷移到Fire TV上非常簡單。

看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

希望我們所介紹的 為電視做UI設計系列教程之實戰經驗總結 這教學會喜歡

文章標題: 骨子愛創意- 為電視做UI設計系列教程之實戰經驗總結–轉載請註明來源處

本教學分類為平面理論教程中的 設計教程相關教學

文章相關關鍵字為: 實戰,經驗,總結,教程,系列,設計,電視,應用,Fire,T

本文永久連結 :為電視做UI設計系列教程之實戰經驗總結

本文轉載自 :VIA