電商類App 用戶界面中動畫設計的研究

張楷

（南京信息工程大學藝術學院，江蘇 南京 210044）

1 電商類App 用戶界面中動畫設計的作用

1.1 動畫的引導提示作用

引導類動畫給用戶提供指引，讓用戶更好地了解App 的功能以及各種所需要的信息。對于第一次下載使用電商App 的用戶來說，引導類動畫給用戶提供簡單明了的操作信息，讓用戶更好地使用App。避免年齡較大的用戶無法正確、高效地使用App 來購買商品，讓他們能夠第一時間內獲取商品的信息以及找到所需要的。從電商的角度，也避免了用戶的流失。引導類動畫一般出現(xiàn)在App 初次打開的時候，是用戶了解、使用App 的第一步。除了基本的功能展現(xiàn)和信息提供，引導類動畫對于用戶的及時需求也有引導和提示。用戶在使用電商App 購物過程當中，對于商品物流信息的掌握需求會比較多。清晰明確的提示能夠迅速抓取購物者的眼球。當靜止的物體突然出現(xiàn)變化的時候，往往非常吸引人的眼球。不斷反復地出現(xiàn)變化，將促使用戶進行選擇。界面圖片的切換動畫，以及字體放大縮小的動畫來吸引用戶，激發(fā)了用戶的興趣，提示用戶進行選擇。用戶對于主要功能的使用有了更加清晰明確的認識[1]。

1.2 動畫提升加載體驗的作用

加載動畫一般出現(xiàn)在兩個界面切換之間以及上下滑動頁面的刷新。隨著軟件的升級，傳統(tǒng)的文字提示已經(jīng)遠遠不能夠安撫用戶在等待過程當中急躁的情緒，加載動畫不再是那種非常生硬的圓形旋轉，傳統(tǒng)刻板、生硬的加載類動畫已經(jīng)由如今富有表現(xiàn)力的圖形、顏色、充滿設計感的動畫所代替。沖破了原有的時間和空間上的局限性，具有非常豐富的表現(xiàn)力。用戶在選購商品的時候不希望因為網(wǎng)絡或者移動設備的問題影響自己的購物體驗。因此加載動畫讓電商用戶在使用App 購物等待的時候保持良好的情緒，增加了用戶對于問題出現(xiàn)的包容程度[2]。在等待過程當中，生動有趣的小動畫安撫了用戶情緒的同時，也增強了用戶對于App 的好感度，用戶在網(wǎng)絡購物的愉悅感迅速提升。例如當閑魚App 網(wǎng)絡出現(xiàn)中斷時的加載動畫。兩個生動有趣的卡通形象之間的變化大大提高了用戶的好感程度。閑魚生動活潑的品牌形象也很好地展現(xiàn)在了用戶的面前。這個加載動畫的設計同時也大大提高了產(chǎn)品的品牌形象，極大地促進了品牌的宣傳和推廣。

2 電商類App 用戶界面中動畫設計的方法

2.1 視覺色彩的動態(tài)設計

色彩在信息傳遞的過程當中是一個非常重要的元素。隨著用戶智能設備的不斷升級，電商App 用戶界面中的視覺色彩元素也產(chǎn)生了新的變化，動畫設計當中傳統(tǒng)的靜態(tài)色彩開始向動態(tài)色彩變化。與靜態(tài)的色彩元素不同的是，動態(tài)的視覺色彩更具生命力，視覺上的變化更大。采用動態(tài)的視覺色彩設計讓用戶可以非常敏感地捕捉到界面之間的變化。這樣富有表現(xiàn)力的變化為信息傳遞提供了非常有力的保障。動態(tài)視覺色彩的變化，讓電商App 中的商品展現(xiàn)效果更加的豐富，通過多變的、富有節(jié)奏的色彩變化，來不斷吸引用戶的視覺焦點。動態(tài)色彩除了明度、飽和度、色相上的變化，同時也可以運用大小、位置以及形狀方面的變化[3]。不同的顏色變化也讓用戶產(chǎn)生了不同的情感變化。在以女性用戶為主的電商App 當中，多采用飽和度較高的色彩變化設計能夠讓用戶產(chǎn)生愉悅感，提升用戶在購物時候的滿足感。用戶在首次打開App 時，引導頁的畫面是最先能夠讓用戶獲取電商平臺信息，提升用戶興趣感與愉悅度的。引導頁動畫設計的好壞，間接決定了用戶對于平臺的第一印象，因此在進行引導頁的色彩動態(tài)設計時，色彩的動態(tài)變化幅度不能過大，通過色彩的逐漸變化來吸引電商用戶，同時豐富整體的畫面效果。色彩動態(tài)設計以承載信息為主，起到積極的引導作用，將呈現(xiàn)的信息更加直觀地體現(xiàn)出來。在引導頁當中，色彩的動態(tài)變化要符合一定規(guī)律，根據(jù)產(chǎn)品的不同功能點要有主次不同的變化，要與電商產(chǎn)品整體的調性相互協(xié)調統(tǒng)一，不能出現(xiàn)過于浮夸的色彩變化，這樣反而會加重電商用戶的視覺疲勞，直接影響用戶對于產(chǎn)品的進一步使用，從而加重了用戶的體驗負擔。

2.2 與音效相結合的設計

電商App 動畫設計當中通過運用合理的聲音效果來豐富用戶的視覺體驗，能夠讓電商用戶得到真實的融入感和參與感。在電商App 下拉頁面刷新的過程當中可以增加泡泡破裂的卡通音效來提示用戶已經(jīng)成功完成頁面的刷新。音效的設計并不僅僅是對現(xiàn)實中的聲音進行簡單疊加和還原，在音效的設計過程當中要考慮全面，全方面地與電商用戶的交互動作、操作的結果、操作時候的狀態(tài)環(huán)境以及畫面視覺效果等因素相互結合，進行畫面的構思和設計，運用不同風格的音效與生動的動畫設計相互結合，從而給用戶帶來更好的體驗[4]。比如，當用戶在購物車當中成功地加入商品時，可以出現(xiàn)一個短暫的提示音來提示用戶商品已經(jīng)加入。這樣，用戶使用App 購物的過程當中合理的音效使用戶的感官體驗更加全面立體，使用戶完全沉浸在購物的體驗當中。在滑動產(chǎn)品圖片的過程中融入現(xiàn)實中物品滑動的聲音，在某些特殊操作事件發(fā)生時，利用具有特殊意義的音效來吸引用戶聽覺感知，可以給用戶帶來及時的提醒。需要注意的是在動畫與音效設計的結合時，音效的應用不是越多越好，音效的展現(xiàn)效果需要簡單明了，其目的主要還是用來輔助用戶操作的完成。目前，在眾多電商類App 中，動畫與音效的結合設計還未被廣泛應用其中，用戶操作完成后的反饋主要以視覺上變化來表現(xiàn)出來，音效的合理設計增加了操作反饋的體現(xiàn)狀態(tài)，增加了用戶購物時的沉浸感，從而增強用戶的操作體驗。

2.3 情節(jié)的優(yōu)化設計

情節(jié)在動畫中具有非常重要的作用，好的情節(jié)能夠使觀眾第一時間沉浸在電商產(chǎn)品當中。動畫角色需要通過情節(jié)來表達情緒，展現(xiàn)鮮活的生命力。在電商App 中，由于展示范圍有限，所以給動畫表演的場景范圍也十分有限，當動畫角色利用身體受到限制時，便開始通過情節(jié)設計來重復實現(xiàn)，見得比較多的是人物角色情緒上的變化，如喜怒哀樂等。在進行情節(jié)設計時，創(chuàng)作者通常會采用面部表情放大夸張的方式來處理，通過夸張的方式來表現(xiàn)情緒無論是在動畫設計上還是其他領域上都是最為常見的方法。不僅如此，還可以將面部表情化設計與動作相結合，更加突出其視覺沖擊力，同時也將角色情緒變得更新穎多變又不覺尷尬。譬如在進行動態(tài)角色設計時，瞪眼睛的時候手叉腰、哭泣的時候用手去揉眼睛、憤怒的時候握緊拳頭等等類似的表現(xiàn)方式，將不同的表現(xiàn)方式相互結合，使得角色的情緒更加戲劇化。一些開發(fā)者在突出動畫視覺效果的時候，容易忽視情節(jié)的重要性，好的情節(jié)設計能夠給整體的動畫設計注入靈魂，情節(jié)最終是為產(chǎn)品服務的，整體的故事情節(jié)要與產(chǎn)品緊密貼合，營造出更加符合產(chǎn)品文化的氛圍[5]。

2.4 簡約性設計

電商App 是一種即時性交互體驗，過程快，時效短。在進行電商App 界面設計時，要考慮到其信息量巨大、層次多的情況，為了讓電商用戶能夠及時有效地獲得自己想要的物品，因此用戶界面的動畫設計不宜過于華麗，而是更應當注重簡約、清晰、直觀的設計理念，這樣不僅不會對用戶造成心理負擔，反而可以幫助他們更快更便捷地找到自己想要的東西，并獲得了互動體驗所帶來的快感。簡約性的設計摒棄了一些不必要的裝飾，元素相對簡單，將界面所承載的“信息”作為核心，使得電商平臺的表達更加清晰明了。對于目前如此快的生活節(jié)奏，用戶更加樂于接受這種簡約性的設計。在進行動態(tài)圖形的設計時，通過摒棄圖形中一些不必要的陰影、描邊、質感，通過一些簡單的線條、幾何形狀來表現(xiàn)，這樣做在突出主題的同時也大大提高了系統(tǒng)的運行效率[6]。在電商App 中，動畫設計的廣泛應用并不是單一的在視覺上呈現(xiàn)出來，應當在表達電商平臺理念的同時強調設計的簡約性、實用性，通過簡約的動態(tài)圖形設計來傳達信息，這樣的方式表達更精確，使用起來也更高效率。動畫設計的過程當中，簡約性的設計是一種對于圖形表達的高度概括和提煉，使得動畫在運行的過程當中速率大大加快，縮短了用戶在操作反饋后等待的時長。

2.5 風格統(tǒng)一的整體性設計

電商App 中的動畫設計為了給電商用戶帶來非常炫酷的視覺效果，這就意味著要融入很多復雜的視覺元素在其中，為了對元素進行有效的編排、整合，這就需要對整體的風格進行把控。電商App中的動畫設計必須要貼合產(chǎn)品的特性、品牌的整體風格，過于復雜的動態(tài)效果會打破App 整體畫面的統(tǒng)一，從而增加了用戶的操作壓力和視覺負擔，不能夠在第一時間內將商家的有效信息傳遞給電商用戶。在視覺風格統(tǒng)一方面，不同視覺元素的位置、大小、顏色、造型上保持相對的一致，在這些元素的運動變化當中，通過相同頻率的變速運動設計來達到統(tǒng)一。在設計App 品牌人物角色動畫的時候，要把握好品牌的整體調性，人物角色的整體動態(tài)變化不能過于夸張，可以采用與品牌相符合的顏色、品牌當中已經(jīng)有的相關元素來進行動態(tài)設計。人物角色的細節(jié)變化也要與App 當中其他的動態(tài)圖形設計的變化規(guī)律相互協(xié)調、統(tǒng)一，這樣才能夠使得設計的人物角色動畫融入App 的整體風格當中。在電商用戶的實際操作層面，用戶在瀏覽商品，加入購物車，到最終購買商品這一系列的操作過程當中非常容易產(chǎn)生一些不必要的操作，一些動態(tài)圖形的指引給用戶帶來了麻煩。為了降低用戶的操作難度，給用戶帶來最節(jié)省時間、最便捷的電商購物體驗，其中的引導動畫、提示動畫和反饋動畫的設計在風格上要達到一致。用戶在對電商平臺一系列的使用操作過程，就是一個對于整個平臺用戶界面的熟悉過程，這其中的動畫設計風格越統(tǒng)一，用戶就能更早熟悉操作，對于產(chǎn)品更加上手，整個購物體驗的過程將會更加流暢、便捷。

結語

傳統(tǒng)的靜態(tài)界面設計和頁面信息處理已經(jīng)遠遠不能滿足電商App 開發(fā)者和電商用戶之間的需求，電商App 開發(fā)者為了增進和擴展與用戶之間的交互方式，用戶為了擁有更好的體驗，靜態(tài)界面設計向外開始延伸為界面動畫設計，有趣、更加人性化的動畫設計在電商App 中逐漸增多。用戶界面中的動畫設計因其具有高效的引導和反饋、提示用戶操作狀態(tài)、提升用戶體驗等特點在電商App 用戶界面中有非常大的優(yōu)勢。