越來越多的設(shè)計(jì)師意識(shí)到動(dòng)效設(shè)計(jì)在用戶體驗(yàn)中的重要性。動(dòng)效不再僅僅是讓使用我們產(chǎn)品的人感到愉快的一種方式，而是一種讓體驗(yàn)變得輕松而有趣的功能性工具。我們大多數(shù)人都聽說過古老的（并且仍然如此）說法：“優(yōu)秀的設(shè)計(jì)就是講故事”。那么運(yùn)動(dòng)可以幫助我們以更少的時(shí)間和更清晰的方式來講述這個(gè)故事。
用戶界面中的動(dòng)效使我們能夠：
1. 直接焦點(diǎn);
2. 建立對(duì)象之間的層次和空間關(guān)系;
3. 建立品牌個(gè)性;
用戶界面中的動(dòng)效仍然是一個(gè)非常新的領(lǐng)域。幾乎沒有任何資源可以傳授頁面轉(zhuǎn)換的最佳實(shí)踐或顯示加載屏幕的常用模式幾乎沒有資源。我們可以通過研究傳統(tǒng)動(dòng)畫原理并學(xué)習(xí)如何將其應(yīng)用于抽象形狀和圖案（如我們?cè)跀?shù)字界面中看到的圖案）來開發(fā)可用的動(dòng)畫庫。
“Motion不再僅僅是讓使用我們產(chǎn)品的人感到滿意的方式，而是一種讓體驗(yàn)變得輕松而有趣的功能性工具?！?/b>
動(dòng)畫技術(shù)最常被引用的資源之一是迪士尼的動(dòng)畫原則，由Frank Thomas和Ollie Johnston在20世紀(jì)80年代引入。這些原則的目的是為了創(chuàng)造角色動(dòng)畫中自然運(yùn)動(dòng)的幻覺。盡管運(yùn)動(dòng)設(shè)計(jì)人員很好地理解了這些原理，但通過用戶界面的視角來看待它們，可以讓我們?cè)谝郧皼]有的原則上添加一個(gè)方面：功能。使用它們作為指導(dǎo)，我們可以提供反饋并提供清晰的信息，以便與我們的用戶進(jìn)行更有效的溝通。
相關(guān)：用Pixar的22個(gè)故事講述規(guī)則改進(jìn)用戶體驗(yàn)
通過更深入地了解這些原則，我們可以獲取關(guān)于如何在功能上使用每種方法的寶貴信息，為我們的用戶創(chuàng)造更好的體驗(yàn)：
立面體
立面體是指將形狀看作是立體物體，因此受物理學(xué)的自然規(guī)律支配。使用實(shí)體繪圖的概念對(duì)于開發(fā)面板或信息之間的空間關(guān)系至關(guān)重要。所有物體都保持一定的重量和體積，并受到重力，摩擦和慣性等因素的影響，所以任何移動(dòng)的結(jié)果都應(yīng)該反映出這一點(diǎn)。當(dāng)物體遵守自然法則時(shí)，它們屬于哪里，它們往往對(duì)用戶來說更直觀，而普通感覺更好。
隨著面板的交互，陰影，圖層和速度根據(jù)物理定律而變化。
弧
物體移動(dòng)的方向告訴物體的類型。通常只有機(jī)械物體以完美的直線移動(dòng)，而具有更多有機(jī)質(zhì)量的物體則以弧形移動(dòng)。無論您希望您的產(chǎn)品以技術(shù)性，愚蠢性還是優(yōu)雅的姿態(tài)被接受，改變弧形動(dòng)作都可以使其對(duì)品牌的特征產(chǎn)生真實(shí)感。
直線運(yùn)動(dòng)使這個(gè)應(yīng)用程序保持干凈和專業(yè)，同時(shí)增加柔軟的松弛使運(yùn)動(dòng)感覺更自然。
分段
分段就是為即將發(fā)生的事情設(shè)定場(chǎng)景。良好的運(yùn)動(dòng)設(shè)計(jì)引導(dǎo)人們注意重要的內(nèi)容。當(dāng)他們通過屏幕過渡時(shí)，分段動(dòng)畫將重點(diǎn)放在下一個(gè)應(yīng)該解決的問題上，或者引起人們對(duì)可能發(fā)起的潛在互動(dòng)的關(guān)注。這有助于建立層次結(jié)構(gòu)并闡明用戶的操作流程。
只在用戶開始輸入評(píng)論后出現(xiàn)的提交按鈕才會(huì)為他們接下來應(yīng)采取的操作設(shè)定舞臺(tái)。
夸張
夸大其實(shí)就是：讓事情變得更加戲劇化，以喚起對(duì)某事的注意或說出一個(gè)觀點(diǎn)。這可以表現(xiàn)在搖動(dòng)的通知鈴中，或者響應(yīng)于交互錯(cuò)誤?？鋸堃龑?dǎo)焦點(diǎn)，并明確指出用戶應(yīng)該注意。
夸大可以強(qiáng)調(diào)確認(rèn)和錯(cuò)誤狀態(tài)。
次要?jiǎng)赢?/b>
當(dāng)涉及到轉(zhuǎn)換時(shí)，如果它太快或突然移動(dòng)，很容易讓用戶感到困惑; 輔助動(dòng)畫確保不會(huì)發(fā)生。它重申了主要行動(dòng)，以便用戶可以確定發(fā)生了什么。這是一種輕微的，有時(shí)不肯定。
屏幕向上移動(dòng)，我的收藏類別的主要運(yùn)動(dòng)被選中并移動(dòng)到頂部。
吸引
如果你的動(dòng)畫讓用戶放大了他們的眼睛，轉(zhuǎn)動(dòng)他們嘴唇的角落，或者發(fā)出一聲輕笑，你已經(jīng)做出了吸引人的互動(dòng)。這給交互帶來了更難忘的體驗(yàn)，并為品牌塑造品格。吸引力將產(chǎn)品提示到一個(gè)新的水平，它不僅解決了問題，而且還解決了情緒問題，讓人們回來使用你的產(chǎn)品，而不是另一種能夠幫助他們實(shí)現(xiàn)相同目標(biāo)的產(chǎn)品。
吸引力使互動(dòng)更有趣
了解這些原則會(huì)讓你事半功倍
學(xué)習(xí)這些原則會(huì)讓你在UI動(dòng)畫的門戶中占據(jù)一席之地，但有時(shí)甚至當(dāng)你遵循所有的規(guī)則時(shí)，你的動(dòng)畫仍然顯得不可靠。作為動(dòng)作設(shè)計(jì)師學(xué)習(xí)最重要的經(jīng)驗(yàn)教訓(xùn)之一是開發(fā)品味的重要性 - 即在你的大腦中能夠告訴你何時(shí)感覺正確。密切關(guān)注事物如何在現(xiàn)實(shí)世界中移動(dòng)可以顯著改善您對(duì)運(yùn)動(dòng)的注意力。當(dāng)潮汐流入時(shí)它看起來像什么？你周圍的物體如何對(duì)自己的運(yùn)動(dòng)做出反應(yīng)？開始接受日常生活中的動(dòng)作，它會(huì)以令人驚訝的方式轉(zhuǎn)化為您的數(shù)字作品。
? ?“每一個(gè)動(dòng)作都應(yīng)該是有意的，并以某種方式使用戶體驗(yàn)受益。”
結(jié)論
這些動(dòng)畫原理是永久的，因?yàn)橛谐浞值睦碛?- 在設(shè)計(jì)用戶界面時(shí)可以牢記它們可以極大地提高產(chǎn)品的功能。如果使用得當(dāng)，動(dòng)畫甚至可以對(duì)整個(gè)產(chǎn)品和品牌的成功產(chǎn)生積極影響。在為產(chǎn)品設(shè)計(jì)動(dòng)畫時(shí)，請(qǐng)始終記住動(dòng)作的功能 - 每個(gè)動(dòng)作都應(yīng)該是有意的，并以某種方式為用戶體驗(yàn)帶來好處。利用物理學(xué)的自然規(guī)律來指導(dǎo)物體如何相互移動(dòng)和互動(dòng)。
最后，保持樂趣！有意義的設(shè)計(jì)不應(yīng)該是無聊的。 設(shè)計(jì)一個(gè)愉快的體驗(yàn)，你的用戶會(huì)不斷地回來。
