Thiết kế một ý tưởng và nguồn cảm hứng cho menu điều hướng chiến thắng
Menu điều hướng trên trang web giống như biển báo trên đường hoặc thư mục cấp trong trung tâm mua sắm. Bạn không thể đến đích mà không biết bạn đang ở đâu. Giống như trong cuộc sống thực, điều hướng trong thiết kế web rất quan trọng và đóng vai trò chính trong khả năng sử dụng của trang web cũng như trải nghiệm người dùng.
Ngày nay bạn có thể thấy rất nhiều loại menu điều hướng khác nhau với thiết kế thú vị, sáng tạo và khác thường. Nhưng làm thế nào về điều hướng hiệu quả trong một trang web, nó sẽ trông như thế nào; nó trông như thế nào?
Hôm nay tôi muốn chia sẻ những quan sát và kiến thức của tôi về tầm quan trọng của điều hướng trong thiết kế web. Tôi sẽ tiết lộ một vài mẹo đơn giản mà bạn có thể sử dụng để cải thiện khả năng điều hướng và khả năng sử dụng trang web của mình. Cũng sẽ có một số ví dụ về các menu điều hướng hiệu quả để cung cấp cho bạn một số ý tưởng về cách lập kế hoạch thiết kế tiếp theo của bạn.
Kiến trúc thông tin
Quy hoạch điều hướng nên bắt đầu với kiến trúc thông tin. Điều quan trọng là ngồi xuống và động não về kiến trúc thông tin của một trang web. Bạn phải tìm ra loại tính năng nào mà trang web cung cấp, điều gì là quan trọng nhất và những gì có thể được đặt ở cấp thấp hơn trong hệ thống phân cấp thông tin.
Kiến trúc thông tin bao gồm tính năng, nhu cầu người dùng, sơ đồ trang web, thử nghiệm và khung lưới. Bạn có thể đọc thêm về kiến trúc thông tin trong bài viết của Cameron Chapman trong Kiến trúc thông tin 101: Kỹ thuật và thực tiễn tốt nhất.
Sử dụng công nghệ kích hoạt người dùng
Tránh sử dụng Flash, JavaScript, jQuery hoặc bất kỳ thứ gì khác có nguy cơ cản trở truy cập vào điều hướng trang web của bạn trong việc xây dựng thanh điều hướng của bạn hoặc ít nhất là đảm bảo rằng chúng có thể xuống cấp một cách duyên dáng.
Để tham khảo thêm về xuống cấp duyên dáng của javascript, xem bài đăng này trên 10 Phương pháp dự phòng hữu ích cho CSS và Javascript.
Sử dụng các thuật ngữ đơn giản, thân thiện với người dùng
Nó là tốt hơn để sử dụng đơn giản, rõ ràng và các thuật ngữ dễ hiểu hơn là giữ các điều khoản chỉ dành cho ngành cho menu điều hướng của bạn. Bất kỳ liên kết nào đưa người dùng nhiều hơn một hoặc hai giây để tìm ra có lẽ không phù hợp để sử dụng.
Nếu người dùng cần nhấp vào liên kết để tìm hiểu xem liên kết đó dẫn đến điều gì thì điều này sẽ góp phần mang lại trải nghiệm xấu cho khách truy cập của bạn.
Ví dụ
Các thuật ngữ trong menu điều hướng của trang web của Larissa Ness rất dễ hiểu và đủ phổ biến. Người dùng sẽ không cảm thấy khó hiểu vì họ đã có kinh nghiệm với các menu như thế này.
Đây là một ví dụ điển hình khác về menu điều hướng trang web rõ ràng và sạch sẽ với các thuật ngữ phổ biến được sử dụng, tại csupport.
Cơ quan sáng tạo Eighty8Four sử dụng thuật ngữ "phòng trưng bày" có thể gây nhầm lẫn cho khách truy cập. Thuật ngữ này có thể có nghĩa là danh mục đầu tư hoặc công việc nhưng không rõ ràng và khách truy cập không có lựa chọn nào khác ngoài việc nhấp vào để kiểm tra..
Chuẩn hóa thiết kế Điều hướng
Sử dụng cùng một mô hình điều hướng trong tất cả các trang của bạn. Điều này rất quan trọng bởi vì không có thiết kế phù hợp, người dùng thực sự có thể nghĩ rằng anh ta đang ở trong một trang web khác. Đảm bảo rằng bạn sử dụng cùng một mô hình điều hướng để người dùng có thể dễ dàng truy cập trang web của bạn mà không bị mất.
Bluegg, hiển thị bên dưới, sử dụng thiết kế điều hướng đơn giản và gọn gàng, giữ nguyên trong tất cả các trang con. Sự khác biệt duy nhất là chỉ báo màu, hiển thị trang mà khách truy cập hiện đang ở.
Cho biết bạn đang ở đâu
Điều quan trọng là phải cho người dùng biết vị trí của anh ta mọi lúc. Bạn có thể làm điều này bằng cách thay đổi nền của liên kết, màu của tên trang hoặc là chuyển văn bản đậm trong menu điều hướng để làm cho nó khác với những người khác.
Austin Eastciders sử dụng màu sắc và nền khác nhau để chỉ ra trang người dùng đang truy cập. Chỉ báo này cũng có thể hoạt động như một thay đổi thiết kế tinh tế, ví dụ bằng cách sử dụng một nền điều hướng khác nhau Điều này tạo ra cảm giác rằng các mục menu khác có chiều sâu.
Phẫu thuật truyền thông sử dụng màu tối hơn làm chỉ báo cho một trang con đã mở. Đơn giản mà hiệu quả.
Sử dụng quy ước web
Đó là tất cả về điều hướng trang web dễ sử dụng và trực quan. Các quy ước web giúp các nhà thiết kế dễ dàng hơn rất nhiều trong việc thiết kế xung quanh các thiết kế của họ. Hầu hết người dùng sẽ nhấp vào logo trang web để quay lại trang chủ, vì vậy hãy thiết kế logo của bạn để làm điều đó.
Nếu bạn không, bạn đang khiến họ dành thời gian để học một cái gì đó mới hoặc trong một số trường hợp gây bất tiện cho họ bằng cách không cung cấp những gì họ mong đợi sẽ được chấp nhận thông thường.
Bạn có thể tìm hiểu thêm về các quy ước web tại đây:
- 10 quy ước thiết kế web
- Đừng phát minh lại bánh xe thiết kế web
- Thiết kế với các quy ước web
Thiết kế tiêm đặt logo ở góc trên cùng bên trái phù hợp với một trong những quy ước web được sử dụng nhiều nhất hiện nay.
Sáng tạo Adams sử dụng một trong những quy ước web phổ biến nhất - logo được đặt ở góc trên cùng bên trái của trang web và liên kết đến trang chủ.
Kiểm tra nó: Liên quan đến bên thứ 3
Luôn kiểm tra thiết kế điều hướng của bạn với bất kỳ người nào đã sử dụng Internet trước đây. Bạn có thể muốn đưa những người không liên quan đến quá trình thiết kế để kiểm tra nó. Quan sát sở thích của họ khi họ điều hướng thông qua trang web của bạn và phân tích thời gian họ tìm thấy các trang mà họ đang tìm kiếm.
Để có độ chính xác cao hơn, liên quan đến nhiều người hơn, thu thập dữ liệu, phân tích và tóm tắt nó cho phù hợp hơn Làm một cuộc khảo sát sau khi thử nghiệm nếu cần thiết. Bạn có thể nhận được một số ý tưởng và đầu vào bất ngờ sẽ không bị phát hiện nếu không chạy thử nghiệm này.
Cung cấp bối cảnh
Để phù hợp với nội dung và điều hướng của bạn, hãy cung cấp một số ngữ cảnh để người dùng trang web tìm thấy những thứ họ cần một cách nhanh chóng. Bạn có thể đặt các biểu tượng nhỏ liên quan đến nội dung bạn liên kết hoặc mô tả ngắn để cung cấp tổng quan về nội dung của trang..
Xe đạp của riêng tôi sử dụng các biểu tượng đơn giản để cung cấp cho người dùng thêm thông tin về những gì họ có thể tìm thấy trong trang con nhất định.
Sarah Parmenter sử dụng chú thích ngắn và đẹp trong điều hướng chính để cung cấp một số thông tin về các trang con mà điều hướng chính đang liên kết đến.
Mục đích SEO
Google thích điều hướng nhất quán. Thật tốt khi có điều hướng nhất quán không chỉ cho người dùng hiểu và có ý tưởng về cách điều hướng qua trang web của bạn mà còn cho các công cụ tìm kiếm lập chỉ mục trang web của bạn.
Robot công cụ tìm kiếm sẽ thu thập dữ liệu thông qua trang web của bạn để lập chỉ mục trang web của bạn và đặt các liên kết trong trang kết quả của công cụ tìm kiếm. Nếu bạn muốn hiển thị, hãy chú ý đến thiết kế điều hướng tốt và có thêm lưu lượng truy cập.
Các tập lệnh điều hướng miễn phí (CSS và jQuery)
Dưới đây là danh sách ngắn các menu điều hướng mới nhất mà bạn có thể thấy hữu ích cho các dự án của mình. Các tập lệnh này sẽ làm cho trải nghiệm người dùng sản phẩm của bạn trở nên tuyệt vời hơn bằng cách thêm một số tính năng hay và làm cho nó hài lòng khi sử dụng.
Tập lệnh kiểm tra tin tức dọc được điều khiển bằng XML sử dụng HTML và jQuery: vScroller
Lọc
Trang chà
Danh mục thời gian
NgangNav
Menu điều hướng tối giản CSS3
Hiệu ứng điều hướng vòng tròn với CSS3
Hiệu ứng điều hướng lưới với jQuery
Thăng thiên
Tạo Menu điều hướng CSS3 thanh lịch
Giới thiệu điều hướng ngang đẹp
Và cuối cùng nhưng không kém phần quan trọng một số menu điều hướng ngang đầy cảm hứng. Kiểm tra các trang web tuyệt vời này và các giải pháp menu điều hướng của chúng để tìm ý tưởng mới cho các dự án của bạn.
Ch3mical
Tiếp thị tìm kiếm Bloom.
Alex Perez
Libor Zezulka
Tiếng Hin-ddi!
Cù lao vàng
Neil thợ mộc
Marc Thomas
Polystyren 3D
Liechtenecker
Thế giới phiêu lưu
Nhiếp ảnh Arbutus
OMDRL
Bia 4 cây thông
Thợ săn rượu vang
Hy vọng bạn sẽ tìm thấy bài viết này hữu ích và nhiều thông tin. Nếu bạn có bất kỳ suy nghĩ hoặc nếu bạn không đồng ý, xin vui lòng chia sẻ ý kiến của bạn trong phần bình luận.
