Frontend PolishTuyển chọn

Motion

Thư viện animation gọn, có thể dùng sau này cho feedback của bottom sheet, card và state transition mà không biến site thành ứng dụng nặng.

Access Gate

0/1 bước

Hoàn thành 1 bước để tiếp tục

Motion

Ủng hộ website Chưa hoàn thành

Cảm ơn bạn đã đồng hành

Bấm “Mở tab nhà tài trợ” để góp phần duy trì website và nguồn tài nguyên miễn phí. Sau khi mở tab, bạn quay lại đây để tiếp tục với nút “Truy cập tài nguyên”.

Mở tab nhà tài trợ

Trang nhà tài trợ và tài nguyên mở trong tab mới. Bạn có thể tiếp tục đọc bài tại đây.
Biên tập: Đăng
animationinteractionUX
-
Nội dung demo

Phù hợp với

  • Frontend team cần micro-interaction
  • Site ưu tiên progressive enhancement
  • Dự án tránh animation bundle lớn

Vì sao đáng xem

  • Hợp micro-interaction có mục đích
  • Có thể làm sheet/transition mượt hơn
  • Nên dùng để truyền đạt state

Prototype hiện tại chỉ cần CSS transition. Nếu Outbound Gate hoặc filter cần cảm giác mượt hơn thì mới thêm animation có chủ đích.

Điểm cần lưu ý

  • • Không dùng animation để che hierarchy kém
  • • Phải tôn trọng reduced-motion

Liên kết và tải về

Link ngoài và tài liệu liên quan

Đọc tiếp

Có thể bạn sẽ cần những thứ này tiếp theo

Bài viết

Thiết kế

Thiết kế resource page cho ngón tay cái, không phải chỉ cho màn hình desktop

Phần lớn traffic discovery đến từ điện thoại. Mobile-first buộc giao diện ưu tiên khả năng đọc, thao tác chạm và luồng thông tin.

Xem tiếp
Bài viết

Tuyển chọn

Collection nên kể một câu chuyện, không chỉ lọc database

Một collection tốt giải thích vì sao các item đi cùng nhau, nên xem theo thứ tự nào và lựa chọn nào hợp với từng nhóm người dùng.

Xem tiếp