Các dạng menu cố định (fixed-navigation) trong web

Bài viết tổng hợp từ nguồn  Matthew Smith (netmagazine.com), Designboms và  Joshua Johnson (designshack)

Khi nói đến việc các chuyển hướng ở bất kỳ một trang web nào, một trong những câu hỏi quan trọng nhất mà bạn có thể tự hỏi là liệu việc chuyển hướng đó có cố định hay thay đổi. Matthew Smith đã tìm ra 5 ví dụ trong hệ thống chuyển hướng cố định:
Ở các máy tính để bàn hay các ứng dụng web, các dạng hướng cố định cho phép người dùng luôn có các thanh menu cố định (fixed navigation) phía trước mặt họ. Điều này cho phép người dùng thao tác và di chuyển dễ dàng hơn. Nếu menu cố định trong khi các điểm khác thay đổi (trường hợp giao diện iOS) hoặc là cố định một danh sách trong thanh toolbar, điều này giúp người dùng biết được một vài phần giao diện nằm cùng một ví trí khi họ tương tác với web.
Những nguyên tắc này có thể là những trải nghiệm hữu ích khi sử dụng web. Trong thực tế, nó có thể biến toàn bộ trang web theo dạng chuyển tab giúp cho người dùng tương tác nhiều hơn.
Có một số lưu ý khi dùng menu cố đinh (fixed navigation). Nếu khách hàng muốn màn hình lớn, menu cố định (fixed navigation) không phải là giải pháp tốt. Bởi vì nó chiếm một khoảng không gian nhất định trong màn hình, vì thế nó sẽ làm giảm kích thước màn hình của bạn.Vì lý do này mà một số nhà thiết kế thích đặt các thanh định vị ở phần đầu hay cuối trang web. Bằng cách này, nó sẽ tạo ra cảm giác kích thước trang của bạn sẽ không thay đổi nhiều, mà vẫn duy trì những tính chất tối ưu của thanh menu.
Hãy chắc chắc rằng chuyển hướng của bạn rõ ràng và riêng biệt nếu bạn cho nội dụng di chuyển phía sau nó. Việc mất phương hướng ở giữa nội dung làm người đọc khó nắm bắt toàn bộ nội dung web. Đây là một số ví dụ về menu cố định mà bạn thường thấy trong các trang web ngày nay. Hi vọng chúng sẽ mang lại cho bạn những cảm hứng thiết kế cho những dự án mới của bạn.

1. Trang ngang – menu cố định nằm ở bên trái trang web

Trang ngang kiểu định vị truyền thống và không gây ra sự nhầm lẫn việc định hướng trong trang web.

1.1 Netontwerp (http://www.netontwerp.com/index_en.htm): Một ví dụ về hệ thống lưới ô vuông chặt được đặt giữa và cố định layout. Khi click các tùy chọn, nội dung web sẽ xuất hiện theo chiều ngang của trang web. Đây là giải pháp tuyệt vời cho những trang web có kích thước nhỏ.

2. Trang dọc – menu cố định nằm ở  bên trái trang web

2.1 The Black Estate (http://www.blackestate.co.nz/) nói về nhà sản xuất rượu vang New Zealand sử dụng menu dọc cố định. Nội dung trang web được thiết kết theo chiều dọc,  nội dung truyền tải thông suốt  trong một trang đơn và thanh menu luôn ở vị trí cố định, vì thế bạn sẽ không bao giờ bị lạc khi di chuyển trong trang web này.

2.2. Parachute:  Một ví dụ hoàn hảo về menu cố định bên trái màn hình của một site thương mại điện tử nhỏ được thiết kế theo trang dọc(www.madebyparachute.com). Trang này được bắt đầu bằng một thương hiệu ở phía trên góc trái và một filter bên dưới. Khi cuộn tròn thanh di chuyển, bộ filter này vẫn nằm ở vị trí cố định.

2.3 Virgin (http://www.virginracing.com/) dùng bảng menu cố định đặt bên trái màn hình để định vị trang web tốt hơn.

2.4 Blogs: Một trong những nơi thông thường nhất mà bạn có thể tìm thấy bảng menu cố định trên blogs, và đặc biệt là Tumble blog. Lý do mà dạng menu này hoạt động hiệu quả là vì nội dung của trang rất dài và người dùng phải cuộn tròn rất nhiều lần. Bằng cách áp dụng dạng menu cố đinh, cho phép người dùng định hướng trang web từ đầu đến cuối trang, loại bỏ sự cuộn tròn chuột không cần thiết, mất thời gian, và mất định hướng.

Doug Neiner (http://dougneiner.com/)


2.5 Trang simple dùng menu cố định trái

2.6 http://progresspackaging.co.uk/luxury-items . Trang có menu cố định bên trái

3. Trang dọc – menu cố định nằm ở bên phải trang web

3.1 Fat-man (fat-man-collective.com): Trang này không chỉ sử dụng một thanh định vị cố định mà còn là một trang web đơn tuyệt vời nhất mà chúng tôi từng thấy: biểu tượng người đàn ông Quirky sẽ đi và nhảy khi cuộn tròn thanh di chuyển.

3.2 Piensa en Pixel (http://www.piensaenpixels.com/) là một trang web đơn giản nhưng hấp dẫn với các liên kết chạy xuống bên phía bên trái trang. Phần bên phải trang được thiết kế cố định.

3.3 Effect studio (http://www.effektivedesign.co.uk/) dùng menu cố định bên phải tương tự như web Piensa en Pixel.

3.4 Deda dùng menu cố định bên phải.

4. Trang dọc – Thanh menu cố định nằm ở phần đầu trang web

4.1 Chiến dịch của Monitor A với thanh menu cố đinh (http://www.campaignmonitor.com/templates/). Menu luôn nằm cố định ở phần đầu trang web khi bạn di chuyển chuột. Ngoài ra nó còn có thêm một tính năng, cho phép bạn nhảy xuống một trang bên dưới khi click vào các option trên thanh menu.

4.2 Academy (http://www.weareacademy.com/page/projects/): Khi lăn chuột, menu này ở phần đầu trang web. Ở trang web này, khi lăn chuột các hình ảnh bên dưới sẽ trượt lên trên, nhưng menu cố định luôn nằm ở phần đầu trang. Khi ta click chọn vào các option khác trên menu, trang web này không dùng chức năng trượt mà nó sẽ mở ra một trang mới.

4.3 Trang Strukaxiom ( http://struckaxiom.com/blog/) cũng sử dụng thanh menu nằm ở đầu trang, giúp cố định trang và dễ nhận dạng thương hiệu công ty. Tương tự trang Academy, khi lăn chuột các hình ảnh bên dưới sẽ trượt lên trên, nhưng thanh menu cố định luôn nằm ở phần đầu trang. Ngoài ra trang này còn có thêm một sub header nằm ngay bên dưới các các thanh định vị.

Khi ta click chọn vào các tùy chọn trên thanh menu cố định, trang web này không dùng chức năng trượt mà nó sẽ mở ra một trang mới. Khi click chọn vào các option trên thanh sub header, nội dung cũ sẽ từ từ biến mất và nội dung của tùy chọn mà ta click chọn sẽ từ từ hiện ra ( sử dụng hiệu ứng fade out). Tuy  nhiên thanh menu (cố định nội dung header) và thương hiệu vẫn không bị thay đổi. Điều này giúp người dùng biết chính xác mình đang ở  phân mục nào trong trang web.

http://deda.me/

4.4 Trang DKNG (http://www.dkngstudios.com/work/posters/#the-swell-season-deer) cũng sử dụng menu  nằm ở đầu trang, giúp cố định trang và dễ nhận dạng thương hiệu công ty. Tương tự trang web StruckAxiom, khi lăn chuột các hình ảnh bên dưới sẽ trượt lên trên, menu cố định (chứa các header) và thương hiệu công ty  luôn nằm ở phần đầu trang. Ngoài ra trang này còn có thêm một sub header, nhưng sub header này lại nằm bên trái của trang.

4.5 Trang web này có thanh memu cố đinh nằm ở góc phải bên phần trên trang web.  http://www.themolitor.com/category/portfolio/). Thanh menu này luôn nằm cố định ở phần gốc phải phần trên trang web khi bạn di chuyển chuột. Nó không có tính năng cho phép bạn trượt xuống một trang bên dưới khi click vào các option trên thanh menu. Mà khi bạn click vào các option trong menu, web dùng hiệu ứng fade out để link tới trang cần xem.

4.6 Satellitevoice
( http://www.satellitevoices.com/paris/photography) Tương tự mục 4.5, Trang web này có menu cố đinh nằm ở góc phải bên phần trên trang web. Nhưng ở trang web này, các tùy chọn được liệt kê chi tiết. 

4.7 Twofishillustration (http://twofishillustration.com/) có menu cố định nằm ở phần trên cùng của trang web, chiếm rất ít diện tích, tạo ra một phong cách thiết kế tối giản và hiện đại.

 

 

4.8 trang Yii-Craft and Design có thanh menu cố nằm trên cùng. slide trượt theo chiều ngang.

http://www.yiidesign.com/en/collection.php

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: