卜梓文

Bu Ziwen

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

Shanghai Academy of Fine Arts, Shanghai University Shanghai 200444

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.不同設(shè)備的運(yùn)動(dòng)速度和時(shí)間節(jié)奏

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

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

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

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

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

結(jié)語(yǔ)

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