解析信息產(chǎn)品中功能性動(dòng)畫的交互設(shè)計(jì)原理

翟峻谷

（遼寧師范大學(xué)影視藝術(shù)學(xué)院，遼寧 大連 116000）

引言：現(xiàn)階段，應(yīng)用程序等信息產(chǎn)品得到了普及性應(yīng)用，促使功能性動(dòng)畫形成相對(duì)完善的應(yīng)用語境，使用范圍也實(shí)現(xiàn)進(jìn)一步拓展。為了更好的吸引受眾，信息產(chǎn)品的設(shè)計(jì)更加強(qiáng)調(diào)對(duì)自然化與本位化設(shè)計(jì)思想的凸顯，而功能性動(dòng)畫作為相對(duì)直接且極為有效的信息交互設(shè)計(jì)方法，有著極高的探究與應(yīng)用價(jià)值。

一、功能性動(dòng)畫的概述

功能性動(dòng)畫是一種嵌入U(xiǎn)I設(shè)計(jì)中微妙的動(dòng)畫，有著明確、合理的目標(biāo)，其能減少認(rèn)知負(fù)荷、防止頁面轉(zhuǎn)換視盲。同時(shí)，可以在在空間上營造更好的印象[1]。在當(dāng)前的信息產(chǎn)品設(shè)計(jì)中，普遍遵循著“以人為本”的設(shè)計(jì)理念，即用戶的焦點(diǎn)在哪里就將哪里直觀展示。而功能性動(dòng)畫的交互設(shè)計(jì)就能夠達(dá)到上述目標(biāo)。對(duì)于信息產(chǎn)品中的功能性動(dòng)畫來說，其發(fā)揮出的主要功能有：為用戶操作提供視覺反饋；指示當(dāng)前狀態(tài)；提示用戶操作；導(dǎo)航欄的過渡等。

二、面向信息產(chǎn)品的功能性動(dòng)畫交互設(shè)計(jì)原理探究

（一）擠壓與拉伸

利用觸感操作移動(dòng)終端，促使自身元素變形為擠壓與拉伸，是功能性動(dòng)畫設(shè)計(jì)的重要原理，也是達(dá)到交互行為產(chǎn)生結(jié)果的必要手段。對(duì)于擠壓與拉伸來說，該動(dòng)作主要通過兩個(gè)過程實(shí)現(xiàn)，具體有：在輕掃屏幕操作下，屏幕內(nèi)產(chǎn)生的變化相當(dāng)于對(duì)外界中某物體施以外力，使得該物體受到擠壓得以縮緊，或是受到拉伸后得以舒展。例如，在郵件中，頁面刷新、郵件獲取等操作的實(shí)現(xiàn)就應(yīng)用了擠壓與拉伸的功能性動(dòng)畫設(shè)計(jì)原理。

（二）預(yù)備性動(dòng)作

事實(shí)上，所有的動(dòng)作發(fā)生前均存在一個(gè)預(yù)備性動(dòng)作，承擔(dān)著為后續(xù)動(dòng)作發(fā)生提供良好鋪墊的作用。這樣的預(yù)備性動(dòng)作在動(dòng)畫中即為預(yù)期，在設(shè)計(jì)中，需要明確受眾對(duì)后續(xù)動(dòng)作的期待。對(duì)于功能性動(dòng)畫而言，只有實(shí)現(xiàn)動(dòng)作與預(yù)備性動(dòng)作的共同設(shè)計(jì)與展示，才能保證展示出的效果與實(shí)際更為貼近，賦予功能性動(dòng)畫以豐富的生命力。在設(shè)計(jì)預(yù)期的過程中，應(yīng)當(dāng)保證呈現(xiàn)出的效果能夠提示受眾即將發(fā)生的動(dòng)作，確保受眾對(duì)操作產(chǎn)生心理預(yù)知，提升整個(gè)動(dòng)作呈現(xiàn)的真實(shí)性、流暢性。例如，在拍照時(shí)，光圈打開的動(dòng)畫為預(yù)備性動(dòng)作，向受眾發(fā)出“即將進(jìn)入實(shí)體取景（照相）狀態(tài)”的提示。

（三）舞臺(tái)展現(xiàn)

對(duì)于舞臺(tái)展現(xiàn)來說，其設(shè)計(jì)原理的重點(diǎn)為將藝術(shù)家與受眾放置于同一視角下審視，平衡實(shí)際與吸引力之間的關(guān)系，是一種既包含真實(shí)性又富有吸引力感染力的設(shè)計(jì)方法。對(duì)于信息產(chǎn)品來說，操作界面可以視為熒幕，新手用戶在實(shí)際的操作中存在一定難度，而通過引入功能性動(dòng)畫，能夠向用戶發(fā)出操作提示，幫助新手用戶迅速、準(zhǔn)確的掌握整個(gè)界面的操作方法[2]。此時(shí)，豐富了戶操作體驗(yàn)，確保用戶更加快速的了解使用，達(dá)到熟練掌握沉浸式或?qū)蚴浇缑娌僮鞣椒ǖ男Ч?。例如，在Quick Office中，利用功能性動(dòng)畫的引入，向用戶提示了當(dāng)前的所處位置、編輯文件的狀態(tài)等，確保用戶可以對(duì)文件展開更為直觀的操作。

（四）連貫動(dòng)作和關(guān)鍵動(dòng)作

就當(dāng)前的信息產(chǎn)品來看，移動(dòng)娛樂游戲設(shè)計(jì)中對(duì)連貫動(dòng)作與關(guān)鍵動(dòng)作設(shè)計(jì)方法的應(yīng)用更加常見。此時(shí)，存在于數(shù)字娛樂程序中的多數(shù)功能性動(dòng)畫均可以使用關(guān)鍵動(dòng)作完成畫面填充，并對(duì)非常規(guī)的復(fù)雜動(dòng)作落實(shí)完整描繪。通過這樣的方式，不僅能夠達(dá)到較好的動(dòng)態(tài)表現(xiàn)效果，還能夠降低實(shí)際工作量，最大程度提升程序的開發(fā)速度。例如，在游戲“植物大戰(zhàn)僵尸”中，角色的點(diǎn)頭、射擊等動(dòng)作均設(shè)定為關(guān)鍵動(dòng)作進(jìn)行完整繪制。而在游戲“水果忍者”中，則使用了連貫動(dòng)作的設(shè)計(jì)方法展示出水果撕裂的效果。

（五）慢入和慢出

依托慢入和慢出，能夠完成某角色在一次空間運(yùn)動(dòng)中固有慣性的描繪。在信息產(chǎn)品的功能性動(dòng)畫設(shè)計(jì)中，利用在物體運(yùn)動(dòng)起始與結(jié)束中加入大量的中間畫、并在運(yùn)動(dòng)中加入少量的中間畫，能夠達(dá)到對(duì)該物體運(yùn)動(dòng)軌跡的真實(shí)化呈現(xiàn)，為受眾提供更加具體、形象、真實(shí)的使用體驗(yàn)。例如，在用戶打開應(yīng)用程序中的功能性動(dòng)畫、或是在移動(dòng)終端中進(jìn)行列表瀏覽時(shí)，通過加入慢入和慢出的設(shè)計(jì)方法，可以達(dá)到提升信息之間過渡流暢性與自然性的效果。

（六）次要?jiǎng)幼?/h3>

次要?jiǎng)幼髦饕o助主體動(dòng)作的呈現(xiàn)，推動(dòng)表現(xiàn)效果的提升。在功能性動(dòng)畫的設(shè)計(jì)中，依托次要?jiǎng)幼骺梢愿玫恼故境鲂畔⒅g的切換、傳遞流暢性。例如，在Clear程序中，用戶在進(jìn)行刪除已完成事件的操作中，只要對(duì)其進(jìn)行右劃即可彈出對(duì)號(hào)提示，點(diǎn)擊后代表該事件已完成。

（七）時(shí)間控制

在設(shè)計(jì)信息產(chǎn)品中的功能性動(dòng)畫時(shí)，需要設(shè)計(jì)人員重點(diǎn)考量不同速率下信息的表達(dá)，經(jīng)過反復(fù)測試確定不同幀數(shù)條件下動(dòng)畫的持續(xù)效果，最終形成準(zhǔn)確的設(shè)計(jì)形式，實(shí)現(xiàn)時(shí)間的完美控制。

總結(jié)：綜上所述，在信息產(chǎn)品中，功能性動(dòng)畫發(fā)揮著極高的作用，應(yīng)用交互設(shè)計(jì)原理展開功能性動(dòng)畫設(shè)計(jì)的完善性設(shè)計(jì)極為重要。在交互設(shè)計(jì)理念的指導(dǎo)下，通過完成擠壓與拉伸、預(yù)期性動(dòng)作、舞臺(tái)展現(xiàn)、連貫動(dòng)作和關(guān)鍵動(dòng)作、慢入和慢出、次要?jiǎng)幼?、時(shí)間控制的設(shè)計(jì)，提升了功能性動(dòng)畫的展示效果，保證了其功能性的更好發(fā)揮，增強(qiáng)了信息產(chǎn)品使用的流暢性與自然性，為用戶帶來了更豐富的應(yīng)用體驗(yàn)。