Android TV 智能電視APP znds設(shè)計(jì)經(jīng)驗(yàn)談

蝦米 · 發(fā)表于 2014-8-26 13:31

隨著國(guó)際市場(chǎng)上Google TV的發(fā)布和國(guó)內(nèi)電視廠商紛紛推出定制Android TV的腳步，一時(shí)間智能電視平臺(tái)成為了眾多高科技企業(yè)爭(zhēng)相搶占的新市場(chǎng)。較早的智能電視平臺(tái)探索者有Google TV、Apple TV和Samsung Smart TV，還有傳說(shuō)中將要上市的iTV。國(guó)外一些知名服務(wù)，如Youtube、Twitter、Netflix等，均在這些平臺(tái)上發(fā)布了應(yīng)用。國(guó)內(nèi)電視廠商多使用Android平臺(tái)，我們就來(lái)談?wù)勗贏ndroid TV上設(shè)計(jì)app的那些事兒。
智能電視的使用特點(diǎn)——距離遠(yuǎn)、光線暗、操作心態(tài)較被動(dòng)

Android TV 智能電視APP znds設(shè)計(jì)經(jīng)驗(yàn)談

Android TV 智能電視APP znds設(shè)計(jì)經(jīng)驗(yàn)談

電視使用環(huán)境(圖1)
TV的使用環(huán)境較為特殊。智能電視尺寸大都大于42寸，其使用環(huán)境應(yīng)該在2.7-3.5米之間。所以雖然TV的顯示屏面積遠(yuǎn)大于多數(shù)PC，但因其操作距離遠(yuǎn)，導(dǎo)致單屏展示的信息量比 PC要少。

Android TV 智能電視APP znds設(shè)計(jì)經(jīng)驗(yàn)談

客廳燈光環(huán)境(圖2)
如【圖2】所示有很多用戶(hù)在使用TV時(shí)身體后仰、燈光昏暗、有可能一手吃著零食一手拿著遙控器操作電視。這種”后仰“狀態(tài)決定了：
TV用戶(hù)較為被動(dòng)，更多是信息接受者，使用遙控器無(wú)法達(dá)到一種沉浸式狀態(tài)。
因此在TV的界面設(shè)計(jì)上最好讓用戶(hù)通過(guò)方向鍵和OK能夠進(jìn)行操作，并提供返回鍵，避免用戶(hù)低頭看遙控器尋找按鍵而打斷操作的任務(wù)流。

Android TV 智能電視APP znds設(shè)計(jì)經(jīng)驗(yàn)談

TV平臺(tái)上的app應(yīng)用(圖3)
通常用戶(hù)對(duì)TV發(fā)出的聲音并不會(huì)感到反感或干擾，因?yàn)門(mén)V上的頻道和app多為“消費(fèi)性”內(nèi)容，且TV標(biāo)配音響系統(tǒng)（音量是默認(rèn)開(kāi)啟的）。所以在app設(shè)計(jì)中，可以使用聲音作為幫助提示和操作反饋提示。

導(dǎo)航設(shè)計(jì)——遙控器和導(dǎo)航結(jié)構(gòu)說(shuō)到TV的UI設(shè)計(jì)，就不得不從導(dǎo)航開(kāi)始。如上文所述，TV用戶(hù)較為被動(dòng)，所以需要清晰高效的導(dǎo)航系統(tǒng)來(lái)幫助用戶(hù)快速定位到想要看的內(nèi)容。導(dǎo)航方式與輸入設(shè)備息息相關(guān)，智能電視最主要的輸入設(shè)備還是遙控器，有時(shí)還輔以鼠標(biāo)和鍵盤(pán)。下面的圖例是Google TV和Apple TV的輸入設(shè)備。 Android TV 智能電視APP znds設(shè)計(jì)經(jīng)驗(yàn)談

Google TV和apple TV的輸入設(shè)備(圖4)從圖中我們可以看出新的智能電視輸入設(shè)備以十字方向鍵和OK鍵為核心，所以TV app的導(dǎo)航要基于上述方向鍵和OK鍵進(jìn)行設(shè)計(jì)。 Android TV 智能電視APP znds設(shè)計(jì)經(jīng)驗(yàn)談

xbox和ps3的導(dǎo)航界面(圖5)由于智能電視平臺(tái)app較新，這里我們參考較為成熟的電視平臺(tái)游戲系統(tǒng)來(lái)進(jìn)行討論，上圖分別是XBOX和PS3的操作界面，這兩款產(chǎn)品能被借鑒因?yàn)樗鼈兊牟僮鞣绞胶褪褂铆h(huán)境和智能電視系統(tǒng)較為一致。它們都用了十字導(dǎo)航的結(jié)構(gòu)。這種結(jié)構(gòu)的優(yōu)點(diǎn)在于主導(dǎo)航和二級(jí)導(dǎo)航同時(shí)展開(kāi)，并且與十字方向鍵完美契合，可以通過(guò)方向鍵在主導(dǎo)航和二級(jí)導(dǎo)航間快速切換。使用這種結(jié)構(gòu)時(shí)，二級(jí)導(dǎo)航中的item只能進(jìn)行單一操作，因?yàn)榉较蜴I受到了主導(dǎo)航占用。如果對(duì)二級(jí)導(dǎo)航中item進(jìn)行多維操作，則需要確認(rèn)展開(kāi)下一級(jí)列表： Android TV 智能電視APP znds設(shè)計(jì)經(jīng)驗(yàn)談

Google TV的導(dǎo)航界面(圖6)上圖為Google TV的操作界面，它采用了左右分欄的模式，左邊是導(dǎo)航，右邊是一個(gè)二級(jí)內(nèi)容的容器。這種結(jié)構(gòu)的邏輯其實(shí)和前面所述的十字導(dǎo)航區(qū)別并不是很大，不同的是容器里面的信息更加扁平、直觀和可視化，容器里面item操作的方向不會(huì)受到限制。但相應(yīng)地，如果想把焦點(diǎn)從容器中移回到左側(cè)導(dǎo)航需要更高的操作成本。 Android TV 智能電視APP znds設(shè)計(jì)經(jīng)驗(yàn)談

Samnsung SmartTV的導(dǎo)航界面(圖7)上圖為最近發(fā)布的Samsung Smart TV，它采用了區(qū)塊式的導(dǎo)航結(jié)構(gòu)。這種結(jié)構(gòu)中每個(gè)區(qū)塊獨(dú)立操作，信息組織更加扁平化，有的模塊和widget概念比較相似，既是信息的呈現(xiàn)也可以作為操作的入口。不足之處是，各個(gè)模塊中item的方向操作會(huì)有一定限制，不然會(huì)導(dǎo)致各個(gè)模塊切換的操作成本增加。 Android TV 智能電視APP znds設(shè)計(jì)經(jīng)驗(yàn)談

Cover flow和list信息組織方式(圖8)另外還想介紹的兩種信息展示方式，就是圖8中的coverflow和list列表，這兩種方式都采用了單方向?qū)Ш健over Flow這種方式視覺(jué)沖擊力較強(qiáng)，單屏信息承載有限，焦點(diǎn)的移動(dòng)兩種方式將在后文陳述；右邊這種列表方式視覺(jué)沖擊力較弱，單屏信息量較大，但在TV平臺(tái)處理List時(shí)候和PC上有所區(qū)別：TV app不需要滾動(dòng)條，而且要控制List的長(zhǎng)度，因?yàn)楸M管遙控器方向鍵可以啟用長(zhǎng)按加速，不過(guò)始終無(wú)法達(dá)到像PC端鼠標(biāo)拖拽滾動(dòng)滑塊控制瀏覽速度和定位的表現(xiàn)。 Android TV 智能電視APP znds設(shè)計(jì)經(jīng)驗(yàn)談

導(dǎo)航項(xiàng)的三種狀態(tài)(圖9)在基于十字方向鍵上設(shè)計(jì)導(dǎo)航時(shí)，導(dǎo)航項(xiàng)一般存在三種狀態(tài)，即“selected”，“focused”和“selected and focused“。導(dǎo)航上如果有類(lèi)別項(xiàng)（category）和動(dòng)作項(xiàng)（action）那么導(dǎo)航獲得焦點(diǎn)時(shí)，焦點(diǎn)移動(dòng)不會(huì)切換右邊容器中內(nèi)容。當(dāng)導(dǎo)航上全部為類(lèi)別項(xiàng)時(shí)，焦點(diǎn)可以和選中態(tài)一起移動(dòng)，右邊容器隨焦點(diǎn)移動(dòng)切換內(nèi)容。總而言之，導(dǎo)航設(shè)計(jì)原則如下：導(dǎo)航設(shè)計(jì)的目標(biāo)，是讓用戶(hù)快速定位，并且能夠預(yù)測(cè)出操作結(jié)果。焦點(diǎn)控制導(dǎo)航架構(gòu)完后，就是焦點(diǎn)移動(dòng)的問(wèn)題，下面幾個(gè)圖例簡(jiǎn)單介紹了一下在TV平臺(tái)上焦點(diǎn)移動(dòng)的問(wèn)題。 Android TV 智能電視APP znds設(shè)計(jì)經(jīng)驗(yàn)談

導(dǎo)航焦點(diǎn)態(tài)響應(yīng)面積(圖10)遙控器是所有電視標(biāo)配，而智能電視一般還都支持鼠標(biāo)和鍵盤(pán)操作，所以控件的狀態(tài)和PC上有些類(lèi)似。使用遙控器操作的時(shí)候，控件的狀態(tài)相當(dāng)于用TAB鍵瀏覽網(wǎng)頁(yè)或者操作桌面軟件即控件選中態(tài)切換，而使用鼠標(biāo)操作的時(shí)候和PC端一樣控件要有hover的狀態(tài)。因?yàn)門(mén)V的操作距離非常遠(yuǎn)，而且TV的外接鼠標(biāo)可能是空鼠等（其操作不像PC上鼠標(biāo)一樣容易），所以在設(shè)計(jì)TV控件時(shí)針對(duì)鼠標(biāo)hover狀態(tài)要增加其響應(yīng)面積，方便用戶(hù)操作。 Android TV 智能電視APP znds設(shè)計(jì)經(jīng)驗(yàn)談

焦點(diǎn)在列表中移動(dòng)(圖11)上圖左邊示例是一個(gè)典型的Cover Flow式的導(dǎo)航，這種情況下頁(yè)卡滾動(dòng)，焦點(diǎn)卻一直固定在中央。在單向列表或者導(dǎo)航時(shí)候，這種焦點(diǎn)固定的方式可以很好的避免當(dāng)列表中項(xiàng)目較多時(shí)，導(dǎo)航焦點(diǎn)一直停留在列表底部也就是屏幕邊角（用戶(hù)視線長(zhǎng)時(shí)間停留邊角）而造成的疲勞。上圖右示例相反，頁(yè)卡不動(dòng)，焦點(diǎn)移動(dòng)選擇。在這種方式下，當(dāng)焦點(diǎn)移動(dòng)到列表最右端繼續(xù)滾動(dòng)時(shí)，最好采用翻頁(yè)效果。這種效果一是解決了上述視線停留邊角問(wèn)題，二是可以和page controller控件結(jié)合在一起，讓用戶(hù)知道在列表中所處位置。 Android TV 智能電視APP znds設(shè)計(jì)經(jīng)驗(yàn)談

焦點(diǎn)移動(dòng)路徑(圖12)圖12是從Google TV設(shè)計(jì)指南中截出來(lái)的一張圖，提倡使用圖中綠色的路徑，避免使用紅色的對(duì)角線方向路徑：1. 純焦點(diǎn)移動(dòng)路徑最好平直且區(qū)域?qū)R，上圖所示，如果從A沿綠線移動(dòng)到B可以較好的被用戶(hù)感知和理解；如果沿紅線移動(dòng)則不符合用戶(hù)預(yù)期；2. 高焦點(diǎn)移動(dòng)要避免大范圍轉(zhuǎn)移，大范圍轉(zhuǎn)移的焦點(diǎn)會(huì)讓用戶(hù)感到焦點(diǎn)丟失；最后，就是焦點(diǎn)和控件的關(guān)系。PC和移動(dòng)設(shè)備上很多控件都具有很強(qiáng)的點(diǎn)擊感，因此用戶(hù)可以較清楚的區(qū)分控件和非控件元素。在TV平臺(tái)上因?yàn)檩斎朐O(shè)備是基于遙控器設(shè)計(jì)，失去了控件常見(jiàn)的點(diǎn)擊感覺(jué)，用戶(hù)區(qū)分哪些元素是說(shuō)明性的和哪些是控件會(huì)產(chǎn)生困難。因此在TV平臺(tái)上控件設(shè)計(jì)盡量可以達(dá)到?？梢曉乜色@得焦點(diǎn)，提示和說(shuō)明性元素，要在視覺(jué)上和空間位置上與控件做出明顯的區(qū)分。顏色和分辨率 Android TV 智能電視APP znds設(shè)計(jì)經(jīng)驗(yàn)談

顏色錯(cuò)誤使用(圖13)針對(duì)TV顯示器的本身特性，在進(jìn)行UI的視覺(jué)層面的設(shè)計(jì)中需要注意以下幾點(diǎn)：1. 純白（#FFFFFF）在電視會(huì)產(chǎn)生圖像拖影，如需使用白色，可以用#F1F1F1(hex) 或者240/240/240(RGB)進(jìn)行代替2. 高飽和度顏色會(huì)導(dǎo)致顯示失真，并且在高飽和度顏色向低飽和度顏色過(guò)渡時(shí)會(huì)產(chǎn)生邊緣模糊3. 大范圍漸變會(huì)導(dǎo)致帶狀顯示，無(wú)法平滑過(guò)渡4. 在界面邊緣最好留出10%空隙，避免發(fā)生電視顯示屏獨(dú)有的“過(guò)掃描（踩邊）”現(xiàn)象 Android TV 智能電視APP znds設(shè)計(jì)經(jīng)驗(yàn)談

分辨率和色彩模式(圖14)現(xiàn)階段智能電視有兩種分辨率模式1920x1080和1280x720，也就是我們常說(shuō)的1080p和720p，在進(jìn)行UI設(shè)計(jì)時(shí)候：1. 高分辨率設(shè)計(jì)，可以使用android 9-patch切圖進(jìn)行低分辨率適配。在測(cè)試的時(shí)候選擇用低分辨率測(cè)試可以更好的發(fā)現(xiàn)問(wèn)題。2. TV有多種顯示模式，確保所有模式下經(jīng)過(guò)測(cè)試，都不會(huì)產(chǎn)生問(wèn)題。新的交互方式最后想介紹一些TV平臺(tái)上最近出現(xiàn)的交互方式： Android TV 智能電視APP znds設(shè)計(jì)經(jīng)驗(yàn)談

TV平臺(tái)新穎的交互方式(圖15)XBOX上已經(jīng)出現(xiàn)了利用手勢(shì)進(jìn)行控制和語(yǔ)音控制導(dǎo)航。手勢(shì)控制在XBOX的Kinect上已經(jīng)取得了成功，但問(wèn)題在于需要依賴(lài)三維攝像頭這個(gè)目前還比較昂貴的設(shè)備，而二維攝像頭所用手勢(shì)操作，用戶(hù)體驗(yàn)并未達(dá)到理想的效果。至于語(yǔ)音控制，現(xiàn)有設(shè)備基本上可以完全支持，在《喬布斯傳》中喬布斯聲稱(chēng)已經(jīng)破解了智能電視密碼，其核心就是語(yǔ)音控制。另一個(gè)新穎的交互點(diǎn)則是Samsung Smart TV的密碼輸入模塊。眾所周知，文本輸入一直是遙控器的一個(gè)夢(mèng)靨。在PC和移動(dòng)設(shè)備上所有的輸入都是一步，及所選即所得。在TV上的輸入總是“選擇—確認(rèn)”，打斷了用戶(hù)連續(xù)輸入的“任務(wù)流“。而上圖電視上的軟鍵盤(pán)則建立了和遙控器九宮數(shù)字鍵的映射，按遙控器上的數(shù)字鍵就會(huì)把電視上的軟件盤(pán)的字母輸入到輸入框中，這種做法在“獨(dú)占性”的任務(wù)流中可以增加文本輸入效率。