App中加載頁動畫的趣味設計研究

紀曉

摘 要 加載動畫趣味化的本質即打破原有界面中時間與空間的限制，轉移用戶注意力，達到讓用戶產(chǎn)生移情或共鳴的目的。加載頁動畫具有較強的表現(xiàn)力，可豐富App的視覺表現(xiàn)以及增加用戶對界面的包容度，其主要表現(xiàn)形式有節(jié)奏化、情節(jié)化、情感化三種。

關鍵詞 加載動畫；界面設計；交互設計；動畫設計

中圖分類號 G2 文獻標識碼 A 文章編號 2096-0360（2017）16-0019-02

動態(tài)效果可以提高用戶對因果關系和指向性的感知，還可以提升用戶的興趣度，讓用戶能更享受瀏覽過程[1]，加載動畫正是移動應用中不可或缺的動態(tài)元素。隨著移動應用的發(fā)展，加載動畫也逐漸由工業(yè)化的、批量化的模式走向情感化設計。從形式上來說，表現(xiàn)形式豐富多彩，不再是單一而枯燥的進度條形式，而是UI界面綜合藝術的表現(xiàn)；從功能上來說，不再是單純?yōu)樘嵝鸭虞d進度而存在，而是被賦予了吸引注意、安撫用戶、表達內涵等多種新的意義。趣味化的設計綜合表現(xiàn)力強，能夠消解嚴肅，帶有濃厚的情感色彩，適用于當代網(wǎng)絡語言體系，因此，加載動畫越來越傾向于以趣味化的方式進行表達。加載動畫的趣味化設計主要有3種表現(xiàn)形式，分別是節(jié)奏化設計、情節(jié)化設計和情感化設計。

1 節(jié)奏化設計

節(jié)奏是一種“美”的形態(tài)，這種“美”在動畫藝術中起著至關重要的作用，是動畫藝術靈魂的載體[2]。加載動畫營造節(jié)奏美感，它們的視覺內容本身不需要有任何含義，作用是讓觀者溶入一定的視覺規(guī)律之中，先破后立，打破原有時間節(jié)奏，呈現(xiàn)新的視覺感受，削弱等待的沉悶感。加載頁動畫的節(jié)奏化主要表現(xiàn)在兩個維度：一是利用相似圖形或相似運動營造規(guī)律，改變用戶的時間節(jié)奏；二是利用不同圖形產(chǎn)生有規(guī)律的變化或運動，改變其空間上的節(jié)奏。

1.1 時間節(jié)奏的改變

利用相同圖形的相同運動變化是改變時間節(jié)奏的有效方式。相同運動可以產(chǎn)生韻律，比如音樂播放器中的落差音柱，是利用相似線條的排列及起伏運動來營造韻律感的，其中不止有節(jié)奏美感，還含有一定的形式美感。規(guī)律運動的時間也遵循嚴格的要求，過短影響視覺表現(xiàn)力，且容易產(chǎn)生催促的視覺感受，過長則會拉長時間節(jié)奏，無法改變原有等待的節(jié)奏。通過對多個規(guī)律型加載動畫的分析與研究，根據(jù)信息量的不同，一個運動周期在2～4秒左右是較為普遍適用的時間長度，變化的速度要快于正常時間流逝的速度。

1.2 空間節(jié)奏的改變

改變空間節(jié)奏的方式主要是利用不同圖形的變化產(chǎn)生一定的空間落差，圖形的遞增和遞減都遵循嚴格規(guī)律，讓觀者產(chǎn)生對“盈”和“虧”變化的期待，從而產(chǎn)生愉快的視覺觀感。這類的圖形一般為規(guī)則圖形，比如正方形、正圓、正三角形等等。加載動畫空間節(jié)奏變化的常見形式有：1）形變，單個圖形的形態(tài)變化；2）疊加，相同圖形的物理量變；3）縮放，圖形的比例變化；4）盈虧，固定面積內的圖形變化；5）3D效果，平面內營造虛擬縱深感；6）聚散，相同圖形進行聚集或驅散；7）綜合型，多種變化形式綜合表現(xiàn)等。

2 情節(jié)化設計

情節(jié)化設計是指加載動畫進行簡單情節(jié)描述、通過表現(xiàn)人物或事物的變化，將等待的過程可視化，打破原有時間線、轉移用戶注意力的一種表現(xiàn)形式。受時間限制和畫幅限制，加載動畫的情節(jié)一般較為簡單，分為循環(huán)型情節(jié)和結果型情節(jié)兩種。

2.1 循環(huán)型情節(jié)

循環(huán)型情節(jié)的本質也是通過改變時間節(jié)奏來削弱等待感，只不過主體由圖形變成了更復雜的內容。受手機屏幕大小的限制，加載動畫常以循環(huán)動作表現(xiàn)連貫內容，循環(huán)型情節(jié)即將所表現(xiàn)的動作重復播放，比如“人走路”，以循環(huán)邁腿擺手的動作來形成連貫的走路姿態(tài)，空間的相對位置雖然沒有變化，但在視覺上造成了一種持續(xù)的動效、產(chǎn)生連貫的情節(jié)。循環(huán)型情節(jié)有兩個特點：一是運動主體帶有一定的擬人化色彩，或為人所熟知的事物，使得觀者更容易產(chǎn)生認同感和共鳴；二是情節(jié)內包含細節(jié)，為動態(tài)的主體添加一些細節(jié)，豐富單調的動態(tài)，或添加表現(xiàn)相對位置的裝飾物，如人走路時腳邊的石頭和花草等，或直接在動態(tài)中添加細節(jié)，比如表現(xiàn)人走路時在幾步當中添加一個跳躍，都是常見的表現(xiàn)手法。循環(huán)型情節(jié)是加載動畫較為常用的手法，它動態(tài)簡單、輕松，且打破空間界面，具有較強的表現(xiàn)力和趣味性。

2.2 結果型情節(jié)

結果型情節(jié)即加載動畫變化的過程是為結果服務的，最終導向為加載成功的結果。較為典型的結果型情節(jié)有沙漏漏下、水杯倒?jié)M、電池充飽等。結果型情節(jié)是一種兼具提醒以及提高用戶期待值的動畫表現(xiàn)形式，它既將加載進度融合在圖形變化之中，起到明確的提示作用，又利用圖形的表現(xiàn)力削弱受眾的對時間的感官，是加載動畫較為典型且常見的表現(xiàn)手法。

3 情感化設計

當物質生活已經(jīng)被滿足，情感化的需求就凸顯出來，App作為高度工業(yè)化的產(chǎn)物，單純作為工具已經(jīng)不足以滿足情感消費需求，因此融入更多的情感元素成為加載動畫的一個發(fā)展方向。情感化設計的產(chǎn)品能讓用戶從生理、心理和精神理想方面，享受到產(chǎn)品的社會價值，從而讓他們的社會生活充滿快樂，激起用戶對幸福生活得追求，提高人們的生活品質和幸福感[3]。加載動畫情感化設計的本質即通過融入情感元素，形成記憶符號，使得用戶產(chǎn)生移情與共鳴、或引發(fā)用戶思考，達到削弱等待感的目的。加載動畫的情感化設計主要包括擬人式設計和情懷式設計兩種。

3.1 擬人式設計

擬人式設計即將設計對象賦予人的形態(tài)、語言、性格等因素，使其具有某些類人特點的一種設計方式。加載動畫常用的擬人方式為擬人形態(tài)，把人的外觀形態(tài)、動態(tài)等加入創(chuàng)作對象，使其有一個直觀的人的形態(tài)體現(xiàn)，比如QQ的企鵝、趕集網(wǎng)的驢子、嗶哩嗶哩網(wǎng)的小電視機等。其中，QQ企鵝的形象較為典型，其一，它的頭、身、手腳都做了細致處理，使其更接近人體形態(tài)；其二，它擁有類人的表情，比如拋著媚眼的表情，顯得整個形象生動俏皮；其三，它有類人的動態(tài)，奔跑、跳躍、左看右看等，鮮活得仿佛身邊的一個小伙伴。加載動畫的擬人式設計實質上是借設計對象的形態(tài)表現(xiàn)人本身的造型姿態(tài)、語言、個性、心理活動等等，無形中產(chǎn)生和用戶的交流，將嚴肅、冰冷界面語言轉化為生動活潑的交互語言，獲得受眾情感上的共鳴，是情感化設計中最為常用的一種形式。

3.2 情懷式設計

情懷式設計是反思層面的設計，是引起用戶自我感覺，勾起其回憶、引發(fā)其思考、使其產(chǎn)生情感依賴的一種設計方式。常見的情懷有：溫馨情懷、自由情懷、英雄情懷、女性情懷等等。對于加載動畫來說，傳遞溫情、體現(xiàn)鮮明的個性等都是常用的設計方式。傳遞溫情體現(xiàn)的是溫馨情懷，這與現(xiàn)代社會中日益疏離的人際關系密切相關，溫情化的設計能使用戶產(chǎn)生情感上的寄托和依賴，對現(xiàn)實情感起到一定的彌補作用。加載動畫中體現(xiàn)溫情的方式有很多，最常見的采用“萌系”形象作為動畫主體，比如懶蛋蛋、熊本熊等，軟、萌、懶、蠢、賤等元素可以消除當代人壓力、減少其戒心，是典型的溫情化語言的體現(xiàn)。體現(xiàn)鮮明個性也是情懷設計的一種，與溫情語言不同的是，個性化的加載動畫體現(xiàn)的是較為極端、尖銳的情緒，較為鮮明的形象比如暴力熊、越獄兔等，體現(xiàn)了當代人追求潮流、自由、夢想、反傳統(tǒng)、不走尋常路的反叛心理。

綜上所述，除了提示加載進度，趣味化的加載動畫對于給用戶帶來視覺美感、表達思想內涵、引發(fā)用戶反思等方面均有貢獻。利用趣味動畫改變緩慢的時間節(jié)奏是加載動畫設計的關鍵，同時，情感化的設計已經(jīng)滲透了App設計的方方面面，未來的加載動畫設計，會更多地向表達情感、引發(fā)思考和共鳴的方向發(fā)展，為App設計增加更多的趣味性。

參考文獻

[1]Robertson G G.Mackinlay J D.Card S K.Cone trees：animated 3 Disualizations of hierachical informationg[A].Proceedings of the SIGCHI Conference on Human factorsin Computing Systems[c].New York.ACM.1991：189-194.

[2]彭巍.動畫藝術的節(jié)奏美[J].文藝爭鳴，2010（16）：167-168.

[3]PieterMA.Desmet.MeasuringEmotions[DB/OL].[2010-07-14].http//citeseerx.ist.psu.edu/viewdoc/download？doi=10.1.1.104.1400&rep=rep1&type=pdf.endprint