Bây giờ chúng ta hãy nói về điều hướng. Điều
hướng là gì, tại sao điều hướng lại quan trọng đối với trang web của bạn?
Và làm thế nào để bạn chúng tôi cung cấp thông tin điều hướng trên trang web của bạn?
Vì vậy, đây là câu hỏi mà chúng tôi sẽ cố gắng trả lời trong bài giảng cụ thể này.
Câu hỏi rõ ràng đầu tiên mà bạn nghĩ đến là,
tại sao chúng ta cần phải điều hướng trang web?
Như bạn nhận ra, hầu hết các trang web không còn là một trang duy nhất.
Tất nhiên, có những trang web đơn trang
như trang giáo sư của bạn trong khoa khoa học máy tính của bạn.
Nhưng hầu hết các trang web thường chứa nhiều hơn một trang.
Như chúng ta đã thấy với trang web nhầm lẫn của chúng tôi mà chúng tôi đang xây dựng,
chúng tôi đã thêm một trang thứ hai gọi là trang aboutus.html.
Bây giờ cách chúng tôi điều hướng đến trang aboutus.html là
nhập rõ ràng vào thanh địa chỉ của trình duyệt của chúng tôi.
Nhưng đó là một cách rất bất tiện để điều hướng đến trang web của bạn.
Nó sẽ làm cho rất nhiều ý nghĩa để cung cấp một phương tiện trực quan cho
người dùng để điều hướng đến trang web của bạn.
Phương tiện trực quan này có thể được cung cấp bởi nhiều cách tiếp cận khác nhau,
thanh điều hướng là một trong những phương pháp phổ biến nhất để chỉ ra thông tin này.
Vì vậy, chúng ta sẽ xem xét một số cách phổ biến để cung cấp các
mẫu điều hướng trên các trang web điển hình.
Trong bối cảnh này, bạn thường nghe mọi người nói về kiến trúc thông tin.
Kiến trúc thông tin bắt đầu với cấu trúc của hệ thống,
đối với cách thức thông tin được tổ chức, dán nhãn.
Và điều hướng được cung cấp thông qua nội dung hoặc thông qua thông tin này.
Bây giờ kiến trúc thông tin, tự nó, là một lĩnh vực toàn bộ lớn.
Nó nằm ngoài phạm vi của khóa học này để trang trải kiến trúc sư thông tin.
Nhưng, trong trường hợp bạn quan tâm đến việc tổ chức và
cung cấp thông tin cho người dùng thông qua, ví dụ, các
trang web, sau đó tôi đã cung cấp cho bạn một số liên kết trong các tài nguyên bổ sung
mà bạn có thể đi và đọc để biết thêm.
Nhưng trong mọi trường hợp, khi bạn đang thiết kế một trang web,
điều quan trọng là phải hiểu được sự cần
thiết phải thiết kế các cấu trúc điều hướng thông tin trong trang web của bạn.
Và tổ chức thông tin này trong trang web của bạn cũng đưa ra
những loại hỗ trợ điều hướng mà bạn cung cấp trên trang web của bạn, và
dựa trên cách tổ chức thông tin đó.
Thông thường, một trang web sẽ được tổ chức trong một số loại cây có cấu trúc hoặc
một thời trang phân cấp.
Và điều đó
sẽ tự động ra lệnh cho bạn cách bạn thiết kế hỗ trợ điều hướng trong trang web của bạn.
Việc sử dụng một thanh điều hướng, breadcrumbs, và
các phương tiện điều hướng khác là rất, rất cần thiết
để cho phép người dùng có thể xem các phần khác nhau của trang web của bạn.
Khi bạn truy cập hầu hết các trang web, bạn sẽ thường tìm kiếm thanh điều hướng.
Đây là một loại thanh thường được gắn ở phía
trên cùng của trang web, hoặc đôi khi ở dưới cùng của trang web, hoặc đôi khi ở bên cạnh,
cung cấp cho bạn các con trỏ đầy đủ về
loại thông tin mà bạn có thể truy cập trên trang web này.
Vì vậy, thanh điều hướng của bạn thường sẽ chứa các liên kết đến các trang khác nhau
tạo thành một phần của trang web của bạn.
Vì vậy, một thanh điều hướng điển hình, làm thế nào để bạn thiết kế nó?
Khi bạn thiết kế một thanh điều hướng điển hình, bạn nên rõ ràng
ghi nhớ một số việc nên làm và không nên làm về cách bạn thiết kế thanh điều hướng.
Đầu tiên là bạn sử dụng các
thuật ngữ thân thiện và đơn giản trong thanh điều hướng của bạn để chỉ ra các liên kết khác nhau
mà người dùng có thể theo dõi trong trang web của bạn để tiếp cận thông tin.
Bạn nên cung cấp một dẫn hướng được chuẩn hóa, để
bất cứ nơi nào người dùng nằm trong hệ thống phân cấp trang web của bạn,
họ sẽ luôn biết làm thế nào để quay lại trang chủ, làm thế nào để đi đến kế tiếp,
trước đó, hoặc lên và xuống hệ thống phân cấp của một số loại.
Vì vậy, chỉ ra vị trí của người dùng
trong hệ thống phân cấp của trang web của bạn là rất, rất hữu ích
để cung cấp một cách dễ sử dụng để điều hướng trang web của bạn.
Ngoài ra, có một số quy ước tiêu chuẩn mà mọi người tuân theo
khi các thanh điều hướng này được thiết kế.
Thông thường, khi bạn có logo của trang web hoặc
công ty của bạn được bao gồm trong thanh điều hướng của bạn, một nhấp chuột vào các logo này hoặc
nút trang chủ sẽ đưa bạn trở lại mức cao nhất của hệ thống phân cấp hoặc
trang chủ của trang web của bạn, thường là trang index.html.
Một số điều không nên lưu ý là bạn không nên có quá nhiều
lựa chọn trong thanh điều hướng của bạn.
Có bao nhiêu là quá nhiều?
Nếu bạn thấy rằng điều hướng bằng thanh điều hướng của bạn quá cồng kềnh,
thì điều đó có nghĩa là có quá nhiều tùy chọn trên thanh điều hướng của bạn.
Cung cấp một tập hợp hợp lý các lựa chọn trong thanh điều hướng của bạn để bạn có thể
chỉ ra các hướng dẫn mà người dùng có thể làm theo trong việc điều hướng qua trang web của bạn.
Và khi bạn sử dụng các yếu tố điều hướng này trong thanh điều hướng của bạn,
không sử dụng nhãn chung, hãy sử dụng nhãn có ý nghĩa.
Ví dụ, nếu bạn đặt một nhãn có tên sản phẩm vào
thanh điều hướng của bạn, mọi người sẽ bị nhầm lẫn về ý nghĩa của bạn bằng sản phẩm.
Hoặc nói, nếu bạn đặt một dịch vụ trong thanh điều hướng của bạn, chúng có thể bị nhầm lẫn.
Bạn đang cung cấp loại dịch vụ nào?
Sẽ có ý nghĩa hơn khi đưa ra một thuật ngữ mô tả hơn
Trong tiêu đề của bạn trong thanh điều hướng của bạn.
Tuy nhiên, một phương tiện khác
để cung cấp điều hướng cho người dùng là cung cấp những gì được gọi là breadcrumbs.
Chúng thường được cung cấp ở đâu đó trong trang đó,
điển hình về phía cạnh trên cùng của trang web,
gần với tiêu đề của trang web đó.
Các breadcrumbs loại chỉ ra một số loại của một hệ
thống phân cấp điều hướng trong đó bạn hiện đang ở trong trang web của bạn.
Vì vậy, điều này cung cấp một tùy chọn điều hướng phụ cho trang web của bạn.
Vì vậy, điều này có thể được đặt ở đâu đó bên dưới điều hướng chính.
Nó có thể cho biết hệ thống phân cấp của các trang mà qua đó bạn đã đi.
Và vị trí hiện tại có thể được đánh dấu cụ thể
trong breadcrumb ở đó.
Vì vậy, nhiều cách khác nhau mà mọi người có thể sử dụng breadcrumbs
bao gồm cung cấp một đường dẫn hướng dựa trên đường dẫn.
Ví dụ, nếu bạn có một người dùng trải qua một tập hợp các bước để
hoàn thành một nhiệm vụ trên trang web của bạn, ví dụ, đặt vé máy bay.
Sau đó, bạn có thể sử dụng một cách tiếp cận breadcrumb để chỉ cho họ
những gì bước người dùng hiện đang trên trong chuỗi các bước.
Tương tự, nếu bạn đang cung cấp điều hướng dựa trên vị trí của bạn cho
phương pháp tiếp cận phân cấp trong trang web của bạn.
Vì vậy, mức độ phân cấp bạn đang ở trong và phần trên đối với
gốc của hệ thống phân cấp của bạn là gì, do đó có thể được chỉ ra bởi breadcrumbs của bạn.
Breadcrumb của bạn cũng có thể dựa trên thuộc tính, nghĩa là bạn cung cấp một tập hợp
các lựa chọn được chỉ ra trong breadcrumb của bạn cho người dùng tại thời điểm hiện tại của thời điểm.
Một khuôn khổ giao diện người dùng front-end điển hình cung cấp nhiều
cách khác để cung cấp điều hướng trên các trang web của bạn.
Chúng bao gồm các tab, thuốc, pagination, thả xuống,
accordions, thẻ và SchrollSpy, và Affix.
Chúng ta sẽ xem xét một số trong số này một cách chi tiết hơn khi chúng ta đi qua
các bài học khác nhau trong các mô-đun theo bài học cụ thể này.
[ NHẠC]