Quy Tắc
Nếu bạn chụp ảnh màn hình ứng dụng của mình tại bất kỳ thời điểm nào, nó phải có nghĩa.
Đó là ý tưởng cốt lõi đằ sau mục tiêu của Wayland: "mọi frame đều hoàn hảo." Wayland đang nói về GPU stacks và kernel-level rendering, nhưng nguyên tắc này áp dụng cho mọi tầng UI design.
Tại Sao Phải Quan Tâm Đến Từng Frame?
Nó xây dựng niềm tin. Người dùng không thể kiểm tra code của bạn — UI là bề mặt duy nhất họ có thể đánh giá. Khi UI trông bóng bẩy, người dùng mặc nhiên cho rằng developers đã chú ý ngang bằng đến code bên dưới. Đó là một heuristic hợp lý.
Ngược lại, mỗi frame gây khó chịu, mỗi khoảnh khắc hiển thị nội dung chưa styled, mỗi animation không đồng bộ đều làm xói mòn niềm tin đó.
Những Vi Phạm Trong Thực Tế
Những thứ phá vỡ quy tắc này:
- Màn hình trắng nháy giữa các màn. Nội dung chưa styled hiển thị thoáng qua trong quá trình điều hướng.
- Nội dung được tải từng phần. Skeleton loaders đã tốt hơn, nhưng thậm chí chúng có thể cảm thấy chưa hoàn chỉnh.
- Relayout khi nội dung đang tải. Các phần tử thay đổi vị trí khi hình ảnh và văn bản đến.
- Trạng thái không nhất quán nội bộ. Một phần hiển thị "1 bản cập nhật sẵn sàng," phần khác lại nói "Đang kiểm tra cập nhật…"
- Animation janky. Trạng thái bắt đầu và kết thúc trông tuyệt vời. Mọi thứ ở giữa? Bị quên lãng.
Vấn Đề Animation
Đây là cái khó phát hiện nhất. Developers ám ảnh về cách một tương tác *bắt đầu* và *kết thúc* nhưng coi mọi thứ ở giữa là việc của người khác.
Lấy animation placeholder text của Safari. Placeholder text animate từ giữa input. Còn con trỏ? Nó animate từ bên trái. Hai phần tử này cùng trong một UI, nhưng chúng không di chuyển đồng bộ.
Đây không phải thảm họa. Nhưng nó báo hiệu rằng hai thành phần này không được thiết kế cùng nhau. Rằng chúng có thể không hoạt động tốt cùng nhau. Đó là cách niềm tin bị xói mòn — trong những khoảnh khắc nhỏ, chưa được xem xét.
Vấn Đề Cảm Giác Sai
Đây là một ví dụ khác. Trong Photos trên macOS, chuyển đổi giữa chế độ Crop và Adjust, hình ảnh snap vào vị trí mới ngay lập tức. Viền crop? Nó animate.
Điều này tạo ra cảm giác sai rằng có điều gì đó đã thay đổi ngoài những gì thực sự thay đổi. Hình ảnh không di chuyển giữa các chế độ — nhưng animation gợi ý rằng nó đã di chuyển.
Animation được tạo ra để *làm rõ* các chuyển đổi. Khi chúng tạo ra ấn tượng sai thay vào đó, chúng đã thất bại. Hai lần.
DOM Đã Thông Minh Hơn Lập Trình Viên
UI của trình phát YouTube cung cấp một bài học khác. Di chuyển một hình chữ nhật từ vị trí này sang vị trí khác phải là chuyện nhỏ. YouTube làm gì?
Kích thước, vị trí và opacity của hình chữ nhật dường như tuân theo các quy tắc khác nhau. Không rõ đây là cố ý hay hệ quả của các layer được xây dựng bởi các team khác nhau qua nhiều năm. Dù thế nào, kết quả là những frame không hoàn hảo.
Đây là "công nghệ thông minh hơn lập trình viên" — nơi kiến trúc được chọn từ lâu ràng buộc những gì developer hiện tại có thể làm.
Bài Học Rút Ra
Chú ý không chỉ đến trạng thái bắt đầu và kết thúc, mà đến mọi thứ ở giữa. Từng frame đều quan trọng.
Animation không phải trang trí. Chúng là một phần cốt lõi của trải nghiệm sản phẩm. Khi chúng cảm thấy chính xác, toàn bộ app cảm thấy chính xác. Khi chúng cẩu thả, sự cẩu thả đó lan tỏa.
Triết lý "mọi frame đều hoàn hảo" không chỉ dành cho các kỹ sư Wayland. Nó dành cho bất kỳ ai ship phần mềm mà người dùng sử dụng.