激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

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

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

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

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

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

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

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

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

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

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

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

02 連接卡片的共享元素

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

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

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

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

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

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

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

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

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

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

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

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

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

05 使菜單顯示在上下文中

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

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

06 使用按鈕顯示不同的狀態(tài)

左側(cè)的按鈕顯示指示狀態(tài)的文本。右側(cè)的按鈕使用容器顯示不同的事件。

  • 良好的交互顯示按鈕旁邊的事件。
  • 優(yōu)秀的交互使用按鈕本身來顯示不同的狀態(tài)。

嘗試使用按鈕的容器來提供狀態(tài)的可視反饋，例如：你可以使用微調(diào)器或加載動(dòng)畫替換CTA;或者你可以在顯示進(jìn)度的背景中添加動(dòng)畫。

解決方案取決于你，我們的想法是使用用戶已經(jīng)與之交互的空間。如果你使用按鈕顏色并復(fù)制以確認(rèn)成功狀態(tài)，則獎(jiǎng)勵(lì)積分。

07 注意重要的事情

分享

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定