圖形界面設計中的動態效果應用及趨勢探析

馬馳

摘要：對動態效果的設計特點、應用形式與發展趨勢進行梳理歸納，為圖形界面設計者提升界面視覺語言表達力、審美價值及品牌視覺認知度提供有益啟發。通過案例分析與經驗總結相結合的方法，—方面分析既有動效實例，探尋在不同應用層面下的表現手法及趨勢，另—方面結合構成、視覺經驗、視知覺等領域的理論，探索動態效果對于豐富圖形界面視覺藝術內涵、提升藝術附加值的作用及可能。分析了動態效果的特點與應用領域，結合既有案例歸納闡釋了動態效果的設計目標、方法與類型并提出延伸思考。探索及研究圖形界面中動態效果的形式和方法，能夠更好地為圖形設計在新的媒介形式中進行新的應用嘗試提供幫助，使其在提升應用程序的審美、藝術附加值和視覺體驗上發揮最大效能。

關鍵詞：圖形界面 動態效果 視覺經驗 空間

中圖分類號：TB472

文獻標識碼：A

文章編號：1003-0069 （2019）10-0113-03

引言

動態效果設計脫胎于動畫與動態圖形設計，起初作為—種給予界面使用者視覺反饋的手段和信息載體介入到圖形界面（GUI）設計，隨著多媒體及互聯網技術與設備的進步，其應用領域日益廣泛，現已衍變為圖形界面中一種重要的視覺表現形式。文章結合部分實際案例，探討動態效果（Motion Effect）介入圖形界面設計后在信息反饋、視覺層級與邏輯層級的視覺化表達特點。分析闡釋當前動態效果的主要應用目的、形式與發展趨勢，進而引申出實現界面或屏幕邊界與虛擬空間拓展可能性的思考。

一、動態效果設計與圖形界面的關系和特點

隨著移動互聯網終端設備如智能手機、平板電腦等設備與屏幕觸控等相關技術的迅猛發展，當下基于移動設備的操作系統或是應用軟件（APP）已經在其圖形界面的設計上，對視覺體驗、心理學、交互手段提出了更加混合化、系統化的要求。動態效果（Motion Effect）這種脫胎于動畫、圖形設計等傳統視覺藝術并融入新的媒介載體中的視覺表現形式與圖形語言，就是在這一背景下應運而生的，并從它的誕生起便慢慢地改變著我們在界面中信息解讀的方式。在移動端設備中，動態效果是用戶在操作界面中通過觸控、重力感應、聲控等操作方式與移動設備進行交互的過程中所呈現出的動畫化圖形語言，是一種界面對用戶已進行的操作的可視化反饋。比方說在用戶與設備進行交互的過程中，界面通過動態效果，讓界面內的功能模塊得以模擬一些基于現實世界中物理運動，如彈出、墜落、轉動等，來對用戶的操作進行視覺反饋。以簡潔、直觀、高效的優勢，使原本靜態的界面變得活躍，讓使用者利用這些圖形動態化的優勢更便捷明了的操作界面，豐富應用軟件的視覺藝術內涵，提升交互體驗。

圖形用戶界面（即GUI）的設計者需要依托視覺、觸覺等感知維度或經驗維度，對用戶及產品本身進行更進一步解讀與推敲，以求更好地通過動態圖形來表達軟件與公司、品牌等所要傳達的視覺內涵與軟件本身的使用邏輯。合理科學的運用動態效果能夠提高用戶界面的交互效率和可用性，也能完善應用的感官體驗，它己成為移動端應用軟件產品用戶體驗的重要因素，經過合理設計的動態效果能讓用戶更有效地獲取視覺信息，其功能已經從讓用戶獲得操作反饋擴展到現在的避免錯誤操作、提高軟件使用樂趣等諸多層面。

圖1可作為近十年來圖形界面設計風格發展過程中一個較有代表性的轉折和縮影，蘋果2013年發布的iOS 7操作系統的界面圖標相比過去的iOS 6，減弱了圖形的陰影、體塊感、材質肌理、反光、玻璃高光等一系列細節，轉而使用更加抽象、提煉化的圖形語言重新塑造了圖形界面圖標并將這一新風格延續至今。從蘋果iOS 6到iOS 7的視覺風格更迭衍變，反映出早前過分注重擬物、光影.明暗等細節表現的具象風格因為其過分的刻畫與矯飾，已步入了使受眾產生視覺與審美雙重疲勞的窄巷，取而代之的是盛行于當下的去具象化風格（扁平化風格）。兩者之長短優劣無法輕易一言蔽之，但日趨簡潔純粹的圖形化視覺特征的確在界面的功能信息高效傳遞上具有其優勢，也更好地契合了動態效果的設計邏輯，即用高度概括的、純粹的圖形化視覺語言引導用戶理解界面功能。而伴隨移動端硬件（手機、平板電腦、腕部智能穿戴設備等）技術的進步，動態效果的運用桎梏逐漸打破，其于界面的應用日益廣泛，重要性也日益凸顯。倘若對“動態效果”進行簡單歸結，筆者認為可將其描述為以動態圖形的表達方式為手段，幫助界面進行功能性視覺傳達，提升多媒體設備使用效率與交互體驗為目的的視覺語法。

二、動態效果的設計目標與表現

作為在圖形用戶界面設計領域起到引領作用的谷歌和蘋果公司在每一代新的操作系統產品推出之時，都會對產品自身的視覺交互邏輯作系統闡述說明，并迅速地在視覺風格、交互方式和用戶體驗上在全球掀起手機和平板電腦等移動端設計理念的新一輪變革。國外移動端的研發領域對動態效果的研究起步較早而且理論體系比較成熟，且如谷歌蘋果這樣具備05研發實力公司，都會在每一次視覺語言發生重大更新時將一些具有指導意義的設計原則加入到各自的設計指南中。蘋果的iOS7操作系統不僅推動了圖形界面扁平化的發展趨勢，更展現了其對動態效果的新的使用邏輯。蘋果在每發布～代操作系統的同時都會同步更新其設計原則（人機界面指南），在針對i057的更新中設計團隊特地指出了界面圖形、動畫、動態效果須精于考量細節又要恰如其分，滿足視覺傳達、反饋狀態的要求，并讓各種操作進度可視化，讓使用者能在動態效果引導下憑直覺進行操作。谷歌的安卓L系統在視覺設計理論上也有重大革新，Material Design“材質設計”這一設計概念被首次提出，其核心理念在于在界面設計中充分運用或模擬現實世界中某種材質（如紙張、塑料薄膜等）的特點與使用邏輯來對界面模塊與層級進行塑造，即在界面中構建一種“世界觀”，而動態效果在其中的作用除了豐富和強化視覺深度，使界面層級更明晰，還在其橫向空間構建、隱喻化的功能、材質塑造上起到了關鍵的作用，如圖2。

目前國內幾家大型互聯網企業如騰訊、阿里、百度、網易等都率先在內部設立了專門的設計研究部門，且在界面和動效設計與研究上走在了前列，騰訊旗下應用軟件微信和QQ等都采用了不少交互動效去闡釋和增強產品的使用特性，例如微信早期就已加入的搖一搖和搶紅包等可交互行為動效;而阿里旗下的天貓則是將動態效果應用于輔助商業營銷，制造熱鬧的活動氛圍。此外支付寶也將動態效果運用于用戶的年度收支報表等內容中，來幫助用戶了解自己的財務收支狀況，動態效果為這些生活中常用的軟件在視覺上增添了層次與形式感，豐富了界面的趣味性和情感表現力，如圖3。

某些應用軟件在輸入一些特定的內容時也可以觸發一些出乎意料的動態效果。淘寶、微信中便存在不少讓使用者津津樂道的隱藏動態內容。常見的例子是使用者用微信聊天時，發送一些特定的語句如節日、生日問候，就會在屏幕上觸發圖形墜落的特效，雖然簡短，但足以達到與使用者在情感上互動的目的。這些動態效果會根據特殊的節日或事件為使用者奉上新的動態內容，例如淘寶在2017年1月為電影《星球大戰》進行了一次品牌視覺推廣活動。當買家在淘寶搜索與“星球大戰”相關的關鍵詞時，會根據搜索商品類型觸發多種不同的動效，在不干擾買家購物的情況下給使用淘寶的星戰電影“粉絲”帶來不小的驚喜，如圖4。

若將圖形界面中的動態效果根據其具體的目的指向性進行分類，則其運用大致可分為塑造空間邏輯、迎合意識認知以及滿足情感需求三類。其中，塑造空間邏輯的動態效果幫助軟件解釋其界面的縱向、橫向空間的層級關系、邏輯和操作機制，側重于體現空間與秩序;迎合意識認知的動態效果通過傳統動畫創作法則，配合隱喻或者擬物視覺修辭手法還原符合現實世界物理原則的物體運動感、材質肌理等，賦予界面強烈的代入感和沉浸體驗;滿足隋感需求的動態效果力求能夠讓軟件使用者與軟件進行情感溝通，通過營造不同的視覺氛圍激發共鳴，調動使用者的情緒，具有維系使用者群體的功能。

三、關于動態效果設計的延伸思考

在人機交互發生頻度日趨密集的當下，可交互多媒體設備中日益受到重視的動態圖形、動效與圖形界面設計間的應用整合研究仍有相當大的可挖掘余地。另外，傳統動畫藝術創作的基礎理論對動態效果設計亦頗有裨益，如迪士尼動畫師Ollie Johnston與Frank Thomas所著《The lllusion of Life Disney Animation》中將迪士尼動畫創作元老們的經驗總結而成的“動畫的十二項基本法則”，對動態效果中圖形的運動與轉化、細節的表現刻畫具有重要指導意義，如圖5。

另一方面，動態效果設計又需要與界面的操作使用（即人機交互）相協調，這背后涉及界面、菜單等要素的層級邏輯關系，即屏幕可視層面之下與屏幕邊界之外的“不可見”區域的設計與考量。就此而言，動態效果某種程度上也可涉及或跨界到數字化展示空間中的設計應用，僅僅停留在二維視覺表現層面來進行思考還遠遠不夠。意大利策展人Paola Antonelli曾于現代藝術博物館（MOMA）舉辦過一場叫“Design and Elastic mind”的展覽，其中一部分是把空間當作交互界面，通過動態圖形來將展覽信息進行視覺藝術化的呈現與分類，藝術與技術的共同演繹充分詮釋了動態圖形設計所具有的綜合、多元的特征。而美國國家航空航天博物館的導覽系統，也全部運用了直觀有趣的交互界面及動態效果，對通過系統查閱資料。當前國外對于界面設計中的動態效果運用相對成熟，并突破了基于屏幕的二維界面，將動態效果的呈現與交互形式引入到現實的立體空間界面領域。這些實踐給國內的相關研究也帶來不少經驗啟示，通過打破傳統的屏幕空間固化思維，將屏幕中虛擬空間與現實中的展陳空間聯通起來，動態效果設計也可將圖形界面設計引領至新高度，如圖6。

結語

當人們生活中更多的信息是通過移動設備來進行交流時，對于設備的使用者又或者是設備的界面設計者來說，都迫切地需要一種能夠超越文化和語言障礙的交流方式，使智能設備能夠與其使用者交流更加順暢自如，更加準確地反映用戶與設計者雙方的訴求。于是，將使用設備過程中出現的繁瑣的信息通過視覺化的轉述，準確清晰地呈現給使用者便是大勢所趨。在這樣的趨勢下，動態效果作為圖形界面設計中一種重要的視覺表現形式，對于當下及未來應用程序的交互體驗升級和視覺交流發展的推動都有其時代必然性。它極大地彌補了目前觸摸式移動設備的界面視覺反饋缺失、屏幕成像局限等視覺體驗上的不足，在塑造和擴展界面空間感上起重要作用。此外還可令圖形界面的視覺呈現方式更加靈動活躍，為交互體驗帶來視覺沖擊力，為規矩而充滿條理性的界面注入感性化因素。若通過動態效果模擬真實世界中物體的運動及變化規律，令其在圖形界面的視覺與邏輯層面上營造出真實可信的隱喻空間，能夠提高使用者與界面中特定的元素進行交互時的理解效率，在構建使用者與界面之間的視覺交流關系上起到重要作用。動態效果與界面內的虛擬空間是相輔相成的，空間作為體現運動的屬性，必然在各種運動過程形式中被表現出來。物理空間（現實）和心理空間（虛擬）在視覺感知過程中被聯結在一起，圖形界面設計方法中的隱喻設計即利用這一點。設計動效時需要充分考慮利用人眼對空間和物體的知覺方式做文章。獨特而流暢的動態效果不但通過視覺認知完善了觸屏界面所缺失的物理信息反饋，還能提升軟件整體的交互體驗，因此動態效果需要超越單一設計領域，從視覺設計到交互體驗的邏輯層面進行全面的打磨優化。另外，正是因為動態效果是吸引使用者視覺注意力的有效方式，在運用的過程中，就需要更加小心謹慎，確保界面在視覺上所要傳達的核心內容與軟件的設計目標不會被其干擾。繼續探索及研究圖形界面中動態效果的形式和方法，能夠更好地為圖形設計在新的媒介形式中進行新的應用嘗試提供幫助，使其在提升應用程序的審美、藝術附加值和視覺體驗上發揮最大效能。.

參考文獻

[1]布萊思，弗林，移動應用的設計與開發[M]北京：電子工業出版社，2010： 116-134

[2]Clark.J.Tapworthy： Designing great apps[M] OReillyMedia，INC，2010

[3] CooperA，ReimannR，Cronin DAbout face3：the essentials of interaction desigp[M] John Wiley&Sons，2007

[4]唐納德.諾曼，情感化設計[M]電子工業出版社，2005： 001-008、087-091、127-150

[5] Apple Inc.iOS Human Interface Guidelines[M]Apple Inc.2016

[6]李剛，余天琪，解讀扁平化在智能手機界面設計中的藝術表達[J]設計， 2016，29 （13）：134-135

[7]任輝敏，丁鋼，手機界面設計中的趣味性研究[J]設計， 2016，29 （17）：64-65