7 cách sử dụng menu dọc sáng tạo qua những ví dụ sinh động

Thứ hai - 06/07/2015 01:00

Menu dọc (vertical menu) luôn khẳng định những lợi ích của mình trong thiết kế website chuyên nghiệp. Không chỉ tiện lợi cho các thao tác, menu dọc còn đóng góp lớn cho việc tổ chức bố cục webste, mang lại sự gọn gàng và tính thẩm mỹ cho các trang web.

7 cách sử dụng menu dọc sáng tạo qua những ví dụ sinh động

Hãy cùng chúng tôi khám phá 7 cách tận dụng menu dọc đầy thông minh qua các ví dụ sinh động sau. 

1- Single Page Navigation

Thiết kế website đơn trang vừa thú vị vừa nhanh chóng nếu so sánh với website truyền thống. Một thanh navigation dọc giúp tạo giao diện mượt mà cũng như đảm bảo việc tiếp cận thông tin nhanh chóng. Hãy xem website portfilio của Jorge Rigabert để thấy navigtaion có thể kết nối các khu vực nội dung khi click trực tiếp vào mỗi nút. Chú ý cách website sử dụng các màu khác nhau cho mỗi khu vực nội dung, tương ứng với màu các nút bấm navigtaion. Khi bạn click vào nút bấm navigation, nó không chỉ đổi màu tương ứng mà còn cuộn cùng với trang web. 

170670-1 vertical menu trong thiet ke web

 

2 – Multi Page Navigation

Không phải mọi website có bố cục đơn trang để trình bày thông tin.Trong trường hợp bố cục đơn trang có thể khiến mọi thứ trở nên vụng về, phương án thay thế là sử dụng menu dọc. Giống như website của Mcdonalds khi họ cố giữ cho bảng màu hợp với logo công ty. Khi bạn di chuột qua mỗi link, một hộp bong bóng xuất hiện với những link đến các trang khác nhau của website. Nó được gọi là navigation đa trang (multi page navigation). Theo nghiên cứu, khi xem một website, sự chú ý của người xem có xu hướng đi từ trái sang phải. Bạn có thể đặt navigation menu dọc ở mọi nơi bạn thích nhưng hãy giữ cho sự chú ý của người xem được liên tục khi chọn đặt nó ở bên trái cho một thiết kế web nhà hàng độc đáo.  

170670-2 vertical menu trong thiet ke web

 

3 – Navigation 3 dòng kẻ ngang (nút bấm hamburger)

Đôi khi một thiết kế web đã đủ tuyệt vời và nếu thêm một chi tiết nào đó sẽ phá vỡ tất cả. Sự gây nhiễu này có thể đến từ một navigation menu đặt không đúng chỗ. Phương án tối ưu là sử dụng menu với với 3 dòng kẻ ngang (nút bấm hamburger). Menu dạng thả sẽ chỉ xuất hiện khi nào bạn muốn, do đó không phá vỡ sự chú ý của người xem khi duyệt web. 

Không có ví dụ nào hoàn hảo hơn là website của Kickpoint dưới đây. 

170670-3 vertical menu trong thiet ke web

4 – Compact Navigation

Parachute là một website sử dụng những chi tiết tối giản cùng với một menu dọc. Trang web này đã cố định thanh navigation gồm tối đa 4 link đi kèm với những icon nhỏ. Điều này khiến cho thiết kế đơn giản đủ để thu hút sự chú ý vào sản phẩm thay vì dẫn đến những sự mất tập trung không cần thiết.

170670-4 vertical menu trong thiet ke web

 

Các ví dụ phía trên để minh họa cho xu hướng của nhiều website ngày nay. Tuy nhiên, nếu bạn tìm kiếm thứ gì đó chưa từng thấy trước đây thì hãy cùng xem những trường hợp bên dưới:

5 – Navigation dọc lẫn ngang

Bố cục với navigation cả dọc lẫn ngang mang đến trải nghiệm người dùng thú vị vì họ có thể dễ dàng vuốt sang nội dung khác như với một thiết kế web parallax. Vẻ đẹp của loại thiết kế này là ở chỗ nó không chỉ mang đến cho website mộ ý tưởng sáng tạo về chuyển động mà còn cung cấp một giao diện tương tác mượt mà nhờ tốc độc internet hoặc loại thiết bị bạn sử dụng. Menu cuộn cả dọc lẫn ngang cho phép mọi người lướt mượt mà trên cả website. 

Hãy xem ví dụ từ website của chuyên gia thiết kế Pauline Osmot:

170670-5 vertical menu trong thiet ke web

6-  Zero Navigation cuộn dọc

Một menu dọc có thể được dùng theo nhiều cách và zero navigation cuộn dọc là một cách làm hiếm nhưng rất tuyệt diệu. Điều đó có nghĩa rằng navigation của bạn vẫn cố định khi cuộn trang. Nó giữ cho nội dung chỉ còn nguyên trên khu vực màn hình đang nhìn thấy từ thiết bị của bạn. Điều này khác với phong cách navigation khác vì thông thường thanh menu sẽ đi theo chuyển động của bạn khi cuộn xuống. Trong trường hợp của zero menu, khi bạn cuộn xuống, thanh menu vẫn cố định, trong khi nội dung thì đi cùng với bạn theo mỗi cú click chuột. Mammoth là một website sử dụng menu kiểu như vậy. 

170670-6 vertical menu trong thiet ke web

7 – Parallax Navigation cuộn dọc

Đây là một kỹ thuật thú vị, khi bạn cuộn qua một website, ảnh nền biến đổi để tạo ra hiệu ứng 3D. Đưa kỹ thuật nào và website có thể mang đến hiệu ứng tổng thế năng động nhờ những hiệu ứng animation khiến cho trang của bạn thêm thú vị.

Website của Bake Agency đã sử dụng parallax navigation cuộn dọc một các độc đáo và khá sáng tạo.

170670-7 vertical menu trong thiet ke web

Chuyển hướng di chuyển dọc hiện nay là xu hướng mới và nhiều nhà thiết kế trang web đã tìm ra một cách mới để làm cho các trang web thú vị hơn và tạo thêm sự thú vị cho du khách . Chuyển hướng di chuyển dọc là điều tiếp theo bạn nên thử cho thiết kế web của bạn .

Tác giả bài viết: Phùng Thanh Hằng
Nguồn tin: Ngôi Sao Số Web & Brand Solutions