1?容器本身的動態(tài)效果使用材質中的標準緩動（此緩動動畫加速，加速度快，然后速率逐漸減慢）。在此示例中，容器的大小和形狀發(fā)生了變化，從圓形按鈕變?yōu)闈M屏幕的矩形。

2? UI元素在容器內縮放，并在處理過程中根據(jù)寬度自適應調整。容器中的元件固定在容器的頂部，隨著頂部延伸而自然延伸，并且所有元件都被容器覆蓋。這種設計使元素和容器之間的關系更加清晰。

3?在動畫改變的前一階段，變化的速度逐漸增加。以最快的容器更改速率，容器中包含的UI元素淡入，并且變化率開始減慢。當整個動作足夠快時，整個變化過程將是無縫且自然的。

此動態(tài)設計規(guī)則非常清晰，如果將其應用于整個界面的不同控件，則可以建立一致的動態(tài)樣式。而且，這種動態(tài)在開始和結束之間具有非常明確的邏輯關系。整體變化依賴于容器鏈接。為了演示此模型的靈活性，我們將其應用于五個不同的控件：

許多這些容器僅使用Material Design中的標準緩動動畫來呈現(xiàn)從屏幕外部滑動的效果。它滑動的方向取決于該容器與相關組件之間的位置關系。例如，如果單擊左上角的導航菜單按鈕，則會從屏幕左側輸入菜單擴展的滑動效果。

如果容器從屏幕邊緣進入，它將逐漸淡入并放大。但是，動畫渲染的元素大小不是從0％開始，而是從95％開始。這與大化macOS窗口大小的神奇效果完全不同。這是為了防止用戶過多地關注動畫。此縮放動畫使用材質設計的減速緩動效果，這意味著運動的速度在開始時達到峰值，然后減慢。在退出時，容器淡出，幾乎沒有縮放。退出動畫將比輸入動畫更加微妙，因此用戶將比將要消失的信息更多地關注新內容。

沒有容器的過渡效果

在沒有容器負載的情況下構建了許多動畫效果。例如，單擊APP界面底部的導航按鈕，將用戶完全帶到新界面。在許多情況下，此活動將遵循以下兩個步驟：1?前一個組件或元素開始淡出，新組件或元素開始淡入。

2?當前一部分消失時，后一個組件將使用Material Design中的減速緩動效果進行微妙擴展。同樣，明顯的縮放應該只應用于新輸入的部分，而不是缺少的部分。

注意：為了讓您更容易看到，動畫顯示速度變慢，實際上速度會快得多。

如果開始和結束具有明確的空間關系和邏輯順序，則可以使用類似的?共享效果來增強設計一致性。例如，在以下兩種情況下，當在左側執(zhí)行導航操作時，當最終淡入時，所產生的運動將在垂直方向上具有微妙的運動。在右側的情況下，在新用戶中進入過程中，所有操作開關都有一個水平緩和。所有這些只是使用Material Design中的標準緩動，這足以創(chuàng)造這種一致性。

最佳實踐

把事情簡單化

考慮到運動的高頻率使用，它與設計的可用性密切相關，導航過渡的功能比風格更受歡迎。當然，這并不是說它不應該是程式化的，只是它足以確保品牌的整體風格是一致的。引人注目的效果通常更適合小圖標? LOGO?加載器和空狀態(tài)等元素或接口。在以下示例中，動態(tài)設計相對簡單。這些設計可能不會在Dribbble上得到很多贊譽，但它們是更具動態(tài)性的設計，可以適應各種應用。

選擇合適的長度和節(jié)奏

例如，導航開關的運動轉換的轉換應該優(yōu)先于其功能，要整潔，但不能太快。太快會讓用戶感到困惑?？梢曰谟脩粼诮缑嫔贤Ａ舳嚅L時間來估計動態(tài)效果的持續(xù)時間。根據(jù)導航過程的持續(xù)時間，用戶導航頁面的持續(xù)時間為300毫秒。這是一段值得參考和使用的時間。相反，在較小的UI控件中，效果的持續(xù)時間較短，通常100毫秒就足夠了。如果您覺得運動設計得太快或太慢，請在25毫秒內調整速度或減速度，直到達到您期望的視覺和體驗。

緩和本身描述了動態(tài)加速和減速的速率特性。材料設計中的標準緩和可以直接采用大多數(shù)動力學效應。這是一種不對稱的緩和類型。該功能是開始加速更快，然后更慢地減速，這使用戶更容易注意到整個變化的結果。這種緩和使元素具有更自然的身體感覺。因為現(xiàn)實世界中的物體通常不會以恒定速度移動，所以它們不會立即開始和結束，并且緩和不會使過渡和移動看起來很僵硬。

本文中描述的設計模式和最佳實踐旨在創(chuàng)建適用于大多數(shù)應用程序和網頁的真正實用的?微妙效果。當然，有些品牌可能需要更強烈的表達方式。

完成基本過渡動畫設計后，您就可以開始考慮更詳細，更個性化的設計和挑戰(zhàn)。此時，它是不能滿足這些簡單效果的地方。這更有趣，可變的效果是它此時應該發(fā)光。

分享標題：動態(tài)設計并不難！本文簡單帶您入門
文章鏈接：http://jinyejixie.com/news36/325136.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供營銷型網站建設、網站策劃、網頁設計公司、面包屑導航、網站排名、品牌網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)