bgware

25 website có thanh quá trình (progress bar) độc đáo

Progress Bar là một chi tiết đồ họa nhỏ trong thiết kế web , có tác dụng khiến cho người xem dễ dàng hiểu được tiến trình của hành động đang xảy ra trên website. Thật nhàm chán biết bao nếu như bạn phải nhìn vào một trang trắng nhạt nhẽo khi ngồi chờ load một trang web, load một video hoặc tải một cái gì đó trên website.

Trên thực tế, nhiều người đã phải trải qua cảm giác đó. Tuy nhiên, thật tốt là nhiều website đã hiểu được hoàn cảnh này của người xem và thiết kế thành phần progress bar để mang lại sự dễ chịu cho người dùng web trong khoảng thời gian chờ đợi. Cho dù khoảng thời gian đó có ngắn hay dài, nó cũng khiến người xem cảm giác thời gian không trôi qua vô vị. 

Với sự tiến bộ của công nghệ thiết kế web, thanh tiến trình progress bar cũng có những cải tiến đáng kể. Không còn đơn thuần là những thanh ngang hiện tỷ lệ phần trăm hoàn thành công việc  nữa mà giờ đây, với sự sáng tạo của mình, các chuyên gia thiết kế đã tạo ra những kiểu progress bar rất thú vị và gây hứng thú cho người xem. Người ta có thể tạo progress bar quay theo hình tròn, theo đường thẳng, quá trình load xong một hình ảnh và rất nhiều cách khác mà con người có thể nghĩ ra.

Trong chủ đề của ngày hôm nay, chúng ta sẽ đến với 25 mẫu progress bar sáng tạo mang lại cảm hứng cho người dùng web và đồng thời giúp thiet ke trở nên thân thiện và sinh động hơn rất nhiều. Để trải nghiệm chính xác cách hoạt động của progress bar, hãy click chuột vào ảnh để đến với progress bar của mỗi website. 

Chúng tôi mong rằng sau khi trải nghiệm 25 website dưới đây, bạn sẽ có được ý tưởng tạo progress bar độc đáo hơn cho dự án thiết kế website của chính mình. 

1. Daniel Portuga

creative-progress-bars-designs

2. Aurora Imagens

creative-progress-bars-designs

3. Monster Playground

creative-progress-bars-designs

4. ACNPL/WGL

creative-progress-bars-designs

5. Chickenbot

creative-progress-bars-designs

6. Velvet Hammer

creative-progress-bars-designs

7. Talk PR

Creative-progress-bars-designs

8. Big Hero 6

creative-progress-loading-bar-designs

9. Blancpain Ocean Commitment

creative-progress-bars-designs

10. Wee

creative-progress-bars-designs

11. Digital Zoo

creative-progress-bars-designs

12. Cutest Paw

creative-progress-bars-designs

13. Monte Saline

creative-progress-bars-designs

14. Mathilde Jacon

c

15. Evinrude

creative-progress-bars-designs

16. Longchamp

creative-progress-bars-designs

17. Zoe Flowever

creative-progress-bars-designs

18. Give Holland a Break

creative-progress-bars-designs

19. Studio Brusco

creative-progress-bars-designs

20. Eleks

creative-progress-bars-designs

21. All About David

creative-loading-bar-designs

22. Sokruta

creative-progress-bars-designs

23. BullDog Studio

creative-progress-bars-designs

24. Gol Cumunicacion

creative-progress-bars-designs

25. The One

creative-progress-bars-designs

Ngoài ra trong các trường hợp khác nhau mà ta có loadbar khác nhau, ví dụ trong một mẫu thiết kế website khách sạn ta có thể dùng một icon khách sạn quay tròn hoặc hiển thị từng khối trong icon ra màn hình. Chúc bạn thành công !

Tác giả: Phùng Thanh Hằng
Nguồn tin: CÔNG TY TNHH NGÔI SAO SỐ
Tổng số điểm của bài viết là: 0 trong 0 đánh giá
Click để đánh giá bài viết

Mới đăng

Cách xử lý thông minh của 25 website giàu nội dung

Cách xử lý thông minh của 25 website giàu nội dung

Thiết kế website cho tạp chí hoặc trang tin tức là một nhiệm vụ không hề đơn giản, kể cả với những chuyên gia thiết kế web có kinh nghiệm.

Giới thiệu 50 website thương mại điện tử sáng sủa và hiện đại

Giới thiệu 50 website thương mại điện tử sáng sủa và hiện đại

Dưới đây là ví dụ về 50 website thương mại điện tử (e-commerce) của nhiều công ty khác nhau. Tất cả chúng đều là những tên tuổi không lớn, nhưng trong 50 thiết kế web của họ đều thể hiện sử đầu tư nghiêm túc và chuyên nghiệp.

Sáng tạo với 20 mẫu Contact form trong thiết kế web

Sáng tạo với 20 mẫu Contact form trong thiết kế web

Trong bài này, chúng tôi mang đến bạn bộ sưu tập những mẫu contact form (form liên hệ) để áp dụng cho thiết kế web của bạn.

Quay lại trang Blog
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây