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

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

移動(dòng)UI設(shè)計(jì):界面動(dòng)畫，運(yùn)動(dòng)的力量

發(fā)布時(shí)間：2024-03-05 19:38:58 瀏覽量：109次

在古代，人們就知道運(yùn)動(dòng)的巨大力量。文學(xué)、藝術(shù)、民俗、技術(shù)都見證了人們無數(shù)次嘗試將運(yùn)動(dòng)解釋為生命中最明亮的特征之一。


設(shè)計(jì)師在 UX/UI 設(shè)計(jì)的各種項(xiàng)目中工作，深刻意識(shí)到動(dòng)畫在現(xiàn)代高效用戶界面中的作用和巨大潛力。經(jīng)過深思熟慮和測(cè)試的界面動(dòng)畫以及圖標(biāo)，我們分析了它們的作用我們之前的一篇文章, 能夠支持快速簡(jiǎn)便的交互，并具有實(shí)現(xiàn)多種功能的潛力。


所以，今天我們想考慮界面動(dòng)畫的一些方面，它的功能，以及在現(xiàn)代設(shè)計(jì)中的作用。


拉動(dòng)刷新







動(dòng)畫的本質(zhì)


在人類活動(dòng)的不同領(lǐng)域如此流行的“動(dòng)畫”一詞有著古老而浪漫的起源。它起源于拉丁詞 anima，意思是“空氣、靈魂”，在大多數(shù)情況下，它定義了首先通過運(yùn)動(dòng)為物體添加生命和靈魂的過程。


因此，動(dòng)畫是創(chuàng)造運(yùn)動(dòng)幻覺的過程，自遠(yuǎn)古時(shí)代人們?cè)噲D在雕刻或繪畫中表現(xiàn)出運(yùn)動(dòng)幻覺時(shí)就開始了，并通過動(dòng)畫卡通在世界范圍內(nèi)廣受歡迎。它為藝術(shù)家們打開了新的視野，創(chuàng)造了一個(gè)新的圖像工作領(lǐng)域。


如今，動(dòng)畫作為實(shí)現(xiàn)成功交互的最重要工具之一，在界面設(shè)計(jì)中也贏得了特殊的地位。由于人大多是視覺驅(qū)動(dòng)的生物，價(jià)值一千字的畫面背后的力量在動(dòng)畫的幫助下變得更加強(qiáng)大。隨著移動(dòng)設(shè)備的快速增長(zhǎng)，動(dòng)畫變得更加流行和多樣化，使可觸摸界面的流程變得快速而簡(jiǎn)單，尤其是在旅途中。因此，動(dòng)畫是使產(chǎn)品簡(jiǎn)單、清晰、明亮和以用戶為中心的一種非常強(qiáng)大的方式，從而提供積極的用戶體驗(yàn)。


iPad 應(yīng)用程序交互







界面動(dòng)畫的類型


動(dòng)畫是一種非常靈活和多功能的工具，可以滿足不同用戶的需求。一般來說，根據(jù)我們?cè)诓煌W(wǎng)站和移動(dòng)應(yīng)用程序的界面工作的實(shí)踐經(jīng)驗(yàn)，我們可以在 UI 中定義幾個(gè)動(dòng)畫功能組：

  • 動(dòng)畫啟用 微交互

  • 動(dòng)畫顯示進(jìn)程的路徑

  • 澄清/解釋動(dòng)畫

  • 裝飾動(dòng)畫

在更詳細(xì)地研究它們之前，我們應(yīng)該提到這種劃分實(shí)際上是非常相對(duì)的，因?yàn)樵诖蠖鄶?shù)情況下，設(shè)計(jì)師會(huì)嘗試同時(shí)應(yīng)用動(dòng)畫項(xiàng)目的多個(gè)功能，以盡可能地發(fā)揮其潛力。







微交互動(dòng)畫


第一種類型，包括啟用微交互的動(dòng)畫，也許是用戶界面方面最有用的運(yùn)動(dòng)設(shè)計(jì)類型。它成為讓用戶快速清晰地進(jìn)行交互的一種方式，通常模仿真實(shí)的物理交互，例如按下按鈕、打開盒子或門、拉動(dòng)把手等等。這種動(dòng)畫就像健康：當(dāng)它正常工作時(shí)人們不會(huì)注意到它，但當(dāng)出現(xiàn)問題時(shí)人們會(huì)理解它的重要性。由界面動(dòng)畫啟用的微交互也幾乎不會(huì)引起用戶的注意，直到他們面臨缺席問題的那一刻。

橡膠指示器

微交互通知用戶操作已成功完成：按下按鈕、移動(dòng)切換按鈕、填寫必要的字段、提供規(guī)則等。反之亦然，當(dāng)步驟未完成時(shí)，他們可以通知用戶成功，因此用戶可以快速簡(jiǎn)便地獲取有關(guān)錯(cuò)誤或未完成操作的信息。







動(dòng)畫顯示過程


這種類型的動(dòng)畫以某種方式擴(kuò)大了前一種類型的潛力。它包括向用戶展示流程階段的不同方式，例如，不同類型的加載條顯示流程進(jìn)行的速度以及激活用戶對(duì)可能的時(shí)間和獲得結(jié)果的方式的期望。

時(shí)間線應(yīng)用

預(yù)加載器







澄清/解釋動(dòng)畫


這種類型的動(dòng)畫在不同地區(qū)廣受歡迎 教程和工具提示，但實(shí)際上，它們的潛力非常廣泛。通過細(xì)節(jié)的運(yùn)動(dòng)，人物、插圖項(xiàng)目或文本，它們向用戶提供有關(guān)如何處理應(yīng)用程序的各種提示。

此外，這種類型的動(dòng)畫可以吸引用戶采取進(jìn)一步的步驟，這些步驟乍一看并不那么明顯，或者解釋一些更復(fù)雜的操作。提供具有大量信息的產(chǎn)品的可用性尤為重要，用戶可以通過這些信息快速找到實(shí)現(xiàn)其目標(biāo)所必需的信息。因此，它們可以提高可用性水平，從而提高產(chǎn)品的可取性。

餐廳菜單

天氣應(yīng)用







裝飾動(dòng)畫


這種類型的動(dòng)畫現(xiàn)在經(jīng)常用于創(chuàng)建原創(chuàng)和引人入勝的用戶界面設(shè)計(jì)，這將是吸引人的和明亮的。裝飾性動(dòng)畫使界面充滿活力，可以添加有趣的細(xì)節(jié)，而不是提供成功交互的真正重要特征，而是使一般圖像更有趣并脫穎而出。裝飾性動(dòng)畫可以成為吸引用戶注意力的好方法。但是，應(yīng)該從長(zhǎng)期留住用戶的角度仔細(xì)分析它們。








優(yōu)點(diǎn)和缺點(diǎn)


我們將提到的界面動(dòng)畫的基本好處包括：

  • 提高可用性

  • 獨(dú)創(chuàng)性

  • 方便簡(jiǎn)單的交互

  • 同時(shí)完成多項(xiàng)功能的能力

  • 加速交互過程的巨大潛力

  • 向用戶提供明確的反饋并創(chuàng)造必要的期望

上面提到的一切似乎都是在應(yīng)用程序或網(wǎng)站周圍使用動(dòng)畫的令人信服的因素，但在實(shí)踐中，我們堅(jiān)持在設(shè)計(jì)中應(yīng)用動(dòng)畫時(shí)非常謹(jǐn)慎和明智。


在我們的世界中沒有什么是理想的，UI 中的動(dòng)畫也有許多缺點(diǎn)，在決定這個(gè)或那個(gè)動(dòng)畫之前應(yīng)該仔細(xì)研究和分析。他們之中有一些是：

  • 占用大量流量資源進(jìn)行加載

如果你的動(dòng)畫過重，沒有仔細(xì)分析產(chǎn)品的使用情況，可能會(huì)帶來長(zhǎng)時(shí)間加載的問題，惹惱用戶，而不是創(chuàng)造積極的情緒

  • 重載屏幕/頁面

即使是純粹的裝飾性動(dòng)畫也應(yīng)該有其基于一般概念的目標(biāo)、位置和功能。用于純粹吸引而不是增強(qiáng)積極情緒和有效交互的動(dòng)畫可能會(huì)失去大量用戶，他們會(huì)找到解決問題的方法，而這些用戶會(huì)因不必要的細(xì)節(jié)而過載。


此外，充滿動(dòng)畫項(xiàng)目的屏幕降低了它們的潛力。打個(gè)比方，你可以非常喜歡一首歌，但如果你每天到處聽一千次，你最終可能會(huì)因?yàn)閰捑肓硕憛捤?dòng)畫帶來同樣的事情：當(dāng)它是一個(gè)有趣且引人入勝的細(xì)節(jié)時(shí)，它將成功地幫助用戶，并且與靜態(tài)元素相比看起來更有吸引力。


但是，如果您讓頁面上的所有內(nèi)容都移動(dòng)，用戶很快就會(huì)感到疲倦。只有在需要時(shí)有機(jī)會(huì)停下來，您才能感受到運(yùn)動(dòng)的力量和樂趣。

轉(zhuǎn)自：UI設(shè)計(jì)自學(xué)平臺(tái)

熱門課程推薦

熱門資訊

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

獲取驗(yàn)證碼
x

同學(xué)您好！

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