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