智能電視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)的上方，符合人從上至下觀看東西的自然習(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)題上跛璧。
四严里、字體大小
我們觀看電視一般的距離為3m左右，而如今比較普遍的電視尺寸為50寸左右追城，以1280*720px為例刹碾，經(jīng)過(guò)我們多次嘗試發(fā)現(xiàn)，當(dāng)電視的字號(hào)小于20px時(shí)座柱，人們比較難看清楚電視上的文字,而當(dāng)標(biāo)題文字大于32px時(shí)迷帜，文字會(huì)過(guò)大影響人們的觀看。所以色洞，在電視端設(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)，不足之處酝锅，還望理解诡必。
