淺議動(dòng)效設(shè)計(jì)在APP中的交互應(yīng)用方式

李月怡

（云南師范大學(xué)美術(shù)學(xué)院，云南 昆明 650000）

1 動(dòng)效設(shè)計(jì)的概念

動(dòng)效設(shè)計(jì)的英文是Motion Design，是運(yùn)動(dòng)圖形設(shè)計(jì)（Motion Graphic Design）的簡(jiǎn)稱，也稱為動(dòng)態(tài)設(shè)計(jì)。運(yùn)動(dòng)圖形設(shè)計(jì)遵循平面設(shè)計(jì)和視聽語(yǔ)言的雙重標(biāo)準(zhǔn)，通過視頻或動(dòng)畫來創(chuàng)作成動(dòng)態(tài)影像的藝術(shù)形式。嚴(yán)格意義上講，運(yùn)動(dòng)圖形設(shè)計(jì)是動(dòng)效設(shè)計(jì)的一個(gè)分支，而它具有眾多的藝術(shù)表現(xiàn)形式和作品，所以這兩者的概念逐漸趨同。下文所談的動(dòng)效設(shè)計(jì)即動(dòng)態(tài)設(shè)計(jì)，或運(yùn)動(dòng)圖形設(shè)計(jì)，不做細(xì)微區(qū)分。

2 動(dòng)效的作用

手機(jī)移動(dòng)應(yīng)用動(dòng)效指的是用戶在 與移動(dòng)設(shè)備交互過程中移動(dòng)應(yīng)用用戶界面呈現(xiàn)出的動(dòng)態(tài)效果。

2.1 提升用戶體驗(yàn)

設(shè)計(jì)師若只追求靜態(tài)像素的完美呈現(xiàn)，而忽略動(dòng)態(tài)過程的合理表達(dá)，會(huì)導(dǎo)致用戶不能在視覺上覺察元素的連續(xù)變化，進(jìn)而很難對(duì)新舊狀態(tài)的更替有清晰的感知。

通過「時(shí)間點(diǎn)」和「空間幅度」的設(shè)計(jì)為用戶建立運(yùn)動(dòng)的可信度，即視覺上的真實(shí)感，當(dāng)用戶意識(shí)到這個(gè)動(dòng)作是合理的，才能更加清晰愉悅地使用產(chǎn)品。

2.2 增添產(chǎn)品氣質(zhì)

未添加動(dòng)效的產(chǎn)品，會(huì)帶給人一種死氣沉沉的感覺，所有內(nèi)容平鋪直敘、毫無生機(jī)，即使界面設(shè)計(jì)的很美觀，也會(huì)缺乏一種靈動(dòng)細(xì)膩的氣質(zhì)。如果把產(chǎn)品比作成美女，那么界面視覺就是美女的顏值，交互動(dòng)效就是美女的肢體語(yǔ)言。合理的動(dòng)效能將更立體、更富有關(guān)聯(lián)性的信息傳遞出去，提高產(chǎn)品的“表達(dá)能力”，增加親和力和趣味性，也利于品牌的建立。并且優(yōu)秀的動(dòng)效能夠加強(qiáng)用戶與產(chǎn)品的情感傳遞，增加用戶對(duì)產(chǎn)品的友好度。

2.3 打造核心競(jìng)爭(zhēng)力

在 UI 設(shè)計(jì)行業(yè)已經(jīng)趨于飽和、并且產(chǎn)品設(shè)計(jì)流程逐漸實(shí)現(xiàn)體系化和模塊化的今天，設(shè)計(jì)師如果只會(huì)利用組件重復(fù)性地“拼湊”頁(yè)面而無更多的價(jià)值產(chǎn)出，被替代的可能性將會(huì)增大。在日常工作之余，若要為公司和團(tuán)隊(duì)輸出更多的價(jià)值，動(dòng)效設(shè)計(jì)能力便是交互、視覺設(shè)計(jì)師的必備技能與核心競(jìng)爭(zhēng)力之一。

3 動(dòng)效的交互應(yīng)用方式

3.1 符合主題的視覺元素

動(dòng)效設(shè)計(jì)需要使用恰當(dāng)?shù)囊曈X元素，一方面讓元素能與APP功能主旨相吻合，另一方面也使之契合該界面的時(shí)態(tài)。動(dòng)效的相對(duì)面積和動(dòng)效持續(xù)時(shí)間的選擇必須根據(jù)預(yù)期功能、預(yù)期用戶體驗(yàn)的影響的具體情況決定。這類動(dòng)效最重要的是讓用戶感到毫無負(fù)擔(dān)又如沐春風(fēng)，也就是不要奪人眼球，悄無聲息的順應(yīng)用戶行為，引導(dǎo)用戶需求。在設(shè)計(jì)中要考慮系統(tǒng)兼容和資源占用、動(dòng)態(tài)速度的節(jié)奏、仿生性or現(xiàn)實(shí)重現(xiàn)問題。例如加載過程時(shí)間長(zhǎng)時(shí)，可以設(shè)計(jì)有趣的加載動(dòng)畫，緩解用戶等待的焦慮?！梆I了嗎”APP加載界面使用了快速旋轉(zhuǎn)的時(shí)鐘轉(zhuǎn)盤，匹配該應(yīng)用為外賣功能主旨的同時(shí)，該動(dòng)效用于短時(shí)加載的間隙，讓用戶明確當(dāng)前狀況。

3.2 自然、合理的運(yùn)動(dòng)形式

一個(gè)優(yōu)秀的動(dòng)效必須要自然、符合物理世界的事物運(yùn)動(dòng)規(guī)律。這是因?yàn)槲锢硎澜缋锏奈矬w是擁有質(zhì)量的，給它們作用力，它們就會(huì)移動(dòng)。由于阻力的存在，幾乎所有的物理運(yùn)動(dòng)都有著加速度運(yùn)動(dòng)，即人們?nèi)庋鬯姷降木徣刖彸?。如果虛擬世界里的動(dòng)畫突然開始、停止或突兀地轉(zhuǎn)變方向，會(huì)讓用戶產(chǎn)生不適的感覺，所以在進(jìn)行動(dòng)效設(shè)計(jì)運(yùn)動(dòng)形式要蘊(yùn)含操作邏輯和動(dòng)作序列，而不是一味地追求某 一動(dòng)效圖像運(yùn)動(dòng)的與眾不同。在信息層級(jí)方面，由于在物理世界中， 物體存在近大遠(yuǎn)小原則，所以在界面元素也可以通過動(dòng)效來呈現(xiàn)整個(gè)系統(tǒng)的信息的前后位置，展現(xiàn)信息的空間層次感。在轉(zhuǎn)場(chǎng)過渡的時(shí)候，由于人腦灰質(zhì)會(huì)對(duì)動(dòng)態(tài)事物（如：移動(dòng)、形變、色變等）保持敏感。在界面中加入一些平滑舒適的過渡效果，能幫助用戶理解界面前后變化的邏輯關(guān)系。

3.3 及時(shí)、有效的操作反饋

無論是點(diǎn)擊、長(zhǎng)按、拖拽、滑動(dòng)等交互行為，都應(yīng)該得到系統(tǒng)的即時(shí)反饋，將其以視覺或動(dòng)效的方式展現(xiàn)，幫助用戶了解當(dāng)前系統(tǒng)對(duì)交互過程的響應(yīng)情況，為用戶帶來安全感。譬如在一些應(yīng)用中，如果密碼輸入錯(cuò)誤之后，界面會(huì)震動(dòng)并且彈出紅色的提示性文字，這就造成一種緊張感，促使用戶在輸入密碼時(shí)謹(jǐn)慎、認(rèn)真。等待性特征意味著該交互不具備指令效應(yīng)，但可以形成操作效果，即充分使用動(dòng)效將看似被動(dòng)的局面轉(zhuǎn)化為讓人覺得這一時(shí)間段是有價(jià)值的。

3.4 情感化設(shè)計(jì)

好的設(shè)計(jì)往往是以小見大的，在細(xì)節(jié)處彰顯情懷。好的體驗(yàn)也是由每一個(gè)細(xì)微的感受構(gòu)成的。功能吸引用戶使用你的產(chǎn)品，細(xì)節(jié)設(shè)計(jì)塑造產(chǎn)品的差異化，將你的用戶留下。通過場(chǎng)景的營(yíng)造，動(dòng)效讓用戶的操作變得輕松自然，動(dòng)效還可與產(chǎn)品定位或公司文化相一致，喚起用戶情感潛在的反應(yīng)，諸如回憶、聯(lián)想、感悟等。例如“網(wǎng)易云音樂”的音樂播放界面動(dòng)效，界面視覺元素唱片模仿上世紀(jì)七八十年代的唱片機(jī)，金屬質(zhì)感的唱臂被形象地展示出來，增強(qiáng)場(chǎng)景的真實(shí)感，強(qiáng)化沉浸體驗(yàn)，十分有情懷。從而更易引發(fā)用戶的情感共鳴，增加用戶對(duì)產(chǎn)品的友好度。

4 結(jié)語(yǔ)

在互聯(lián)網(wǎng)時(shí)代，UI和網(wǎng)頁(yè)中使用動(dòng)效已經(jīng)成為大趨勢(shì)。這往往導(dǎo)致越來越多的應(yīng)用為了動(dòng)效而設(shè)計(jì)，而背離了動(dòng)效設(shè)計(jì)的初衷。設(shè)計(jì)師 Pasquale D’Silva 在2013年的 Web Direction South 上曾這樣說過：好的動(dòng)效是隱形的。這就要求我們?cè)趧?dòng)效的使用的過程中，就需要更加小心謹(jǐn)慎，確保設(shè)計(jì)目標(biāo)不會(huì)被其干擾。恰到好處的拿捏產(chǎn)品中需要設(shè)計(jì)動(dòng)效的位置、方式，不僅要掌握傳統(tǒng)的動(dòng)畫理論，更需要對(duì)產(chǎn)品的目標(biāo)，功能要求有著深入理解以及理性的對(duì)控件及界面從用戶的角度進(jìn)行劃分。