? ? 智能電視UI界面在設(shè)計(jì)時(shí)，與手機(jī)APP界面的設(shè)計(jì)略有不同宜狐，在這方面實(shí)踐了一段時(shí)間势告，發(fā)現(xiàn)了如下幾個(gè)常見問題，是我們在做設(shè)計(jì)時(shí)應(yīng)該注意的抚恒。
1. 電視界面設(shè)計(jì)時(shí)的安全邊距是多少咱台？
? ? 由于智能電視品牌不一，某些界面在一些電視上會(huì)出現(xiàn)切屏的現(xiàn)象俭驮，針對(duì)于這種情況回溺，我們在設(shè)計(jì)時(shí)要預(yù)留一些邊距，防止在電視上被切掉一部分混萝。
2. 電視上的文字你真的看得清楚嗎遗遵？
以下三個(gè)界面都是智能電視APP上的界面（1920*1080px）：
? ? 圖2-1右上角的日期字體大小為18px，顏色RGB(158,158,158)逸嘀，對(duì)于1080P的界面來說车要，18px的文字在于電視顯示時(shí)，通常我們在家里觀看電視的距離約為2m~3.5m崭倘，在這個(gè)距離下正常的視力不刻意靠近去觀察的話翼岁，基本是看不見的。左下角的功能文字字體大小為28px 司光，顏色RGB（127,151,178）琅坡，基本就滿足了電視用戶的觀看需求，而且文字的顏色與背景色用了相同色調(diào)飘庄，但是飽和度和亮度較高脑蠕，這樣文字在背景下就不顯得突兀。
? ? 圖2-2中，左下角提示文字字體大小24px谴仙，顏色RGB(196,196,196)迂求，作為提示性的文字24px其實(shí)對(duì)于正常視力范圍的用戶來說已經(jīng)足夠了，但是三行提示文字晃跺，略微過多揩局，可以稍微縮短提示性文字的長度。海報(bào)標(biāo)題文字字體大小38px掀虎，顏色RGBA（255,255,255,0.7）,文字大小對(duì)于海報(bào)標(biāo)題來說比較合適凌盯，但是海報(bào)圖案由于不可控，所以我們會(huì)在文字與海報(bào)之間添加一層蒙版烹玉，這個(gè)界面使用的是漸變蒙版驰怎，由于漸變得不是很好，當(dāng)碰到像軍情解碼這種復(fù)雜的背景時(shí)二打，正文容易與背景混淆县忌。
? ? 圖2-3中副標(biāo)題文字字體大小為26px，顏色RGB（140,140,140）继效，文字略微顯小症杏，當(dāng)然在視覺上，會(huì)感覺整體比較美觀瑞信，但是在觀看時(shí)厉颤，26px的文字已經(jīng)和提示文字大小差不多了，作為副標(biāo)題文字凡简，字體大小可以稍微大一點(diǎn)逼友。
? ? 從這三個(gè)例子可以看出，大多數(shù)智能電視的APP在選擇文字大小時(shí)： 美觀性 > 實(shí)用性 潘鲫，在設(shè)計(jì)時(shí)都會(huì)選用偏小的字號(hào)翁逞，這樣讓整個(gè)界面排版看起來更加美觀，但是對(duì)于是否能夠看清楚文字這一點(diǎn)上溉仑，依然是有不足的地方。在設(shè)計(jì)時(shí)状植，我一般會(huì)選取偏大的文字去排版浊竟，例如長文字簡介字體大小為36px、標(biāo)簽欄字體大小為42px津畸，這樣可以最大程度的保證用戶能夠在正常觀看電視范圍內(nèi)看清楚所需的文字振定。
3. 偏暗的背景與偏亮的背景哪個(gè)好？
現(xiàn)在智能電視的界面肉拓，大多數(shù)都是暗色背景后频，當(dāng)然也有一些是亮色背景。
? ? 圖3-1界面是云視聽極光的首頁，背景是偏暗的：RGB（16,16,16）卑惜，略微有一點(diǎn)漸變膏执；圖3-2是Apple TV的首頁，背景偏亮露久，模糊背景的效果更米，帶有雜色；圖3-3是CIBN聚精彩的首頁毫痕，也是略微有一點(diǎn)漸變征峦，白色偏藍(lán)的背景。對(duì)比三個(gè)界面消请，可以看出偏暗背景會(huì)讓前景栏笆，也就是各個(gè)入口更加的明顯，讓人的視覺焦點(diǎn)放在了可點(diǎn)擊模塊上面臊泰；而偏亮的背景下蛉加，這種對(duì)比就比較弱，讓人看到的是整個(gè)界面風(fēng)格因宇，習(xí)慣了PC端或者手機(jī)端的用戶會(huì)更加喜歡偏亮的背景七婴，因?yàn)榭雌饋砀雍啙崱５遣旎娨暺聊幌鄬?duì)于PC或者手機(jī)來說打厘，是偏亮的，這讓亮色的背景在電視上看起來更加亮贺辰，長時(shí)間觀看的話容易讓眼睛產(chǎn)生疲勞感户盯。從偏亮的這兩個(gè)背景，我們可以看出饲化，Apple TV并不是簡單的模糊莽鸭，它的背景和聚精彩的相比較，也是偏暗的吃靠，而且還添加了雜色硫眨，這可以弱化背景，突出各個(gè)入口巢块。
? ? 目前礁阁，主流的APP都是使用偏暗背景或者比較中性的背景色，少數(shù)使用了偏白的背景族奢，但是在電視上的效果來看并不太理想姥闭，所以，建議在設(shè)計(jì)時(shí)優(yōu)先考慮偏暗背景越走。
4. 多色塊排列時(shí)棚品，明度與飽和度應(yīng)該偏高or偏低靠欢？
? ? 在設(shè)計(jì)智能電視界面時(shí)，許多入口需要我們用色塊+icon或者圖片+icon的形式去展示铜跑，當(dāng)我們選擇采用色塊去展示時(shí)门怪，不可避免的就會(huì)碰到這種多色塊排列的界面，這個(gè)時(shí)候我們該用明度較高的顏色去做還是明度較低的顏色去做呢疼进？
? ? 從上圖的界面可以看出薪缆，明度不一樣，界面給人的整體感覺會(huì)有所偏差伞广，左邊的界面明度和飽和度較高拣帽，給人的感覺就是色彩很豐富，入口圖與背景對(duì)比十分明顯嚼锄；而右邊的界面减拭，色塊的明度和飽和度相對(duì)而言較低，但是界面給人的一體感更強(qiáng)区丑。由于電視屏幕比較亮拧粪，當(dāng)明度和飽和度較高時(shí)，會(huì)發(fā)現(xiàn)和在設(shè)計(jì)時(shí)有所出入沧侥，而明度和飽和度不高的色塊可霎，在電視上的對(duì)比比想象中要更加的好。
5. 在不同界面下宴杀，應(yīng)該選用線性焦點(diǎn)框還是面狀的焦點(diǎn)框癣朗？線性焦點(diǎn)框的粗細(xì)應(yīng)該多少像素合適？
? ? 電視端與手機(jī)端或者pc端的差別就在于旺罢，所有的行為都是通過遙控器去控制的旷余，不同于手機(jī)端的觸屏或者pc端的點(diǎn)控，所以在電視端上的APP就需要一個(gè)焦點(diǎn)框來顯示當(dāng)前狀態(tài)扁达。而焦點(diǎn)框目前有三種模式：線性焦點(diǎn)框正卧、面狀焦點(diǎn)框以及無焦點(diǎn)框。
? ? 這兩個(gè)界面都是APP的首頁跪解，圖5-1用的是面狀焦點(diǎn)框炉旷，圖5-2用的是線性焦點(diǎn)框，這兩種焦點(diǎn)樣式在顯示當(dāng)前焦點(diǎn)時(shí)都比較的清晰叉讥，而圖5-3用的無焦點(diǎn)樣式砾跃，只是入口的放大+陰影來表示當(dāng)前焦點(diǎn)所在位置，這對(duì)于動(dòng)效的要求就比較的高节吮，通過移動(dòng)的動(dòng)效或者焦點(diǎn)所在時(shí)的動(dòng)效來準(zhǔn)確保證用戶可以第一時(shí)間找到焦點(diǎn)所在。前兩者相對(duì)而言比較簡單判耕，而且可以起到比較好的效果透绩，而無焦點(diǎn)框的形式在沒有動(dòng)效的支持下不建議使用。
? ? 當(dāng)在別的界面時(shí)，焦點(diǎn)框又該怎么使用帚豪，舉個(gè)列子：視頻類APP的選集碳竟，如下圖：
? ? 在一些比較特殊的界面，比如選集狸臣，大多數(shù)APP還是選擇了面狀的焦點(diǎn)框莹桅，因?yàn)榫€狀焦點(diǎn)框在這種排布整齊，簡潔的界面并不顯眼烛亦，不容易引起人們的關(guān)注诈泼。在另外一些界面，比如視頻類APP的列表頁煤禽，選擇線性焦點(diǎn)框的更加的多铐达，這是因?yàn)樵谟泻?bào)的情況下，線性焦點(diǎn)框可以更好地融入整個(gè)界面中去檬果。
? ?當(dāng)我使用線性焦點(diǎn)框時(shí)瓮孙，一般會(huì)選擇3px~5px寬的焦點(diǎn)框，在這個(gè)范圍內(nèi)的焦點(diǎn)框不會(huì)顯得笨重选脊，也不會(huì)太過于細(xì)而起不到焦點(diǎn)的作用杭抠。
? ? 總結(jié)：以上幾點(diǎn)是智能電視UI設(shè)計(jì)所需考慮的幾個(gè)小問題，針對(duì)一些視頻類的APP或者面向人群較廣的APP恳啥，如果你設(shè)計(jì)的APP是面向兒童或者老人的偏灿，那方向可能會(huì)有所不一樣。舉個(gè)列子：兒童類的APP色彩會(huì)比較鮮艷角寸，背景色不宜偏暗菩混。當(dāng)然，在我們設(shè)計(jì)前扁藕，面向的人群或者界面的著重點(diǎn)都需要清楚沮峡，這樣才能設(shè)計(jì)出既美觀又實(shí)用的APP界面。
