當前位置:首頁 >UI學院 >學院新聞

帶有“小動作”的ui設計不一般

宸蕁南笙作者:宸蕁南笙 發布時間:2019-05-24 18:56:26 瀏覽量:453次

UI動效設計是最近幾年才出現的名詞,但是越來越多的團隊已經意識到動效在產品體驗中的重要性,不少設計師們也開始投身UI動效設計領域。那麼到底我們為什麼需要UI動效,什麼樣的動效才能增強用戶體驗的舒適度呢?下麵小編就來和大家深度交流一下~

帶有“小動作”的ui設計不一般1.gif

iOS設計規範中動效存在的意義

1傳達狀態和提供反饋

當我們進行操作或者點擊的時候,我們可以很清楚的看到動效對我們的操作狀態提供 的反饋,它會告訴用戶此時你做什麼,以及程序有沒有應答你。

帶有“小動作”的ui設計不一般2.gif

2幫助人們可視化操作結果

當你執行一個操作的時候,可以直觀的看到操作結果。

帶有“小動作”的ui設計不一般3.gif

3增強直接操作的感受

帶有“小動作”的ui設計不一般4.gif

動效是如何提升用戶體驗的

程序響應需要一定時間的等待,然而麵對等待,用戶總是缺少耐心。所以充滿個性,有趣的動效可以緩解用戶等待時的焦急情緒,使用戶對你的設計多一份喜愛,讓他們覺得至少這個設計還不錯。

帶有“小動作”的ui設計不一般5.gif

如果你希望用戶點擊這個地方,請給它一個動效。

帶有“小動作”的ui設計不一般6.gif

如果你希望你的點擊效果不一樣,請給它一個動效。

帶有“小動作”的ui設計不一般7.gif

1明確層級關係

為了展現層與層的關係,可以使用特效,不論是抽屜,是打開,還是平級切換等等,動效可以直觀的讓用戶知道這個界麵和上一個、下一個界麵的關係。

帶有“小動作”的ui設計不一般8.gif

2增加界麵的活力

增加用戶預期之外的驚喜。這個動效可以是帥氣的,可以是賣萌,可以有些物理屬性,總之動效可以讓用戶感知到產品的生命力。

3吸引用戶持久的注意力

帶有“小動作”的ui設計不一般9.gif

在某些數據量較大的界麵中添加一些動效,可以讓用戶保持持久的注意力,使閱讀過程不再乏味。

4增加界麵與界麵銜接的延續感

帶有“小動作”的ui設計不一般9.gif

界麵的跳轉不可以避免,但是如果讓本來分別獨立的2個界麵或者事件擁有了某種特定的聯係,可以使產品顯得更加好玩。

 帶有“小動作”的ui設計不一般.png

以上案列是幾款比較常用的UI動效,實際情況中,多數的優秀動效設計都會同時滿足以上幾點的用戶體驗。總體來說,UI動效設計可以更有效地提高用戶體驗。需要注意的是,動效設計尤其要注意交互邏輯,這樣才能讓你的作品不但看起來帥氣逼人,而且更能發揮實際作用。

以上就是小編的分享,想要長期立足於ui設計,重要的是與時俱進,多多吸收新的知識,還有更多想要了解的問題可以聯係我們的在線老師~

火星時代教育 影視學院劉老師,為你解答
  • 相關推薦
  • 人氣推薦
  • 教程分享
  • 相關標簽
20 節課學會剪輯!一個"樸實無華"的剪輯課!

優秀作品賞析

  • 2101期學員李思庭作品

    作 者:李思庭

    所學課程:2101期學員李思庭作品

  • 2104期學員林雪茹作品

    作 者:林雪茹

    所學課程:2104期學員林雪茹作品

  • 2107期學員趙淩作品

    作 者:趙淩

    所學課程:2107期學員趙淩作品

  • 2107期學員趙燃作品

    作 者:趙燃

    所學課程:2107期學員趙燃作品

  • 微信掃碼入群領福利

    掃碼領福利最新AI資訊

    點擊谘詢
    添加老師微信,馬上領取免費課程資源

    1. 打開微信掃一掃,掃描左側二維碼

    2. 添加老師微信,馬上領取免費課程資源

    ×

    同學您好!

    您已成功報名0元試學活動,老師會在第一時間與您取得聯係,請保持電話暢通!
    確定