一、動效設(shè)計的必要性

1.1 提升用戶體驗

設(shè)計師若只追求靜態(tài)像素的完美呈現(xiàn)，而忽略動態(tài)過程的合理表達，會導(dǎo)致用戶不能在視覺上覺察元素的連續(xù)變化，進而很難對新舊狀態(tài)的更替有清晰的感知。迪士尼動畫大師乃特維克說過一句話：動畫的一切皆在于時間點和空間幅度。

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

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

未添加動效的產(chǎn)品，會帶給人一種死氣沉沉的感覺，所有內(nèi)容平鋪直敘、毫無生機，即使界面設(shè)計的很美觀，也會缺乏一種靈動細膩的氣質(zhì)。

如果把產(chǎn)品比作成美女，那么界面視覺就是美女的顏值，交互動效就是美女的肢體語言。合理的動效能將更立體、更富有關(guān)聯(lián)性的信息傳遞出去，提高產(chǎn)品的「表達能力」，增加親和力和趣味性，也利于品牌的建立。

1.3 創(chuàng)造設(shè)計師優(yōu)勢

降低溝通成本：設(shè)計師通過制作高保真動效 Demo 展示設(shè)計思路和創(chuàng)意，大大提高設(shè)計提案交接率，降低了設(shè)計師與開發(fā)的溝通成本，提高了動效的還原度，體現(xiàn)專業(yè)性。

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

二、動效設(shè)計的類型

界面動效種類紛繁多樣，根據(jù) App 動效的作用，可以大體分為如下6個類型：

2.1 轉(zhuǎn)場過渡

人腦灰質(zhì)會對動態(tài)事物（如：移動、形變、色變等）保持敏感。在界面中加入一些平滑舒適的過渡效果，不僅能讓界面顯得生動，更能幫助用戶理解界面前后變化的邏輯關(guān)系。

2.2 層級展示

現(xiàn)實空間里，物體存在近大遠小原則，運動則會近快遠慢。當界面中的元素存在不同層級時，恰當?shù)膭有Э梢詭椭脩衾砬迩昂笪恢藐P(guān)系，以動效來體現(xiàn)整個系統(tǒng)的空間感。

2.3 空間擴展

在移動端界面設(shè)計中，由于有限的屏幕空間難以承載大量的信息內(nèi)容，可以通過折疊、翻轉(zhuǎn)、縮放等形式拓展附加內(nèi)容的存儲空間，以漸進展示的方式來減輕用戶的認知負擔。

2.4 聚焦關(guān)注

聚焦關(guān)注是通過元素的動作變化，提醒用戶關(guān)注特點的內(nèi)容信息。這種提醒方式不僅可以降低視覺元素的干擾，使界面更清爽簡潔，還能在用戶使用過程中，輕盈自然地吸引用戶注意力。

2.5 內(nèi)容呈現(xiàn)

界面內(nèi)容元素按照一定的秩序規(guī)律逐級呈現(xiàn)，引導(dǎo)用戶視覺焦點走向，幫助用戶更好地感知頁面布局、層級結(jié)構(gòu)和重點內(nèi)容，同時也能讓整個流程更加豐富流暢，增添了界面的活力。

2.6 操作反饋

無論是點擊、長按、拖拽、滑動等交互行為，都應(yīng)該得到系統(tǒng)的即時反饋，將其以視覺或動效的方式展現(xiàn)，幫助用戶了解當前系統(tǒng)對交互過程的響應(yīng)情況，為用戶帶來感。