Bài viết này được viết vào ngày 6 tháng 11 năm 2026.
Các công cụ AI thay đổi rất nhanh. Nhưng lượng chuyển động chuyển cảnh mà một trang web có thể chịu đựng thì không bao giờ thay đổi. Hiệu ứng rê chuột (hover), một chuyển tiếp (transition) ngắn, và một phản hồi vi mô nhỏ khi chạm ngón tay là đã đủ để giao diện hoạt động tốt. Hiệu ứng kính mờ (glassmorphism), thị sai (parallax), xuất hiện tuần tự (staggered entrances), băng chuyền (carousel), và khóa cuộn (scroll snap) là những thứ có thể nhận diện và từ chối một cách dứt khoát. Bạn hãy đọc bài viết này như một giới hạn kiểm soát, chứ không phải hướng dẫn tạo hiệu ứng chuyển động.
Các mô hình AI thường tự thêm chuyển động chuyển cảnh vì chuyển động tạo cảm giác như giao diện được đầu tư nhiều công sức. Một trang web tĩnh trông có vẻ chưa hoàn thiện trong buổi demo tại bàn làm việc, nhưng lại trông hoàn toàn sẵn sàng trong một phòng chờ thực tế. Những người dùng mà loạt bài này hướng tới đang ở rất gần với bối cảnh phòng chờ: một chiếc điện thoại di động, một con phố nắng gắt, một ngôn ngữ có thể không phải là ngôn ngữ chính của mô hình AI, và không có thời gian cho một trang web cứ chuyển động liên tục khi họ đang cố đọc một mức giá. Chuyển động chỉ hợp lý khi nó giải thích một sự thay đổi trạng thái. Nó không hợp lý khi chỉ nhằm phô diễn rằng ai đó biết tên của một hiệu ứng thị giác.
Ba hiệu ứng xứng đáng có vị trí
Hiệu ứng hover là sự thay đổi thị giác khi con trỏ chuột dừng lại trên một nút điều khiển: một sự thay đổi nhỏ về màu sắc hay một gạch chân dưới liên kết. Nó báo cho người dùng chuột biết rằng mục đó có thể click được. Tuy nhiên, hiệu ứng này không hề tồn tại đối với ngón tay trên màn hình cảm ứng. Bất cứ thứ gì chỉ hiển thị khi rê chuột (on hover) sẽ trở thành vô hình trên điện thoại. Hãy nhấn mạnh trong bản tóm tắt rằng dấu hiệu thị giác tương tự phải xuất hiện khi có tiêu điểm bàn phím (on focus), hoặc không sử dụng chút nào.
Một transition (chuyển tiếp) là khoảng thời gian ngắn mà sự thay đổi diễn ra, thường chỉ khoảng một phần năm giây. Một drawer xuất hiện đột ngột trong một khung hình sẽ cho cảm giác bị lỗi; trong khi một drawer mất cả một giây để mở ra sẽ cho cảm giác chậm chạp. Hãy yêu cầu chuyển tiếp ngắn khi mở và đóng. Đừng bao giờ yêu cầu chuyển tiếp hiệu ứng trên từng chữ cái của một câu văn. Việc đọc sách báo không phải là một buổi biểu diễn sân khấu.
Một microinteraction (tương tác vi mô) là phản hồi thị giác nhỏ cho một hành động nhỏ của người dùng. Nút lưu xác nhận nhanh chóng; một chip lựa chọn được chọn sẽ đổi trạng thái rõ ràng. Đây chính là sự trung thực giao diện tương tự như thông báo toast, nhưng được thể hiện gọn gàng hơn. Tương tác vi mô không phải là linh vật nhảy múa, màn pháo hoa, hay hiệu ứng âm thanh. Nếu bạn không thể mô tả phản hồi chỉ trong một câu ngắn, điều đó có nghĩa là tương tác vi mô đó đã quá đà.
Những tên hiệu ứng bạn chỉ cần biết để từ chối
Đây là tên gọi của những hiệu ứng có thật. Tuy nhiên, chúng không phải là những thuật ngữ mà một trang web đầu tiên bắt buộc phải trải qua. Khi mô hình AI đề xuất chúng, bạn có thể từ chối thẳng thừng bằng cách gọi đúng tên.
- Glassmorphism — bảng điều khiển hiệu ứng kính mờ. Nó làm giảm độ tương phản của chữ viết bên trên. Nếu chữ khó đọc, hãy loại bỏ ngay hiệu ứng kính mờ.
- Parallax — hình nền di chuyển với tốc độ khác so với văn bản. Nó khiến một số người cảm thấy chóng mặt, đồng thời xung đột với cài đặt hệ điều hành yêu cầu giảm chuyển động.
- Bento — bố cục dạng lưới với các hộp kích thước không đều nhau, đặt tên theo hộp cơm trưa. Dạng này hữu ích sau này cho các bảng điều khiển phân tích (dashboard). Nhưng trên một trang web đầu tiên, bento che giấu mất thông tin nào là quan trọng nhất vì sự chênh lệch kích thước tạo ra cuộc tranh chấp chú ý.
- Stagger — các mục hoặc dòng chữ xuất hiện lần lượt theo từng độ trễ. Người dùng phải ngồi chờ đợi một danh sách thông tin mà đáng lẽ họ có thể đọc lướt được ngay lập tức.
- Carousel (băng chuyền) — một hàng hình ảnh hoặc thẻ trượt ngang sang hai bên. Hầu hết người dùng không bao giờ vuốt qua khỏi slide đầu tiên. Hãy đặt thẳng thông tin thực tế vào ngay trên trang.
- Scroll snap — thao tác cuộn trang bị khóa tự động vào đúng khung màn hình tiếp theo. Trên điện thoại, hiệu ứng này bẫy người dùng ở giữa các section khi họ chỉ muốn cuộn nhanh qua.
Bạn không cần phải học cách tạo ra các hiệu ứng này. Bạn chỉ cần từ chối chúng khi chúng xuất hiện không được mời. Câu lệnh ngắn gọn, bằng tiếng Anh: “No glass, no parallax, no carousel, no scroll snap. Short transitions only.” Câu đó đã là một bản tóm tắt hoàn chỉnh.
Mức giá ngoài trời nắng
Một người đang đứng bên ngoài một cửa hàng, cầm điện thoại dưới ánh nắng gắt, cố đọc xem một lớp học có giá bao nhiêu trước khi bước vào. Trang web họ mở ra lại trượt mức giá hiện lên sau một khoảng trễ hiệu ứng, đè chữ lên một bức ảnh đường phố, và chuyển động nền chậm hơn chữ viết. Trên màn hình máy tính bàn trong buổi demo, thiết kế đó trông thật cầu kỳ công phu. Nhưng dưới ánh nắng gắt, nó trông giống như một trang web không chịu đứng yên đủ lâu để đáng tin cậy. Người đó đành đi thẳng vào trong hỏi trực tiếp. Trang web đã thất bại ngay ở nhiệm vụ duy nhất của nó.
Điều này xảy ra nhanh hơn ở những nơi mà điện thoại là màn hình máy tính duy nhất và đường phố là văn phòng làm việc. Một hiệu ứng chuyển động đòi hỏi một phòng tối và một màn hình lớn không phải là một chuẩn mực trung tính, mà là một chuẩn mực được sao chép từ studio thiết kế. Gọi tên hiệu ứng là cách bạn từ chối bản sao chép không cần thiết đó. Bạn không cần phải chỉ trích phong cách; bạn chỉ cần nêu rõ danh từ tiếng Anh nào bạn không muốn, để mô hình AI không lén lút đưa nó quay trở lại dưới chiêu bài “làm cho đẹp hơn”.
Bản tóm tắt ngăn chặn điều này rất ngắn gọn và dùng đúng tên thuật ngữ để mô hình AI không thể dịch từ “làm cho tĩnh lặng hơn” thành một kiểu trang trí khác: “Không carousel cho bảng giá. Không glassmorphism phía sau con số. Không parallax. Không stagger trong danh sách lớp học. Dùng chuyển tiếp ngắn khi drawer mở ra, và không dùng chuyển tiếp nào cả nếu người dùng đã bật reduced motion trên điện thoại. Dùng chữ màu tối trên bề mặt phẳng sáng màu.” Mức giá là thông tin đầu tiên trong section, chứ không phải slide thứ hai trong carousel. Bạn có thể viết đoạn quy tắc đó một lần và tái sử dụng lại trên mọi trang web bạn mô tả trong năm nay. Quy tắc đó sẽ đúng lâu hơn nhiều so với hiệu ứng chuyển động đang cám dỗ mô hình AI.
Cài đặt hệ thống vượt trên mọi hiệu ứng thị giác
Các hệ điều hành cho phép người dùng bật tùy chọn giảm chuyển động (reduced motion). Một trang web bỏ qua yêu cầu đó không phải là một trang web sinh động, mà là một trang web phớt lờ nhu cầu thực tế của người dùng. Hãy ghi rõ điều này trong bản tóm tắt: nếu người dùng bật tùy chọn reduced motion, hãy hiển thị ngay trạng thái giao diện cuối cùng mà không có hiệu ứng trượt hay stagger nào. Thông tin vẫn được truyền tải trọn vẹn, nhưng chuyến du hành hiệu ứng đã được hủy bỏ.
Độ tương phản chữ cao sẽ tồn tại qua mọi xu hướng thiết kế. Chữ trên bức ảnh, chữ trên hiệu ứng kính mờ, hay chữ màu xám nhạt trông thanh lịch trên khung vẽ của mô hình AI — tất cả đều sẽ thất bại dưới ánh nắng mặt trời, trên màn hình điện thoại giá rẻ, hay đối với đôi mắt mệt mỏi. Hãy yêu cầu chữ màu tối trên bề mặt phẳng sáng màu trừ khi bạn có lý do kinh doanh cực kỳ đặc biệt. Tên gọi riêng cho bề mặt là tùy chọn, nhưng chữ viết dễ đọc là điều bắt buộc.
Con đường xuyên suốt năm bài viết này chưa bao giờ là việc học thuộc lòng hàng chục định nghĩa kaku. Đó là về bốn quyết định cốt lõi: Gọi tên thành phần giao diện bằng tiếng Anh để mô hình AI không đoán mò. Viết ngôn ngữ của người đọc vào các nhãn và thông tin thực tế. Xác định xem khoảnh khắc này dừng lại, chia sẻ màn hình, hay chỉ thông báo. Sau đó giữ cho trang web đủ tĩnh để có thể đọc được. Một người nắm được bốn điều đó đã vượt qua rào cản từ vựng thực sự cản trở công việc. Phần thuật ngữ còn lại chỉ là một danh mục mà họ có thể mở ra sau này — dựa vào tên tiếng Anh của nó — khi một trang web thực sự cần đến.