張楷

（南京信息工程大學(xué)藝術(shù)學(xué)院，江蘇 南京 210044）

1 電商類(lèi)App 用戶界面中動(dòng)畫(huà)設(shè)計(jì)的作用

1.1 動(dòng)畫(huà)的引導(dǎo)提示作用

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

1.2 動(dòng)畫(huà)提升加載體驗(yàn)的作用

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

2 電商類(lèi)App 用戶界面中動(dòng)畫(huà)設(shè)計(jì)的方法

2.1 視覺(jué)色彩的動(dòng)態(tài)設(shè)計(jì)

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

2.2 與音效相結(jié)合的設(shè)計(jì)

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

2.3 情節(jié)的優(yōu)化設(shè)計(jì)

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

2.4 簡(jiǎn)約性設(shè)計(jì)

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

2.5 風(fēng)格統(tǒng)一的整體性設(shè)計(jì)

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

結(jié)語(yǔ)

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