沉浸式體驗(yàn)中的界面轉(zhuǎn)場(chǎng)動(dòng)畫研究

黃馨儀

（武漢傳媒學(xué)院，湖北武漢 430000）

古語(yǔ)有云：天下之至柔，馳騁天下之至堅(jiān)。無有入無間。無形的力量能夠穿透沒有空隙的東西。當(dāng)指尖在界面間流轉(zhuǎn)切換，有效的轉(zhuǎn)場(chǎng)動(dòng)畫能于無意間將信息連接自如，并且在信息反饋的方寸之間流露柔和的“語(yǔ)氣”，使用戶感到輕松愉悅，仿佛在與自然溝通相處，以用戶為中心的動(dòng)畫轉(zhuǎn)場(chǎng)體驗(yàn)可以從視覺體驗(yàn)、認(rèn)知體驗(yàn)和操作體驗(yàn)3個(gè)方面入手，尋找方案。轉(zhuǎn)場(chǎng)的視覺元素運(yùn)動(dòng)關(guān)系，轉(zhuǎn)場(chǎng)的邏輯層級(jí)空間編排，轉(zhuǎn)場(chǎng)操作跟手的物理引擎設(shè)計(jì)，都是沉浸式轉(zhuǎn)場(chǎng)動(dòng)畫效果的影響因素和重要條件。

1.沉浸式體驗(yàn)概述

“自我消失了。時(shí)間飛逝。每一個(gè)動(dòng)作、動(dòng)作和思想都不可避免地跟隨前一個(gè)動(dòng)作，就像演奏爵士樂一樣。你的整個(gè)人都參與其中，并且最大限度地利用了你的技能。”Mihaly Csikszentmihalyi在與《連線》雜志接受采訪時(shí)說。

"The ego falls away. Time flies. Every action,movement, and thought follows inevitably from the previous one, like playing jazz. Your whole being is involved, and you're using your skills to the utmost."Csikszentmihalyi said in an interview with Wired magazine.

1.1 沉浸理論概述

沉浸理論源于心流理論[1]。它是由美國(guó)著名心理學(xué)家Mihaly Csikszentmihalyi于1975年首次提出的一種主觀且暫時(shí)性的情感體驗(yàn)[2]。沉浸體驗(yàn)其實(shí)就是一種將個(gè)人精神力完全投入到某項(xiàng)活動(dòng)中的感覺，達(dá)到一種忘我的狀態(tài)，而且伴隨著心流產(chǎn)生的同時(shí)，會(huì)有高度的興奮感和充實(shí)感。這種體驗(yàn)感能使人持續(xù)性地投入、參與到活動(dòng)之中并在互動(dòng)的過程中產(chǎn)生愉悅之感。Csikszentmihalyi指出沉浸理論的兩個(gè)關(guān)鍵因素：只有當(dāng)挑戰(zhàn)與技能兩者趨于平衡時(shí)，才能產(chǎn)生沉浸式的體驗(yàn)[1]。交互設(shè)計(jì)中，沉浸式體驗(yàn)所產(chǎn)生的這種積極心理感受與情緒體驗(yàn)，不僅能有效地提升操作效率，而且能豐富交互形態(tài)[1]。

1.2 沉浸體驗(yàn)的評(píng)價(jià)模型

Csikszentmihalyi進(jìn)一步地研究了任務(wù)活動(dòng)中挑戰(zhàn)與技能間的關(guān)系，提出了沉浸模型[2]。雖然挑戰(zhàn)與技能的關(guān)系進(jìn)一步演化了沉浸模型，但是兩者并不是其唯一的影響因素[1]。Csikszentmihalyi在其后續(xù)的研究中，提出了沉浸體驗(yàn)產(chǎn)生的九個(gè)特征因素，而Novak和Hoff man等人將這九大特征歸結(jié)為條件、體驗(yàn)和結(jié)果等3類因素[3-4]。其中，條件因素是形成沉浸體驗(yàn)的視覺要素，也是設(shè)計(jì)階段能夠控制的變量之一；而體驗(yàn)和結(jié)果因素則是形成沉浸體驗(yàn)的思維認(rèn)知和操作體驗(yàn)要素，也是衡量設(shè)計(jì)體驗(yàn)結(jié)果的重要變量之一。因此，以沉浸理論為基礎(chǔ)，結(jié)合沉浸體驗(yàn)量表（FSS)[5]與用戶體驗(yàn)要素，從信息感知的角度出發(fā)，以感知評(píng)價(jià)模型為標(biāo)準(zhǔn)，基于沉浸體驗(yàn)的轉(zhuǎn)場(chǎng)設(shè)計(jì)評(píng)價(jià)模型為轉(zhuǎn)場(chǎng)設(shè)計(jì)構(gòu)建一個(gè)可行的方案。

2.沉浸式轉(zhuǎn)場(chǎng)視覺元素

轉(zhuǎn)場(chǎng)是由交互行為引起的界面變化，分析界面視覺元素在過程中的意義，定義其在轉(zhuǎn)場(chǎng)中所在的類型，并將它們進(jìn)行分類，因?yàn)橐曈X元素所屬的類別會(huì)影響它們使用怎樣的轉(zhuǎn)場(chǎng)方式，同時(shí)也將決定用什么類型的曲線和時(shí)長(zhǎng)。

進(jìn)場(chǎng)元素指的是：轉(zhuǎn)場(chǎng)中新出現(xiàn)的元素，一般是結(jié)果界面上的構(gòu)成元素。出場(chǎng)元素指的是：轉(zhuǎn)場(chǎng)中消失的元素，一般是上一界面中的構(gòu)成元素。持續(xù)元素指的是：轉(zhuǎn)場(chǎng)中持續(xù)存在的元素，可以是元素在布局上的變化，也可以是某種連續(xù)性的動(dòng)畫效果，整個(gè)過程無中斷。靜止元素指的是：轉(zhuǎn)場(chǎng)中無任何變化的元素[6]。如圖1所示。

圖1 共享搜索框元素的動(dòng)畫轉(zhuǎn)換

2.1 共享元素轉(zhuǎn)場(chǎng)

共享元素一般是轉(zhuǎn)場(chǎng)前后持續(xù)存在的界面元素，即上文提到的持續(xù)元素，是在轉(zhuǎn)場(chǎng)發(fā)生后希望用戶關(guān)注到的焦點(diǎn)元素，它增強(qiáng)了轉(zhuǎn)場(chǎng)的連續(xù)感[6]。

焦點(diǎn)元素的運(yùn)用為視覺搜索提供有效線索，可降低視覺加工負(fù)荷，從而更快地在新頁(yè)面中尋找到目標(biāo)元素。目標(biāo)元素的運(yùn)動(dòng)時(shí)長(zhǎng)由350ms可以縮減到200ms左右，能快速的到達(dá)目標(biāo)信息點(diǎn)，同時(shí)又能引導(dǎo)視覺焦點(diǎn)、建立視覺線索、減少視覺突變、提升認(rèn)知流暢。針對(duì)運(yùn)營(yíng)類APP，由目標(biāo)元素引導(dǎo)用戶視覺動(dòng)線，可提升用戶對(duì)運(yùn)營(yíng)廣告的聚焦時(shí)間，可能提升用戶在頁(yè)面的留存時(shí)間，直接轉(zhuǎn)化為商業(yè)價(jià)值。

2.2 非元素共享轉(zhuǎn)場(chǎng)

與共享元素轉(zhuǎn)場(chǎng)相比非元素共享轉(zhuǎn)場(chǎng)則不完全需要元素共享來完成流暢的轉(zhuǎn)場(chǎng)效果，而是通過共享容器、共享動(dòng)勢(shì)、淡入淡出的方式達(dá)到舒適的體驗(yàn)效果。如圖2所示。

圖2 實(shí)現(xiàn)多模態(tài)沉浸式空間交互體驗(yàn)

當(dāng)一組元素在過渡時(shí)包含明確的邊界，可使用容器來讓轉(zhuǎn)換過程有連續(xù)感。容器通過大小、高度、圓角等屬性進(jìn)行補(bǔ)間過渡轉(zhuǎn)換，容器內(nèi)的元素通過淡入淡出或共享元素的手法進(jìn)行過渡[6]。

共享動(dòng)勢(shì)是在無中間屬性或元素共享的情況下，無法通過補(bǔ)間變化來實(shí)現(xiàn)柔和過渡，需要提取出可用的共享轉(zhuǎn)換屬性，來實(shí)現(xiàn)前后的平滑過渡。常用的共享運(yùn)動(dòng)屬性有位移、縮放、旋轉(zhuǎn)等，即共享動(dòng)勢(shì)[6]。

淡入淡出是通過透明度變化來實(shí)現(xiàn)過渡轉(zhuǎn)場(chǎng)，適用于無中間屬性的組件或元素之間進(jìn)行過渡變化。包括單項(xiàng)淡入淡出和交叉淡入淡出[6]。

3.沉浸式界面動(dòng)畫編排

3.1 平等互動(dòng)

層級(jí)關(guān)系由系統(tǒng)架構(gòu)和應(yīng)用架構(gòu)定義，它確定了轉(zhuǎn)場(chǎng)動(dòng)效的交互目的。不同的轉(zhuǎn)場(chǎng)設(shè)計(jì)會(huì)傳遞不同的交互層級(jí)隱喻，不合理的動(dòng)效編排會(huì)讓用戶誤解，從而導(dǎo)致用戶主觀感受下降，沉浸體驗(yàn)感較差。在設(shè)計(jì)轉(zhuǎn)場(chǎng)動(dòng)效時(shí)，首先要理解應(yīng)用之間和頁(yè)面元素之間的架構(gòu)關(guān)系，再運(yùn)用合適的設(shè)計(jì)手法完成動(dòng)效設(shè)計(jì)表達(dá)。

平等交互意味著所有對(duì)象的外觀都遵循一個(gè)特定的規(guī)則。轉(zhuǎn)場(chǎng)后的頁(yè)面或元素與當(dāng)前的在同一層級(jí)上[6]。應(yīng)用場(chǎng)景包括編輯操作、頁(yè)簽切換、橫豎屏轉(zhuǎn)場(chǎng)等。

3.2 從屬互動(dòng)

從屬交互意味著我們有一個(gè)中心對(duì)象吸引所有用戶的注意力，所有其他元素都從屬于它。這種類型的動(dòng)畫給人一種秩序感，更能吸引主要內(nèi)容。上下層級(jí)轉(zhuǎn)場(chǎng)后的頁(yè)面或元素與當(dāng)前的存在上下層級(jí)關(guān)系。應(yīng)用場(chǎng)景包括上下級(jí)頁(yè)面切換、解鎖操作、搜索轉(zhuǎn)場(chǎng)等[6]。比如應(yīng)用內(nèi)的父子轉(zhuǎn)場(chǎng)，兩個(gè)界面通過左右切換明確了層級(jí)關(guān)系；又比如應(yīng)用退出到桌面圖標(biāo)，清晰地展示了應(yīng)用所在的位置。

不難看出，界面轉(zhuǎn)場(chǎng)動(dòng)效的設(shè)計(jì)需要把握邏輯思維的連貫性，結(jié)合交互內(nèi)容的層級(jí)關(guān)系，理清動(dòng)效連接各界面的組合順序和種類，幫助用戶輕松地理解和掌握使用過程的環(huán)節(jié)和方法，達(dá)到沉浸式體驗(yàn)的效果。

4.沉浸式物理引擎手勢(shì)

人與界面的交互是大腦與機(jī)械程序相互合作的過程，認(rèn)知的陌生、操作的生硬都會(huì)給用戶的使用進(jìn)程帶來阻塞和困難。構(gòu)建物理引擎設(shè)計(jì)可以很好地將人與界面的交互通過彈性、加速度、重量、阻尼等一系列模擬自然感知的豐富物理引擎參數(shù)設(shè)置，打造人與自然的交互體驗(yàn)感。轉(zhuǎn)場(chǎng)動(dòng)畫的設(shè)計(jì)也少不了物理引擎的設(shè)計(jì)和參與，使轉(zhuǎn)場(chǎng)動(dòng)畫在操作體驗(yàn)上更自然更貼近人的認(rèn)知習(xí)慣。

我們?cè)谵D(zhuǎn)場(chǎng)的過程中通常會(huì)使用到捏合手勢(shì)進(jìn)行放大縮小操作、拖拽手勢(shì)進(jìn)行內(nèi)容返回操作、翻頁(yè)手勢(shì)進(jìn)行各模塊翻頁(yè)操作、點(diǎn)擊手勢(shì)進(jìn)行圖標(biāo)或卡片類操作、滑動(dòng)手勢(shì)進(jìn)行各模塊列表類的操作。手部動(dòng)勢(shì)與界面動(dòng)勢(shì)分別為大腦與機(jī)械程序傳遞著各種各樣的信息。它們互相學(xué)習(xí)，界面動(dòng)勢(shì)也在不斷模擬大腦的認(rèn)知習(xí)慣使機(jī)械程序的信息傳遞更有溫度。

5.結(jié)語(yǔ)

沉浸式體驗(yàn)中的界面動(dòng)畫轉(zhuǎn)場(chǎng)效果是從視覺流暢性、邏輯關(guān)聯(lián)性和操作可控性這3個(gè)部分進(jìn)行探討和梳理。不僅僅體現(xiàn)在交互動(dòng)畫的流暢性，更是與人的視覺習(xí)慣、認(rèn)知心理、自然規(guī)律、操作習(xí)慣相結(jié)合的綜合探索。