圖片來源：ZURB大學(xué)

功能性動畫是一種微妙的動畫溃论，具有清晰，合乎邏輯的目的案铺。它可以減少認(rèn)知負(fù)擔(dān)蔬芥，防止變化失明，并在空間關(guān)系中建立更好的回憶控汉。但還有一件事笔诵。動畫將用戶界面帶入生活。

運動可以通過將表面相乘和分割姑子，并改變它們的形狀和大小來使表面感覺活躍乎婿。您應(yīng)該使用功能動畫在導(dǎo)航上下文之間平滑地傳輸用戶，解釋屏幕上元素排列的變化街佑，以及加強元素層次結(jié)構(gòu)谢翎。

成功的運動設(shè)計具有以下六個特征：

1.回應(yīng)

視覺反饋在UI設(shè)計中非常重要。它的工作原理是因為它吸引了用戶對確認(rèn)的自然渴望沐旨。在現(xiàn)實生活中森逮，按鈕，控件和對象會響應(yīng)我們的交互磁携，這就是人們期望事物發(fā)揮作用的方式褒侧。

圖片來源：智能設(shè)計

用戶界面應(yīng)該快速響應(yīng)用戶輸入，精確地在用戶觸發(fā)它的位置谊迄，并顯示新表面與創(chuàng)建它們的元素或動作之間的連接闷供。點擊應(yīng)用程序感覺很棒，總覺得你知道發(fā)生了什么统诺。

圖片來源：材料設(shè)計

2.聯(lián)想

將新創(chuàng)建的曲面與創(chuàng)建它們的元素或動作相關(guān)聯(lián)歪脏。關(guān)聯(lián)連接背后的邏輯是幫助用戶理解視圖布局中剛剛發(fā)生的更改以及觸發(fā)更改的內(nèi)容。

您可以在下面看到兩個菜單轉(zhuǎn)換示例粮呢。在第一個示例中婿失，菜單遠(yuǎn)離觸發(fā)它的觸摸點，這打破了它與輸入方法的關(guān)系啄寡。第二個示例就很好的解決了這個問題豪硅。

圖片來源：材料設(shè)計

另一個例子是一個動作按鈕，其功能在某些條件下發(fā)生變化?“播放”和“停止”按鈕可能是可切換按鈕的最常見示例这难。將播放按鈕轉(zhuǎn)換為暫停按鈕表示兩個動作已鏈接，按下一個動作使另一個動作可見葡秒。您應(yīng)該為狀態(tài)之間的過渡設(shè)置動畫姻乓，使其看起來平滑嵌溢，而不是不連續(xù)。

平滑過渡到回放控件既向用戶通知按鈕的功能蹋岩，同時在交互中添加奇跡元素赖草。圖片來源：材料設(shè)計

3.自然

避免出人意料的轉(zhuǎn)變。每一個運動都應(yīng)該受到現(xiàn)實世界中力量的啟發(fā)剪个。在現(xiàn)實世界中秧骑，物體快速加速或減速的能力受到重量和表面摩擦的影響。以類似的方式扣囊，在良好的用戶界面設(shè)計中不會立即發(fā)生啟動和停止乎折。

下面您可以看到一個很好的示例，用戶選擇列表中的項目以放大其詳細(xì)視圖侵歇。在擴(kuò)展期間骂澄，當(dāng)小卡片擴(kuò)展為更大的卡片時，小卡片朝向其目的地移動惕虑。

在屏幕上向上移動的元素應(yīng)該類似地描繪在通過向上移動的加速期間的努力坟冲。圖片來源：材料設(shè)計

4.目的

在正確的時間將焦點引導(dǎo)到正確的位置。就其本質(zhì)而言溃蔫，Motion 在用戶界面中具有最高的突出性健提。文本段落和靜態(tài)圖像都不能與運動競爭。良好的過渡有助于引導(dǎo)用戶進(jìn)行下一步的互動伟叛。

第一次用戶無法真正預(yù)測即將發(fā)生的交互私痹，但正確的動畫可以幫助用戶保持導(dǎo)向，而不會感覺內(nèi)容突然發(fā)生變化痪伦。

Mac OS在最小化窗口時使用功能動畫侄榴。此動畫將第一個狀態(tài)與第二個狀態(tài)連接起來。

Mac OS最小化Windows動畫

另一個很好的例子是父對子過渡网沾，其中用戶選擇列表項或卡元素中的項并放大其詳細(xì)視圖癞蚕。此交互允許用戶維護(hù)上下文。

父母對子女過渡的動畫辉哥。圖片來源：材料設(shè)計

5.迅速

當(dāng)元素在位置或狀態(tài)之間移動時桦山，移動應(yīng)該足夠快以至于不會導(dǎo)致等待，但是足夠慢以至于可以理解轉(zhuǎn)換醋旦。

不要慢慢制作動畫恒水，因為它會造成不必要的延遲，并且會延長持續(xù)時間饲齐。

圖片來源：材料設(shè)計

圖片來源：材料設(shè)計

快速動畫钉凌，以便用戶不必等待動畫完成。

圖片來源：材料設(shè)計

交錯和減慢許多元素的運動可以延長持續(xù)時間捂人。但保持過渡時間短御雕，因為用戶會經(jīng)呈秆兀看到它們。將動畫持續(xù)時間保持在300毫秒或以下酸纲。

圖片來源：材料設(shè)計

6.清楚

過渡應(yīng)該避免一次做太多捣鲸，因為當(dāng)多個項目需要在不同的方向或交叉路徑上移動時，它們會變得混亂闽坡。

圖片來源：材料設(shè)計

過渡應(yīng)該清晰栽惶，簡單，連貫疾嗅。請記住外厂，關(guān)于動畫的更少。所以我們應(yīng)該只關(guān)注動畫為用戶做的實際事情宪迟。

圖片來源：材料設(shè)計

結(jié)論

最重要的是酣衷，動作不是隨機的。每個動作背后都有目的次泽。運動引導(dǎo)它穿仪，并專注于重要的事情，這樣你就不會丟失意荤。無論您的應(yīng)用程序是有趣和有趣還是認(rèn)真和直接啊片，使用運動原理可以幫助您提供清晰，快速的凝聚力體驗玖像。

小心設(shè)計紫谷。關(guān)注每一個細(xì)節(jié)是您成功的關(guān)鍵，使人機交互易于使用捐寥。

三米工作室“TF三缺一與他們的經(jīng)紀(jì)人”小組的每周優(yōu)質(zhì)設(shè)計文章漢化計劃08篇--《The dangers of delightful design（愉快設(shè)計的危險性）》笤昨。 Medium英文原文鏈接https://uxplanet.org/functional-animation-in-ux-design-what-makes-a-good-transition-d6e7b4344e5e

作者：Artsolder

鏈接：https://uxplanet.org/functional-animation-in-ux-design-what-makes-a-good-transition-d6e7b4344e5e

來源：簡書

簡書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處握恳。