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

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

   加強體驗舒適度

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

具體表現在:

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 以動態的形式展現資料點