APP動(dòng)效設(shè)計(jì)必備知識(shí)

    如今豐富細(xì)膩的 App 動(dòng)效遍布優(yōu)秀的移動(dòng)應(yīng)用界面中，為用戶提供了良好的動(dòng)態(tài)沉浸式體驗(yàn)，動(dòng)效設(shè)計(jì)在產(chǎn)品研發(fā)過程中也越來越被認(rèn)可和重視。
    通過本文，你將輕松了解到關(guān)于動(dòng)效設(shè)計(jì)的一些必備知識(shí)：
    為什么要設(shè)計(jì)動(dòng)效?它的意義和價(jià)值是什么?
    App 動(dòng)效形式有很多，如何去區(qū)分和歸類?
    優(yōu)秀的動(dòng)效有哪些實(shí)用性的指導(dǎo)原則?
    動(dòng)效軟件紛繁眾多，如何選擇合適的來用?
    一、動(dòng)效設(shè)計(jì)的必要性
    1. 提升用戶體驗(yàn)
    設(shè)計(jì)師若只追求靜態(tài)像素的完美呈現(xiàn)，而忽略動(dòng)態(tài)過程的合理表達(dá)，會(huì)導(dǎo)致用戶不能在視覺上覺察元素的連續(xù)變化，進(jìn)而很難對(duì)新舊狀態(tài)的更替有清晰的感知。
    迪士尼動(dòng)畫大師乃特維克說過一句話：
    動(dòng)畫的一切皆在于時(shí)間點(diǎn)和空間幅度。
    通過「時(shí)間點(diǎn)」和「空間幅度」的設(shè)計(jì)為用戶建立運(yùn)動(dòng)的可信度，即視覺上的真實(shí)感，當(dāng)用戶意識(shí)到這個(gè)動(dòng)作是合理的，才能更加清晰愉悅地使用產(chǎn)品。
    2. 增添產(chǎn)品氣質(zhì)
    未添加動(dòng)效的產(chǎn)品，會(huì)帶給人一種死氣沉沉的感覺，所有內(nèi)容平鋪直敘、毫無生機(jī)，即使界面設(shè)計(jì)的很美觀，也會(huì)缺乏一種靈動(dòng)細(xì)膩的氣質(zhì)。
    如果把產(chǎn)品比作成美女，那么界面視覺就是美女的顏值，交互動(dòng)效就是美女的肢體語言。合理的動(dòng)效能將更立體、更富有關(guān)聯(lián)性的信息傳遞出去，提高產(chǎn)品的“表達(dá)能力”，增加親和力和趣味性，也利于品牌的建立。
    3. 創(chuàng)造設(shè)計(jì)師優(yōu)勢
    (1)降低溝通成本
    設(shè)計(jì)師通過制作高保真動(dòng)效 Demo 展示設(shè)計(jì)思路和創(chuàng)意，大大提高設(shè)計(jì)提案交接率，降低了設(shè)計(jì)師與開發(fā)的溝通成本，提高了動(dòng)效的還原度，體現(xiàn)專業(yè)性。
    (2)打造核心競爭力
    在 UI 設(shè)計(jì)行業(yè)已經(jīng)趨于飽和、并且產(chǎn)品設(shè)計(jì)流程逐漸實(shí)現(xiàn)體系化和模塊化的今天，設(shè)計(jì)師如果只會(huì)利用組件重復(fù)性地“拼湊”頁面而無更多的價(jià)值產(chǎn)出，被替代的可能性將會(huì)增大。
    在日常工作之余，若要為公司和團(tuán)隊(duì)輸出更多的價(jià)值，動(dòng)效設(shè)計(jì)能力便是交互/視覺設(shè)計(jì)師的必備技能與核心競爭力之一。
    二、動(dòng)效設(shè)計(jì)的類型
    界面動(dòng)效種類紛繁多樣，根據(jù) App 動(dòng)效的作用，可以大體分為如下 6 個(gè)類型:
    1. 轉(zhuǎn)場過渡
    人腦灰質(zhì)會(huì)對(duì)動(dòng)態(tài)事物(如：移動(dòng)、形變、色變等)保持敏感，在界面中加入一些平滑舒適的過渡效果，不僅能讓界面顯得生動(dòng)，更能幫助用戶理解界面前后變化的邏輯關(guān)系。
    2. 層級(jí)展示
    現(xiàn)實(shí)空間里，物體存在近大遠(yuǎn)小原則，運(yùn)動(dòng)則會(huì)近快遠(yuǎn)慢。當(dāng)界面中的元素存在不同層級(jí)時(shí)，恰當(dāng)?shù)膭?dòng)效可以幫助用戶理清前后位置關(guān)系，以動(dòng)效來體現(xiàn)整個(gè)系統(tǒng)的空間感。
    3. 空間擴(kuò)展
    在移動(dòng)端界面設(shè)計(jì)中，由于有限的屏幕空間難以承載大量的信息內(nèi)容，可以通過折疊、翻轉(zhuǎn)、縮放等形式拓展附加內(nèi)容的存儲(chǔ)空間，以漸進(jìn)展示的方式來減輕用戶的認(rèn)知負(fù)擔(dān)。
    4. 聚焦關(guān)注
    聚焦關(guān)注是通過元素的動(dòng)作變化，提醒用戶關(guān)注特點(diǎn)的內(nèi)容信息。這種提醒方式不僅可以降低視覺元素的干擾，使界面更清爽簡潔，還能在用戶使用過程中，輕盈自然地吸引用戶注意力。
    5. 內(nèi)容呈現(xiàn)
    界面內(nèi)容元素按照一定的秩序規(guī)律逐級(jí)呈現(xiàn)，引導(dǎo)用戶視覺焦點(diǎn)走向，幫助用戶更好地感知頁面布局、層級(jí)結(jié)構(gòu)和重點(diǎn)內(nèi)容，同時(shí)也能讓整個(gè)流程更加豐富流暢，增添了界面的活力。
    6. 操作反饋
    無論是點(diǎn)擊、長按、拖拽、滑動(dòng)等交互行為，都應(yīng)該得到系統(tǒng)的即時(shí)反饋，將其以視覺或動(dòng)效的方式展現(xiàn)，幫助用戶了解當(dāng)前系統(tǒng)對(duì)交互過程的響應(yīng)情況，為用戶帶來安全感。