黃馨儀

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

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

1.沉浸式體驗概述

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

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

1.2 沉浸體驗的評價模型

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.沉浸式界面動畫編排

3.1 平等互動

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

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

3.2 從屬互動

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

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

4.沉浸式物理引擎手勢

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

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

5.結(jié)語

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