Màu sắc, Typography và Spacing đã trở thành những phần quen thuộc của Design Token. Còn Motion (chuyển động) thường được xử lý kém hệ thống hơn: ghi trong ghi chú bàn giao, truyền đạt qua prototype, hoặc đơn giản là làm một hiệu ứng “trông có vẻ giống” ý tưởng ban đầu.
Kết quả là những khái niệm như “nhanh”, “mượt” hay “tự nhiên” có thể được mỗi thành viên trong đội hiểu theo một cách khác nhau.
Nếu Blue500 có thể được định nghĩa chính xác và dùng nhất quán trên toàn sản phẩm, thì chuyển động cũng nên được đối xử như vậy. Khi mỗi animation được làm dựa trên trí nhớ hay sở thích cá nhân, trải nghiệm sẽ dần trở nên rời rạc khi sản phẩm lớn lên.
Với sự trỗi dậy của AI, tôi nghĩ đây là thời điểm tốt để designer dành nhiều thời gian hơn cho Motion Design. AI có thể giúp ta tạo animation, viết code và dựng prototype nhanh hơn rất nhiều. Nhưng ý tưởng nền tảng của chuyển động, tính cách của nó và chiến lược sử dụng vẫn là những phần designer cần đóng góp.
Không có nguyên tắc rõ ràng và một hệ thống, AI chỉ giúp ta tạo ra nhiều animation hơn—chứ không phải trải nghiệm nhất quán hơn.
Trong bài này, tôi sẽ không đi sâu vào lý thuyết animation. Thay vào đó, tôi tập trung vào một số khía cạnh thực tế khi xây dựng Motion System.
Triết lý chuyển động (Motion Philosophy)
Motion Philosophy là tập hợp niềm tin về vai trò của chuyển động trong sản phẩm. Nó trả lời một câu hỏi đơn giản:
“Vì sao chuyển động tồn tại?”
Không nhất thiết phải định nghĩa Motion Philosophy ngay từ ngày đầu của sản phẩm. Nhưng khi sản phẩm mở rộng, số màn hình tăng lên và có thêm nhiều designer, developer tham gia, đáng để lùi lại một bước, đánh giá lại ngôn ngữ thiết kế, xem lại Design System và định nghĩa rõ hơn vai trò của chuyển động.
Phiên bản đầu tiên của Motion Philosophy không cần hoàn hảo. Điều quan trọng là cả đội bắt đầu có cách hiểu chung về việc chuyển động cần đạt được điều gì.
Google Material hướng tới cảm giác tự nhiên và linh hoạt. Apple nhấn mạnh sự mượt mà, chính xác và tinh tế. Airbnb tạo cảm giác ấm áp, gần gũi và có chiều sâu không gian. Còn Linear ưu tiên tốc độ và hiệu quả đến mức nhiều animation gần như biến mất khỏi nhận thức của người dùng.
Những định nghĩa này nghe có vẻ trừu tượng, nhưng chúng là nền tảng cho các quyết định cụ thể sau đó.
Nguyên tắc chuyển động (Motion Principles)
Nếu Motion Philosophy trả lời “Vì sao?”, thì Motion Principles trả lời “Ta nên hành động thế nào?”
Một số nguyên tắc có thể áp dụng cho hầu hết sản phẩm:
Rõ ràng — Giải thích điều vừa xảy ra.
Liên tục — Giữ ngữ cảnh của người dùng.
Phản hồi — Đưa ra phản hồi ngay lập tức.
Có mục đích — Mỗi chuyển động đều phải có lý do tồn tại.
Thứ bậc — Hỗ trợ thứ bậc thông tin.
Nhất quán — Đảm bảo hành vi giống nhau trên toàn sản phẩm.
Tuy nhiên, có hai yếu tố thường bị bỏ qua.
Hiệu quả. Chuyển động có thể thu hút sự chú ý, nhưng không bao giờ được làm chậm luồng làm việc của người dùng.
Khả năng tiếp cận. Chuyển động không được gây khó chịu, mất tập trung hay chóng mặt, đặc biệt với sản phẩm liên quan đến sức khoẻ hoặc phục vụ người dùng cần hỗ trợ tiếp cận.
Mẫu chuyển động (Motion Patterns)
Motion Patterns là những hành vi chuyển động được định nghĩa sẵn để tái sử dụng trên toàn sản phẩm. Đây là lớp giúp duy trì tính nhất quán, thay vì để mỗi màn hình tự đưa ra ngôn ngữ chuyển động riêng.
Các component UI phổ biến cần hướng dẫn chuyển động gồm Toast, Tooltip, Modal, Dropdown, trạng thái Loading, Drawer và Bottom Sheet.
Ví dụ, đội có thể thống nhất rằng mọi lớp phủ (overlay) đều dùng Scale + Fade khi xuất hiện và Fade Out khi biến mất.
Ngoài các component UI cơ bản, Motion Patterns còn có thể bao gồm các hành vi điều hướng như Push, Slide, Drill Down hay Shared Element Transition.
Chẳng hạn, một Card có thể mở rộng thành màn hình chi tiết, thay vì biến mất và bị thay thế bởi một màn hình hoàn toàn mới. Những chi tiết nhỏ như vậy giúp người dùng giữ được ngữ cảnh khi di chuyển trong sản phẩm.
Để cụ thể hơn, hãy xét một Modal.
Motion Philosophy: Chuyển động giúp giữ ngữ cảnh.
Motion Principle: Người dùng cần hiểu cái gì vừa xuất hiện.
Motion Pattern: Scale + Fade.
Motion Token: motion.overlay.open
Motion Spec: Scale từ 96% lên 100%, Opacity từ 0% lên 100%, trong 200ms với Ease-Out.
Đây là cách những ý tưởng trừu tượng trở thành quyết định sản phẩm cụ thể.
Motion Tokens
Đây là một trong những phần ít được triển khai nhất của Design System, dù khái niệm Token đã được hiểu khá rộng rãi.
Chúng ta thường quen định nghĩa màu như Primary/Blue500 hay khoảng cách như Spacing/16. Nhưng với Motion, nhiều đội vẫn dựa vào những khái niệm mơ hồ như Fast, Slow hay Ease-Out.
Ví dụ, ta nên tránh định nghĩa token kiểu này:
Thay vào đó, cách đặt tên nên phản ánh mục đích của chuyển động:
Một Motion Token tốt nên trả lời câu hỏi:
“Animation này nhằm làm gì?”
thay vì:
“Animation này kéo dài bao lâu?”
Motion Token thường gồm ba nhóm chính:
Duration — Chuẩn hoá thời lượng animation, như Micro, Short, Medium hay Long.
Easing — Chuẩn hoá cách chuyển động diễn ra, như Standard, Emphasized hay Exit.
Motion Presets — Kết hợp Duration và Easing thành các token có ý nghĩa, như motion.transition.enter, motion.transition.exit hay motion.transition.feedback.
Khả năng tiếp cận nên là một phần của Motion Tokens
Một vấn đề phổ biến là Accessibility thường được xử lý ở cấp component thay vì ở cấp Design System.
Motion Token không chỉ nên lưu Duration hay Easing. Nó còn cần tính đến những người dùng bật chế độ giảm chuyển động.
Ví dụ, motion.transition.enter có thể dùng 200ms Ease-Out trong điều kiện bình thường, nhưng tự động giảm hoặc bỏ animation khi hệ điều hành bật prefers-reduced-motion.
Nhờ vậy Accessibility được xử lý một lần ở cấp hệ thống, thay vì phải giải quyết lặp đi lặp lại trong từng component.
Motion Spec, QA và lặp lại
Sau khi định nghĩa Motion Token, đội sẽ cần Motion Specification. Đây là nơi hành vi của animation được mô tả cụ thể, gồm thời lượng, easing, độ mờ, tỉ lệ và quãng đường di chuyển.
Ví dụ:
Mở Modal: Scale từ 96% lên 100%, Fade từ 0% lên 100%, trong 200ms với Ease-Out.
Tiếp theo là QA.
Cũng như màu sắc và typography, Motion cần được kiểm tra về tính nhất quán, hiệu năng và khả năng tiếp cận. Một Modal không nên mất 200ms để mở ở màn hình này và 500ms ở màn hình khác mà không có lý do rõ ràng.
Cuối cùng là lặp lại.
Designer cần quan sát cách người dùng phản ứng với chuyển động trong sản phẩm và tiếp tục tinh chỉnh Motion System theo thời gian.
Khi nào nên bắt đầu chú ý đến Motion?
Nhiều sản phẩm ở Việt Nam vẫn xem Motion là thứ “có thì tốt” hoặc làm theo cảm hứng thay vì theo hệ thống.
Khi sản phẩm phần lớn đã đạt mức “đủ tốt”, những chi tiết như Motion có thể trở thành yếu tố quan trọng giúp trải nghiệm trở nên mạch lạc, đáng nhớ và khác biệt.
Vì vậy, Motion nên được xem là một phần của Design System ngay từ đầu, giống như UX Writing, màu sắc, typography hay spacing.
Điều đó không có nghĩa sản phẩm cần một Motion System hoàn chỉnh từ ngày đầu. Nhưng hình thành tư duy về chuyển động sớm sẽ giúp đội xây dựng Motion Patterns và Motion Tokens có chủ đích hơn khi sản phẩm phát triển.
Nhìn vào những sản phẩm nổi tiếng về trải nghiệm người dùng như Apple, Stripe, Airbnb hay Duolingo, ta có thể thấy mỗi sản phẩm đều có ngôn ngữ chuyển động riêng.
Motion không phải yếu tố duy nhất tạo nên trải nghiệm tuyệt vời, nhưng là một trong những yếu tố giúp sản phẩm vượt qua mức “đủ tốt” và trở nên đáng nhớ hơn.
Chúng ta đã dành nhiều năm để token hoá màu sắc, typography và spacing.
Có lẽ đã đến lúc Motion được đối xử như một thành phần hạng nhất của Design System.
Nếu màu sắc là ngôn ngữ thị giác của sản phẩm, thì chuyển động là ngôn ngữ của hành vi.
Và như mọi ngôn ngữ khác, nó cần được định nghĩa trước khi có thể được dùng nhất quán.
