李郭

摘 要：以用戶體驗(yàn)的功能性為依據(jù)，對動態(tài)圖形進(jìn)行概念界定及分析其應(yīng)用環(huán)境，并提出了動態(tài)圖形在信息產(chǎn)品中的交互適用場景，總結(jié)其價值及意義，使動態(tài)圖形以更優(yōu)化的人機(jī)交互模式呈現(xiàn)給用戶多維視覺體驗(yàn)。

關(guān)鍵詞：動態(tài)圖形；交互方式；適用場景

伴隨移動智能設(shè)備的廣泛普及與其性能的不斷提升，在操作體驗(yàn)信息產(chǎn)品的同時，用戶提出了更高更新的要求，使得信息產(chǎn)品形成日益豐富的龐大產(chǎn)品生態(tài)圈。動態(tài)圖形作為一種直接有效的新型信息傳達(dá)交互方式，可以為產(chǎn)品凸顯品牌價值，拉進(jìn)與用戶的情感交流，從而提升產(chǎn)品操作流暢性及體驗(yàn)易用性，被設(shè)計(jì)師們越來越多的運(yùn)用在信息產(chǎn)品中。

1 動態(tài)圖形的概念及應(yīng)用環(huán)境

動態(tài)圖形設(shè)計(jì)，稱為Motion Graphics Design或簡稱為Motion Design，即為動態(tài)條件下的圖形設(shè)計(jì)。[1]動態(tài)圖形設(shè)計(jì)是由傳統(tǒng)靜態(tài)圖形設(shè)計(jì)衍生而出，并且將圖形元素從靜態(tài)表現(xiàn)置入到時間的表現(xiàn)維度中，在時間的維度上具有一個有始有終的延生區(qū)間，而非一個一個的靜止點(diǎn)。因此，既包含傳統(tǒng)圖形設(shè)計(jì)的特征、原則及規(guī)律，又因信息傳達(dá)方式與時間因素緊密聯(lián)系而區(qū)別于傳統(tǒng)圖形設(shè)計(jì)。此外，制作技術(shù)條件及應(yīng)用展示媒介較大程度影響和制約著動態(tài)圖形的設(shè)計(jì)形式，直接影響到設(shè)計(jì)的方式方法及作品本身。動態(tài)圖形是以傳達(dá)、展示信息為主要目的的動態(tài)視覺傳達(dá)手段，信息服務(wù)產(chǎn)業(yè)的改良升級，使得動態(tài)圖形設(shè)計(jì)發(fā)展?jié)摿薮?。動態(tài)圖形所依賴的軟件層面是由智能終端操作系統(tǒng)所承載的，ios作為第一個智能終端的操作系統(tǒng)，起搭載的動態(tài)圖形的交互設(shè)計(jì)方式具有新的指導(dǎo)價值和借鑒含義。動態(tài)圖形設(shè)計(jì)基于前端、硬件及后臺程序支持，操作界面實(shí)現(xiàn)了由單一靜態(tài)到多維動態(tài)的展示方式的轉(zhuǎn)變，使得用戶擁有更豐富的視覺體驗(yàn)，從而提升用戶的情感化操作經(jīng)驗(yàn)，增強(qiáng)用戶對信息產(chǎn)品的使用黏度。[2]

2 信息產(chǎn)品中動態(tài)圖形的交互適用場景

動態(tài)圖形的視覺表現(xiàn)對于提升被逐漸廣泛應(yīng)用于信息產(chǎn)品設(shè)計(jì)、廣電傳媒、工業(yè)產(chǎn)品宣傳與推廣、建筑瀏覽、學(xué)術(shù)教學(xué)與科研等眾多領(lǐng)域信息產(chǎn)品的用戶體驗(yàn)可起到畫龍點(diǎn)睛的作用，然而動態(tài)圖形在信息產(chǎn)品中的運(yùn)用并非華而不實(shí)的花架子及無緣由的堆砌，在何種交互場景出現(xiàn)均是以解決某種功能需求為宗旨，最重要的是一定要服從用戶體驗(yàn)。

2.1 引導(dǎo)

引導(dǎo)是信息產(chǎn)品中動態(tài)圖形設(shè)計(jì)應(yīng)用較多的一個場景。引導(dǎo)包括兩方面內(nèi)容：一是開場引導(dǎo)頁（即新手幫助）。二是對于隱藏內(nèi)容、操作的提示及引入。開場引導(dǎo)頁是用戶首次安裝并打開應(yīng)用后所呈現(xiàn)的界面，功能堪比說明書。目的在于用戶未使用之前，在最短時間內(nèi)提前告知用戶產(chǎn)品的主要功能、特點(diǎn)、操作方式并迅速上手，開始體驗(yàn)之旅。開場引導(dǎo)頁按照目的可分為功能介紹類、推廣類、使用說明類及問題解決類，產(chǎn)品的第一印象將極大地影響到后續(xù)的產(chǎn)品使用體驗(yàn)，因而別出心裁的引導(dǎo)頁尤為重要。提示引入頁通常以最直接有效的方式告知用戶應(yīng)該怎么做，或者吸引他們?nèi)プ鍪裁矗赏ㄟ^動態(tài)對功能的位置、方向、路徑、喚出操作等進(jìn)行暗示和指導(dǎo)，以便用戶在有限的信息產(chǎn)品界面中發(fā)現(xiàn)更多功能。

2.2 加載

加載頁是由于加載數(shù)據(jù)內(nèi)容過多或網(wǎng)速原因而形成的界面間的過渡，系統(tǒng)級的過渡一般分為兩種——菊花轉(zhuǎn)和進(jìn)度條，菊花轉(zhuǎn)用于剩余時間無法預(yù)知的情況下；進(jìn)度條則用在可預(yù)知完成進(jìn)度和剩余時間的情況下。加載設(shè)計(jì)的好壞直接影響產(chǎn)品的用戶體驗(yàn)，通過一種有趣的美學(xué)形式表現(xiàn)程序運(yùn)行的進(jìn)度，一方面做出承諾，帶給用戶安全感，另外可以合理疏導(dǎo)用戶因等待而產(chǎn)生的焦慮情緒，從而避免用戶大量流失的慘劇發(fā)生。進(jìn)程演示類動態(tài)圖形的設(shè)計(jì)，加入了動態(tài)過渡，使得內(nèi)容不再是枯燥的從0到1的跳轉(zhuǎn)，復(fù)雜的程序語言轉(zhuǎn)化為動態(tài)視覺語言“我正在處理你的內(nèi)容，請稍等”。豐富的信息量及有趣幽默的動態(tài)圖形內(nèi)容可增加用戶的期待值，除了對信息產(chǎn)品本身的期待，還有對加載設(shè)計(jì)本身的期待，從而使用戶潛移默化的減少覺察正在加載的時間。[3]加載的動態(tài)圖形設(shè)計(jì)，可結(jié)合產(chǎn)品的品牌形象，抽象和具象方面均可入手，給人留下更深刻的印象。

2.3 轉(zhuǎn)場

信息產(chǎn)品中的轉(zhuǎn)場，即從一個界面切換到另一界面，為了避免界面之間跳轉(zhuǎn)的過于生硬呆板，利用動態(tài)圖形補(bǔ)上了界面跳轉(zhuǎn)的中間過程，是的用戶體驗(yàn)更加自然和流暢，可以說轉(zhuǎn)場是動態(tài)圖形目前應(yīng)用最多的場景。轉(zhuǎn)場的動態(tài)設(shè)計(jì)包括堆砌動態(tài)效果、界面重組動態(tài)效果、平滑與平鋪動態(tài)效果、空間翻轉(zhuǎn)動態(tài)效果及線索連續(xù)動態(tài)效果等。轉(zhuǎn)場設(shè)計(jì)的動態(tài)圖形呈現(xiàn)方式又可細(xì)分為多種類型，如3D翻轉(zhuǎn)、淡入淡出、抖動、旋轉(zhuǎn)、立方體效果、收縮效果、翻頁、放大縮小等等。轉(zhuǎn)場動態(tài)圖形的制作可更多地從產(chǎn)品目的、產(chǎn)品整體特點(diǎn)、場合、實(shí)現(xiàn)性能等多方面進(jìn)行考慮，使得操作更加精致流暢，提升產(chǎn)品品質(zhì)。

2.4 反饋

在引導(dǎo)、加載、轉(zhuǎn)場后，動態(tài)圖形適用的另一場景即反饋。反饋可分為過程反饋和結(jié)果反饋——過程反饋指的是在操作過程中，為了告知用戶操作的狀態(tài)變化使得界面對操作進(jìn)行的反饋。[4]結(jié)果反饋即完成操作后，根據(jù)結(jié)果給出的反饋，可分為操作成功的反饋和操作失敗的反饋。在結(jié)果反饋中，我們通常較多的看到動態(tài)圖形的運(yùn)用，如果是成功的操作結(jié)果，往往僅限告知狀態(tài)，用戶無須執(zhí)行操作，反饋就可以自動消失，而如果是失敗的操作結(jié)果，則需要引起關(guān)注，可以相對強(qiáng)勢一些，反饋出現(xiàn)的位置可以考慮相關(guān)性，采用相對警示的顏色和設(shè)計(jì)風(fēng)格等。針對過程反饋，動態(tài)圖形也不失為一種對用戶很有幫助的方式，幫助用戶在操作過程中預(yù)知操作的目標(biāo)和結(jié)果，可以使得應(yīng)用更加細(xì)膩。

3 結(jié)論

動態(tài)圖形通過移動端信息產(chǎn)品，承擔(dān)著抽象視覺的傳達(dá)、身體感知的介入和智能生命形態(tài)的模擬角色，使得用戶獲得差異化的產(chǎn)品使用經(jīng)驗(yàn)，從而使信息產(chǎn)品獲得用戶的歸屬感。動態(tài)圖形的適用場景、范圍及模式將朝著豐富多樣的方向發(fā)展，同時需要兼顧信息傳達(dá)的準(zhǔn)確性、場景及需求的適用性、功能的有效性，并考慮到移動終端的硬件支持及相應(yīng)之下，取得形式與內(nèi)容的完美平衡及統(tǒng)一，提升產(chǎn)品的易用性，滿足用戶的根本訴求。

參考文獻(xiàn)：

[1] 李渝.動態(tài)圖形設(shè)計(jì)基礎(chǔ)[M].重慶：西南師范大學(xué)出版社，2011：2.

[2] 宿子順.基于iOS平臺的功能性動畫設(shè)計(jì)研究[J].機(jī)械設(shè)計(jì)，2013，30（9）：120-121.

[3] Trumpet.談?wù)劶虞d的那點(diǎn)事[EB/OL]. http：//ued.focus.cn/wordpress/？P =2622，2013-06-04.

[4] 傅小貞，胡甲超，鄭元攏.移動設(shè)計(jì)[M].北京：電子工業(yè)出版社，2014：170.