? ? 智能電視UI界面在設(shè)計(jì)時(shí)，與手機(jī)APP界面的設(shè)計(jì)略有不同，在這方面實(shí)踐了一段時(shí)間，發(fā)現(xiàn)了如下幾個(gè)常見問題，是我們?cè)谧鲈O(shè)計(jì)時(shí)應(yīng)該注意的。
1. 電視界面設(shè)計(jì)時(shí)的安全邊距是多少？
? ? 由于智能電視品牌不一，某些界面在一些電視上會(huì)出現(xiàn)切屏的現(xiàn)象，針對(duì)于這種情況，我們?cè)谠O(shè)計(jì)時(shí)要預(yù)留一些邊距，防止在電視上被切掉一部分。
2. 電視上的文字你真的看得清楚嗎？
以下三個(gè)界面都是智能電視APP上的界面（1920*1080px）：
? ? 圖2-1右上角的日期字體大小為18px，顏色RGB(158,158,158)，對(duì)于1080P的界面來說，18px的文字在于電視顯示時(shí)，通常我們?cè)诩依镉^看電視的距離約為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í)候我們?cè)撚妹鞫容^高的顏色去做還是明度較低的顏色去做呢？
? ? 從上圖的界面可以看出，明度不一樣，界面給人的整體感覺會(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)然，在我們?cè)O(shè)計(jì)前，面向的人群或者界面的著重點(diǎn)都需要清楚，這樣才能設(shè)計(jì)出既美觀又實(shí)用的APP界面。
