動態圖形在用戶界面設計中的應用研究

卜梓文

Bu Ziwen

上海大學上海美術學院 上海 200444

Shanghai Academy of Fine Arts, Shanghai University Shanghai 200444

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

圖1 以藍色為主的同色系產品圖標對比（來源：網絡）

一、動態圖形概念概述

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

圖2 動態圖形界定（來源：作者自繪）

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

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

二、動態圖形在用戶界面中的應用現狀

1.動態圖形在不同表現類型中的色彩展現方式

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

2.扁平功能型動態圖形

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

1.2 統一交互型動態圖形

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

1.3 色彩豐富趣味型動態圖形

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

圖3 動態圖形設計（來源：站酷設計師-孔晨POINTVISION）

2.動態圖形在用戶界面的應用中出現的問題

雖然動態圖形在用戶界面的應用中越來越廣泛，但是有一些問題值得注意。

首先，顏色運用和產品調性不一致。每個產品都有自己的顏色DNA，不只是動態圖形，也需要對界面的整體進行和諧統一的設計，以藍色為主色調的產品過多地使用其他顏色進行搭配就會給人視覺上的混亂不和諧感，并且色彩的使用應當克制，過多的色彩和效果變換會給人產生一種廉價和不精致的感覺。

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

最后，運動規律的細節把控，動態圖形不符合運動規律會導致元素運動時會顯得無趣和生硬。在調整元素運動時，需要考慮到它在現實生活中的物理屬性，受到的力的情況，比如它的父子級關系，預備和緩沖動作，以及適當的夸張讓動作整體更顯靈活，在傳統動畫藝術創作的基礎理論中，迪士尼動畫師 Frank Thomas 和Ollie Johnston所著的《The Illusion Of Life Disney Animation》（生活的幻象：迪士尼動畫）中將迪士尼動畫中動畫創作的經驗總結成的“動畫的十二項基本法則”對動態圖形設計中的運動與轉化、細節的表現具有重要的指導意義。

3.動態圖形在用戶界面中的作用體現

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

三、動態圖形在用戶界面設計中需要關注的因素

1.不同設備的運動速度和時間節奏

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

2.元素細節

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

3.產品品牌屬性

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

結語

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