俞書偉，肖金花

（中國(guó)計(jì)量學(xué)院藝術(shù)與傳播學(xué)院，浙江 杭州 310018）

互聯(lián)網(wǎng)TV交互設(shè)計(jì)方法

俞書偉，肖金花

（中國(guó)計(jì)量學(xué)院藝術(shù)與傳播學(xué)院，浙江 杭州 310018）

通過對(duì)互聯(lián)網(wǎng)電視UI交互設(shè)計(jì)的輸入端和輸出端的研究，分析比較了現(xiàn)有互聯(lián)網(wǎng)電視產(chǎn)品交互系統(tǒng)的優(yōu)缺點(diǎn)，從中歸納出已有產(chǎn)品的完整交互設(shè)計(jì)方法流程模型，再將該模型數(shù)據(jù)原型設(shè)定為基礎(chǔ)反饋數(shù)據(jù)，建立交互反饋數(shù)據(jù)云，以數(shù)據(jù)云來(lái)驅(qū)動(dòng)互聯(lián)網(wǎng)電視的交互設(shè)計(jì)，建立數(shù)據(jù)云反饋系統(tǒng)的交互設(shè)計(jì)方法流程模型。最后以該方法，結(jié)合現(xiàn)有產(chǎn)品的有用性和易用性，進(jìn)行方法驗(yàn)證，得到了良好效果，可以為互聯(lián)網(wǎng)TV交互設(shè)計(jì)服務(wù)。

互聯(lián)網(wǎng)電視；交互設(shè)計(jì)；界面；數(shù)據(jù)云

電視在家庭中有著特殊的地位，兼顧家庭娛樂中心與大屏內(nèi)容顯示中心，是家中使用時(shí)間較長(zhǎng)的家電產(chǎn)品。隨著寬帶網(wǎng)絡(luò)不斷普及，智能互聯(lián)網(wǎng)電視不斷地在挑戰(zhàn)傳統(tǒng)電視的地位，互聯(lián)網(wǎng)機(jī)頂盒的快速發(fā)展，使得傳統(tǒng)電視也可以兼?zhèn)浠ヂ?lián)網(wǎng)電視功能，并且逐漸發(fā)展成為互聯(lián)網(wǎng)的新入口?；ヂ?lián)網(wǎng)電視與傳統(tǒng)電視的單一直播功能不同，它可以通過應(yīng)用市場(chǎng)安裝開源App，接入各種應(yīng)用軟件，擴(kuò)展了直播、點(diǎn)播、購(gòu)物、金融等功能，并且還可以載入網(wǎng)絡(luò)游戲進(jìn)行交互游戲，這些都是傳統(tǒng)電視所不能完成的。功能優(yōu)點(diǎn)很明確，不過缺陷也很明顯，網(wǎng)速影響了互聯(lián)網(wǎng)電視的各種功能性實(shí)現(xiàn)效率，往往容易在點(diǎn)播或者直播的時(shí)候出現(xiàn)卡頓，交互界面的交互信息不明確，操作模式比較復(fù)雜。正是這些優(yōu)缺點(diǎn)的存在給互聯(lián)網(wǎng)電視交互設(shè)計(jì)帶來(lái)了更多機(jī)遇，原本傳統(tǒng)電視單一的交互模式（一開機(jī)就是電視臺(tái)頻道）將會(huì)向多邊多任務(wù)智能系統(tǒng)交互模式轉(zhuǎn)變。

與手機(jī)終端的交互形式對(duì)比，電視終端的交互由于地點(diǎn)、使用場(chǎng)景、使用方式的不同，決定了其具體的交互設(shè)計(jì)模式不同，需要更多數(shù)據(jù)去集中解決問題。國(guó)際互聯(lián)網(wǎng)公司微軟、蘋果、Google，以及國(guó)內(nèi)的互聯(lián)網(wǎng)公司樂視、天貓和小米科技等，都紛紛進(jìn)軍互聯(lián)網(wǎng)電視領(lǐng)域，與傳統(tǒng)的廣電集團(tuán)爭(zhēng)搶家庭電視端的份額，它們通過打造自己的智能電視交互系統(tǒng)云產(chǎn)品，企圖以最快的速度占領(lǐng)這一市場(chǎng)，從而不斷鞏固自己在這一領(lǐng)域的地位。面對(duì)該領(lǐng)域狂風(fēng)暴雨般的創(chuàng)新，各大公司的互聯(lián)網(wǎng)電視迫切需要解決兩個(gè)關(guān)鍵問題，即硬件配置和軟件系統(tǒng)的交互設(shè)計(jì)[1-10]。

硬件配置，最早是從手機(jī)端發(fā)起的，隨著手機(jī)端的安卓系統(tǒng)開始不斷普及，并且Android宣布開放電視源代碼，最核心的硬件配置就變成了CPU的競(jìng)爭(zhēng)。早期電視盒子的核心芯片是由國(guó)外公司壟斷經(jīng)營(yíng)的，因此在該領(lǐng)域的競(jìng)爭(zhēng)差別性不大。不過從2014年8月20日創(chuàng)維與華為共同發(fā)布采用國(guó)產(chǎn)芯片進(jìn)行智能電視量產(chǎn)化之后，硬件配置的國(guó)產(chǎn)化已經(jīng)通過自主創(chuàng)新基本解決。剩下的關(guān)鍵技術(shù)主要集中在基于An?droid系統(tǒng)的開源交互設(shè)計(jì)，現(xiàn)有的國(guó)內(nèi)大部分盒子產(chǎn)品是基于Android原形的阿里云系統(tǒng)，該系統(tǒng)是阿里與華數(shù)電視合作研發(fā)的智能電視云系統(tǒng)，由阿里云數(shù)據(jù)支撐。該系統(tǒng)的交互設(shè)計(jì)類似于網(wǎng)頁(yè)交互，頁(yè)面操作復(fù)雜，從人的使用習(xí)慣的角度來(lái)說(shuō)還具有很大的改進(jìn)空間。

同時(shí)對(duì)于互聯(lián)網(wǎng)電視廠商來(lái)說(shuō)，電視的新交互設(shè)計(jì)系統(tǒng)就等于在布局新一輪的智能生態(tài)化系統(tǒng)，能夠在新的近1 000億的產(chǎn)值中分到一杯羹，打造新的智能電視生態(tài)圈。這也驅(qū)使舊的電視硬件制造商，逐漸向終端硬件廠商、電視內(nèi)容提供廠商、應(yīng)用交互服務(wù)提供廠商、網(wǎng)絡(luò)平臺(tái)運(yùn)營(yíng)商的角色轉(zhuǎn)變，并且其他更加具有創(chuàng)新性的公司也可以借此機(jī)會(huì)進(jìn)入到電視領(lǐng)域，重新進(jìn)行行業(yè)的大整合，面對(duì)這一輪可能到來(lái)的行業(yè)洗牌，誰(shuí)能率先構(gòu)建起良好的互聯(lián)網(wǎng)電視良性生態(tài)圈，誰(shuí)就能占據(jù)先發(fā)優(yōu)勢(shì)[7]。

1 互聯(lián)網(wǎng)電視UI交互系統(tǒng)研究

電視的使用環(huán)境較為特殊，一般距離在2.7～3.5m，甚至更遠(yuǎn)（見圖1）。電視的顯示屏面積大于多數(shù)PC，但因其操作距離遠(yuǎn)，會(huì)產(chǎn)生操作反應(yīng)的信息量比PC要少。這導(dǎo)致交互設(shè)計(jì)輸入與輸出的系統(tǒng)更加集中。交互設(shè)計(jì)的輸入，主要通過外接設(shè)備的信息輸入與選擇，主要有遙控器、智能手機(jī)、體感遙控等形式。交互設(shè)計(jì)的輸出指電視信息對(duì)于操作的輸入反饋，主要有同級(jí)UI焦點(diǎn)移動(dòng)、多級(jí)UI界面移動(dòng)、信息數(shù)據(jù)輸入等。

圖1 電視使用環(huán)境

針對(duì)互聯(lián)網(wǎng)電視的特點(diǎn)以及用戶的操作習(xí)慣，現(xiàn)階段各類現(xiàn)有產(chǎn)品的主要輸入交互方式仍然以傳統(tǒng)產(chǎn)品的遙控器為主，通過遙控器來(lái)進(jìn)行電視端的新產(chǎn)品交互。以Google TV和apple TV的輸入操作遙控器為例（見圖2）[6]，兩款產(chǎn)品輸入端都有類似于導(dǎo)航鍵的設(shè)計(jì)，其交互形式是以用戶的使用模式反饋數(shù)據(jù)信息集中于遙控器的操作界面，通過方向鍵和OK鍵，提供返回鍵，避免用戶低頭看遙控器尋找按鍵而打斷操作的任務(wù)流。

圖2 Google TV和Apple TV的輸入設(shè)備

通過輸入端進(jìn)入到智能電視的界面交互端，同時(shí)比較現(xiàn)有比較成熟產(chǎn)品的交互設(shè)計(jì)，主要比較Google TV、Samsung Smart TV和天貓盒子的交互界面的導(dǎo)航端（見表1）。

表1 各電視界面交互導(dǎo)航比對(duì)分析

1）Google TV的操作界面，輸入端以遙控器的導(dǎo)航鍵為中心操作區(qū)，在視頻交互界面上采用了左右分欄模式進(jìn)行同級(jí)UI焦點(diǎn)移動(dòng)，左邊是導(dǎo)航，右邊是一個(gè)二級(jí)內(nèi)容的容器。通過左邊一級(jí)內(nèi)容的操作，可以在同一目錄中切換多次二級(jí)目錄，完成多級(jí)UI界面移動(dòng)。這樣的交互模式優(yōu)點(diǎn)是單一頁(yè)面上內(nèi)容多，頁(yè)面變換少，用戶操作簡(jiǎn)便。缺點(diǎn)是內(nèi)容不容易聚焦，容易找不到一級(jí)目錄與二級(jí)目錄。

2）Samsung Smart TV，輸入端也是遙控器，輸出端主要采用了區(qū)塊式的導(dǎo)航結(jié)構(gòu)進(jìn)行多級(jí)UI與同級(jí)UI同時(shí)顯示。類似現(xiàn)在手機(jī)使用的文件夾形式，交互形式的優(yōu)點(diǎn)是便于信息分類，單一信息明確，缺點(diǎn)也是很明顯的，就是缺少各個(gè)模塊之間的相互聯(lián)系，操作頁(yè)面轉(zhuǎn)換率成本高，用戶識(shí)別性低。

3）天貓盒子產(chǎn)品已經(jīng)出了兩代，也是通過遙控器輸入、輸出端的多級(jí)UI界面導(dǎo)航采用了上下分層結(jié)構(gòu)，吸取了網(wǎng)頁(yè)設(shè)計(jì)中的優(yōu)點(diǎn)，讓整體的操作更加明了，優(yōu)點(diǎn)突出，一級(jí)與二級(jí)操作關(guān)系明確，頁(yè)面轉(zhuǎn)換率低，缺點(diǎn)是操作步驟多，操作復(fù)雜，不便于老年人的操作。

2 數(shù)據(jù)云的交互設(shè)計(jì)方法

2.1 現(xiàn)有初步交互設(shè)計(jì)方法流程模型建立

根據(jù)之前各電視界面交互導(dǎo)航比對(duì)分析（表1），發(fā)現(xiàn)這些產(chǎn)品所用的交互設(shè)計(jì)方法是以操作型焦點(diǎn)移動(dòng)方式為中心的交互設(shè)計(jì)方法。將內(nèi)容的分級(jí)、對(duì)電視端的焦點(diǎn)移動(dòng)進(jìn)行設(shè)計(jì)并建立操作模型。根據(jù)焦點(diǎn)移動(dòng)的方式來(lái)重新確定樹形目錄，根據(jù)樹形目錄來(lái)明確一級(jí)操作、二級(jí)操作、三級(jí)操作之間的關(guān)系（見圖3、圖4）。圖4中的樹形結(jié)構(gòu)，z軸為鏈接的層數(shù)，x軸為頁(yè)面包含的頁(yè)面總數(shù)，縱向（y軸）稱為輔助層。結(jié)構(gòu)層級(jí)減少能夠提高電視操作的有效性，因此，減少結(jié)構(gòu)層級(jí)，從一級(jí)目錄中植入關(guān)鍵的焦點(diǎn)。Google TV的導(dǎo)航界面就是這樣做的。

圖3 焦點(diǎn)在列表中移動(dòng)方式

圖4 多級(jí)樹形目錄

在完成樹形目錄之后，就能以導(dǎo)航鍵為輸入端，界面交互導(dǎo)航為電視的焦點(diǎn)集中端，從界面交互導(dǎo)航再進(jìn)入到二級(jí)目錄導(dǎo)航，中間以UI的界面設(shè)計(jì)還原界面原形，可以得出交互設(shè)計(jì)方法流程的操作模型，如圖5所示。

圖5 初步交互設(shè)計(jì)方法流程模型

2.2 現(xiàn)有完整的電視端交互設(shè)計(jì)方法流程模型

根據(jù)初步交互設(shè)計(jì)方法流程模型可以得到大量的用戶數(shù)據(jù)反饋信息，從而不斷地完善界面交互端的UI交互形式，從而完整地設(shè)計(jì)電視端交互。這個(gè)方法流程模型是基于現(xiàn)有產(chǎn)品分析得出的，它的優(yōu)點(diǎn)突出，程序清晰明確，交互關(guān)系層級(jí)清晰，然而由于用戶的反饋信息往往是最難獲得的，因此，該方法比較適用于產(chǎn)品研發(fā)的一級(jí)產(chǎn)品階段，對(duì)于成熟產(chǎn)品，特別是未來(lái)互聯(lián)網(wǎng)電視產(chǎn)品，應(yīng)該有更多數(shù)據(jù)支持，通過大量的數(shù)據(jù)來(lái)完成用戶研究，從用戶研究中建立設(shè)計(jì)方法流程模型（見圖6）。

圖6 完整的電視端交互設(shè)計(jì)方法流程模型

2.3 基于數(shù)據(jù)云反饋系統(tǒng)的交互設(shè)計(jì)方法流程模型建立

由完整的電視端交互設(shè)計(jì)方法流程模型，發(fā)現(xiàn)用戶數(shù)據(jù)的反饋量將直接影響交互設(shè)計(jì)的有效性，交互設(shè)計(jì)也并非純感性工程，在原有架構(gòu)（見圖6）的基礎(chǔ)上，可以構(gòu)建基礎(chǔ)反饋數(shù)據(jù)1（見圖7），從不斷累積反饋數(shù)據(jù)參數(shù)1，2，3，…，n，重新進(jìn)行交互設(shè)計(jì)方法模型建立。將該數(shù)據(jù)云的交互模型在原有模型基礎(chǔ)上，在每一層信息反饋中都加入數(shù)據(jù)云的信息反饋，從而直接給設(shè)計(jì)師具體的交互數(shù)據(jù)，以數(shù)據(jù)驅(qū)動(dòng)設(shè)計(jì)師用來(lái)進(jìn)行界面UI的交互設(shè)計(jì)（見圖8）。設(shè)完整的電視端交互設(shè)計(jì)方法模型為初始云Y1，則數(shù)據(jù)云反饋系統(tǒng)為Y1，Y2，Y3，…，Yn。設(shè)每一次數(shù)據(jù)云反饋的信息為基準(zhǔn)項(xiàng)，即每一次計(jì)算交互基礎(chǔ)模型數(shù)據(jù)與原始模型項(xiàng)符合程度，設(shè)定的取值范圍[0，1]，從小到大表示該項(xiàng)符合度的貼近度，即滿足該類產(chǎn)品用戶的需求度越高。設(shè)N為總項(xiàng)數(shù)，θn為第n項(xiàng)的權(quán)重，本案例中設(shè)置為1。Fn表示該數(shù)據(jù)對(duì)第n項(xiàng)目分析是否滿足條件，若數(shù)據(jù)不滿足此項(xiàng)檢查則為0，設(shè)為M1，若數(shù)據(jù)滿足此項(xiàng)檢查則為1，設(shè)為M2。Wn為每一單項(xiàng)的取值，則可得求和權(quán)重W，以及最后的反饋系統(tǒng)模型精度為J。

在這個(gè)設(shè)計(jì)方法模型中，最困難的是反饋數(shù)據(jù)1的建立，以及反饋數(shù)據(jù)n的處理，因此該設(shè)計(jì)的流程模型比較適用于互聯(lián)網(wǎng)電視界面交互端中后期的設(shè)計(jì)與設(shè)計(jì)評(píng)估，并且借助數(shù)據(jù)云，交互設(shè)計(jì)師在較短的時(shí)間內(nèi)得到用戶的一手信息，從而提出新的更加符合人機(jī)的交互形式，高效地完成互聯(lián)網(wǎng)電視的界面交互設(shè)計(jì)。

圖7 基于完整的電視端交互設(shè)計(jì)方法模型的基準(zhǔn)云反饋數(shù)據(jù)模型（基礎(chǔ)反饋數(shù)據(jù)）

圖8 基于數(shù)據(jù)云反饋系統(tǒng)的交互設(shè)計(jì)方法模型

2.4 方法模型驗(yàn)證

傳統(tǒng)交互設(shè)計(jì)方式是基于感性工程來(lái)完成交互設(shè)計(jì)的，其數(shù)據(jù)化模型建立無(wú)法以單人的形式建立。比對(duì)圖9、圖10，明顯可以觀察到經(jīng)過數(shù)據(jù)化之后，各項(xiàng)指標(biāo)可以清晰地進(jìn)行數(shù)據(jù)反饋，這樣可以更加理性地進(jìn)行前期的樹形分層以及焦點(diǎn)移動(dòng)方式的選擇，以便于為后期具體的可視化符合度進(jìn)行驗(yàn)證。

圖9 傳統(tǒng)交互設(shè)計(jì)方式之任務(wù)欄設(shè)計(jì)（截圖）

圖10 數(shù)據(jù)化后交互設(shè)計(jì)模型之任務(wù)欄數(shù)據(jù)（截圖）

這里以之前的案例作為分析驗(yàn)證進(jìn)行計(jì)算，對(duì)前面的3款產(chǎn)品的交互設(shè)計(jì)進(jìn)行評(píng)估，可將前面的公式代入分析表，并且增加該類界面產(chǎn)品交互設(shè)計(jì)的有用性和易用性，參考Technology Acceptance Model[10]，可以得出評(píng)估分析表（見表2），驗(yàn)證了該方法的有效性。

表2 各電視界面交互導(dǎo)航驗(yàn)證分析

3 結(jié)語(yǔ)

未來(lái)的交互設(shè)計(jì)將變得更加多樣化，互聯(lián)網(wǎng)電視的界面交互設(shè)計(jì)也將更加扁平化、數(shù)據(jù)化，不僅僅界面交互設(shè)計(jì)的輸出端會(huì)進(jìn)行改變，也將會(huì)在交互方式的輸入端有更加多樣化的方式，未來(lái)TV端的交互可能會(huì)進(jìn)入到手勢(shì)操作和語(yǔ)音控制輸入導(dǎo)航，甚至是多屏幕相連（見圖11），無(wú)論是哪一種改變，都是基于互聯(lián)網(wǎng)帶來(lái)的革新，同時(shí)由于數(shù)據(jù)云的不斷積累，產(chǎn)生大量數(shù)據(jù)計(jì)算，會(huì)產(chǎn)生越來(lái)越完善的交互操作系統(tǒng)。因此，互聯(lián)網(wǎng)電視由單屏交互設(shè)計(jì)的模式必然會(huì)向多屏交互設(shè)計(jì)的模式演變，以提高交互產(chǎn)品的有效性。

圖11 TV平臺(tái)新穎的交互方式（截圖）

[1]嚴(yán)華.IPTV技術(shù)與發(fā)展探討[J].計(jì)算機(jī)應(yīng)用，2008（2）：59-61.

[2]LIN C J，HSIEH T，SHIANGW.Exploring the interface de-sign of mobile phone for the elderly[J].Human Cen-tered Design，2009（5619）：476-481.

[3] 華為發(fā)布面向超寬帶的商業(yè)解決方案和策略BOOST[EB/OL].[2014-08-05].http://www.cww.net.cn/news/html/2013/4/25/2013425 620598402.htm.

[4] 樂視網(wǎng)聯(lián)手富士康 超級(jí)電視欲顛覆傳統(tǒng)[EB/OL].[2014-08-05].http://www.newhua.com/2013/0306/201707.shtml.

[5] IEEE802.3，Standard for information technology.part 3:（CSMA/ CD）accessmethod and physical layer specifications[S].1997.

[6] 智能電視UI設(shè)計(jì)那些事兒[EB/OL].[2014-08-05].http://cdc.ten?cent.com/?p=5520.

[7] 陳杲，王建秀，韓蘇川.互聯(lián)網(wǎng)電視應(yīng)用生態(tài)系統(tǒng)探討[J].電視技術(shù)，2014，38（4）：60-62.

[8]BOUDEC L JY，MERZ R.DCC-MAC:a decentralized MAC pro?tocol for 802.15.4a-like UWB mobile ad-hoc networks based on dynamic channel coding[C]//Proc.the First International Confer?ence on Broadband Networks.[S.l]：IEEE Press，2004：396-405.

[9] 常言說(shuō)，華慶一，柏延松.D-Cjecklist:一種老年人手機(jī)設(shè)計(jì)方法[J].計(jì)算機(jī)工程與應(yīng)用，2012，48（22）：99-103.

[10] DAVIS F D.Perceived usefulness，perceived ease of useand user acceptance of information technology[J].MIS Quarterly，1989，13（3）：319-340.

Internet TV Interaction Design Research

YU Shuwei，XIAO Jinhua
（Academy of Arts and Communication,China Jiliang University,Zhejiang Hangzhou 310018,China）

Through the study of inputs and outputs Internet TV UI interaction design,analysis and comparison of the advantages and disadvantages of existing interactive system Internet TV product are analyzed and compared,from the inductive method of interaction design complete process model of existing products,and then the prototype model data is set up as the basis of feedback data.Interactive feedback data cloud to cloud data is established to drive interaction design Internet TV,interactive design method to establish a process model data cloud feedback system.Finally,the method combines the usefulness and usability of existing products,and it is validated to be a interactively design service for Internet TV.

internet TV;interaction design;interface;data cloud

TN915

A

10.16280/j.videoe.2015.02.004

2014-08-22

教育部青年基金資助項(xiàng)目（11YJC760090）

【本文獻(xiàn)信息】俞書偉，肖金花.互聯(lián)網(wǎng)TV交互設(shè)計(jì)方法[J].電視技術(shù)，2015，39（2）.

俞書偉（1982—），碩士，講師，主研信息產(chǎn)品設(shè)計(jì)、滾塑汽車設(shè)計(jì)管理；

肖金花（1977—），女，博士，副教授，主研工業(yè)設(shè)計(jì)、設(shè)計(jì)管理。

責(zé)任編輯：許 盈