Giao diện điều hướng tốt thực sự cần làm gì
Trước khi đi qua 10 ví dụ về điều hướng trang web, ba công việc bằng tiếng Anh đơn giản mà thanh điều hướng của bạn phải làm:
- Cho khách truy cập biết họ đang ở đâu. Một chỉ báo trang hiện tại rõ ràng là yếu tố cơ bản bị bỏ qua nhiều nhất trong thiết kế web hiện đại.
- Cho họ biết những gì khác tồn tại. Một khách truy cập trên trang X nên có thể hình dung phần còn lại của trang web của bạn mà không cần nhấp vào.
- Lấy họ đến trang tiếp theo trong một hoặc hai lần nhấp. Nhiều hơn thế sẽ gây cản trở; ít hơn có thể có nghĩa là bạn đang che giấu điều gì đó mà họ cần.
Hầu hết các ví dụ về điều hướng trang web dưới đây đều đáp ứng đầy đủ ba điều này. Những ví dụ không làm được (Wikipedia, có chủ đích) lại thú vị chính vì nơi chúng vi phạm quy tắc.
10 Ví dụ về Điều hướng Trang Web ở Các Mức Độ Khó Khác Nhau
10 ví dụ về điều hướng trang web dưới đây được sắp xếp theo loại vấn đề mà chúng giải quyết, không phải theo phong cách trực quan. Chúng bao gồm hầu hết các mẫu bạn sẽ gặp — thanh menu toàn cục, menu mega, thanh bên, breadcrumb, thanh dưới di động, điều hướng trong nội dung, v.v. Nếu bạn đang tìm kiếm các ví dụ về menu điều hướng ở quy mô vượt ra ngoài một trang thương mại điện tử thông thường, đây là bộ tài liệu tham khảo.
1. GOV.UK — Khi Bạn Phải Hỗ Trợ 67 Triệu Người Cùng Một Lúc
Loại: Cổng dịch vụ chính phủ
Tại sao nó đáng để nghiên cứu: Có thể là kiến trúc thông tin được kiểm tra nhiều nhất trên thế giới.
GOV.UK là cổng thông tin số cho chính phủ Vương quốc Anh. Nó phục vụ công dân, doanh nghiệp và du khách qua 25+ bộ phận và hàng nghìn dịch vụ — từ "cập nhật hộ chiếu của tôi" đến "đăng ký cái chết" đến "thiết lập một doanh nghiệp mới." Điều hướng phải làm cho tất cả những điều này dễ tìm mà không làm cho khách truy cập căng thẳng và vội vã.
Giải pháp là sự rõ ràng tuyệt đối. Trang chủ không có menu mega, không có hình ảnh nổi bật, không có hero. Nó chỉ có thanh tìm kiếm, danh sách các nhiệm vụ "Phổ biến trên GOV.UK" và danh sách phân loại ("Lợi ích", "Sinh, chết, kết hôn và chăm sóc", "Chăm sóc trẻ em và nuôi dạy con", v.v.). Đó là tất cả.
Điều dưới bề mặt cũng có thể dạy bạn nhiều điều. GOV.UK đã tiên phong "điều hướng theo bước" — cho các hành trình toàn bộ như *Học lái xe*, trang web hiển thị các bước được đánh số trong thanh bên, mỗi bước liên kết đến nội dung phù hợp. Bạn luôn biết mình đang ở đâu trong quy trình và điều gì sẽ đến tiếp theo.
Ba điều bạn có thể học hỏi:
- Sử dụng nhãn danh mục bằng ngôn ngữ đơn giản, không phải nhãn theo cấu trúc tổ chức nội bộ. "Lợi ích" tốt hơn "Dịch vụ DWP." "Tiền và thuế" tốt hơn "Hoạt động của Cơ quan Thuế và Hải quan Anh." Viết nhãn điều hướng cho khách truy cập, không phải cho các bộ phận.
- Thanh tìm kiếm là phương tiện điều hướng cho các trang web có nội dung phong phú. Khi bạn có hàng nghìn trang, tìm kiếm nhanh hơn so với lướt web. Hãy làm nó nổi bật, nhanh và dễ chịu với lỗi chính tả.
- Điều hướng theo bước cho các nhiệm vụ nhiều trang. Nếu công việc của khách truy cập mất 5+ trang để hoàn thành, hãy cung cấp cho họ thanh bên được đánh số cho biết họ đang ở đâu. Đó là một thay đổi nhỏ nhưng có tác động lớn đến tỷ lệ hoàn thành.
2. MoMA — Vấn đề "Hai Đối Tượng, Một Trang Web"
Loại: Bảo tàng / tổ chức văn hóa
Tại sao nó đáng để nghiên cứu: Giải quyết vấn đề điều hướng cho hai đối tượng một cách sạch sẽ.
Trang web của MoMA phục vụ hai đối tượng hoàn toàn khác nhau với các công việc khác nhau. Người dùng bình thường muốn xem triển lãm, lập kế hoạch cho chuyến thăm bảo tàng, mua vé. Các nhà nghiên cứu và giáo viên muốn truy cập sâu vào bộ sưu tập, xuất bản, tài liệu học thuật. Điều hướng phải cung cấp cho cả hai nhóm điểm vào sạch sẽ mà không làm đơn giản hóa phần học thuật hoặc chôn giấu phần lập kế hoạch chuyến thăm.
Thiết kế lại năm 2019 đã giải quyết vấn đề này bằng hai lớp. Thanh điều hướng chính ngang sử dụng các nhãn đơn giản — Tham quan, Triển lãm, Sự kiện, Nghệ thuật và Nghệ sĩ, Cửa hàng, Tạp chí — phù hợp cho cả hai đối tượng. Mỗi nhãn mở ra một menu thả xuống có phân chia thành các nhiệm vụ "chính" và "thứ cấp". Nghệ thuật và Nghệ sĩ dẫn đến cả trình duyệt bộ sưu tập dành cho công chúng và các công cụ nghiên cứu sâu.
Quy tắc "kiểm tra Rauschenberg" nổi tiếng — nội bộ, đội ngũ yêu cầu rằng tên nghệ sĩ dài nhất trong bộ sưu tập (Rauschenberg) phải vừa vào bất kỳ hộp điều hướng nào ở bất kỳ độ rộng màn hình nào — là một nguyên tắc mà hầu hết các trang web nên học hỏi.
- Chia menu thả xuống thành các nhiệm vụ "chính" và "sâu". Người dùng bình thường nhận được các tùy chọn hiển thị; người dùng chuyên nghiệp nhận được các liên kết ở cuối menu thả xuống. Cùng một thanh điều hướng, hai độ sâu.
- Thiết lập một bài kiểm tra "nhãn dài nhất" cho các hộp điều hướng. Dù bạn có tương đương với "Rauschenberg" là gì — tên sản phẩm dài nhất, tiêu đề dịch vụ dài nhất, danh mục bài viết dài nhất — hãy đảm bảo nó vừa vào mọi điểm phá vỡ. Nhãn điều hướng bị cắt nghĩa là dấu hiệu của sự thiếu chuyên nghiệp.
- Chữ in đậm thay vì biểu tượng cho thanh điều hướng chính. Thanh điều hướng của MoMA không sử dụng biểu tượng ở cấp độ đầu tiên. Các nhãn đảm nhận toàn bộ công việc. Biểu tượng chỉ làm rối mắt trừ khi chúng thực sự được hiểu toàn cầu (tìm kiếm, giỏ hàng, tài khoản).
3. IKEA — Menu Mega Hoạt Động Thực Sự
Loại: Thương mại điện tử với danh mục lớn (12.000+ sản phẩm)
Tại sao nó đáng để nghiên cứu: Một menu mega được thực hiện đúng cách, khi phần lớn các trang khác thực hiện kém.
Menu mega có danh tiếng xấu vào năm 2026 - quá nhiều trang sử dụng chúng như nơi đổ dồn mọi liên kết mà đội ngũ không thể quyết định đưa đi đâu. IKEA cho thấy chúng trông như thế nào khi được sử dụng đúng cách. Thanh điều hướng trên có chỉ năm mục: Sản phẩm, Phòng, Khuyến mãi, Hơn nữa, Duyệt cửa hàng. Khi di chuột vào "Sản phẩm", một bảng phân loại hiện ra, hiển thị mỗi danh mục nội thất với hình ảnh sản phẩm nhỏ như điểm nhấn thị giác.
Sự tinh tế nằm ở những gì không có ở đó. Không có "Về chúng tôi." Không có "Bền vững." Không có "Phòng tin tức." Không có "Cơ hội nghề nghiệp." Những mục này tồn tại trên trang - nhưng ở cấp độ chân trang, không cạnh tranh với luồng mua sắm.
Ba điều nên học hỏi:
- Dành chỗ cho các đường dẫn doanh thu trên thanh điều hướng đầu. Không gì trên thanh điều hướng đầu nên cạnh tranh với luồng chuyển đổi. Nội dung về chúng tôi, cơ hội nghề nghiệp, báo chí - tất cả đều thuộc thanh điều hướng chân trang.
- Sử dụng hình ảnh sản phẩm như điểm nhấn thị giác trong menu mega. Một hình ảnh nhỏ bên cạnh mỗi danh mục trong menu mega giúp khách truy cập nhận biết nhanh hơn những gì họ đang tìm kiếm so với các menu chỉ có nhãn. Đặc biệt hiệu quả với các sản phẩm mang tính thị giác.
- Phân loại theo phòng là một cấu trúc IA thứ cấp thông minh. "Phòng khách / phòng ngủ / nhà bếp" là cách khách hàng nghĩ về nội thất. "Sofa / ghế / bàn" là cách danh mục được tổ chức. IKEA phơi bày cả hai - cho phép khách hàng mua sắm theo mô hình suy nghĩ của họ, không phải cây SKU của công ty. Đây là một trong những ví dụ rõ ràng nhất về thiết kế điều hướng trang web quy mô lớn trong bán lẻ.
4. BBC Sport - Điều hướng thích ứng với sự kiện trực tiếp
Loại: Truyền thông tin tức và nội dung trực tiếp
Tại sao nó đáng để nghiên cứu: Thanh điều hướng ở dưới với dữ liệu tác động đo lường được.
Nhóm phát triển ứng dụng BBC Sport đã công bố một nghiên cứu trường hợp công khai về việc chuyển sang thanh điều hướng ở dưới trên điện thoại di động. Kết quả: 7,4% nội dung được tiêu thụ nhiều hơn với mô hình mới, được xác minh thông qua một thử nghiệm đa biến kéo dài 4 tuần. Đây là một trong những ví dụ điều hướng di động hiếm hoi có dữ liệu tăng trưởng thực tế và được công bố.
Trang web trên máy tính để bàn sử dụng thanh điều hướng ngang và thay đổi trong các sự kiện lớn - trong Thế vận hội, Cúp thế giới, Đại hội Thể thao Cộng hòa, một liên kết tạm thời "Thế vận hội 2024" hoặc "Euro 2026" trượt vào như một mục cấp cao, sau đó biến mất khi sự kiện kết thúc. Điều hướng động liên kết với các sự kiện thực tế là hiếm; hầu hết các trang web không thay đổi thanh điều hướng trong nhiều năm.
Ba điều nên học hỏi:
- Thanh điều hướng ở dưới trên điện thoại di động hiệu quả hơn thanh điều hướng ở trên. Các điện thoại hiện đại quá cao để chạm vào đầu màn hình là thoải mái. Ngón tay cái tự nhiên nghỉ ở dưới.
- Thử nghiệm thay đổi điều hướng dựa trên các chỉ số tiêu thụ nội dung, không phải số lần nhấp vào thanh điều hướng. Chỉ số thành công đúng cho các thay đổi điều hướng là "người dùng có đọc/xem/mua nhiều hơn không?" - không phải "người dùng có nhấp vào thanh điều hướng nhiều hơn không?"
- Tạo không gian cho các mục điều hướng có thời hạn. Nếu doanh nghiệp của bạn có những khoảnh khắc mùa vụ (sự kiện, khuyến mãi, chiến dịch), hãy tích hợp vào cấu trúc thanh điều hướng khả năng hiển thị một mục tạm thời mà không cần phải thay đổi toàn bộ hệ thống.
5. Wikipedia - Khi thanh điều hướng bên cạnh vẫn là lựa chọn đúng đắn
Loại: Bách khoa toàn thư / trang thông tin (60 triệu bài viết trở lên)
Tại sao nó đáng để nghiên cứu: Đi ngược lại mọi quy ước hiện đại và hoạt động hoàn hảo.
Wikipedia là một trong những trang web được truy cập nhiều nhất thế giới. Điều hướng của nó: thanh bên chứa các liên kết trên mỗi bài viết (*Nội dung, Đầu, Xem thêm, Tài liệu tham khảo, Liên kết bên ngoài*), thanh điều hướng toàn cục ở cạnh trái (*Trang chủ, Bài viết ngẫu nhiên, Về Wikipedia, Liên hệ với chúng tôi*), và bảng nội dung trong bài viết. Không có thanh điều hướng ngang ở đầu. Không có menu mega. Không có thanh điều hướng hamburger làm việc thay cho họ trên máy tính để bàn.
Đây là điều gây sốc theo các quy ước thiết kế vào năm 2026 - và vẫn có hàng trăm triệu người dùng điều hướng Wikipedia một cách thoải mái mỗi ngày. Bài học: các quy ước điều hướng tồn tại vì chúng giúp hầu hết các trang web; chúng không phải là luật tự nhiên. Nếu đối tượng của bạn là người nghiên cứu và nội dung của bạn mang tính phân cấp (bài viết → phần → tài liệu tham khảo), các ví dụ điều hướng thanh bên cổ điển như của Wikipedia vẫn vượt trội so với các lựa chọn thời thượng hơn. Đây là ví dụ điều hướng trang web ít trực quan nhất trong hướng dẫn này và có lẽ là bài học hữu ích nhất.
Ba điều nên học hỏi:
- Một bảng nội dung bên trong nội dung dài là điều hướng. Các bài viết dài, tài liệu hướng dẫn và nội dung tham khảo sẽ được hưởng lợi từ bảng nội dung bên trong, dính theo khi người dùng cuộn. Đây là một phần điều hướng mà hầu hết các blog quên thêm.
- Đừng thêm thanh điều hướng mà khán giả của bạn không cần. Người dùng Wikipedia không duyệt theo danh mục - họ tìm kiếm hoặc theo liên kết. Vì vậy, Wikipedia không quan tâm đến thanh điều hướng danh mục lớn. Kiểm tra xem thanh điều hướng của bạn có phục vụ các mẫu truy cập thực tế của bạn hay không.
- Thanh điều hướng chân trang có thể thay thế thanh điều hướng trên trang cho các trang có nội dung nhiều. Khi phần thân bài viết là toàn bộ trải nghiệm, thanh điều hướng phụ nên ở dưới hoặc trong thanh bên - không phải ở trên, nơi nó cạnh tranh với nội dung để thu hút sự chú ý.
6. NYT Cooking - Lọc như là thanh điều hướng
Loại: Nội dung đăng ký + công cụ
Tại sao nó đáng để nghiên cứu: Lọc là thanh điều hướng chính, và nhãn là thanh điều hướng phụ.
Trang chủ của NYT Cooking không mở bằng danh mục - nó mở bằng thanh tìm kiếm, sau đó là hàng trượt ngang của các bộ sưu tập được chọn lọc (*30-Minute Meals, Easy Weeknight, Vegetarian, Comfort Food*). Thanh điều hướng trên truyền thống (*Recipes, Collections, Saved Recipes, Shopping*) vẫn ở đó nhưng không phải cơ chế khám phá chính. Cơ chế chính là lọc: một loạt các bộ lọc (ẩm thực, chế độ ăn, dịp, thời gian, nguyên liệu) giúp thu hẹp dần toàn bộ danh mục.
Đây là mô hình mà nhiều trang nội dung nên cân nhắc. Khi thư viện của bạn lớn và mục đích của người truy cập là khám phá ("tôi nên nấu gì?"), bộ lọc và các bộ sưu tập được chọn lọc hiệu quả hơn cây danh mục.
Ba điều nên học hỏi:
- Các bộ sưu tập được chọn lọc cũng là thanh điều hướng. Một hàng trượt ngang của "Đề xuất của biên tập viên" hoặc "Đang nổi bật" hữu ích hơn thanh điều hướng 6 mục cho người dùng không có đích đến cụ thể.
- Phân loại theo bộ lọc là thanh điều hướng cho mọi trang có hơn 200 mục. Nếu bạn có một trang công thức, thư viện nội dung, danh mục khóa học hoặc bộ sưu tập sản phẩm - đầu tư nhiều hơn vào giao diện bộ lọc thay vì giao diện thanh điều hướng. Bộ lọc mở rộng theo nội dung của bạn; thanh điều hướng thì không.
- Lưu / đánh dấu là một tính năng điều hướng, không phải là một tính năng. Một danh sách "lưu sau" mà người dùng chủ động chọn lọc là bề mặt điều hướng có giá trị nhất trên một trang nội dung.
7. GitHub Docs - Điều hướng Tài liệu Hoàn hảo
Loại: Tài liệu kỹ thuật (3.000 trang trở lên)
Tại sao nó đáng để nghiên cứu: Tài liệu tham khảo cho bất kỳ kiến trúc thông tin kiểu tài liệu nào.
GitHub Docs phục vụ các nhà phát triển ở mọi cấp độ - người mới bắt đầu học cách sao chép một repo, đến các kỹ sư cấp cao đang gỡ lỗi một quy trình Actions. Thanh điều hướng là bố cục ba cột: sản phẩm và chủ đề ở bên trái, bài viết ở giữa, bảng nội dung trong trang ở bên phải. Thanh điều hướng bên trái có thể thu gọn theo từng phần, bảng nội dung bên phải cập nhật khi bạn cuộn, và các đường dẫn ở trên bài viết cho bạn biết chính xác bạn đang ở đâu.
Chi tiết quan trọng: trạng thái thanh điều hướng được lưu giữ. Nếu bạn thu gọn "GitHub Actions" → "Building and testing" vì bạn không quan tâm đến nó, phần đó sẽ vẫn thu gọn khi bạn nhấp vào một chủ đề khác. Hầu hết các trang tài liệu đặt lại trạng thái trên mỗi lần điều hướng, buộc người truy cập phải thu gọn cùng một thứ liên tục.
Ba điều nên học hỏi:
- Bố cục ba cột hoạt động cho tài liệu, đơn giản là vậy. Thanh điều hướng bên trái cho cấu trúc sản phẩm, nội dung trung tâm, bảng nội dung trong trang bên phải. Đừng tự sáng tạo lại cho các trang tài liệu - hãy sao chép nó.
- Lưu trạng thái thanh điều hướng qua các lần tải trang. Dù người dùng đã mở rộng, thu gọn, lọc hoặc sắp xếp thế nào - hãy giữ nguyên cho đến khi họ thay đổi. Cookie hoặc
localStoragelà được. - Đường dẫn điều hướng là bắt buộc cho nội dung có cấu trúc phân cấp. Nếu người dùng của bạn sâu đến 4 cấp, họ cần thấy con đường quay lại trang đầu. Đường dẫn điều hướng là tính năng điều hướng rẻ nhất bạn có thể thêm và hầu như luôn mang lại lợi nhuận.
8. MIT - Trang giáo dục đa người dùng lớn
Loại: Trường đại học / tổ chức đa người dùng
Tại sao nó đáng để nghiên cứu: Tám nhóm người dùng khác nhau, một thanh điều hướng nhất quán.
Trang web của MIT phục vụ các sinh viên tiềm năng, sinh viên hiện tại, giảng viên, cựu sinh viên, nhà tài trợ, nhà nghiên cứu, nhà báo và công chúng tò mò - tám nhóm người dùng khác nhau với tám tập hợp nhu cầu riêng. Thanh điều hướng xử lý điều này thông qua mô hình "cho...". Thanh điều hướng trên nhỏ (Giáo dục, Nghiên cứu, Đổi mới, Tuyển sinh và Hỗ trợ, Cuộc sống trên khuôn viên, Tin tức, Cựu sinh viên, Về chúng tôi), nhưng một danh sách thả xuống "Liên kết Nhanh" hiển thị các nhiệm vụ phổ biến nhất theo loại người dùng ("Đăng ký MIT," "Đăng ký học bổng," "Tham quan khuôn viên," "Tài trợ").
Trang chủ hero xoay quanh nội dung dành riêng cho từng nhóm người dùng thay vì chọn một thông điệp chính duy nhất - chấp nhận rằng không có thông điệp nào quan trọng nhất để nói với tám nhóm người dùng cùng lúc.
Ba điều nên học hỏi:
- Danh sách "Liên kết Nhanh / Liên kết Phổ biến" vượt trội hơn việc cố gắng đưa tất cả vào thanh điều hướng trên. Một danh sách thả xuống nhỏ của "những gì nhiều người đang làm ở đây" hiệu quả hơn thanh điều hướng trên có 12 mục.
- Đối với các trang web phục vụ nhiều đối tượng, hãy chấp nhận rằng trang chủ sẽ xoay vòng. Đừng cố gắng tìm ra một thông điệp duy nhất phục vụ tất cả các đối tượng của bạn. Xoay nội dung tiêu đề theo đối tượng hoặc theo thời điểm truy cập.
- Các subdomain riêng cho người dùng chuyên nghiệp. MIT có
studentlife.mit.edu,news.mit.edu,alum.mit.edu— mỗi trang có thanh điều hướng được tối ưu cho đối tượng đó. Trang.educhính là cửa trước; các subdomain là các phòng.
9. Decathlon — Khi Các Ngành Thể Thao Chính Trị Thay Đổi Menu Chính
Loại: Bán lẻ thể thao đa ngành (trên 90 môn thể thao)
Tại sao nó đáng để nghiên cứu: Menu chính được tổ chức theo môn thể thao, không phải theo loại sản phẩm.
Decathlon bán sản phẩm cho hơn 90 môn thể thao — chạy, đạp xe, bơi lội, leo núi, câu cá và nhiều môn khác. Hầu hết các cửa hàng thể thao tổ chức thanh điều hướng theo loại sản phẩm (giày / quần áo / thiết bị). Decathlon tổ chức theo môn thể thao. Di chuột vào "Thể thao" và bạn sẽ nhận được danh sách được phân loại: Đạp xe, Chạy, Trekking, Thể dục, Thể thao nước, Thể thao đồng đội, Thể thao núi, Thể thao đối kháng. Nhấp vào "Đạp xe" và bạn sẽ nhận được đường phố, núi, thành phố, trẻ em — sau đó trong mỗi mục, các thiết bị phù hợp.
Điều này phù hợp với cách khách hàng thực sự suy nghĩ. Một người mua giày chạy không nghĩ "Tôi đang ở phòng giày"; họ nghĩ "Tôi là vận động viên chạy." Thanh điều hướng phù hợp với mô hình tư duy.
Ba điều cần học hỏi:
- Tổ chức theo trường hợp sử dụng, không phải theo loại SKU. Nếu khách hàng của bạn xác định theo hoạt động, nghề nghiệp hoặc công việc cần hoàn thành, hãy tổ chức thanh điều hướng xung quanh điều đó, không phải theo danh mục kho hàng của bạn.
- Định dạng thanh điều hướng, không chỉ ngôn ngữ. Trang web Decathlon tại Pháp bắt đầu bằng đạp xe và bóng đá; trang web tại Mỹ bắt đầu bằng trekking và chạy. Các ưu tiên thể thao khác nhau theo quốc gia, và thanh điều hướng phản ánh điều đó.
- Hình ảnh thanh điều hướng nên báo hiệu danh mục, không chỉ trang trí. Decathlon sử dụng các hình ảnh hành động nhỏ (người đạp xe, người chạy, người trekking) bên cạnh mỗi danh mục thể thao — người truy cập nhận ra hoạt động của họ ngay lập tức. Hình ảnh như một công cụ điều hướng, không phải chỉ để trang trí.
10. Smashing Magazine — Điều Hướng Nội Dung Tôn Trọng Ý Đồ Người Đọc
Loại: Xuất bản web thiết kế / phát triển
Tại sao nó đáng để nghiên cứu: Tôn trọng cách người đọc thực sự tiêu thụ nội dung dài.
Thanh điều hướng của Smashing Magazine nhỏ (*Tạp chí, Bài viết, Sách, Podcasts, Sự kiện, Thành viên*), nhưng mỗi bài viết đều có điều hướng nội bộ: bảng nội dung dính, menu nhảy "trong bài này", ước tính thời gian đọc, và khối tác giả dính với liên kết đến "Tác giả khác." Bài viết là bề mặt điều hướng, không phải thanh điều hướng toàn cục.
Đây là mô hình đúng cho nội dung dài. Người đọc đến từ Google không quan tâm đến thanh điều hướng toàn cục — họ quan tâm đến việc đi qua bài viết họ tìm thấy, sau đó có thể tìm nội dung tương tự. Smashing tối ưu hóa cho con đường chính xác này.
Ba điều cần học hỏi:
- Điều hướng trong bài viết tốt hơn thanh điều hướng toàn cục cho nội dung dài. Bảng nội dung dính, liên kết nhảy, "tác giả khác" — những thứ này tạo ra nhiều nhấp chuột hơn so với thanh điều hướng toàn cục trên các bài viết dài.
- Ước tính thời gian đọc là điều hướng. Biết "đọc 12 phút" trước khi quyết định giúp khách truy cập biết liệu có nên tham gia ngay hay lưu lại sau. Cả hai phản hồi đều là chiến thắng.
- "Nội dung liên quan theo chủ đề" hữu ích hơn "nội dung phổ biến tổng thể." Smashing hiển thị các bài viết liên quan theo thẻ, không theo độ phổ biến toàn cục. Người đọc đang đọc về CSS Grid muốn nhiều nội dung CSS Grid hơn là bài viết có lưu lượng truy cập cao nhất trên trang.
5 Sai Lầm Thường Gặp Làm Hỏng Điều Hướng
Sau khi xem 10 ví dụ điều hướng trang web mạnh mẽ ở trên, các mô hình thất bại trở nên nhất quán. Hầu hết các trang web hoạt động kém đều thất bại ở ít nhất một trong những điều sau — và hầu hết những lỗi này cũng là điều phân biệt các ví dụ điều hướng trang web hoạt động với những trang không hoạt động:
- Menu hamburger trên máy tính để bàn. Ẩn điều hướng sau ba thanh trên màn hình 1440px là lãng phí không gian bạn có. Sử dụng nó. Menu hamburger là dành cho điện thoại di động (và chỉ sử dụng hạn chế ngay cả ở đó).
- Quá nhiều mục cấp cao. Nếu thanh điều hướng cấp cao của bạn có 9 mục trở lên, kiến trúc thông tin của bạn bị hỏng từ đầu. Mục tiêu là 5–7 mục tối đa. Ngoài ra, nhóm lại thành một mục "Thêm".
- Đánh dấu mơ hồ. "Giải pháp" và "Nguồn lực" là những từ được nhấp nhiều nhất trong điều hướng B2B và ít hữu ích nhất. Viết rõ điều thực sự có trong đó: "Dành cho đội ngũ Marketing," "Câu chuyện khách hàng," "Hướng dẫn giá."
- Không có chỉ báo trang hiện tại. Người truy cập ở
/pricingnên thấy "Pricing" được nhấn mạnh trong thanh điều hướng. Đây là điều cơ bản và thường bị bỏ qua. - Thanh điều hướng dính quá cao. Một thanh đầu trang dính 96px trên điện thoại di động chiếm một phần ba màn hình. Giữ thanh điều hướng dính ở 56–64px tối đa, hoặc ẩn nó khi cuộn xuống và hiển thị khi cuộn lên.
Bảng tra cứu nhanh: Mẫu điều hướng nào phù hợp với trang web của bạn?
Tham khảo chéo 10 ví dụ về điều hướng trang web ở trên vào ma trận ra quyết định nhanh:
Loại trang | Mẫu được đề xuất | Tránh |
Trang đích (sản phẩm duy nhất) | Thanh điều hướng trên dính 3–5 mục + CTA rõ ràng | Menu mega, hamburger trên máy tính để bàn |
Thương mại điện tử (dưới 200 SKUs) | Thanh điều hướng trên với danh mục dropdown + tìm kiếm | Menu mega (quá mức) |
Thương mại điện tử (1.000+ SKUs) | Menu mega được tổ chức theo trường hợp sử dụng + bộ lọc | Dropdown dài phẳng |
Tài liệu hướng dẫn | Bố cục ba pane (thanh điều hướng dọc bên trái / nội dung / TOC bên phải) | Thanh điều hướng chỉ ở trên |
Nội dung / phương tiện | Thanh điều hướng trên + thanh điều hướng di động ở dưới + bộ lọc phân loại | Thanh điều hướng chỉ ở bên cạnh trên điện thoại |
Tổ chức đa đối tượng | Thanh điều hướng trên nhỏ + Liên kết nhanh + các phụ miền | Đưa tất cả các đối tượng vào một thanh điều hướng |
Bài viết dài | Thanh điều hướng toàn cục tối giản + thanh điều hướng trong bài viết mạnh (TOC dính, liên kết nhảy) | Thanh điều hướng toàn cục nặng, chiếm sự chú ý |
Ma trận này là phiên bản rút gọn để thiết kế menu trang web đúng cách - chọn hàng phù hợp với loại trang web của bạn và các quyết định điều hướng còn lại sẽ theo sau.
Làm thế nào để xây dựng điều hướng hoạt động với Wegic
Việc xây dựng điều hướng tốt thực sự không phải là một bài tập thiết kế - đó là một bài tập kiến trúc nội dung. Các nhãn và cấu trúc quan trọng hơn cách xử lý trực quan. 10 ví dụ điều hướng trang web ở trên đều chia sẻ sự kỷ luật này: chúng đã giành được danh tiếng của mình nhờ kiến trúc thông tin, không phải thiết kế trực quan.
Wegic là một hệ thống tăng trưởng trang web trí tuệ nhân tạo dựa trên trò chuyện tạo ra một trang web từ một bản tóm tắt trò chuyện, bao gồm cấu trúc điều hướng hợp lý dựa trên nội dung thực sự của trang web của bạn. Thay vì thêm trang và sau đó cố gắng đặt chúng vào mẫu điều hướng một cách khó xử, AI xây dựng kiến trúc thông tin từ mô tả của bạn.
Giai đoạn 1: Giới thiệu AI
Mở Wegic và trò chuyện với Kimmy, quản lý dự án AI của bạn. Sử dụng bất kỳ ví dụ nào trong 10 ví dụ trên làm tham khảo:
"Hãy tạo cho tôi một trang tài liệu giống GitHub Docs - bố cục ba pane, thanh điều hướng bên trái được nhóm theo sản phẩm, bảng nội dung trong trang bên phải, breadcrumb ở trên mỗi bài viết, trạng thái phần được thu gọn duy trì. Thanh tìm kiếm ở trên thanh điều hướng bên trái."
Hoặc cho một trang nội dung:
"Hãy tạo cho tôi một trang công thức với bộ lọc kiểu NYT Cooking. Thanh điều hướng trên với Recipes / Collections / Saved / Account. Trang chủ mở với thanh tìm kiếm, sau đó là các bộ sưu tập được chọn theo chiều ngang, sau đó là bộ lọc theo ẩm thực / chế độ ăn / thời gian / nguyên liệu."
Giai đoạn 2: Lắp ráp AI trong dưới một phút
Wegic tạo ra một trang web đa trang đáp ứng hoàn toàn với mô hình điều hướng được mô tả - dính trên máy tính để bàn, ở dưới màn hình trên điện thoại di động, breadcrumb ở nơi thích hợp, chỉ báo trang hiện tại. Đối với hướng dẫn từng bước về luồng tạo trò chuyện, xem hướng dẫn sử dụng Wegic.
Giai đoạn 3: Chỉnh sửa bằng trò chuyện
"Thêm một danh sách thả xuống Quick Links vào thanh điều hướng trên với 6 nhiệm vụ phổ biến nhất. Di chuyển thanh điều hướng di động xuống dưới màn hình. Thêm breadcrumb cho tất cả các trang con."
Wegic đề xuất 2–3 tùy chọn thiết kế trước khi áp dụng - vì vậy bạn không làm hỏng trạng thái điều hướng của mình một cách tình cờ.
Giai đoạn 4: Xuất bản với dịch vụ lưu trữ đi kèm
Nhấn Xuất bản. Dịch vụ lưu trữ, tên miền tùy chỉnh,
sitemap.xml được tạo tự động và dữ liệu SEO đều được bao gồm. Để so sánh cách Wegic so sánh với các công cụ AI khác về kiến trúc thông tin cụ thể, xem bài đánh giá chi tiết của chúng tôi về 5 công cụ thiết kế web AI . Để lấy cảm hứng hơn nữa ở các danh mục khác, xem bộ sưu tập trang web đẹp của chúng tôi.
Kết luận: Các ví dụ điều hướng trang web tốt nhất là vô hình
Tất cả 10 ví dụ điều hướng trang web trong hướng dẫn này đều chia sẻ một đặc điểm - tại bất kỳ thời điểm nào, người truy cập không cần suy nghĩ về cách di chuyển. Mỗi liên kết đều ở nơi họ kỳ vọng. Mỗi nhãn đều có nghĩa như nó nói. Mỗi trang cho họ biết họ đang ở đâu và điều gì tiếp theo.
Đó là tiêu chuẩn. Điều hướng được coi là thành công khi không ai bình luận về nó. Chọn các mẫu từ các ví dụ điều hướng trang web ở trên phù hợp với loại trang web của bạn, sao chép với sự kỷ luật và kiểm tra lại bản thân theo năm sai lầm phổ biến. Kết quả sẽ vượt qua 90% đối thủ cạnh tranh - phần lớn trong số đó được xây dựng trên cùng những cảm hứng lặp lại.
Để lấy cảm hứng hơn nữa ở các danh mục khác, xem hướng dẫn ví dụ trang chủ trang web của chúng tôi và bộ sưu tập trang web đáp ứng của chúng tôi.
👇 Nhấp vào dưới đây để bắt đầu với Wegic
Câu hỏi thường gặp
Những nguyên tắc tốt nhất về điều hướng trang web quan trọng nhất là gì?
Sáu nguyên tắc điều hướng trang web phổ biến được rút ra từ 10 ví dụ điều hướng trang web ở trên: (1) giới hạn các mục cấp cao nhất ở 5–7; (2) sử dụng nhãn ngôn ngữ thông thường mà người dùng nhận biết, không phải nhãn nội bộ; (3) bao gồm chỉ báo trang hiện tại trên mỗi phần tử điều hướng; (4) hiển thị điều hướng breadcrumb trên bất kỳ trang nào sâu hơn hai cấp; (5) đảm bảo điều hướng di động sử dụng dưới màn hình cho các ứng dụng nội dung và hoạt động với một ngón tay; (6) đặt nội dung không chuyển đổi (Về, Việc làm, Báo chí) vào chân trang, không phải thanh điều hướng trên.
Khác biệt giữa điều hướng chính và điều hướng phụ là gì?
Khóa điều hướng chính là menu cấp cao nhất — 5–7 địa điểm quan trọng nhất trên trang web của bạn, xuất hiện trên mọi trang. Khóa điều hướng thứ cấp là tất cả những thứ còn lại: liên kết chân trang, bảng nội dung trong trang, các hàng "nội dung liên quan", breadcrumb, bộ lọc theo đặc điểm, thanh điều hướng bên trong các phần cụ thể. Lỗi phổ biến mà các trang web mắc phải là đặt điều hướng thứ cấp vào điều hướng chính, khiến thanh điều hướng trên trở nên khó đọc. Xác định điều gì là chính dựa trên mục đích của người truy cập, không phải chính trị nội bộ.
Mega menu có phải là ý tưởng tốt vào năm 2026 không?
Đôi khi. Ví dụ mega menu như của IKEA hoạt động vì trang web có 12.000+ sản phẩm thực sự cần phân loại. Mega menu thất bại khi các trang sử dụng chúng như nơi đổ xô cho các liên kết tổ chức không thuộc thanh điều hướng trên. Ba dấu hiệu cho thấy mega menu của bạn sai: (1) bạn có dưới 100 SKU nhưng có mega menu 4 cột; (2) mega menu chứa "Giới thiệu" hoặc "Thông tấn"; (3) các danh mục trong mega menu chỉ có 1–2 mục. Nếu bất kỳ điều nào đúng, hãy thay thế mega menu bằng thiết kế menu thả xuống đơn giản hơn hoặc chia nội dung sang điều hướng chân trang.
Thiết kế menu hamburger thì sao?
Mẫu menu hamburger phù hợp với di động (nơi không gian ngang bị hạn chế) nhưng không phù hợp với máy tính để bàn (nơi bạn thường có đủ không gian để hiển thị thanh điều hướng đầy đủ). Ngoại lệ: các trang web tập trung vào thương hiệu hoặc ứng dụng đơn trang nơi sự tối giản là toàn bộ thông điệp thiết kế. Đối với hầu hết các trang web B2B, thương mại điện tử, nội dung và SaaS, menu hamburger trên máy tính để bàn ẩn khả năng khám phá phía sau một lần chạm mà người truy cập phải đoán để thực hiện.
Tôi có nên sử dụng một thanh điều hướng dính?
Thanh điều hướng dính phù hợp khi người truy cập đang cuộn qua nội dung dài và có thể muốn điều hướng đến nơi khác trong khi cuộn. Nó phù hợp cho các bài viết dài, tài liệu và trang sản phẩm. Nó thừa đối với các trang tiếp thị ngắn. Ba quy tắc nếu bạn sử dụng nó: (1) giữ chiều cao thanh điều hướng dính tối đa 56–64px; (2) ẩn khi cuộn xuống, hiển thị khi cuộn lên để trả lại không gian màn hình; (3) đảm bảo thanh điều hướng dính có chỉ báo khu vực hiện tại nếu trang của bạn có nhiều phần liên kết.
Làm thế nào để xử lý điều hướng trên trang web có nội dung nặng?
Ba mô hình hoạt động, tùy thuộc vào loại nội dung. Đối với kiến trúc thông tin có cấu trúc phân cấp (ví dụ: tài liệu), sử dụng bố cục ba cột như GitHub Docs. Đối với nội dung khám phá (ví dụ: công thức, bài viết), sử dụng tìm kiếm + bộ sưu tập được chọn lọc + bộ lọc đặc điểm như NYT Cooking. Đối với nội dung tham khảo (ví dụ: bách khoa toàn thư, cơ sở kiến thức), sử dụng thanh điều hướng bên trái với bảng nội dung trong bài viết mạnh như Wikipedia. Hình dạng nội dung của bạn xác định loại điều hướng phù hợp, không phải ngược lại.
Loại điều hướng nào tốt nhất cho di động vào năm 2026?
Đối với ứng dụng nội dung và mạng xã hội, thanh điều hướng dưới hiệu quả hơn thanh điều hướng trên — chúng dễ tiếp cận hơn bằng ngón tay cái trên điện thoại hiện đại. Đối với thương mại điện tử, thanh điều hướng trên với menu hamburger và thanh tìm kiếm/giỏ hàng cố định hiệu quả hơn. Đối với tài liệu và trang tham khảo, ngăn trượt bên trái được kích hoạt từ menu hamburger hoạt động tốt nhất. Quy tắc duy nhất: không bao giờ tắt khả năng thu phóng bằng ngón tay trên di động, không bao giờ làm nhỏ mục chạm dưới 44×44 pixel. Cả hai đều là vi phạm tính khả dụng và lý do menu điều hướng đáp ứng của bạn sẽ thất bại trong kiểm tra di động.
Công cụ điều hướng nào tốt nhất cho các nhà thiết kế vào năm 2026?
Đối với các phòng trưng bày cảm hứng: Navbar.gallery, Footer.design, Land-book. Đối với thiết kế tương tác: thư viện thành phần và công cụ mô phỏng của Figma. Đối với kiểm tra: BrowserStack và kiểm tra trên thiết bị thực tế. Đối với triển khai: Tailwind UI, Headless UI, và Radix UI cung cấp các thành phần điều hướng khả dụng tuyệt vời. Đối với các nhà thiết kế không phải lập trình viên xây dựng từ đầu, các công cụ tạo trang web AI như Wegic tạo ra các mẫu điều hướng dựa trên mô tả nội dung của bạn thay vì bắt đầu từ mẫu — điều này thường tạo ra các ý tưởng điều hướng trang web tốt hơn so với việc chọn từ thư viện cố định.
