UI/UX

Skeleton screen là gì?

skeleton screenskeleton loadingkhung xương

Skeleton screen là bố cục giả dạng các khối xám hiện ra trong lúc nội dung đang tải, mô phỏng vị trí của ảnh và chữ sắp xuất hiện, giúp việc chờ có cảm giác nhanh hơn.

Hiểu kỹ hơn

So với vòng xoay tải (spinner), skeleton cho người dùng biết trước cấu trúc trang, nên cảm giác chờ ngắn hơn và trang không bị nhảy bố cục khi nội dung đổ về. Các khối thường có hiệu ứng ánh sáng chạy nhẹ. Skeleton nên khớp gần đúng với bố cục thật.

Ảnh minh hoạ Skeleton screen (khung chờ tải): một danh sách bài viết ở trạng thái skeleton và trạng thái đã tải xong, đặt cạnh nhau
Một danh sách bài viết ở trạng thái skeleton và trạng thái đã tải xong, đặt cạnh nhau

Thuật ngữ liên quan

01Progress bar (thanh tiến trình)

Progress bar là thanh ngang lấp đầy dần để cho người dùng biết một tác vụ như tải lên, tải xuống hay cài đặt đã hoàn thành bao nhiêu và còn bao lâu.

02Feedback (phản hồi của hệ thống)

Feedback trong giao diện là tín hiệu hệ thống gửi lại sau mỗi thao tác của người dùng, như đổi trạng thái nút, hiện thông báo hay chạy vòng tải, để họ…

03Performance (hiệu năng và cảm nhận tốc độ)

Performance trong UX là tốc độ và độ mượt của sản phẩm theo cảm nhận của người dùng, gồm thời gian tải, độ trễ phản hồi thao tác và độ ổn định của bố cục…