動態(tài)設(shè)計并不難！本文簡單帶您入門

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

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

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

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

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

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

沒有容器的過渡效果

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

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

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

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

最佳實踐

把事情簡單化

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

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

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

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

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

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

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

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

廣告

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