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