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

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.

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 d-rop 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 d-rop 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
Có: 0/0 đã cho sao
tiếc gì 1 click để cho sao

Bạn đã xem chưa?

[Blog thiết kế] Số 01(14/9/2020): Intel thay logo, Lightweight trình duyệt web siêu nhẹ

[Blog thiết kế] Số 01(14/9/2020): Intel thay logo, Lightweight trình duyệt web siêu nhẹ

Hàng tuần, nhiều nội dung thú vị về thiết kế ở mọi ngóc ngách trên thế giới được Ngôi Sao Số tổng hợp gởi đến chị em thiết kế.

[9/2020] Nghiên cứu quan trọng cần biết cho các nhà thiết kế web

[9/2020] Nghiên cứu quan trọng cần biết cho các nhà thiết kế web

Ở Việt Nam chúng ta đa phần phán theo cảm tính. Nhưng hãy tập tin vào số liệu, vì nó như xác xuất thống kê giúp bạn đong đếm chính xác các vấn đề của bạn. Những dữ liệu quý giá này không phải ai cũng có thể làm và biết. Cùng khám phá với Ngôi Sao Số nhé.

5 mẹo để thiết kế trang web một trang hiệu quả

5 mẹo để thiết kế trang web một trang hiệu quả

Web one-page hay còn gọi là trang web chỉ có một trang, hoặc các trang landing page chỉ để giới thiệu một chương trình khuyến mãi ... làm thế nào để nó hiệu quả? Cùng xem bài viết nhé

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