Điều Hướng Như Một Bố Cục Không Gian
Điều hướng thường được thiết kế như một danh sách. Mô hình tư duy mặc định cho hầu hết các triển khai điều hướng — và hầu hết lời khuyên thiết kế điều hướng — coi menu là các danh sách có thứ tự: một cột dọc trong Slide Menu, một hàng ngang trong thanh điều hướng máy tính bàn, một lưới trong Tab Bar. Tư duy dựa trên danh sách này tạo ra điều hướng có chức năng nhưng bỏ lỡ một chiều quan trọng trong tiềm năng truyền đạt của điều hướng: bố cục không gian.
Bố cục không gian trong điều hướng sử dụng các mối quan hệ vật lý giữa các phần tử — vị trí, kích thước, nhóm, căn chỉnh và khoảng cách giữa chúng — để truyền đạt ý nghĩa vượt ra ngoài văn bản nhãn. Một liên kết điều hướng chính được đặt ở kích thước phông chữ lớn hơn các liên kết phụ không chỉ trông khác; nó báo hiệu phân cấp, cho mắt quét của khách truy cập biết nơi cần nhìn đầu tiên. Một nhóm điều hướng có khoảng trắng rộng rãi xung quanh không chỉ trông bình tĩnh hơn; nó báo hiệu rằng nhóm đó độc lập về mặt thị giác với các nhóm lân cận, giúp khách truy cập phân tích cấu trúc menu trước khi đọc bất kỳ nhãn nào. Một phần điều hướng phá vỡ sự căn chỉnh với phần còn lại của menu không chỉ trông đặc biệt; nó báo hiệu rằng phần này hoàn toàn khác — một phần "Nổi bật", phần "Đang giảm giá", phần "Mới" — xứng đáng được chú ý riêng.
"Chúng tôi đã dành nhiều thời gian cho nhiếp ảnh sản phẩm và kiểu chữ thương hiệu, nhưng Slide Menu của chúng tôi vẫn chỉ là một danh sách liên kết với cùng kích thước và cùng khoảng cách. Khi chúng tôi làm việc với một nhà thiết kế để tạo Slide Menu có lớp không gian — kiểu chữ lớn hơn cho các danh mục chính, dấu phân cách thị giác rõ ràng giữa 'Mua sắm' và 'Giới thiệu', một khối bộ sưu tập nổi bật có hình ảnh ở trên cùng — nó bắt đầu cảm thấy giống phần còn lại của thương hiệu chúng tôi. Khách truy cập sẽ nhận xét rằng 'toàn bộ trang web' cảm thấy được chú ý hơn. Đó là điều hướng đã thay đổi, không phải sản phẩm. Thiết kế không gian đã tạo ra sự khác biệt."
— Một khách hàng Navi+, thương hiệu phong cách sống và may mặc
Các Nguyên Tắc Thiết Kế Không Gian Cho Điều Hướng
Hệ thống phân cấp qua tỷ lệ và trọng lượng. Hệ thống phân cấp thị giác trong điều hướng được truyền đạt trực tiếp nhất qua tỷ lệ chữ và trọng lượng. Các danh mục điều hướng chính — các điểm đến mà khách truy cập sử dụng nhiều nhất hoặc mang lại giá trị chuyển đổi cao nhất — nên khác biệt về mặt thị giác so với các mục phụ thông qua kích thước phông chữ lớn hơn, trọng lượng đậm hơn, hoặc cả hai. Mắt người quét để tìm phần tử lớn nhất trong một trường thị giác đầu tiên; điều hướng sử dụng tỷ lệ để báo hiệu phân cấp hướng dẫn lần quét đó theo hướng bạn muốn. Một Slide Menu mà tất cả các mục đều cùng kích thước buộc khách truy cập phải quét từng mục với sự chú ý bằng nhau để xác định mục nào quan trọng; một Slide Menu mà các danh mục chính là 18px và các mục phụ là 14px truyền đạt phân cấp trước khi đọc bất kỳ nhãn nào.
Nhóm qua khoảng cách và sự tách biệt không gian. Quy luật gần gũi của tâm lý học Gestalt nêu rằng các phần tử gần nhau được coi là thuộc cùng một nhóm. Thiết kế không gian điều hướng khai thác điều này: một cụm liên kết điều hướng với khoảng cách chặt chẽ, tiếp theo là một khoảng trống, tiếp theo là một cụm khác, ngay lập tức truyền đạt hai nhóm riêng biệt mà không cần đường phân chia hoặc tiêu đề phần. Hệ thống thị giác của khách truy cập phân tích mối quan hệ không gian và suy ra cách nhóm. Thêm một đường phân chia tinh tế tại ranh giới nhóm củng cố nhận thức này; sự kết hợp của khoảng trống không gian và đường phân chia thị giác tạo ra các nhóm cảm thấy tự nhiên và rõ ràng.
Vị trí như tín hiệu ưu tiên. Vị trí của một phần tử điều hướng trong không gian sẵn có mang ý nghĩa riêng của nó. Các phần tử ở đầu Slide Menu được coi là ưu tiên cao nhất; các phần tử ở dưới cùng được coi là bổ sung. Các phần tử ở cạnh trái của cột Mega Menu được coi là tiêu đề của cột hoặc mục đại diện nhất. Trong Tab Bar, vị trí trung tâm (trên thanh 5 vị trí) thường nhận được sự chú ý thị giác cao nhất từ hành vi tìm kiếm trung tâm tự nhiên của mắt. Sử dụng có chủ ý các quy ước vị trí này — đặt danh mục có tỷ lệ chuyển đổi cao nhất ở đầu Slide Menu, hành động quan trọng nhất ở trung tâm Tab Bar — căn chỉnh sự chú ý thị giác với ưu tiên kinh doanh.
Khoảng trắng như tín hiệu thương hiệu. Mật độ của bố cục điều hướng truyền đạt cá tính thương hiệu. Điều hướng nén, dày đặc với khoảng trắng tối thiểu báo hiệu hiệu quả, thực dụng và toàn diện — phù hợp với các thương hiệu kỹ thuật, chuyên nghiệp hoặc tập trung vào giá trị. Điều hướng rộng rãi với khoảng trắng rộng rãi giữa các phần tử báo hiệu sự bình tĩnh, cao cấp hoặc chất lượng biên tập — phù hợp với các thương hiệu phong cách sống, xa xỉ hoặc thiết kế tiên phong. Khoảng trắng trong điều hướng không phải là không gian lãng phí; đó là một lựa chọn kiểu chữ và không gian có chủ ý truyền đạt cùng vị trí thương hiệu như lựa chọn kiểu chữ và bảng màu.
| Phần tử không gian | Lựa chọn thiết kế | Ý nghĩa được truyền đạt |
|---|---|---|
| Tỷ lệ kiểu chữ | Chính lớn, phụ nhỏ | Hệ thống phân cấp và ưu tiên quét |
| Nhóm phần tử | Cụm chặt chẽ với khoảng cách rõ ràng | Cấu trúc phân loại không cần nhãn rõ ràng |
| Vị trí trong không gian | Đầu = chính, cạnh = hành động quan trọng | Ưu tiên và nhấn mạnh thương hiệu |
| Mật độ khoảng trắng | Rộng rãi so với nén chặt | Cá tính thương hiệu (cao cấp so với hiệu quả) |
Áp Dụng Thiết Kế Không Gian Trong Các Thành Phần Navi+
Slide Menu, Mega Menu và Tab Bar của Navi+ đều hỗ trợ tùy chỉnh ở cấp độ thiết kế không gian — kích thước phông chữ, đệm, khoảng cách giữa các mục và cấu trúc phần đều có thể cấu hình mà không cần kiến thức CSS. Slide Menu đặc biệt cung cấp một canvas dọc phù hợp với tư duy thiết kế không gian: nó trải dài trên toàn bộ chiều cao màn hình điện thoại, cho nhà thiết kế không gian để tạo các vùng phân cấp có thể nhìn thấy (các danh mục chính ở trên cùng với kiểu chữ lớn hơn, các mục phụ bên dưới với kiểu chữ nhỏ hơn, liên kết tài khoản và tiện ích ở dưới cùng với trọng lượng thị giác tối thiểu) làm cho cấu trúc menu hiển thị trước khi đọc bất kỳ nhãn nào. Lớp phân cấp không gian này có thể đạt được thông qua trình chỉnh sửa thị giác trong chưa đầy một giờ và tạo ra cảm giác chú ý thị giác mà khách truy cập quy cho hệ thống thiết kế rộng hơn của cửa hàng — vì thiết kế không gian trong điều hướng là một lựa chọn thiết kế, không chỉ là lựa chọn nội dung.
Dùng thử miễn phí — không cần code, không cần lập trình viên
Cài đặt trong vài phút trên Shopify, WordPress hoặc bất kỳ website nào.