基于視覺認知的智能電視界面交互設(shè)計研究

金慧豐

關(guān)鍵詞：視覺認知;智能電視;界面交互設(shè)計

在互聯(lián)網(wǎng)信息浪潮的沖擊下，電視呈現(xiàn)出智能化的發(fā)展趨勢。由于搭載了操作系統(tǒng)，智能電視的功能大大增加，同時其界面交互也變得更為復(fù)雜，給用戶帶來了使用負擔(dān)。如何將內(nèi)容準確、高效、明了地展現(xiàn)給使用者，成為了智能電視界面交互設(shè)計的難點之一。視覺認知的核心是視覺輸入和行為輸出之間發(fā)生的內(nèi)部心理過程。將視覺認知應(yīng)用于智能電視的界面交互設(shè)計中，從信息層、結(jié)構(gòu)層與表現(xiàn)層這三個層次構(gòu)建其交互原則，并基于眼動實驗進行評估，對于構(gòu)建基于視覺認知智能電視界面交互設(shè)計邏輯有一定幫助。

1視覺認知下的交互設(shè)計概述

1.1視覺認知下的交互設(shè)計界定

視覺思維自下而上的加工是以刺激為驅(qū)動的，是神經(jīng)元向上傳遞信息的過程，處于認知的低水平加工層次，認知加工的結(jié)果是基于人眼所觀察的信息。相比自上而下的加工方式，自下而上加工能體現(xiàn)出視知覺加工的能動性，其包括3個階段：信息的獲取、合成圖案以及模式匹配。自上而下的加工設(shè)計是交互設(shè)計前提，交互設(shè)計是視覺認知的最終目的，是以目的為驅(qū)動的，神經(jīng)元向下傳遞信息，通過大腦的指令，眼睛不斷地搜尋相近的信息地過程。在界面設(shè)計活動中，簡單的視覺元素都會影響著人的視覺加工方式。視覺認知心理中的“格式塔原理”就是一種典型的自上而下的視覺認知交互設(shè)計。若用戶帶有明確的目的性進行操作，則會對界面中的視覺元素有主觀的選擇性注意。

視覺認知下的交互設(shè)計原則

用戶與智能電視進行交互是有特定目的的行為，因此視覺認知應(yīng)以自上而下的交互設(shè)計為主。用戶會將界面的視覺信息與固有的認知進行比較，選擇與心理預(yù)期相符合的信息，忽略無關(guān)信息。因此，在進行智能電視界面交互設(shè)計時，交互邏輯應(yīng)與視覺認知交互設(shè)計的通用原則一致，其保證操作過程的具有可理解性;視覺呈現(xiàn)應(yīng)符合格式塔心理學(xué)中的規(guī)律，保證視覺認知的可理解性，具體交互設(shè)計如下：

1）接近性原則。將不同的功能模塊按照位置進行劃分，相同的功能放在一起，與其他功能拉開距離。空間位置可作為界面信息的一級劃分依據(jù)。

2）相似性原則。同一層級的信息或者同一模塊的功能，應(yīng)采用相似的視覺元素進行呈現(xiàn)，如都采用文字進行呈現(xiàn)，采用相似的顏色等。視覺呈現(xiàn)形式可作為界面信息的二級劃分依據(jù)。

3）連續(xù)性原則。人的視覺習(xí)慣是從左往右，從上往下觀看。因此，界面應(yīng)為網(wǎng)格化結(jié)構(gòu)且由于如同一按照網(wǎng)格狀排布，上下左右均對齊，引導(dǎo)用戶從左往右、從上往下觀看。

2基于視覺認知的智能電視界面交互設(shè)計的邏輯構(gòu)建

在智能電視界面視覺交互過程中，用戶覺察到界面的視覺內(nèi)容，進而獲知界面的視覺信息。故本研究將界面視覺交互設(shè)計分為三個層次。底層設(shè)計是對界面需要傳達的信息的整合分類，結(jié)構(gòu)層設(shè)計是對交互架構(gòu)的規(guī)范，表現(xiàn)層設(shè)計是對信息呈現(xiàn)形式的規(guī)范。通過這三個逐級遞進深入的層次構(gòu)建視覺交互邏輯，過程如圖1所示。

2.1底層設(shè)計的界面信息分類

由于智能電視的功能和內(nèi)容較多，故需先對其界面信息做層次規(guī)劃。主界面上的信息包括以下三類：導(dǎo)航、推薦內(nèi)容和狀態(tài)。導(dǎo)航是對智能電視功能的一級劃分，主要包括信號源、電影、設(shè)置等。推薦內(nèi)容是系統(tǒng)直接在主界面上進行的內(nèi)容推介，通常按照電視、新聞等標簽進行劃分。狀態(tài)是系統(tǒng)或硬件的狀態(tài)，可看做次要信息。

2.2結(jié)構(gòu)層設(shè)計的界面交互架構(gòu)

在上文提到的基于視覺認知的設(shè)計原則指導(dǎo)下，按照界面信息的分類對交互架構(gòu)進行規(guī)范。依據(jù)接近性原則，將主界面按位置進行一級劃分，導(dǎo)航、推薦和狀態(tài)三個功能模塊應(yīng)各自緊密排布在一起，相互之間拉開距離。依據(jù)相似性原則，按不同功能區(qū)塊的體量進行二級劃分，導(dǎo)航內(nèi)容推薦模塊占據(jù)最大體量，導(dǎo)航模塊次之，狀態(tài)模塊最小。按呈現(xiàn)形式進行三級劃分，導(dǎo)航、推薦和狀態(tài)三部分各采用不同的呈現(xiàn)形式，每個模塊內(nèi)部的形式保持一致。此外，依據(jù)連續(xù)性原則，每個模塊內(nèi)各個子模塊應(yīng)按規(guī)律排布，上下左右對齊，間距一致。

2.3表現(xiàn)層設(shè)計的界面視覺呈現(xiàn)

在對信息進行分類并規(guī)范了交互架構(gòu)后，以布局和呈現(xiàn)形式為要素對界面的視覺呈現(xiàn)進行規(guī)范。

1）布局規(guī)范。在自上而下的認知中，由于用戶帶著較強的目的，承載了搜索的功能導(dǎo)航模塊相對較為重要，應(yīng)排布在界面頂部或左側(cè);在自下而上的認知中，由于用戶只是隨意瀏覽，內(nèi)容推薦會更吸引他們的注意，應(yīng)排布在界面中間主要位置并占據(jù)較大體量;而狀態(tài)欄是用戶幾乎不關(guān)心的，應(yīng)盡可能弱化其存在。這三部分內(nèi)容應(yīng)按模塊進行位置劃分，并按網(wǎng)格狀布局。

2）呈現(xiàn)形式規(guī)范。由于導(dǎo)航、推薦及狀態(tài)這三個模塊承載的功能不同，故其呈現(xiàn)形式也有所差異。導(dǎo)航是用戶自上而下中的重要元素，其形式應(yīng)直接明了，故直接采用文字的形式呈現(xiàn)。起到內(nèi)容推薦和介紹的功能，在自下而上中是需要主動吸引用戶注意的元素，故采用視頻精彩畫面截圖作為背景，在上面以疊加視頻名稱的形式呈現(xiàn)。狀態(tài)是次要元素，為了與導(dǎo)航和推薦相區(qū)分，可以采用圖標的形式呈現(xiàn)。

3基于視覺認知的智能電視界面交互設(shè)計與評估

3.1基于視覺認知的智能電視界面交互設(shè)計分析

通過布局規(guī)范與呈現(xiàn)形式規(guī)范對智能電視交互界面進行設(shè)計，提高智能電視在用戶中的視覺認知適用的舒適度與效率性。設(shè)計了如圖2所示的兩個界面交互低保真原型。原型一導(dǎo)航在頂部，以文字形式呈現(xiàn);推薦在中央，以圖片加文字的形式呈現(xiàn);狀態(tài)在右上角，以圖標的形式呈現(xiàn)。原型二依據(jù)導(dǎo)航在左側(cè)，以文字形式呈現(xiàn);推薦在中央，以圖片加文字的形式呈現(xiàn);狀態(tài)在右下角，以圖標的形式呈現(xiàn)。

3.2基于視覺認知的智能電視界面交互設(shè)計的評估

為了研究界面中功能區(qū)塊的布局對用戶識別速度與準確性的影響。以圖2所示的兩種低保真原型為素材進行了眼動實驗，實驗數(shù)據(jù)如表1所示。共統(tǒng)計分析了完成任務(wù)時的目標區(qū)域注視時長、任務(wù)完成時長與準確度。從數(shù)據(jù)分析結(jié)果看，原型二的任務(wù)完成時間小于原型一，差異顯著（P=0.038，P<0.05）;從可用性角度看，低保真原型二的識別速度顯著高于低保真原型一。但是，結(jié)合任務(wù)完成準確度，原型一在認知準確度上顯著優(yōu)于原型二（P=0.049，P<0.05）。目標圖標注視時長反應(yīng)用戶理解所需時間，可反應(yīng)界面低保真原型的可讀性，原型一的目標圖標注視時間小于原型二，且差異顯著（P=0.031，P<0.05），說明原型一的可讀性更強。

結(jié)合目標圖標注視時間與任務(wù)完成準確度兩項指標可得出結(jié)論，低保真原型一在可讀性與識別的準確性上顯著優(yōu)于低保真原型二;通過任務(wù)完成時長這一項指標可得出結(jié)論，低保真原型二在顯著性與認知的效率上優(yōu)于低保真原型一，但是差異不顯著。在目標區(qū)域上的注視時長除了與用于理解其含義所需的時間相關(guān)外，也與區(qū)域自身大小有一定關(guān)系。被試在進行掃描時不可避免地會在體量較大的區(qū)域停留較多時間，實驗為考慮到此因素對結(jié)果的影響。此項指標需結(jié)合訪談進行分析，直接得出用戶對原型理解能力差異的結(jié)論帶有一定主觀性。

4結(jié)語

本文分析了面向數(shù)字界面的視覺認知，并將其應(yīng)用于智能電視界面交互設(shè)計中，從底層的信息分類，結(jié)構(gòu)層的交互架構(gòu)和表現(xiàn)層的視覺呈現(xiàn)三個層級構(gòu)建了界面交互設(shè)計邏輯。設(shè)計了兩個界面設(shè)計低保真原型，并基于眼動實驗對其進行評估，得到以下結(jié)論：（1）家庭家庭多媒體終端主界面的導(dǎo)航模塊、內(nèi)容推薦模塊與系統(tǒng)狀態(tài)模塊應(yīng)分塊化，彼此之間拉開距離，相同模塊下的功能按相同形式呈現(xiàn);（2）導(dǎo)航模塊應(yīng)位于界面頂端，橫向布局，且以文字形式呈現(xiàn);（3）內(nèi)容推薦模塊應(yīng)位于界面中央，體量在三者之中最大，以圖片配以文字的形式呈現(xiàn)，成網(wǎng)格狀布局;（4）系統(tǒng)狀態(tài)模塊位于界面右上角，體量最小，以圖標形式呈現(xiàn)。