*** Tối ưu Offpage SEO nền tảng thành công SEO 2022 !
HOT **** Hướng dẫn tốt nhất về SEO Onpage 2022 !
Chú ý: Không chèn Link vô nghĩa trong bài viết !
Các thành viên bị lỗi đăng ký không gửi email vui lòng liên hệ Facebook: Lee Nam để được trợ giúp

Hamburger Icon sử dụng trong thiết kế website

Thảo luận trong 'Kiến thức' bắt đầu bởi Co Thuy Sinh, 11 Tháng bảy 2015.

  1. Co Thuy Sinh

    Co Thuy Sinh Thành viên chính thức

    Tham gia ngày:
    21 Tháng tư 2015
    Bài viết:
    29
    Đã được thích:
    8
    Hamburger Icon là gì?

    [​IMG]

    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. Đó 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.

    Mục đích sử dụng

    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.

    Vị trí đặt

    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ể.

    Chúng tôi chọn ra một số 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á!

    OUTDATED BROWSER

    [​IMG]

    POLLEN

    [​IMG]

    FLAT OR NOT

    [​IMG]

    Lời kết

    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.

    NGOI SAO SO - Sự xuất hiện đúng chỗ của Hamburger Icon trong 20 thiết kế web
    Nguồn:
    Mã:
    http://www.ngoisaoso.vn/news/Blog/Su-xuat-hien-dung-cho-cua-hamburger-icon-trong-20-thiet-ke-web-940/
    Last edited by a moderator: 4 Tháng tám 2016
    #1

Chia sẻ trang này