Name: Skeleton Screens vs. Thanh Tiến trình vs. Biểu tượng Xoay (Skeleton Screens vs. Progress Bars vs. Spinners)
Uploaded: 2026-03-18T09:31:45.000Z
Duration: 3 min 31 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Ai trong chúng ta cũng từng trải qua điều này.

Waiting for a webpage to load or a process to complete can sometimes feel like a very long time.

Chờ một trang web tải hoặc một quy trình hoàn thành đôi khi có thể cảm giác rất lâu.

Skeleton screens, progress bars and spinners are all ways to show that the system is loading information.

Màn hình khung xương, thanh tiến trình và biểu tượng quay đều là những cách để cho thấy hệ thống đang tải thông tin.

I'm going to share the primary purpose of each loading indicator and discuss when to use each.

Tôi sẽ chia sẻ mục đích chính của từng chỉ báo tải và thảo luận về thời điểm sử dụng chúng.

Skeleton screens are wire like visuals that mimic the layout of the page and are used to indicate that a page is loading.

Màn hình khung xương là hình ảnh dạng khung dây mô phỏng bố cục của trang và được sử dụng để cho biết trang đang tải.

Sometimes these come in the form of static images or animations.

Đôi khi chúng xuất hiện dưới dạng hình ảnh tĩnh hoặc hoạt ảnh.

Here you can see LinkedIn uses a static skeleton screen as the page loads, which brings me to the point that these are best used for full page loads.

Ở đây bạn có thể thấy LinkedIn sử dụng màn hình khung xương tĩnh khi trang tải, điều này dẫn tôi đến điểm là chúng tốt nhất nên dùng cho tải toàn bộ trang.

You also only want to use skeleton screens when the page load time falls between 2 to 10 seconds.

Bạn cũng chỉ nên sử dụng màn hình khung xương khi thời gian tải trang nằm trong khoảng từ 2 đến 10 giây.

Spinners or wait animations have similar characteristics to skeleton screens.

Biểu tượng quay hoặc hoạt ảnh chờ có những đặc điểm tương tự như màn hình khung xương.

For example, these don't give any indication of how long you'll be waiting.

Ví dụ, chúng không cho biết bạn sẽ phải chờ bao lâu.

Spinors or wait animations, are isolated elements that repeat the same motion.

Biểu tượng quay hoặc hoạt ảnh chờ là các phần tử riêng lẻ lặp đi lặp lại cùng một chuyển động.

These are best used on a single module, like a video or a card on a dashboard.

Chúng tốt nhất nên dùng cho một mô-đun duy nhất, như video hoặc thẻ trên bảng điều khiển.

For each card on the dashboard, we see a spinner while the data is being loaded.

Đối với mỗi thẻ trên bảng điều khiển, chúng ta thấy một biểu tượng quay trong khi dữ liệu đang được tải.

This works well in this case because we are able to see the general structure of the page.

Điều này hoạt động tốt trong trường hợp này vì chúng ta có thể thấy cấu trúc chung của trang.

But the spinners on each card provide a strong indication that the data is being loaded.

Nhưng các biểu tượng quay trên mỗi thẻ cung cấp một dấu hiệu rõ ràng rằng dữ liệu đang được tải.

You should only use spinners or wait animations if the wait is under 10 seconds, just like skeleton screens.

Bạn chỉ nên sử dụng biểu tượng quay hoặc hoạt ảnh chờ nếu thời gian chờ dưới 10 giây, giống như màn hình khung xương.

Now, how do you choose between skeleton screens and spinors?

Bây giờ, làm thế nào để bạn chọn giữa màn hình khung xương và biểu tượng quay?

The main advantage of skeleton screens is that they reduce cognitive load for users, avoiding the overwhelming experience of displaying a blank page followed by a full page of content.

Ưu điểm chính của màn hình khung xương là chúng giảm tải nhận thức cho người dùng, tránh trải nghiệm quá tải khi hiển thị một trang trống theo sau là một trang đầy nội dung.

It also creates an illusion of shorter waiting times and that the page is gradually transitioning into its final format because it looks like a wireframe.

Nó cũng tạo ra ảo giác về thời gian chờ ngắn hơn và trang đang dần dần chuyển đổi sang định dạng cuối cùng vì nó trông giống như một hình ảnh dạng khung dây.

Spinners, on the other hand, don't have the same capabilities, and

Còn biểu tượng quay thì không có khả năng tương tự, và

that's why they're better for isolated elements of your web page rather than the whole page.

đó là lý do tại sao chúng phù hợp hơn cho các phần tử riêng lẻ trên trang web của bạn thay vì toàn bộ trang.

Now, progress bars are quite different from skeleton screens and spinners.

Bây giờ, thanh tiến trình khá khác biệt so với màn hình khung xương và biểu tượng quay.

Progress bars shows you the progression of a computer operation, like a file uploading or you're downloading something.

Thanh tiến trình cho bạn thấy tiến trình của một thao tác máy tính, như tải tệp hoặc bạn đang tải xuống thứ gì đó.

These are best used for process related indicators.

Chúng được sử dụng tốt nhất cho các chỉ báo liên quan đến quy trình.

Progress bars are strongly recommended for any page that takes longer than 10 seconds to load because they give users a sense of how much longer they have to wait.

Thanh tiến trình được khuyến nghị mạnh mẽ cho bất kỳ trang nào mất hơn 10 giây để tải vì chúng cho người dùng biết họ còn phải đợi bao lâu.

At the end of the day, nobody likes to wait.

Cuối cùng, không ai thích phải chờ đợi.

The key thing to consider is how do we ensure our users stay informed and engaged during these loading times so that they have a seamless experience.

Điều quan trọng cần xem xét là làm thế nào để chúng ta đảm bảo người dùng của mình được thông báo và tương tác trong những thời gian chờ đợi này để họ có trải nghiệm liền mạch.

Understanding the difference between a skeleton screen, spinner or weight animation and Progress bar will help you ensure that's possible.

Hiểu sự khác biệt giữa màn hình khung xương, biểu tượng quay hoặc hoạt ảnh chờ và thanh tiến trình sẽ giúp bạn đảm bảo điều đó có thể thực hiện được.

If you want to see more of our UX videos, take a look at these over here and consider subscribing to our channel.

Nếu bạn muốn xem thêm các video về UX của chúng tôi, hãy xem những video này ở đây và cân nhắc đăng ký kênh của chúng tôi.

On our website, nngroup.com, you can access our free library of over 2,000 articles.

Trên trang web của chúng tôi, nngroup.com, bạn có thể truy cập thư viện miễn phí gồm hơn 2.000 bài viết của chúng tôi.

You can also register for one of our UX courses that offer live hands on UX training.

Bạn cũng có thể đăng ký một trong các khóa học UX của chúng tôi, nơi cung cấp đào tạo UX trực tiếp, thực hành.

Subtitles ListPlay Video

Skeleton Screens vs. Thanh Tiến trình vs. Biểu tượng Xoay (Skeleton Screens vs. Progress Bars vs. Spinners)

subscribe

cognitive

process

content