這次的設計包含了頁面布局、配色、文字大小以及一些電視上設計的細節等。（以720p為例子）
一、頁面布局
左側的50px是主體列表的起始位置，在推薦頁面，每個單元格我給的是400px*400px的大小，這在電視上來說是比較大的尺寸了，起到一個推薦的作用。單元格和單元格之間的間距是20px，在720p的設計上，一般的間距我喜歡用20px—30px，這個間距讓列表看起來比較舒服。
tab欄留了60px的高度，并不是單純地指字體應該是占滿這個空間，而是包括focus框和文字在內，都應該盡量不超出這區域。
播放器的功能按鍵等是放在頁面的底部，預留了80px的位置，把進度條以及播放按鈕等放在視線的底部，也是契合了現在人們的觀看習慣。
對于長列表，因為實際情況，列表項的內容比較多，為了呈現更多的內容，所以選擇了兩行的排列方式，可視度會降低，但是對于選擇上會比較方便，長列表的單元格是180px*180px，對于一些圖片來說不至于看不清主體元素，但也不會太占地方。
左側的430px*430px位置是放置列表頁所呈現過的海報圖，而右側則是歌曲的列表。
二、背景圖的設計
在上一篇文章講到過，電視端屏幕的色彩對比度及飽和度都相對較高，所以選擇背景時我還是以飽和度偏低為原則，一開始選擇了純色漸變帶一點紋理的背景。
這張背景比較干凈，但是對于音樂播放器來說顯得有點單調。所以，我又調了一張灰色的背景，背景時舞臺下的觀眾。
這張背景比較符合音樂的那種氛圍，而且與我們的主色調比較相配，所以最后選擇了這一張背景。
三、tab欄的設計
這次的tab欄采取的電視端常用的標簽式的，通過字體顏色來區分當前的狀態，focus狀態時為產品的主色，而normal狀態下，因為背景是深灰色的，所以采取了明度稍高的灰色。tab欄字體大小為28px，上一篇文章中說過電視端的最佳文字范圍應該為：20px～32px，在這里因為列表頁的原因我用了中等偏大的字體。
四、篩選頁的設計
電視端的篩選頁與手機端和pc端有一定的差別，因為電視上不適于觀看大段的文字，而篩選頁的文字比較多而且排列比較密，這會使得用戶在使用這項功能時比較不方便，所以在設計時與排行榜的一二級菜單區分的一樣的方法，當焦點移動到相應的類型時，該類型的所有語種才會呈現focus狀態，而剩下的則呈現normal狀態，這樣做的好處是方便用戶在選擇可以更加清晰明了，效果如下圖所示：
五、主要配色方案
這次的focus狀態選擇了紅色，是因為在灰色的背景下紅色顯得比較亮眼；而文字的focus狀態依然使用了白色，在灰色背景下更易于閱讀。
六、文字大小方案
作為頁面中的一級標題，用了28px大小的字體，而列表頁里的標題則是用了22px，在電視端的列表標題，22px或者24px都可，但是24px會影響整體的布局，所以選擇了較小的22px。
七、焦點框的樣式
對于海報還是選擇線框的focus框，這次增加了黑色的外發光讓焦點有一種浮起的效果，這種效果在文字列表下更加的明顯。（參考了apple TV的設計）
八、播放功能icon的排列
PS：這些icon非本人設計，直接取用了產品中的icon
如第一張圖所示，一開始的設計是將列表、模式及收藏放在播放條的右邊，后來發現在電視端上，左右橫跨一個進度條去移動焦點會使用戶比較容易丟失當前的焦點所在，所以后來將留個功能按鈕都放在了進度條的左側。
icon間的距離約為15px—25px。
九、歌單列表的設計
左側的海報是歌單的封面，而歌單的背景則是將封面虛化并且加上一層黑色的蒙版，這樣在切換不同的歌單時背景都會有所改變。如效果圖所示，focus框讓當前選擇的歌曲浮起，使焦點所在一目了然，而紅色的字體則表示了正在播放的歌曲，在排序前用icon替代了數字，也是為了當焦點在底部播放功能icon上時可以更加清晰的知道當前歌曲。
列表的文字是22px，與海報列表頁的標題相同，可視度一般，但是可以呈現更多的內容，在正常的距離下觀看電視時對于觀看文字影響較小。
十、效果圖展示
最后，當然就是與開發人員的溝通，某些效果的實現等。這次音樂播放器的設計過程還是挺順利的，分享自己的一些看法給大家看看，如有不足，請多指教。
