Sự xuất hiện đúng chỗ của hamburger icon trong 20 thiết kế web

Hamburger icon là một trong những tính năng UI không còn mới mẻ gì với mọi thiết kế website chuyên nghiệp ngày nay. Sau khi tìm kiếm một thời gian, hóa ra hamburger icon đến từ khu vực làm việc cá nhân của Xerox Star.

Mục lục bài viết

Đó là một trong những giao diện đồ họa người dùng ra đời sớm nhất. Người thiết kế của nó, Norm Cox đã thiết kế giao diện của hệ thống bao gồm icon này. Hamburger icon trông giống như một danh sách và là cách tuyệt vời để nhắc nhở người dùng về một lmenu list.

Giờ đây hamburger icon được sử dụng để tiết kiệm không gian trên màn hình và dùng làm ký hiệu cho menu ẩn. Vô số website với video nền và ảnh nền toàn trang xuất hiện trên internet. Hamburger icon chính là lựa chọn tối ưu cho tất cả các kiểu nền trang sử dụng ảnh và video. Khi bạn đã có một phần nền hoặc bố cục quá hoàn hảo, bất kỳ thành phần nào được thêm vào sau đó đều có khả năng phá vỡ sự cân bằng và hài hòa mà bạn đã tạo ra trước đó. Vì vậy nút bấm hamburger xuất hiện và chỉ chiếm một diện tích khiêm tốn nhưng không hề mờ nhạt trên trang.

Khi bạn click vào nút bấm này, nó sẽ cho phép điều hướng đến menu của website. Menu ẩn này sẽ chỉ xuất hiện trên màn hình khi có tác động của bạn, điều này cũng tạo ra một sự tương tác với người dùng website, cho họ quyền được tự tạo ra trải nghiệm người dùng cá nhân.

Thông thường hamburger icon được đặt ở vị trí trên cùng bên trái hoặc bên phải của trang để thuận tầm mắt của người dùng web. Trường hợp cá biệt có thể đặt ở chính giữa website. Để tạo sự nổi bật cho chi tiết nhỏ bé này, người ta sẽ chọn màu sắc tương phản với nền cho nút bấm này hoặc một cách nữa là đặt nút bấm này trong một khối đặc nhỏ bao quanh để nó khác biệt hẳn. Như vậy, tuy rằng hình dáng cơ bản chỉ có 3 đường kẻ ngang song song, nhưng chúng ta vẫn có vô số kiểu thiết kế hamburger icon để phù hợp với từng trường hợp website cụ thể.

Có thể nói biểu tượng hết sức đơn giản này đã trở thành biểu tượng có tính quốc tế với cộng đồng thiết kế web nói riêng và với công chúng nói chung. Ai cũng sẽ hiểu ý nghĩa của icon này và như một phản xạ tự nhiên, họ sẽ đưa mắt tìm icon khiêm tốn đó ở một góc quen thuộc trên màn hình khi có nhu cầu duyệt web sâu hơn. Chúng tôi chọn ra 20 thiết kế website thông minh nhờ sử dụng hợp lý nút bấm hamburger để đại diện cho menu ẩn. Hãy cuộn trang cùng chúng tôi và khám phá!