bgware

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

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.

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

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

 

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. 

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.

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:

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. 

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.

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 quá trình xây dựng web chuyên nghiệp của bạn .

Tác giả bài viết: Phùng Thanh Hằng
Nguồn tin: www.youthedesigner.com
Có: 5/1 đã cho sao
tiếc gì 1 click để cho sao

Bạn đã xem chưa?

Đăng ký ngay công cụ SEO web hiệu quả, dễ dùng XOVI NOW

Đăng ký ngay công cụ SEO web hiệu quả, dễ dùng XOVI NOW

XOVI NOW SEO là một công cụ SEO toàn diện, cung cấp đầy đủ các tính năng cần thiết cho doanh nghiệp trong việc tối ưu hóa website và tăng thứ hạng trên công cụ tìm kiếm.

Chăm sóc trang web, điều nên làm ngay khi có web

Chăm sóc trang web, điều nên làm ngay khi có web

Website là một phần quan trọng trong chiến lược kinh doanh trực tuyến của bất kỳ doanh nghiệp nào. Chăm sóc website là một trong những công việc quan trọng để đảm bảo website hoạt động ổn định, an toàn và hiệu quả.

Tạo email giá rẻ và hiệu quả: Khám phá giải pháp tiết kiệm chi phí.

Tạo email giá rẻ và hiệu quả: Khám phá giải pháp tiết kiệm chi phí.

Trong thời đại công nghệ phát triển nhanh chóng, việc có một địa chỉ email chuyên nghiệp trở nên quan trọng hơn bao giờ hết. Tuy nhiên, không phải ai cũng muốn đầu tư một số tiền lớn để có một dịch vụ email chất lượng.

Quay lại trang Blog
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây