標(biāo)題

這次的設(shè)計(jì)包含了頁(yè)面布局、配色、文字大小以及一些電視上設(shè)計(jì)的細(xì)節(jié)等。（以720p為例子）

一、頁(yè)面布局

推薦頁(yè)布局

左側(cè)的50px是主體列表的起始位置，在推薦頁(yè)面，每個(gè)單元格我給的是400px*400px的大小，這在電視上來(lái)說(shuō)是比較大的尺寸了，起到一個(gè)推薦的作用。單元格和單元格之間的間距是20px，在720p的設(shè)計(jì)上，一般的間距我喜歡用20px—30px，這個(gè)間距讓列表看起來(lái)比較舒服。

tab欄留了60px的高度，并不是單純地指字體應(yīng)該是占滿這個(gè)空間，而是包括focus框和文字在內(nèi)，都應(yīng)該盡量不超出這區(qū)域。

播放器的功能按鍵等是放在頁(yè)面的底部，預(yù)留了80px的位置，把進(jìn)度條以及播放按鈕等放在視線的底部，也是契合了現(xiàn)在人們的觀看習(xí)慣。

長(zhǎng)列表頁(yè)的布局

對(duì)于長(zhǎng)列表，因?yàn)閷?shí)際情況，列表項(xiàng)的內(nèi)容比較多，為了呈現(xiàn)更多的內(nèi)容，所以選擇了兩行的排列方式，可視度會(huì)降低，但是對(duì)于選擇上會(huì)比較方便，長(zhǎng)列表的單元格是180px*180px，對(duì)于一些圖片來(lái)說(shuō)不至于看不清主體元素，但也不會(huì)太占地方。

歌單頁(yè)的布局

左側(cè)的430px*430px位置是放置列表頁(yè)所呈現(xiàn)過(guò)的海報(bào)圖，而右側(cè)則是歌曲的列表。

二、背景圖的設(shè)計(jì)

在上一篇文章講到過(guò)，電視端屏幕的色彩對(duì)比度及飽和度都相對(duì)較高，所以選擇背景時(shí)我還是以飽和度偏低為原則，一開(kāi)始選擇了純色漸變帶一點(diǎn)紋理的背景。

純色漸變背景

這張背景比較干凈，但是對(duì)于音樂(lè)播放器來(lái)說(shuō)顯得有點(diǎn)單調(diào)。所以，我又調(diào)了一張灰色的背景，背景時(shí)舞臺(tái)下的觀眾。

灰色的背景

這張背景比較符合音樂(lè)的那種氛圍，而且與我們的主色調(diào)比較相配，所以最后選擇了這一張背景。

三、tab欄的設(shè)計(jì)

tab欄效果

這次的tab欄采取的電視端常用的標(biāo)簽式的，通過(guò)字體顏色來(lái)區(qū)分當(dāng)前的狀態(tài)，focus狀態(tài)時(shí)為產(chǎn)品的主色，而normal狀態(tài)下，因?yàn)楸尘笆巧罨疑?，所以采取了明度稍高的灰色。tab欄字體大小為28px，上一篇文章中說(shuō)過(guò)電視端的最佳文字范圍應(yīng)該為：20px～32px，在這里因?yàn)榱斜眄?yè)的原因我用了中等偏大的字體。

四、篩選頁(yè)的設(shè)計(jì)

電視端的篩選頁(yè)與手機(jī)端和pc端有一定的差別，因?yàn)殡娨暽喜贿m于觀看大段的文字，而篩選頁(yè)的文字比較多而且排列比較密，這會(huì)使得用戶在使用這項(xiàng)功能時(shí)比較不方便，所以在設(shè)計(jì)時(shí)與排行榜的一二級(jí)菜單區(qū)分的一樣的方法，當(dāng)焦點(diǎn)移動(dòng)到相應(yīng)的類型時(shí)，該類型的所有語(yǔ)種才會(huì)呈現(xiàn)focus狀態(tài)，而剩下的則呈現(xiàn)normal狀態(tài)，這樣做的好處是方便用戶在選擇可以更加清晰明了，效果如下圖所示：

篩選頁(yè)面

五、主要配色方案

配色方案

這次的focus狀態(tài)選擇了紅色，是因?yàn)樵诨疑谋尘跋录t色顯得比較亮眼；而文字的focus狀態(tài)依然使用了白色，在灰色背景下更易于閱讀。

六、文字大小方案

文字大小方案

作為頁(yè)面中的一級(jí)標(biāo)題，用了28px大小的字體，而列表頁(yè)里的標(biāo)題則是用了22px，在電視端的列表標(biāo)題，22px或者24px都可，但是24px會(huì)影響整體的布局，所以選擇了較小的22px。

七、焦點(diǎn)框的樣式

海報(bào)的focus框

文字列表的focus框

對(duì)于海報(bào)還是選擇線框的focus框，這次增加了黑色的外發(fā)光讓焦點(diǎn)有一種浮起的效果，這種效果在文字列表下更加的明顯。（參考了apple TV的設(shè)計(jì)）

八、播放功能icon的排列

底部播放欄

播放icon

PS：這些icon非本人設(shè)計(jì)，直接取用了產(chǎn)品中的icon

如第一張圖所示，一開(kāi)始的設(shè)計(jì)是將列表、模式及收藏放在播放條的右邊，后來(lái)發(fā)現(xiàn)在電視端上，左右橫跨一個(gè)進(jìn)度條去移動(dòng)焦點(diǎn)會(huì)使用戶比較容易丟失當(dāng)前的焦點(diǎn)所在，所以后來(lái)將留個(gè)功能按鈕都放在了進(jìn)度條的左側(cè)。

icon間的距離約為15px—25px。

九、歌單列表的設(shè)計(jì)

歌單列表頁(yè)

左側(cè)的海報(bào)是歌單的封面，而歌單的背景則是將封面虛化并且加上一層黑色的蒙版，這樣在切換不同的歌單時(shí)背景都會(huì)有所改變。如效果圖所示，focus框讓當(dāng)前選擇的歌曲浮起，使焦點(diǎn)所在一目了然，而紅色的字體則表示了正在播放的歌曲，在排序前用icon替代了數(shù)字，也是為了當(dāng)焦點(diǎn)在底部播放功能icon上時(shí)可以更加清晰的知道當(dāng)前歌曲。

列表的文字是22px，與海報(bào)列表頁(yè)的標(biāo)題相同，可視度一般，但是可以呈現(xiàn)更多的內(nèi)容，在正常的距離下觀看電視時(shí)對(duì)于觀看文字影響較小。

十、效果圖展示

推薦頁(yè)

歌單頁(yè)

歌單_篩選頁(yè)

收藏頁(yè)（即我的歌曲）

詳細(xì)歌單

最后，當(dāng)然就是與開(kāi)發(fā)人員的溝通，某些效果的實(shí)現(xiàn)等。這次音樂(lè)播放器的設(shè)計(jì)過(guò)程還是挺順利的，分享自己的一些看法給大家看看，如有不足，請(qǐng)多指教。