隨着國際大品牌蘋果和谷歌的引領,近越來越多的國內公司開始關注動效設計了,越來越多的團隊已經意識到動效在產品多用户體驗中的重要性了,更多的射雞師們也開始投身動效設計領域。

(文中部分案例為設計師個人作品,部分為線上產品,都是我非常非常欣賞的作品。如不慎冒犯請戳我替換掉)

   加強體驗舒適度

嗯,就是讓多用户更加爽更加爽的用您的產品。

具體表現在:

1. 表現層級關係

為了展現層與層的關係,是抽屜,是開啓,還是平級切換等等,讓多用户知道這個介面和上一個、下一個的關係。這已經是非常常見的運用了。

2. 與多用户手勢結合,更自然的動畫表現

當多用户手勢操作的時候,讓介面的動態走向更符合手指的運動,從而讓多用户感覺到是自己控制了介面的動向,而不是機械化的跳轉。

UI 動效設計 動效設計 提示性動效設計

City guide WordPress APP 用手勢可以向左向右扔卡片

3. 愉快的提示功能

在某些需要提醒的時候能吸引多用户的注意,但是又不會生硬,符合預期的出現。

UI 動效設計 動效設計 提示性動效設計

Action button feedback 出錯提示

UI 動效設計 動效設計 提示性動效設計

City Guides 啓動時提示多用户可以左右滑動卡片

4. 額外增加介面的活力

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

UI 動效設計 動效設計 提示性動效設計

readme.io 萌萌的輸入框

UI 動效設計 動效設計 提示性動效設計

amazon Q 彈的選單

UI 動效設計 動效設計 提示性動效設計

tumblr  不喜歡我 心都碎了呢~

5. 吸引多用户持久的注意力

也是屬於增加多用户的驚喜感,在某些資料量較大的介面中新增一些動效,讓多用户保持注意力。

UI 動效設計 動效設計 提示性動效設計

Bubbles 以動態的形式展現資料點