it-swarm-vi.tech

Menu ngang và dọc trong các ứng dụng web

Bây giờ rất phổ biến để tìm các menu ngang hàng đầu trong các trang web. Một số lý do có thể là thói quen và luật của Jakob .

Trong các ứng dụng web, bạn có thể tìm thấy một menu ở trên cùng hoặc ở bên trái như nhau. Hầu hết thời gian dường như là sự kết hợp của các menu dọc và ngang. Không có lý do liên tục.

Rõ ràng không có quy ước thực sự cho vấn đề đó. Do đó câu hỏi sau đây:

Lý do/yếu tố nào có liên quan khi chọn hướng của menu trong các ứng dụng web?

Chúng tôi đang nói về các menu điều hướng - dẫn đến các trang khác - không phải menu hành động - sửa đổi trang hiện tại.

Câu hỏi không phải là về máy tính bảng hay điện thoại. Không sao cả. Phương pháp cá nhân cũng có thể là câu trả lời.

19
Gildas Frémont

Menu ngang không sẵn sàng hỗ trợ nhiều hơn một cấp . Làm tổ hoặc thụt đầu dòng rất khó đạt được, dẫn đến nhiều giải pháp khó sử dụng được ghi nhận rộng rãi trong nhiều bài viết và ở đây trên UX.SE. Tôi không phải là fan hâm mộ lớn của trang web Windows 8 , ở cấp độ thứ ba, nó trở nên kỳ lạ.

Tài liệu web thường được đặt ra để cuộn theo chiều dọc. Mọi người thường sử dụng để cuộn theo hướng này và cả giao diện phần cứng (chuột, trackpad) và các tiêu chuẩn HTML/CSS hiện tại được thiết kế để chủ yếu hỗ trợ cuộn theo chiều dọc. Điều này làm cho chiều rộng của tài liệu web thường được cố định, trong khi chiều cao được tự do phát triển với nội dung. Không gian ngang nhanh chóng trở thành vấn đề .

Thường có giới hạn rất chặt chẽ đối với số lượng mục mà menu ngang có thể chứa, đặc biệt nếu bạn cần điều chỉnh màn hình rộng 1024 pixel trong khi sử dụng cỡ chữ 16 pixel. Người dùng có thể thay đổi kích thước phông chữ trên web, ví dụ nếu họ bị hạn chế tầm nhìn, điều này làm tăng vấn đề này. Hầu như không có giải pháp thực sự cho vấn đề không gian này. Việc gói một menu ngang trên nhiều dòng cũng có vấn đề, ví dụ: nếu chỉ có một mục kết thúc với một dòng mới, nó sẽ phá vỡ sự thống nhất trực quan của menu. Gói cũng làm cho gần như không thể có nhiều cấp độ và can thiệp vào các menu thả xuống.

Trong ngữ cảnh của các ứng dụng, một vấn đề khác hỗ trợ cho việc chọn menu dọc để điều hướng: các thanh nút (ví dụ ) để tương tác với trang hiện tại thường được đặt ra theo chiều ngang. Điều này phù hợp với hầu hết các ứng dụng máy tính để bàn phổ biến, có lẽ ngoại trừ PhotoShop và Illustrator (và tương tự), nhưng chúng chỉ đặt các nút ở mọi nơi :). Ngoài ra, các nút cần phải được hiển thị, để đảm bảo tất cả các chức năng có sẵn được hiển thị cho người dùng. Trong khi mọi người đã quen với việc cuộn theo chiều dọc, hầu hết các màn hình thực sự cung cấp nhiều không gian hơn theo hướng ngang. Ngoài ra, các hành động thường có thể được cung cấp bằng cách sử dụng các biểu tượng (đặc biệt là nếu chúng phổ biến như "lưu" và "xóa") thay vì từ ngữ, giúp tiết kiệm rất nhiều không gian theo hướng ngang (nhưng hầu như không theo hướng dọc).

Có một thanh ngang cũng cung cấp khả năng sửa thanh đó thành chế độ xem (nghĩa là đặt nó ở vị trí cao nhất của màn hình ngay cả khi người dùng cuộn ). Hiện tại, đây là hành vi phổ biến trong các ứng dụng thư khách trên web và nhiều ứng dụng web như Facebook, Twitter, v.v. Mặc dù bạn có thể sửa một thanh nút dọc, không gian dọc bị hạn chế hơn và cũng có thể nhanh chóng trở thành vấn đề. Thanh ngang của Facebook dính vào khung nhìn, trong khi menu dọc cuộn với trang. Đây là một lợi thế mạnh mẽ cho một menu ngang, vì vậy bạn có thể chọn điều hướng quan trọng nhất của mình để đi đến đó.

Vì vậy, theo nhiều cách menu ngang được ưu tiên hơn . Nếu bạn có thể làm cho công việc của bạn cho màn hình và kích thước phông chữ bạn cần hỗ trợ, hãy thực hiện nó. Chỉ cần chắc chắn rằng bạn phân biệt trực quan với các thanh nút, vv.

Tuy nhiên, menu dọc có tỷ lệ tốt hơn cả về chiều dài và chiều sâu, vì vậy nếu bạn cần cung cấp nhiều mặt hàng, hãy đi dọc.

Ngoài ra, bạn có thể sử dụng cả hai. Điều hướng cấp cao nhất theo chiều ngang, cấp phụ theo chiều dọc và bên trái. Hoặc trộn nó với một menu lớn.

15
Koen Lageveen

Các menu ngang và menu dọc là cần thiết để hỗ trợ kiến ​​trúc thông tin - nếu không, có một mối nguy hiểm khi kết thúc với menu như trên trang web cũ của Amazon (không thể tìm thấy hình ảnh một cách đáng tiếc).

Thông thường, menu ngang sẽ được sử dụng ở cấp cao hơn, thậm chí có thể là subnav ngang, nhưng bạn chắc chắn sẽ không muốn có lớp subnav ngang thứ ba - do đó bắt buộc phải có lớp dọc. Tại thời điểm đó, bạn có thể tranh thủ các tùy chọn điều hướng khác như tab, bộ lọc, v.v.

Nếu trang web không có các trang được lồng sâu, tất cả những điều bạn đề cập sẽ áp dụng - ví dụ: nó có thể phụ thuộc vào nội dung thực tế - các blog tự cho mình mượn theo chiều dọc vì có không gian ở hai bên cho danh sách các thư mục/thẻ.

Một khía cạnh khác để xem xét - thực đơn của bạn sẽ tiếp tục phát triển? nếu vậy - dọc là phù hợp hơn. Một lần nữa - ví dụ blog là thích hợp ở đây.

Chúc may mắn

2
Laura Papla Ford

Tôi nghĩ sẽ công bằng khi nói rằng giao diện người dùng phải được thiết kế cho nội dung trước. Khó hơn nhiều khi tính đến những thứ như môi trường người dùng, thiết bị phần cứng và thói quen vì những thứ này có nhiều biến đổi hơn. Mặt khác, với nội dung, việc tính đến các loại yếu tố, số lượng vật phẩm và tương tác/hành vi sẽ khả thi hơn nhiều.

Để trả lời câu hỏi, tôi sẽ nói rằng xu hướng là các menu ngang dường như dễ chấp nhận hơn khi hiển thị một lượng lớn nội dung (như với các menu thả xuống lớn), trong khi các menu dọc dường như không được sử dụng cho mục đích này nhiều . Mặt khác, nói chung, bạn sẽ bắt đầu với nội dung (với một số phân tích thiết kế kiến ​​trúc thông tin) và thực hiện theo cách của bạn thông qua một số hoặc tất cả các điểm được liệt kê có thể áp dụng.

1
Michael Lai