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

李月怡

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

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

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

2 動效的作用

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

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

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

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

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

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

2.3 打造核心競爭力

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

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

3.1 符合主題的視覺元素

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

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

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

3.3 及時、有效的操作反饋

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

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

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

4 結(jié)語

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