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

李郭

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

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

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

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

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

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

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

2.1 引導

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

2.2 加載

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

2.3 轉(zhuǎn)場

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

2.4 反饋

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

3 結論

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

參考文獻：

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

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

[3] Trumpet.談談加載的那點事[EB/OL]. http：//ued.focus.cn/wordpress/？P =2622，2013-06-04.

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