隨著國際大品牌蘋果和谷歌的引領,近越來越多的國內公司開始關注動效設計了,越來越多的團隊已經意識到動效在產品多使用者體驗中的重要性了,更多的射雞師們也開始投身動效設計領域。
(文中部分案例為設計師個人作品,部分為線上產品,都是我非常非常欣賞的作品。如不慎冒犯請戳我替換掉)
加強體驗舒適度
嗯,就是讓多使用者更加爽更加爽的用您的產品。
具體表現在:
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 以動態的形式展現資料點