動態(tài)圖形在用戶界面設(shè)計中的應(yīng)用研究

卜梓文

Bu Ziwen

上海大學(xué)上海美術(shù)學(xué)院 上海 200444

Shanghai Academy of Fine Arts, Shanghai University Shanghai 200444

現(xiàn)如今，動態(tài)圖形在移動終端的使用已經(jīng)十分普遍，動態(tài)圖形從早期的“魅力型因素”逐漸發(fā)展成為“必要型因素”，越來越多的工作人員和團(tuán)隊意識到動態(tài)圖形在產(chǎn)品用戶體驗中的重要性。出色的動態(tài)圖形設(shè)計，在界面交互的過程中讓頁面和頁面之間聯(lián)系得更緊密，在色彩的使用上更加和諧統(tǒng)一，體驗更加流暢，減少用戶負(fù)面情緒，同時增加產(chǎn)品的趣味性和品牌特色，提高品牌認(rèn)知度。在用戶界面中，動態(tài)圖形的內(nèi)容與表現(xiàn)形式非常豐富，多樣化的風(fēng)格和廣闊的空間延展性以及時間維度可以讓其實現(xiàn)不同的情感表達(dá)和效果，比如對于美食類產(chǎn)品，動態(tài)圖形的配色更加活潑明亮，顏色偏向暖色，會讓人心情變得愉快、有食欲，而對于理財類知識類產(chǎn)品，顏色一般偏冷色（如圖1），根據(jù)調(diào)查顯示，大多數(shù)人認(rèn)為藍(lán)色是他們最喜歡的顏色。藍(lán)色也被認(rèn)為是全球最安全的顏色，會給人穩(wěn)重可信賴的感覺。因此，研究動態(tài)圖形及在用戶界面設(shè)計中的應(yīng)用，可以為其在移動應(yīng)用和PC端網(wǎng)頁的界面展示中提供更加多元的設(shè)計策略和理論支撐。

圖1 以藍(lán)色為主的同色系產(chǎn)品圖標(biāo)對比（來源：網(wǎng)絡(luò)）

一、動態(tài)圖形概念概述

動態(tài)圖形是將原本靜態(tài)的平面圖象經(jīng)過動態(tài)地設(shè)定，從而呈現(xiàn)出動態(tài)感。它在平面設(shè)計的基礎(chǔ)上增加了時間與交互的維度，涉及了多種藝術(shù)表現(xiàn)形式，平面設(shè)計、影像設(shè)計以及信息整合（如圖2），動態(tài)圖形最早運用在電影的片頭或電視展示廣告上，之后越來越廣泛地運用在了移動終端和公共展覽展示空間中。

圖2 動態(tài)圖形界定（來源：作者自繪）

動態(tài)圖形在時間維度中，視覺元素的運動形式、軌跡、方向、出場順序決定了動態(tài)設(shè)計的主體表達(dá)，動態(tài)元素所表現(xiàn)的形態(tài)起伏、色彩變化、聚散突變、虛實、多維空間以及運動頻率、方向與量的變化進(jìn)行空間疊壓、碰撞與交織，形成了抑揚頓挫的節(jié)奏韻律，使之具有強(qiáng)烈的視覺沖擊和現(xiàn)代化的視覺語言。

在用戶界面中，動態(tài)圖形設(shè)計與界面設(shè)計相結(jié)合，通過界面設(shè)計中的三大元素，形狀、顏色、動畫的變化，轉(zhuǎn)場、加載得以實現(xiàn)。在設(shè)計過程中，通過融入不同色彩情緒和運動方式幫助產(chǎn)品之間形成更強(qiáng)的差異化，在操作反饋時，可以視覺化地告知用戶的動作是否成功。而不同的交互模式以及用戶交互行為的速度、節(jié)奏、方向、運動軌跡所生成的動態(tài)變化，給用戶帶來不同的視覺和情感體驗。

二、動態(tài)圖形在用戶界面中的應(yīng)用現(xiàn)狀

1.動態(tài)圖形在不同表現(xiàn)類型中的色彩展現(xiàn)方式

將動態(tài)圖形根據(jù)其表現(xiàn)方式和目的指向性進(jìn)行分類，可以大致分為功能型動態(tài)圖形、交互型動態(tài)圖形和趣味性情感化動態(tài)圖形，而動態(tài)圖形的顏色運用在不同的表現(xiàn)類型中都不盡相同。

2.扁平功能型動態(tài)圖形

功能型動態(tài)圖形也叫作提示類型，功能型動態(tài)圖形的藝術(shù)風(fēng)格一般是扁平化，只有單種顏色或黑灰色或白色，不需要過多的色彩表現(xiàn)，當(dāng)用戶看到動態(tài)效果，就能明白當(dāng)下發(fā)生了什么，比如手機(jī)在進(jìn)行解鎖時，密碼輸入錯誤會出現(xiàn)左右急速晃動的狀況，這種情況可以告訴用戶密碼輸入有誤，再比如輸入框中閃爍的光標(biāo)，告訴用戶這里可以輸入文字。過多的顏色反而會對信息造成干擾。

1.2 統(tǒng)一交互型動態(tài)圖形

交互類型的動態(tài)圖形常常出現(xiàn)在頁面的轉(zhuǎn)場，制作這種動態(tài)圖形時需要考慮運動規(guī)律，因為要考慮到重力、貫力速度因素對于畫面中物體的作用力，交互型動態(tài)圖形一般指的是界面本身或者界面中的組件元素，色彩統(tǒng)一簡約，因為它的重點是讓動態(tài)圖形更加真實，更加自然，更有助于快速形成使用習(xí)慣，這樣的動態(tài)圖形是我們熟悉并可預(yù)知的，是符合正確的運動規(guī)律的交互效果。

1.3 色彩豐富趣味型動態(tài)圖形

趣味類型動態(tài)圖形是指一般會出現(xiàn)在底部Tab按鈕，下拉刷新，引導(dǎo)頁，以及banner空狀態(tài)時的創(chuàng)意交互動畫（如圖3），藝術(shù)風(fēng)格類型豐富多樣，包括扁平風(fēng)格、三維風(fēng)格、擬物風(fēng)格等，色彩豐富且形式多樣，目的用戶在點擊之后，可以獲得一些情感上的共鳴。它們的出現(xiàn)是建立在產(chǎn)品基礎(chǔ)體驗之上的額外驚喜體驗，增強(qiáng)用戶體驗，當(dāng)產(chǎn)品出現(xiàn)bug或頁面的加載等待，這些問題都會影響用戶體驗。App移動頁面每慢一秒鐘就會有7%的用戶轉(zhuǎn)化流失，57%的用戶會放棄在手機(jī)上加載超過3秒鐘的頁面，因此在用戶等待的過程中，需要用趣味性的動畫設(shè)計來緩解用戶的負(fù)面情緒，而在用戶并無負(fù)面情緒的時候，出現(xiàn)了趣味性的動畫，以增加用戶的愉悅性。

圖3 動態(tài)圖形設(shè)計（來源：站酷設(shè)計師-孔晨POINTVISION）

2.動態(tài)圖形在用戶界面的應(yīng)用中出現(xiàn)的問題

雖然動態(tài)圖形在用戶界面的應(yīng)用中越來越廣泛，但是有一些問題值得注意。

首先，顏色運用和產(chǎn)品調(diào)性不一致。每個產(chǎn)品都有自己的顏色DNA，不只是動態(tài)圖形，也需要對界面的整體進(jìn)行和諧統(tǒng)一的設(shè)計，以藍(lán)色為主色調(diào)的產(chǎn)品過多地使用其他顏色進(jìn)行搭配就會給人視覺上的混亂不和諧感，并且色彩的使用應(yīng)當(dāng)克制，過多的色彩和效果變換會給人產(chǎn)生一種廉價和不精致的感覺。

其次，是對于時間和速度的把握，動態(tài)圖形是一種基于時間流逝而進(jìn)行設(shè)計的表現(xiàn)方式，在界面中所展示的動態(tài)效果，都是由一張張的圖片在一定時間內(nèi)拼接起來的，在時間軸中，節(jié)拍構(gòu)成節(jié)奏，不同的節(jié)奏會帶給人不同的感受，如在運動規(guī)律中提到的緩動效果，速度太快或太慢都給人帶來不好的心理感受。表達(dá)出不同的情緒。就像不同的音樂風(fēng)格，輕快的、熱烈的，所以在使用動態(tài)效果時要考慮到當(dāng)前的場景跟氛圍，調(diào)整對應(yīng)關(guān)鍵幀的數(shù)量，把握節(jié)奏感，拉開動態(tài)圖形設(shè)計的差異性。

最后，運動規(guī)律的細(xì)節(jié)把控，動態(tài)圖形不符合運動規(guī)律會導(dǎo)致元素運動時會顯得無趣和生硬。在調(diào)整元素運動時，需要考慮到它在現(xiàn)實生活中的物理屬性，受到的力的情況，比如它的父子級關(guān)系，預(yù)備和緩沖動作，以及適當(dāng)?shù)目鋸堊寗幼髡w更顯靈活，在傳統(tǒng)動畫藝術(shù)創(chuàng)作的基礎(chǔ)理論中，迪士尼動畫師 Frank Thomas 和Ollie Johnston所著的《The Illusion Of Life Disney Animation》（生活的幻象：迪士尼動畫）中將迪士尼動畫中動畫創(chuàng)作的經(jīng)驗總結(jié)成的“動畫的十二項基本法則”對動態(tài)圖形設(shè)計中的運動與轉(zhuǎn)化、細(xì)節(jié)的表現(xiàn)具有重要的指導(dǎo)意義。

3.動態(tài)圖形在用戶界面中的作用體現(xiàn)

與靜態(tài)的界面相比，動態(tài)圖形加入后最大的差異化是將更豐富更無限的內(nèi)容不再局限于有限的屏幕之中。其大致功能可分為以下幾點：第一，趣味性提升。在趣味性動態(tài)圖形的設(shè)計中，畫面造型可以更加有創(chuàng)意，顏色可以更加豐富，嘗試不同的顏色運用會有不同的感受和效果，英國著名心理學(xué)家格列高里認(rèn)為“顏色的感知對人類有著極其重要的意義—它是視覺審美的核心，深刻地影響著我們的感受和體驗”。第二，解釋交互效果。讓用戶清楚地了解動作的反饋，引導(dǎo)用戶關(guān)注重要的信息，比如在加載或下載的過程中，基于進(jìn)程的動畫可以讓用戶更精確地預(yù)測結(jié)果，并且更可靠地詮釋結(jié)果。在交互界面中，通過點擊反饋和頁面轉(zhuǎn)場，結(jié)合交互手勢的演示，讓用戶清晰地了解到操作的路徑以及產(chǎn)品所演示的交互效果。第三，提升產(chǎn)品屬性。為產(chǎn)品帶來創(chuàng)新的交互靈感來源，在過去的幾年中，很多表現(xiàn)類型的動效很容易被想象成為了增加愉悅性質(zhì)的內(nèi)容所以只能停留概念稿，而動態(tài)圖形作為一種設(shè)計展現(xiàn)形式，通過規(guī)范統(tǒng)一的色彩搭配提高品牌的辨識度，提高產(chǎn)品視覺的規(guī)范性和一致性，模擬真實物理世界的運動建立起移動設(shè)備中虛擬世界與用戶之間的認(rèn)知關(guān)聯(lián)，讓操作體驗符合用戶認(rèn)知習(xí)慣，可以更好地讓用戶了解和認(rèn)識產(chǎn)品。

三、動態(tài)圖形在用戶界面設(shè)計中需要關(guān)注的因素

1.不同設(shè)備的運動速度和時間節(jié)奏

在不同的設(shè)備中，時間會根據(jù)設(shè)備屏幕的大小進(jìn)行改變，屏幕越大時間會越長，比如在平板上，動畫移動的時間一般為400~450 ms之間，而在手表上則是150~200 ms之間。在使用者觸發(fā)的初始手勢和動畫開始之間盡量減少延遲時間，并將范圍限制在界面中受元素影響的部分，不能把整個視窗或頁面都用來做動畫，保持動畫簡短簡潔。如果使用者快速連續(xù)做出多個動作，例如多次按下向下箭頭，此時需要將他們合并為一個動作，重復(fù)的動態(tài)圖形閃現(xiàn)會給用戶造成不好的體驗感受。

2.元素細(xì)節(jié)

在動態(tài)圖形的交互設(shè)計中，元素的細(xì)節(jié)需要包含很多表現(xiàn)因素，包括圖形要素、色彩要素、動態(tài)要素，以及布局要素。動態(tài)圖形通過圖形傳遞信息，設(shè)計師通過合理的圖形元素指引人們進(jìn)行操作，提升用戶界面的吸引力和視覺效果，降低操作難度。而色彩是動態(tài)圖形的表層屬性，最主要的作用是形成視覺效果，通過對色彩進(jìn)行設(shè)計強(qiáng)調(diào)設(shè)計主題，傳遞信息，并且每種色彩都具有一定的表現(xiàn)意義，不同冷暖色相都會給人帶來不同的心理感受，藍(lán)紫色類冷色偏憂郁，給人冷靜、沉靜的心理感受。紅橙、黃色類暖色給人溫暖、活潑的心理感受，色彩需要結(jié)合產(chǎn)品根據(jù)具體的氛圍進(jìn)行貼合主題的表現(xiàn)，以便于更好地傳遞信息。動態(tài)要素，動態(tài)要素包括上述的位移、縮放、旋轉(zhuǎn)，以及透明度的變化，通過調(diào)整不同的參數(shù)達(dá)到不同的設(shè)計效果，需要結(jié)合設(shè)計的表現(xiàn)結(jié)果進(jìn)行調(diào)整和修改部分參數(shù)，動作或者添加的效果變換過多會給人造成累贅和無趣的心理感受，失去內(nèi)涵，在創(chuàng)作的過程中要克制和多次進(jìn)行最終效果的檢驗。布局要素，布局要素更多地需要考慮到的重復(fù)、對比以及親密性的內(nèi)容，在變換動作的過程中，畫面的布局也會發(fā)生改變，當(dāng)節(jié)奏或者原本的規(guī)則被打破，就會給人一種凌亂的感受，要結(jié)合運動規(guī)律和頁面的跳轉(zhuǎn)要達(dá)到的效果進(jìn)行布局元素的各個細(xì)節(jié)的調(diào)整。

3.產(chǎn)品品牌屬性

每一款產(chǎn)品都有自己的屬性，比如金融類或者辦公類，比較商業(yè)或者追求效率的產(chǎn)品，它們的動態(tài)設(shè)計應(yīng)當(dāng)是相對來說比較審慎和收斂的，而對于活潑一些的產(chǎn)品比如音樂游戲類，它需要活潑的顏色和動畫去吸引用戶。動態(tài)圖形可以為產(chǎn)品增添更多的愉悅感，甚至是成就感，在設(shè)計過程中，將動態(tài)圖形中會涉及的色彩、字體等一些細(xì)節(jié)上進(jìn)行規(guī)范，可以很大程度上增強(qiáng)產(chǎn)品的視覺記憶，就像我們可以輕易地想起可口可樂是紅色，而百事可樂是藍(lán)色，而顏色有助于讓產(chǎn)品在人們的腦海中留下深刻印象，色彩學(xué)中有講到人們在初到新環(huán)境的90 秒內(nèi)，所作出的有關(guān)于人或事物的判斷，62%~90%是基于色彩，之后再將動態(tài)圖形的緩動和時間等可以量化的東西進(jìn)行統(tǒng)一和標(biāo)準(zhǔn)化之后，形成整體的產(chǎn)品體驗。

結(jié)語

在動態(tài)圖形設(shè)計中，色彩作為界面視覺設(shè)計的主要元素之一，針對整個產(chǎn)品的基調(diào)和氛圍營造有著重要的作用，顏色的運用除了需要考慮產(chǎn)品的統(tǒng)一性之外，還需要達(dá)到信息傳遞、交互反饋等目的，規(guī)范統(tǒng)一的色彩搭配可以提高產(chǎn)品的辨識度，提高產(chǎn)品視覺的規(guī)范性和一致性。在設(shè)計中可以通過顏色的冷暖關(guān)系、虛實變化、大小對比等不同的“視覺質(zhì)感”所產(chǎn)生不同的表現(xiàn)方式和表現(xiàn)風(fēng)格。本文通過分析不同動態(tài)圖形在界面交互設(shè)計中的表現(xiàn)類型和存在的一些問題，從設(shè)計角度提出了一些動態(tài)圖形在界面中的設(shè)計策略，目的是想通過對動態(tài)圖形的設(shè)計來提升使用者在使用產(chǎn)品過程中的感受和體驗。