中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本文是關(guān)于在ux設(shè)計中，如何正確使用動畫設(shè)計，一起來看看~

如今，界面動畫很難給人留下深刻印象甚至驚喜。它顯示了屏幕之間的交互，解釋了如何使用應(yīng)用程序或只是引導(dǎo)用戶的注意力。在瀏覽有關(guān)動畫的文章時，我發(fā)現(xiàn)幾乎所有這些都只描述了特定的用例或關(guān)于動畫的一般事實，但我沒有遇到任何關(guān)于界面動畫的所有規(guī)則都會被清楚地和實際地描述的文章。

好吧，在本文中我不會寫任何新內(nèi)容，我只想在一個地方收集所有主要原則和規(guī)則，以便其他想要開始動畫界面的設(shè)計師不必搜索其他額外得信息。

動畫的持續(xù)時間和速度

當(dāng)元素改變其狀態(tài)或位置時，動畫的持續(xù)時間應(yīng)該足夠慢以使用戶能夠注意到變化，但同時又足夠快以至于不會導(dǎo)致等待。

在動畫中使用適當(dāng)?shù)某掷m(xù)時間。不要太快，也不要讓用戶有足夠的時間打呵欠

大量研究已經(jīng)發(fā)現(xiàn)界面動畫的最佳速度在200到500毫秒之間。這些數(shù)字是基于人腦的特殊感知。任何短于100毫秒的動畫都是瞬時的，根本不會被識別。而超過1秒的動畫會傳達(dá)延遲感，因此對用戶來說是無聊的。

您應(yīng)該在界面中更好地?fù)碛袆赢嫷某掷m(xù)時間

在移動設(shè)備上，“Material Design指南中”還建議將動畫的持續(xù)時間限制在200-300毫秒。至于平板電腦，持續(xù)時間應(yīng)該延長30％ – 大約400-450毫秒。原因很簡單：屏幕尺寸較大，因此物體在改變位置時會克服較長的路徑。在可穿戴設(shè)備上，持續(xù)時間應(yīng)相應(yīng)縮短30％ – 約150-200毫秒，因為在較小的屏幕上，行程距離較短。

移動設(shè)備的大小會影響動畫的持續(xù)時間

Web動畫以另一種方式處理。由于我們已經(jīng)習(xí)慣了瀏覽器中幾乎是即時打開web頁面，所以我們希望能夠在不同的狀態(tài)之間快速切換。因此，web轉(zhuǎn)換的持續(xù)時間應(yīng)該比移動設(shè)備短2倍——在150-200毫秒之間。在其他情況下，用戶不可避免地會認(rèn)為電腦死機(jī)了，或者網(wǎng)絡(luò)連接有問題。

但是，如果你在你的網(wǎng)站上創(chuàng)建一個裝飾性的動畫或者試圖吸引用戶對某些元素的注意，忘記這些規(guī)則。在這些情況下，動畫可以更長。

大屏幕電腦=慢動畫？沒門！

您需要記住，無論平臺如何，動畫的持續(xù)時間不僅取決于行進(jìn)的距離，還取決于物體的大小，較小的元素或具有較小變化的動畫應(yīng)該移動得更快。因此，具有大而復(fù)雜元素的動畫在持續(xù)時間更長時看起來更好。

在相同大小的移動物體中，第一個停止的物體是通過最短距離的物體。與大型物體相比，小物體移動得更慢，因為它們會產(chǎn)生更大的偏移。

動畫的持續(xù)時間取決于物體的大小和移動的距離

當(dāng)物體碰撞時，碰撞能量必須根據(jù)物理定律在它們之間均勻分布。因此，最好排除反彈效果，僅在特殊情況下使用它才有意義。

避免使用彈跳效果，因為它會分散注意力

對象的移動應(yīng)該清晰和銳利，所以不要使用運(yùn)動模糊（是的，After Effects用戶，這次不使用）。即使在現(xiàn)代移動設(shè)備上也很難再現(xiàn)這種效果，而且它根本沒有在界面動畫中使用到。

不要在動畫中使用模糊效果

列表項（新聞卡，電子郵件列表等）在其外觀之間應(yīng)該有非常短的延遲，每次出現(xiàn)的新元素應(yīng)該持續(xù)20到25毫秒，元素的出現(xiàn)較慢可能會使用戶煩惱。

列表項的動畫應(yīng)持續(xù)20-25毫秒

緩動（easing）

放松有助于使物體的運(yùn)動更自然，這是動畫的基本原則之一，在《生命的幻覺:迪斯尼動畫》一書中有詳細(xì)的描述。這本書是由兩位迪斯尼動畫大師——奧利·約翰斯頓和弗蘭克·托馬斯所著。

為了使動畫看起來不像機(jī)械的和人工的，物體應(yīng)該以一定的加速度或減速運(yùn)動——就像物理世界中的所有活物體一樣。

與線性動畫相比，具有緩動的動畫看起來更自然

1. 直線運(yùn)動

不受任何物理力影響的物體線性移動，換句話說，速度恒定。正因為這個事實，它們看起來非常不自然，對人眼來說是人為的。

動畫的所有應(yīng)用程序都應(yīng)使用動畫曲線，我將嘗試解釋如何閱讀它們以及它們的含義，曲線顯示了對象的位置(y axis)在相同的時間間隔內(nèi)如何變化（x axis）。在當(dāng)前情況下，運(yùn)動是線性的，因此物體同一時間斷行進(jìn)的距離相同。

線性運(yùn)動的曲線

例如：線性運(yùn)動只能在對象改變其顏色或透明度時使用。一般來說，當(dāng)對象不改變其位置時，我們可以將它用于狀態(tài)。

2. 緩入或加速曲線

我們可以在曲線上看到，在開始時，物體的位置變化緩慢，速度逐漸增加，這意味著物體以一定的加速度移動。

加速曲線

當(dāng)物體以全速飛出屏幕時，應(yīng)使用此曲線，這些可以是系統(tǒng)通知或只是界面的卡。但請記住，只有當(dāng)對象永遠(yuǎn)離開屏幕并且我們無法回憶或返回時，才應(yīng)使用此類曲線。

將卡扔出屏幕的加速度曲線

動畫曲線有助于表達(dá)正確的心情，在下面的示例中，我們可以看到移動的持續(xù)時間和所有對象的距離是相同的，但即使曲線中的微小變化也可以影響動畫的情緒。

當(dāng)然，通過更改曲線，您可以將對象移動到與現(xiàn)實世界類似的位置。

相同的持續(xù)時間和距離，但不同的心情

3. 緩和或減速曲線

它與緩入曲線相反，因此物體快速覆蓋長距離然后慢慢降低速度直到它最終停止。

減速曲線

當(dāng)元素出現(xiàn)在屏幕上時，應(yīng)使用這種類型的曲線 – 它以全速飛向屏幕，逐漸減速直至完全停止，這也可以應(yīng)用于從屏幕外部出現(xiàn)的不同卡或?qū)ο蟆?/p>

減速曲線為一個很好的顯示

4. 緩入或標(biāo)準(zhǔn)曲線

此曲線使對象在開始時獲得速度，然后慢慢將其降回零。這種類型的移動是界面動畫中最常用的，每當(dāng)您懷疑動畫中使用何種類型的動作時，請使用標(biāo)準(zhǔn)曲線。

標(biāo)準(zhǔn)曲線

根據(jù)Material Design指南，最好使用不對稱曲線使運(yùn)動看起來更自然和逼真。曲線的末端必須比其開頭更加強(qiáng)調(diào)，因此加速的持續(xù)時間比減速的持續(xù)時間短。在這種情況下，用戶將更加關(guān)注元素的最終移動，從而關(guān)注其新狀態(tài)。

查看對稱和非對稱標(biāo)準(zhǔn)曲線之間的差異

當(dāng)對象從屏幕的一個部分移動到另一個部分時，使用緩入。在這種情況下，動畫避免了引人注目和戲劇性的效果。

卡片在屏幕上的移動和相應(yīng)的不對稱曲線

當(dāng)元素從屏幕上消失時，應(yīng)使用相同的移動類型，但用戶可以隨時將其返回到之前的位置，它涉及導(dǎo)航抽屜等。

導(dǎo)航抽屜使用標(biāo)準(zhǔn)曲線隱藏在屏幕上

從這些例子中可以看出許多初學(xué)者忽視的基本規(guī)則 – 開始動畫不等于結(jié)束動畫。與導(dǎo)航抽屜的情況一樣，它顯示為減速曲線并隨標(biāo)準(zhǔn)曲線消失。此外，根據(jù)Google Material Design，對象出現(xiàn)的時間應(yīng)該更長，以吸引更多關(guān)注。

側(cè)面菜單的出現(xiàn)和消失相應(yīng)地通過減速和標(biāo)準(zhǔn)曲線來實現(xiàn)

函數(shù)cubic-bezier()用于描述曲線。它被稱為立方體，因為它基于四點。帶坐標(biāo)的第一個點0;0（左下角）和帶坐標(biāo)的最后一個點1;1（右上角）已在圖表上定義。

基于此，我們需要僅描述圖上的兩個點，這兩個點由函數(shù)的四個參數(shù)給出cubic-bezier()：前兩個是坐標(biāo)x和y第一個點，第二個是坐標(biāo)x和y第二個點。

為了簡化曲線工作，我建議使用網(wǎng)站easings.net和cubic-bezier.com。第一個包含最常用曲線的列表，您可以將參數(shù)復(fù)制到原型工具中。第二個源使您可以使用不同的曲線參數(shù)，并立即查看對象的移動方式。

函數(shù)cubic-bezier（）的不同類型的曲線及其參數(shù)

界面動畫中的編排

就像在芭蕾舞編排中一樣，主要思想是在從一個狀態(tài)到另一個狀態(tài)的過渡期間引導(dǎo)用戶注意一個流體方向。

有兩種類型的編排：相互和從屬交互

平等互動相等的交互意味著所有對象的外觀都服從于一個特定的規(guī)則。

在這種情況下，所有卡片的外觀被視為一個引導(dǎo)用戶在一個方向上注意的流程，即從頂部到下部。如果我們不遵守訂單，用戶的注意力就會分散。所有元素的外觀一下子看起來也會很糟糕。

應(yīng)引導(dǎo)用戶注意一個流暢的方向

至于表格視圖，它有點復(fù)雜。在這里，用戶的焦點應(yīng)該是對角線的，因此逐個顯示元素是一個糟糕的主意。逐個顯示每個元素會使動畫過長，并且用戶的注意力將呈鋸齒狀，這是錯誤的。

卡的表格視圖的對角外觀

下屬互動從屬交互意味著我們有一個中心對象吸引所有用戶的注意力，而所有其他元素都從屬于它。這種類型的動畫給出了秩序感，并引起了對主要內(nèi)容的更多關(guān)注。

在其他情況下，用戶很難知道要跟隨哪個對象，因此他的注意力將被分散。因此，如果要設(shè)置多個要設(shè)置動畫的元素，則需要清楚地定義其動作的順序，并盡可能將動畫設(shè)置為盡可能最小的對象。

值得動畫的只有一個中心對象，所有其他對象都受其影響。否則，用戶將不知道要遵循什么對象

根據(jù)Material Design，當(dāng)移動物體不成比例地改變它們的尺寸時，它們應(yīng)該沿著弧線移動而不是沿直線移動，它有助于使運(yùn)動更自然?！安怀杀壤亍笔侵竿ㄟ^增加/減少來改變物體的高度和寬度是不對稱地進(jìn)行的，即具有不同的速度（例如，方形卡變成矩形）。

當(dāng)對象按比例改變其大小時，使用沿線的移動。由于這種運(yùn)動的實施更容易，因此不成比例的弧形運(yùn)動規(guī)則經(jīng)常被忽略?？纯磻?yīng)用程序的真實示例，您將看到線性運(yùn)動的統(tǒng)治。

尺寸的比例變化以直線實現(xiàn)

曲線上的運(yùn)動可以通過兩種方式實現(xiàn)：第一種稱為垂直向外- 對象開始水平移動并以垂直移動結(jié)束；第二個 -水平輸出- 物體開始垂直移動并以水平運(yùn)動結(jié)束。

對象沿曲線移動的路徑必須與滾動界面的主軸重合，例如：在下一個圖像上，我們可以向上和向下滾動界面，因此卡片以垂直向外的方式展開- 首先向右，然后向下。反向運(yùn)動以相反的方式完成 – 即卡片首先垂直上升并最終水平移動。

展開/折疊卡的方向應(yīng)與界面的軸重合

如果移動物體的路徑彼此相交，則它們不能相互移動，物體應(yīng)通過減慢或加速自身速度為其他物體的運(yùn)動留出足夠的空間。另一個選擇——他們只是推開其他物體。

為什么？因為我們假設(shè)界面中的所有對象都位于一個平面中。

在移動過程中，物體不應(yīng)相互穿過，而是留出空間來移動另一個物體

在另一種情況下，移動物體可以高于其他物體。但同樣沒有通過其他物體消失或移動。

為什么？由于我們認(rèn)為界面的元素符合物理定律，現(xiàn)實世界中沒有固體物體能夠做到這一點。

結(jié)論

因此，如果我們總結(jié)所有上述規(guī)則和原則，界面中的動畫應(yīng)該反映我們從物理世界中知道的運(yùn)動 – 摩擦，加速等。模仿現(xiàn)實世界中物體的行為我們可以創(chuàng)建一個序列，允許用戶了解接口的內(nèi)容。

如果動畫構(gòu)建正確，那么它是不顯眼的，不會分散用戶的目標(biāo)。如果是這樣，你要么需要軟化它，要么根本不需要刪除。這意味著動畫不應(yīng)該減慢用戶的速度或阻止執(zhí)行任務(wù)。但不要忘記，動畫更像是一門藝術(shù)，而不是科學(xué)，所以最好是對用戶進(jìn)行實驗和測試。

作者：Chris，公眾號（ID：LDesign1）

本文由@Chris 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash, 基于CC0協(xié)議