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

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

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

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

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

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

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

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

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

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

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

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

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

02 連接卡片的共享元素

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

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

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

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

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

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

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

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

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

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

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

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

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

05 使菜單顯示在上下文中

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

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

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

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

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

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

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

07 注意重要的事情

分享

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

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