Các kiểu thiết kế menu

Nhằm tạo sự khác biệt  sau khi người dùng tương tác vào một tùy chọn trên thanh menu,  nhiều nhà designer đã tạo ra nhiều kiểu thiết kế khác nhau nhằm  giúp nội dung được chọn khác biệt hơn so với những nội dung khác trên thanh menu. Điều này làm cho người dùng xác định vị trí và định hướng trang web dễ dàng hơn.  Dưới đây là một số ví dụ

1. Buffalo dùng biểu tượng khối khinh khí cầu:

Giúp người dùng biết được họ đang ở vị trí mà icon khinh khí cầu đang đứng.

2. Dùng dấu mũi tên:

http://crushlovely.com/

3. Thay đổi màu chữ:

3.2 Dạng thay đổi màu chữ này giúp người dùng dễ tìm ra sự khác biệt của đối tượng đã được chọn với các đối tượng còn lại. Tuy nhiên, khi thay đổi màu chữ, cần làm tăng độ tương phản, tăng sự khác biệt giúp người nhìn dễ tương tác và định vị hơn.  Trang web Fiell dùng tông màu xám đậm và xám nhạt để tạo sự khác biệt, tuy nhiên mức độ tương phản của 2 màu này vẫn chưa cao, khiến cho người dùng dễ nhẫm lẫn (đặc biệt là đối với màn hình có độ sáng quá cao, 2 tông màu này sẽ gần như  có cùng tông độ).

http://www.fiell.com/page/about-us

4. Thay đổi màu chữ + dấu mũi tên:

Hickensian thiết kế thanh menu góc phải, sau khi tương tác với tùy chọn trên menu, đối tượng được chọn trên menu chuyển sang màu đèn và dấu mũi tên xuất hiện ngay bên cạnh đối tượng.

http://hicksdesign.co.uk/goodies/

5. Dùng đường viền bao quanh đối tượng đã chọn:

Trang Galpin dùng kiểu thiết kế đường viền nhẹ nhàng bao quanh đối tượng. Điều này giúp người dùng dễ nhận biết họ đang ở đâu trong trang web, đồng thời việc làm nổi bật phần đang chọn trên thanh menu vẫn không làm rối mắt  mà vẫn giúp thương hiệu Galpin nằm ở giữa trang  nổi bật.

http://galp.in/process/

6. Dùng hình khối bao quanh đối tượng đã chọn:

http://mariecatribs.com/contact/

7. Thanh đổi vị trí  hình khi người dùng tương tác với menu:

Hình ảnh sẽ bị dịch chuyển ngay khi người dùng rê chuột lên nội dung và trở về vị trí ban đâu nếu không được tương tác. Điều này giúp cho người dùng biết được nội dụng và hình ảnh ngay khi họ rê chuột lên thanh menu. Một điểm thú vị ở trang web này là người dùng có thể rê chuột trên thanh menu hoặc rê chuột lên các thumbnail hình.

http://grandpeople.no/work/#?m.cat=Selected

8. Màu khối được chọn trùng với màu background trang web:

Điều này mang lại cảm giác phần khối được chọn trên menu và nội dung nằm trên trên cùng một không gian.

http://rokkan.com/

9. Dùng khối vuông

http://crushlovely.com/

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: