智能電視app的設(shè)計(jì)規(guī)范，與手機(jī)端app設(shè)計(jì)理念相同，是為了對(duì)界面元素的樣式、顏色和字體大小的統(tǒng)一而設(shè)定的規(guī)范和使用原則。本文所要講的就是在設(shè)計(jì)規(guī)范下，具體到電視上的某一界面（排行榜）時(shí)，如何結(jié)合規(guī)范去進(jìn)行設(shè)計(jì)的經(jīng)驗(yàn)。
在設(shè)計(jì)排行榜UI時(shí)，從背景、頁(yè)面布局、一二級(jí)標(biāo)題切換形式、字體大小、焦點(diǎn)框狀態(tài)等進(jìn)行了設(shè)計(jì)。當(dāng)然，第一步是產(chǎn)品提供給我們?cè)蛨D。（PS：以1280*720px為例）
一、背景設(shè)計(jì)
在設(shè)計(jì)背景時(shí)，我們首先要明白電視端與手機(jī)端或者pc端是有區(qū)別的，電視端屏幕的色彩對(duì)比度及飽和度都相對(duì)較高，而且電視端屏幕尺寸較之后兩者而言都是相對(duì)較大的，所以電視端的背景色調(diào)偏暗、飽和度偏低，這樣我們可以清晰而且舒適的閱覽界面上的內(nèi)容。
以下是幾款智能電視app所用的背景：
從這三張背景中不難看出，即使是背景比較亮，飽和度較高的圖，在設(shè)計(jì)時(shí)都會(huì)加上一層黑色蒙版，從而降低背景的亮度和飽和度。
其次，我們?cè)谠O(shè)計(jì)背景時(shí)還需要考慮到的是當(dāng)前背景是否需要與產(chǎn)品其它頁(yè)面統(tǒng)一，此次排行榜與我們產(chǎn)品列表頁(yè)其實(shí)屬于一個(gè)層級(jí)的界面，所以直接使用了默認(rèn)的背景。（當(dāng)然，產(chǎn)品背景的設(shè)計(jì)與第一點(diǎn)要求也是相同的。）
二、頁(yè)面布局
由于部分電視在適配時(shí)會(huì)截屏，所以我們?cè)谶M(jìn)行頁(yè)面布局時(shí)，主要信息（不可刪減的）與四邊之間需要留一些安全邊距，如頁(yè)面布局圖中紅色區(qū)域所表示的就是在設(shè)計(jì)時(shí)所留下的安全邊距，需留的邊距為30px或以上。
綠色區(qū)域為排行榜的海報(bào)顯示區(qū)域，尺寸為：1280*342px
focus海報(bào)尺寸：224*334px
normal海報(bào)尺寸：186*278px
圖片之間間距：24px
藍(lán)色區(qū)域為標(biāo)題欄，此次標(biāo)題欄分為一級(jí)標(biāo)題和二級(jí)標(biāo)題，
一級(jí)標(biāo)題：高：60px，寬：根據(jù)分類(lèi)來(lái)定；文字之間間距：70px
二級(jí)標(biāo)題：高：50px，寬：根據(jù)分類(lèi)來(lái)定；文字之間間距：65px
黃色區(qū)域為文字顯示區(qū)域，尺寸為：1160*138px
片名與簡(jiǎn)介之間間距：20px
簡(jiǎn)介文字之間間距：12px
因?yàn)楹?bào)為排行榜首要展示的內(nèi)容，所以居于屏幕的中間，為主要顯示區(qū)域；而類(lèi)型作為標(biāo)題則應(yīng)放置于海報(bào)的上方，符合人從上至下觀(guān)看東西的自然習(xí)慣；片名作為主要信息應(yīng)該與海報(bào)相近，而簡(jiǎn)介作為次要信息則可稍微弱化。
三、一二級(jí)標(biāo)題切換形式
在電視端，由于我們是使用遙控器去操作的，與手機(jī)端不一樣，當(dāng)一個(gè)界面出現(xiàn)兩個(gè)級(jí)別的標(biāo)題時(shí)，一般情況下應(yīng)該是將標(biāo)題至于左側(cè)（如下圖所示），但是排行榜屬于特殊的橫版式的頁(yè)面，所以將一二級(jí)標(biāo)題置于頁(yè)面上方。
由于同時(shí)出現(xiàn)兩級(jí)標(biāo)題，在視覺(jué)上會(huì)給用戶(hù)帶來(lái)困惑，所以在處理這種情況時(shí)，采取了弱化非當(dāng)前選取的標(biāo)題欄，如下圖所示，當(dāng)focus框在一級(jí)標(biāo)題時(shí)，二級(jí)標(biāo)題的色調(diào)會(huì)變暗，這樣視覺(jué)上給人的感覺(jué)就比較清晰明了，能將焦點(diǎn)放在一級(jí)標(biāo)題上。
四、字體大小
我們觀(guān)看電視一般的距離為3m左右，而如今比較普遍的電視尺寸為50寸左右，以1280*720px為例，經(jīng)過(guò)我們多次嘗試發(fā)現(xiàn)，當(dāng)電視的字號(hào)小于20px時(shí)，人們比較難看清楚電視上的文字,而當(dāng)標(biāo)題文字大于32px時(shí)，文字會(huì)過(guò)大影響人們的觀(guān)看。所以，在電視端設(shè)計(jì)時(shí)，最佳文字范圍應(yīng)該為：20px～32px，20px大小的文字可以應(yīng)用于提示類(lèi)的文字。
五、焦點(diǎn)框狀態(tài)
對(duì)于電視端上可選擇的按鈕來(lái)說(shuō)，一般有三種狀態(tài)：focus、normal、blur，在通過(guò)遙控器去操控界面時(shí)，我們需要一個(gè)焦點(diǎn)框來(lái)表示當(dāng)前的選擇，也就是三種狀態(tài)中的focus狀態(tài)，除了按鈕本身需要有色值或者大小的改變，我們的焦點(diǎn)框也需要通過(guò)變換位置來(lái)給用戶(hù)反饋。
焦點(diǎn)框的設(shè)計(jì)與產(chǎn)品品牌的色值有關(guān)，通常我們會(huì)選取與品牌相近或一樣的色值作為焦點(diǎn)框的主色值，其次，還得考慮在背景下能夠體現(xiàn)得比較亮眼，如下面兩個(gè)例子：
同時(shí)，因?yàn)楹?bào)是無(wú)法控制的一個(gè)因素，所以我們會(huì)在焦點(diǎn)框的內(nèi)部加1～2px的黑色邊框，這樣可以很好的應(yīng)對(duì)與焦點(diǎn)框色值相似的海報(bào)所帶來(lái)的影響；而在電視端中，焦點(diǎn)框帶有外發(fā)光的效果，可以讓當(dāng)前選擇呈現(xiàn)一個(gè)浮現(xiàn)的狀態(tài)，讓視覺(jué)焦點(diǎn)更好的關(guān)注于當(dāng)前的選擇上。
海報(bào)的狀態(tài)只有normal和focus，normal狀態(tài)時(shí)，海報(bào)欄無(wú)焦點(diǎn)框。
在排行榜中，標(biāo)題欄的文字有以上所述的三種狀態(tài)，如下圖：
文字焦點(diǎn)框的色值與海報(bào)焦點(diǎn)框色值相同，文字在focus狀態(tài)下色值發(fā)生變化，與normal狀態(tài)下有比較大的區(qū)別。而在burl狀態(tài)下，我采取的是用一個(gè)三角符號(hào)來(lái)表示，同時(shí)字體色值也與focus狀態(tài)下相同。
六、標(biāo)準(zhǔn)色值
這是在排行榜中的標(biāo)準(zhǔn)色值規(guī)范。
最后，附帶一張?jiān)陔娨暽献罱K完成的排行榜效果圖。
此次的文章主要是自己對(duì)于電視端UI的一些經(jīng)驗(yàn)，不足之處，還望理解。
