Màn hình bộ xương: Khi nào nên sử dụng chúng thay vì máy quay
Màn hình khung là gì, thời điểm chúng đánh bại các trình quay, cách thiết kế chúng sao cho phù hợp với nội dung thực và cách tạo hoạt ảnh cho chúng mà không ảnh hưởng đến hiệu suất hoặc khả năng truy cập.
Điểm chính
Màn hình khung là một trình giữ chỗ giống như wireframe, hiển thị bố cục nội dung trong khi tải. Sử dụng nó cho các trang đầy đủ và danh sách có hình dạng có thể dự đoán được; sử dụng công cụ quay vòng cho các khu vực nhỏ hoặc nội dung không xác định và tiến độ thực sự cho các nhiệm vụ dài. Làm cho khung khớp với bố cục thực để không có gì thay đổi khi nội dung đến.
Màn hình khung xương là gì
Nielsen Norman Group định nghĩa màn hình khung xương là trình giữ chỗ cho trang tải bắt chước bố cục có hình ảnh giống khung dây. Nó được sử dụng để tải toàn trang và giảm thời gian tải có thể nhận thấy vì mọi người nhìn thấy cấu trúc của nội dung sắp diễn ra thay vì một vùng trống.
Khi nào nên sử dụng cái nào
Ghép chỉ báo với nội dung và thời gian chờ:
- Skeleton: tải trang hoặc danh sách ở nơi đã biết bố cục, chẳng hạn như nguồn cấp dữ liệu, thẻ và hồ sơ.
- Spinner: các vùng, nút hoặc nội dung nhỏ có hình dạng mà bạn không thể dự đoán được.
- Thanh tiến trình: các tác vụ dài mà bạn có thể đo lường, chẳng hạn như tải lên và xuất.
- Không có gì: phản hồi rất nhanh, trong đó chỉ báo sẽ chỉ nhấp nháy.
Thiết kế một bộ xương tốt
Sử dụng kích thước thành phần thực để trang không thay đổi khi có nội dung, điều này cũng bảo vệ điểm Thay đổi bố cục tích lũy của bạn. Giữ hình dạng đơn giản (khối cho hình ảnh, thanh cho văn bản), sử dụng màu xám có độ tương phản thấp và thay thế từng phần giữ chỗ bằng nội dung thực ngay khi nó sẵn sàng thay vì chờ đợi mọi thứ.
bộ xương hoạt hình
NN/g lưu ý rằng một số khung bao gồm hoạt ảnh rung hoặc lung linh để báo hiệu rằng hệ thống vẫn đang hoạt động. Giữ nó chậm và tinh tế, tạo hiệu ứng mờ ảo hoặc biến đổi thay vì thuộc tính bố cục và dừng nó khi bật chuyển động giảm. Đặt cho vùng tải một nhãn có thể truy cập được, chẳng hạn như "Đang tải kết quả".
Nguyên tắc chính cần nhớ
- Bộ xương hiển thị bố cục của nội dung sắp tới và giảm thời gian chờ đợi
- Sử dụng chúng để dự đoán tải trang và danh sách; máy quay cho các khu vực nhỏ hoặc chưa xác định
- Khớp kích thước thực để tránh thay đổi bố cục
- Giữ ánh sáng lung linh tinh tế và dừng nó để giảm chuyển động
- Vùng tải nhãn cho trình đọc màn hình
Câu hỏi thường gặp
Nguồn
- Skeleton Screens 101 — Nielsen Norman Group
- Progress Indicators Make a Slow System Less Insufferable — Nielsen Norman Group
- Cumulative Layout Shift (CLS) — web.dev