3 xu hướng navigation đang thống trị thiết kế web hiện nay

Thứ bảy - 16/06/2018 22:00

Với sự ra đời của thiết kế website responsive, cộng đồng thiết kế đã tạo ra nhiều sự sáng tạo với navitgation.

3 xu hướng navigation đang thống trị thiết kế web hiện nay

Trong chủ đề hôm nay, chúng ta sẽ cùng nói về 3 xu hướng navigation nổi bật trong thiết kế website chuyên nghiệp thời kỳ này. Trước hết là xu hướng sử dụng navicon (hoặc hamburger icon), thứ hai là sự tiếp cận cách dùng menu toàn trang, và cuối cùng là sự hoàn hảo trong cách sử dụng mega drop down menu. Hãy cùng đi sâu hơn để tìm hiểu!

SỬ DỤNG NAVICON

Facebook đã công bố thêm bộ navicon để ẩn đi chức năng navigation khỏi màn hình. Với sự ra đời của thiết kế website responsive, cộng đồng thiết kế đã tạo ra nhiều sự sáng tạo với navitgation. Đưa mọi thức vào một bảng navigation và di chuyển theo sự lựa chọn navicon là một giải pháp ấn tượng.  Theo một cách nào đó, giải pháp dùng navicon đã khiến công việc trở nên dễ dàng hơn với các chuyên gia thiết kế và lập trình viên.

Các ứng dụng di động sử dụng navicon có vẻ thuận tiện hơn so với website, bởi ứng dụng di động có sự tập trung và một mục đích đơn nhất. Trong khi dù là một website nhỏ nhất cũng có hàng ta nội dung cần thể hiện và nhấn mạnh. Do đó việc dùng navicon là cần thiết để gói gọn các nội dung cần hiển thị. 

01 xu huong bo cuc thiet ke web

Website của hãng thiết kế Long Story Short là một ví dụ đáng yêu cho việc dùng navicon một cách có ý nghĩa là nghiêm túc. TRang này sử dụng navicon để ẩn đi số lượng lớn chức năng navigation. Trang chủ là cổng kết nối với 3 khu vục quan trọng nhất trên website. 

02 xu huong bo cuc thiet ke web

The Squarespace có thiết kế trang với menu ẩn rất hiệu quả. Chức năng tour và login luôn hiển thị, trong khi 23 chức năng khác của menu được chứa trong menu dạng trượt. 

08 xu huong bo cuc thiet ke web

09 xu huong bo cuc thiet ke web

101 xu huong bo cuc thiet ke web

 

FULL SCREEN NAVIGATION

Xu hướng thứ hai mà chúng ta sẽ nghiên cứu là việc sử dụng full screen navigation menu. Những menu dạng này được kíc hoạt bởi các nút bấm hoặc link theo một cách nào đó. Sự khác biệt ỏe đây là thay vì các bảng điều khiển trượt ra thì navigation đã chiếm sẵn luôn cả màn hình. Với màn hình điện thoại thì đó là chuyện bình thường nhưng với màn hình máy tính thì có vẻ mới mẻ hơn. 

03 xu huong bo cuc thiet ke web

Phần navigation của thiết kế website đẹp mắt này trông khá thú vị. Nhờ thiết kế toàn trang nên ở đây đủ chỗ cho cả một contact form, contact information, social media link, blog post mới nhất và nút call to action.

04 xu huong bo cuc thiet ke web

Trong ví dụ này, chúng ta thấy được hiệu quả của thiết kế tối giản. Thay vì đưa ra thêm nhiều chức năng trên menu, chúng ta lại gặp một list chức năng navigation. Để đóng menu này, hãy ấn vào chữu "x" trên màn hình.  

05 xu huong bo cuc thiet ke web

06 xu huong bo cuc thiet ke web

07 xu huong bo cuc thiet ke web

 

MENU KÍCH THƯỚC SIÊU LỚN HOÀN HẢO

Cuối cùng, chúng tôi muốn đề cập đến việc dùng các mega drop down menu kích thước lớn. Việc dùng chúng không còn là điều mới mẻ nhưng điều thú vị là phần nội dung đặt bên trong các menu đó. Các chuyên gia thiết kế thực sự sẽ có nhiều khong gian để sáng tạo tại meu dạng này.  

112 xu huong bo cuc thiet ke web

Website Lowes đã thể hiện một cách hoàn hảo cách tận dụng menu dạng thả có kích thước lớn. Bạn có thể thấy hệ thống menu trở thành một vị trí để đặt nhiều nội dung. Nội dung cần có thể đọc trực tiếp, bất kể người dùng web đang ở trang con nào của website, bởi nó được gắn với menu, do đó nó sẵn sàng hướng người dùng đến nội dung quan trọng. Câu hỏi đặt ra là nội dung như thế nào mới là quan trọng đủ để đưa vào phần menu? Nếu đó là một thiết kế website bán hàng thì ở menu có thể đưa các nội dung về sản phẩm mới hoặc chính sách ưu đãi... 

121 xu huong bo cuc thiet ke web

Một ví dụ khác cho thấy sự khác biệt so với ví dụ trên. Mỗi một menu lớn chứa 1 link và người ta đã tận dụng vị trí này để gắn hình ảnh sản phẩm lên. 

131 xu huong bo cuc thiet ke web

141 xu huong bo cuc thiet ke web

151 xu huong bo cuc thiet ke web

161 xu huong bo cuc thiet ke web

 

 

Tác giả bài viết: Phùng Thanh Hằng