動(dòng)態(tài)設(shè)計(jì)并不難！本文簡(jiǎn)單帶您入門

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

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

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

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

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

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

沒有容器的過(guò)渡效果

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

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

注意：為了讓您更容易看到，動(dòng)畫顯示速度變慢，實(shí)際上速度會(huì)快得多。

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

最佳實(shí)踐

把事情簡(jiǎn)單化

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

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

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

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

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

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

分享標(biāo)題：動(dòng)態(tài)設(shè)計(jì)并不難！本文簡(jiǎn)單帶您入門
文章鏈接：http://bm7419.com/news36/325136.html

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

廣告

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