Thư viện thuật ngữ / Motion

UI animation là gì?

Còn gọi: chuyển động giao diện, ui motion, motion ui, hiệu ứng ui, hiệu ứng ui là gì

UI animation là các chuyển động trong giao diện app và web, như màn hình trượt vào, nút phản hồi khi bấm, danh sách xuất hiện lần lượt, giúp người dùng hiểu chuyện gì vừa xảy ra và tiếp theo nên làm gì.

Hiểu kỹ hơn

Khác với motion graphics để kể chuyện, UI animation phục vụ chức năng. Có bốn việc chính: định hướng (màn hình mới trượt từ phải cho biết bạn đi sâu vào trong), phản hồi (nút lún nhẹ khi chạm), thể hiện trạng thái (đang tải, đã gửi thành công) và gây chú ý vừa đủ (chấm đỏ thông báo nảy nhẹ). Thời lượng thường ngắn, khoảng 150 đến 400 mili giây; dài hơn sẽ khiến app có cảm giác chậm. Easing nên dùng ease-out cho vật đi vào và ease-in cho vật đi ra. Designer thường làm mẫu trong Figma (Smart Animate), Protopie, Rive hoặc After Effects rồi xuất Lottie cho lập trình viên. Microinteraction là một phần nhỏ của UI animation, tập trung vào một thao tác đơn lẻ. Lỗi hay gặp: thêm chuyển động cho đẹp mà không có mục đích, hoặc quên tôn trọng cài đặt giảm chuyển động (reduce motion) của người dùng.