當(dāng)前位置：首頁(yè) >UI設(shè)計(jì) >交互動(dòng)效|優(yōu)秀的UI動(dòng)畫(huà)設(shè)計(jì)技巧

交互動(dòng)效|優(yōu)秀的UI動(dòng)畫(huà)設(shè)計(jì)技巧

發(fā)布時(shí)間：2024-01-12 09:45:56 瀏覽量：230次

本文筆者將為大家展示一些UI動(dòng)畫(huà)的案例，期以通過(guò)這些案例，幫助大家在為交互添加動(dòng)畫(huà)時(shí)做出更好的決策。

讓我們看一些UI動(dòng)畫(huà)從好到優(yōu)秀的例子，通過(guò)這里和那里的一些調(diào)整，你可以使用動(dòng)畫(huà)提升你的UI模式。

列出的交互表示狀態(tài)之間的連續(xù)性，表示共享元素之間的關(guān)系，并將用戶的注意力引用到他們應(yīng)注意和采取行動(dòng)的事物上。

為了創(chuàng)建這些動(dòng)畫(huà)，我遵循了Material Motion、IBM的動(dòng)畫(huà)原則和UX in Motion Manifesto中的指導(dǎo)原則。

所有的交互都是使用InVision Studio的早期訪問(wèn)版本完成的。

01 使標(biāo)簽中的內(nèi)容滑動(dòng)

左邊的內(nèi)容淡入淡出。右邊那個(gè)帶標(biāo)簽的幻燈片。

一個(gè)好的動(dòng)畫(huà)將內(nèi)容從一個(gè)狀態(tài)轉(zhuǎn)換為另一個(gè)狀態(tài)。
一個(gè)優(yōu)秀的動(dòng)畫(huà)通過(guò)使內(nèi)容在狀態(tài)之間移動(dòng)來(lái)顯示轉(zhuǎn)換的連續(xù)性。

當(dāng)您設(shè)計(jì)像標(biāo)簽或彈出菜單這樣的交互時(shí)，請(qǐng)嘗試將內(nèi)容的位置相對(duì)于打開(kāi)它的操作。這樣，您不僅可以設(shè)置內(nèi)容的可見(jiàn)性，還可以設(shè)置位置的動(dòng)畫(huà)。哦，當(dāng)你在瀏覽它的時(shí)候，添加一個(gè)輕掃手勢(shì)，將你從一個(gè)內(nèi)容帶到另一個(gè)內(nèi)容。

02 連接卡片的共享元素

左邊的內(nèi)容打開(kāi)了一個(gè)新的屏幕，可以向上滑動(dòng)。右邊的卡片展開(kāi)并填滿屏幕。

一個(gè)好的動(dòng)畫(huà)使用左推或向上滑動(dòng)等過(guò)渡來(lái)在細(xì)節(jié)屏幕上顯示內(nèi)容。
一個(gè)優(yōu)秀的動(dòng)畫(huà)通過(guò)動(dòng)畫(huà)共享內(nèi)容在兩個(gè)狀態(tài)之間建立連接。

在不同狀態(tài)之間制作動(dòng)畫(huà)時(shí)，查看它們之間是否存在任何共享元素并連接它們。使用InVision Studio時(shí)，在創(chuàng)建Motion轉(zhuǎn)換時(shí)會(huì)自動(dòng)連接兩個(gè)鏈接屏幕之間重復(fù)的組件，這使得原型制作動(dòng)畫(huà)變得輕而易舉。

查看Motion Manifesto，了解您可以應(yīng)用的動(dòng)畫(huà)類型。上面的示例使用了Masking、Transformation、Parenting和Easing原則的組合。

03 在您的內(nèi)容中使用級(jí)聯(lián)效果

左側(cè)的卡片通過(guò)滑動(dòng)和淡入顯示。右側(cè)的卡片具有相同的動(dòng)畫(huà)，但每張卡片都有短暫的延遲。

一個(gè)好的動(dòng)畫(huà)會(huì)在材料進(jìn)入屏幕時(shí)改變材質(zhì)的位置和不透明度。
一個(gè)優(yōu)秀的動(dòng)畫(huà)很快就會(huì)錯(cuò)開(kāi)每個(gè)組或元素的外觀。

要完成瀑布效果，請(qǐng)嘗試對(duì)每個(gè)內(nèi)容或每組內(nèi)容應(yīng)用延遲。保持相同的緩和和持續(xù)時(shí)間，因此感覺(jué)一致。

盡管如此，不要對(duì)每個(gè)小元素進(jìn)行級(jí)聯(lián)，使內(nèi)容組具有動(dòng)畫(huà)效果。保持動(dòng)畫(huà)的快速和活潑。谷歌建議開(kāi)始每個(gè)元素不超過(guò)20毫秒。查看Material Motion中的編排原理以查看更多示例。

04 使內(nèi)容將其他元素排除在外

左邊的動(dòng)畫(huà)在其他內(nèi)容之上進(jìn)行動(dòng)畫(huà)。右邊的動(dòng)畫(huà)隨著內(nèi)容的增長(zhǎng)將內(nèi)容推出。

好的動(dòng)畫(huà)移動(dòng)并在上下文中顯示元素。
優(yōu)秀的動(dòng)畫(huà)在變化時(shí)會(huì)顯示影響周圍環(huán)境的元素。

使你內(nèi)容中的元素了解周圍環(huán)境。這意味著使內(nèi)容吸引或排斥其周圍的元素。有關(guān)更多示例，請(qǐng)查看Material Design中的Aware運(yùn)動(dòng)原理。

05 使菜單顯示在上下文中

左邊的菜單從下面飛進(jìn)來(lái)。右邊的菜單從創(chuàng)建它的操作按鈕展開(kāi)。

好的動(dòng)畫(huà)菜單顯示從打開(kāi)它們的按鈕方向出現(xiàn)的內(nèi)容。
優(yōu)秀的動(dòng)畫(huà)從創(chuàng)造它們的動(dòng)作中出現(xiàn)了很棒的動(dòng)畫(huà)菜單，從觸摸點(diǎn)開(kāi)始增長(zhǎng)。