1
00:00:04,114 --> 00:00:07,200
Bây giờ chúng ta hãy nói về điều hướng. Điều

2
00:00:07,200 --> 00:00:12,980
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?

3
00:00:12,980 --> 00:00:16,820
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?

4
00:00:16,820 --> 00:00:22,264
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.

5
00:00:23,746 --> 00:00:27,058
Câu hỏi rõ ràng đầu tiên mà bạn nghĩ đến là,

6
00:00:27,058 --> 00:00:30,500
tại sao chúng ta cần phải điều hướng trang web?

7
00:00:30,500 --> 00:00:34,680
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.

8
00:00:34,680 --> 00:00:37,840
Tất nhiên, có những trang web đơn trang

9
00:00:37,840 --> 00:00:42,500
như trang giáo sư của bạn trong khoa khoa học máy tính của bạn.

10
00:00:42,500 --> 00:00:47,450
Nhưng hầu hết các trang web thường chứa nhiều hơn một trang.

11
00:00:47,450 --> 00:00:52,080
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,

12
00:00:52,080 --> 00:00:56,300
chúng tôi đã thêm một trang thứ hai gọi là trang aboutus.html.

13
00:00:56,300 --> 00:01:01,100
Bây giờ cách chúng tôi điều hướng đến trang aboutus.html là

14
00:01:01,100 --> 00:01:06,259
nhập rõ ràng vào thanh địa chỉ của trình duyệt của chúng tôi.

15
00:01:06,259 --> 00:01:11,300
Nhưng đó là một cách rất bất tiện để điều hướng đến trang web của bạn.

16
00:01:12,380 --> 00:01:17,685
Nó sẽ làm cho rất nhiều ý nghĩa để cung cấp một phương tiện trực quan cho

17
00:01:17,685 --> 00:01:21,125
người dùng để điều hướng đến trang web của bạn.

18
00:01:21,125 --> 00:01:26,535
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,

19
00:01:26,535 --> 00:01:32,972
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.

20
00:01:32,972 --> 00:01:37,342
Vì vậy, chúng ta sẽ xem xét một số cách phổ biến để cung cấp các

21
00:01:37,342 --> 00:01:41,392
mẫu điều hướng trên các trang web điển hình.

22
00:01:41,392 --> 00:01:46,656
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.

23
00:01:46,656 --> 00:01:51,458
Kiến trúc thông tin bắt đầu với cấu trúc của hệ thống,

24
00:01:51,458 --> 00:01:55,879
đối với cách thức thông tin được tổ chức, dán nhãn.

25
00:01:55,879 --> 00:02:01,340
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.

26
00:02:01,340 --> 00:02:05,240
Bây giờ kiến trúc thông tin, tự nó, là một lĩnh vực toàn bộ lớn.

27
00:02:05,240 --> 00:02:09,375
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.

28
00:02:09,375 --> 00:02:14,475
Nhưng, trong trường hợp bạn quan tâm đến việc tổ chức và

29
00:02:14,475 --> 00:02:18,145
cung cấp thông tin cho người dùng thông qua, ví dụ, các

30
00:02:18,145 --> 00:02:23,067
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

31
00:02:23,067 --> 00:02:27,727
mà bạn có thể đi và đọc để biết thêm.

32
00:02:27,727 --> 00:02:30,317
Nhưng trong mọi trường hợp, khi bạn đang thiết kế một trang web,

33
00:02:30,317 --> 00:02:35,887
điều quan trọng là phải hiểu được sự cần

34
00:02:35,887 --> 00:02:41,697
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.

35
00:02:43,930 --> 00:02:48,970
Và tổ chức thông tin này trong trang web của bạn cũng đưa ra

36
00:02:48,970 --> 00:02:53,545
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à

37
00:02:53,545 --> 00:02:57,280
dựa trên cách tổ chức thông tin đó.

38
00:02:57,280 --> 00:03:02,300
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

39
00:03:02,300 --> 00:03:04,630
một thời trang phân cấp.

40
00:03:04,630 --> 00:03:07,359
Và điều đó

41
00:03:07,359 --> 00:03:11,913
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.

42
00:03:11,913 --> 00:03:16,737
Việc sử dụng một thanh điều hướng, breadcrumbs, và

43
00:03:16,737 --> 00:03:22,405
các phương tiện điều hướng khác là rất, rất cần thiết

44
00:03:22,405 --> 00:03:29,760
để 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.

45
00:03:29,760 --> 00:03:35,150
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.

46
00:03:35,150 --> 00:03:40,080
Đây là một loại thanh thường được gắn ở phía

47
00:03:40,080 --> 00:03:45,570
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,

48
00:03:45,570 --> 00:03:50,865
cung cấp cho bạn các con trỏ đầy đủ về

49
00:03:50,865 --> 00:03:56,365
loại thông tin mà bạn có thể truy cập trên trang web này.

50
00:03:56,365 --> 00:04:01,095
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

51
00:04:01,095 --> 00:04:04,615
tạo thành một phần của trang web của bạn.

52
00:04:04,615 --> 00:04:09,425
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ó?

53
00:04:09,425 --> 00:04:13,085
Khi bạn thiết kế một thanh điều hướng điển hình, bạn nên rõ ràng

54
00:04:14,360 --> 00:04:19,500
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.

55
00:04:19,500 --> 00:04:23,870
Đầu tiên là bạn sử dụng các

56
00:04:23,870 --> 00:04:28,960
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

57
00:04:28,960 --> 00:04:34,900
mà người dùng có thể theo dõi trong trang web của bạn để tiếp cận thông tin.

58
00:04:34,900 --> 00:04:37,070
Bạn nên cung cấp một dẫn hướng được chuẩn hóa, để

59
00:04:37,070 --> 00:04:41,090
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,

60
00:04:41,090 --> 00:04:46,590
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,

61
00:04:46,590 --> 00:04:50,760
trước đó, hoặc lên và xuống hệ thống phân cấp của một số loại.

62
00:04:50,760 --> 00:04:54,670
Vì vậy, chỉ ra vị trí của người dùng

63
00:04:54,670 --> 00:04:59,910
trong hệ thống phân cấp của trang web của bạn là rất, rất hữu ích

64
00:04:59,910 --> 00:05:04,790
để cung cấp một cách dễ sử dụng để điều hướng trang web của bạn.

65
00:05:04,790 --> 00:05:09,345
Ngoài ra, có một số quy ước tiêu chuẩn mà mọi người tuân theo

66
00:05:09,345 --> 00:05:12,365
khi các thanh điều hướng này được thiết kế.

67
00:05:12,365 --> 00:05:17,515
Thông thường, khi bạn có logo của trang web hoặc

68
00:05:17,515 --> 00:05:23,832
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

69
00:05:23,832 --> 00:05:29,177
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

70
00:05:29,177 --> 00:05:33,711
trang chủ của trang web của bạn, thường là trang index.html.

71
00:05:33,711 --> 00:05:38,817
Một số điều không nên lưu ý là bạn không nên có quá nhiều

72
00:05:38,817 --> 00:05:41,457
lựa chọn trong thanh điều hướng của bạn.

73
00:05:41,457 --> 00:05:43,225
Có bao nhiêu là quá nhiều?

74
00:05:43,225 --> 00:05:48,470
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,

75
00:05:48,470 --> 00:05:52,240
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.

76
00:05:52,240 --> 00:05:58,010
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ể

77
00:05:58,010 --> 00:06:04,659
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.

78
00:06:05,880 --> 00:06:11,230
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,

79
00:06:11,230 --> 00:06:17,090
không sử dụng nhãn chung, hãy sử dụng nhãn có ý nghĩa.

80
00:06:17,090 --> 00:06:22,159
Ví dụ, nếu bạn đặt một nhãn có tên sản phẩm vào

81
00:06:22,159 --> 00:06:28,630
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.

82
00:06:28,630 --> 00:06:32,650
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.

83
00:06:32,650 --> 00:06:34,780
Bạn đang cung cấp loại dịch vụ nào?

84
00:06:34,780 --> 00:06:38,790
Sẽ có ý nghĩa hơn khi đưa ra một thuật ngữ mô tả hơn

85
00:06:38,790 --> 00:06:43,710
Trong tiêu đề của bạn trong thanh điều hướng của bạn.

86
00:06:43,710 --> 00:06:46,380
Tuy nhiên, một phương tiện khác

87
00:06:46,380 --> 00:06:50,030
để cung cấp điều hướng cho người dùng là cung cấp những gì được gọi là breadcrumbs.

88
00:06:50,030 --> 00:06:55,895
Chúng thường được cung cấp ở đâu đó trong trang đó,

89
00:06:55,895 --> 00:07:00,737
điển hình về phía cạnh trên cùng của trang web,

90
00:07:00,737 --> 00:07:04,954
gần với tiêu đề của trang web đó.

91
00:07:04,954 --> 00:07:10,513
Các breadcrumbs loại chỉ ra một số loại của một hệ

92
00:07:10,513 --> 00:07:16,255
thống phân cấp điều hướng trong đó bạn hiện đang ở trong trang web của bạn.

93
00:07:16,255 --> 00:07:21,595
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.

94
00:07:21,595 --> 00:07:26,185
Vì vậy, điều này có thể được đặt ở đâu đó bên dưới điều hướng chính.

95
00:07:26,185 --> 00:07:32,082
Nó có thể cho biết hệ thống phân cấp của các trang mà qua đó bạn đã đi.

96
00:07:32,082 --> 00:07:36,687
Và vị trí hiện tại có thể được đánh dấu cụ thể

97
00:07:36,687 --> 00:07:38,727
trong breadcrumb ở đó.

98
00:07:38,727 --> 00:07:43,708
Vì vậy, nhiều cách khác nhau mà mọi người có thể sử dụng breadcrumbs

99
00:07:43,708 --> 00:07:48,588
bao gồm cung cấp một đường dẫn hướng dựa trên đường dẫn.

100
00:07:48,588 --> 00:07:53,558
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 để

101
00:07:53,558 --> 00:07:59,358
hoàn thành một nhiệm vụ trên trang web của bạn, ví dụ, đặt vé máy bay.

102
00:07:59,358 --> 00:08:04,780
Sau đó, bạn có thể sử dụng một cách tiếp cận breadcrumb để chỉ cho họ

103
00:08:04,780 --> 00:08:09,880
những gì bước người dùng hiện đang trên trong chuỗi các bước.

104
00:08:09,880 --> 00:08:14,320
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

105
00:08:14,320 --> 00:08:18,460
phương pháp tiếp cận phân cấp trong trang web của bạn.

106
00:08:18,460 --> 00:08:23,785
Vì vậy, mức độ phân cấp bạn đang ở trong và phần trên đối với

107
00:08:23,785 --> 00:08:29,680
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.

108
00:08:29,680 --> 00:08:35,092
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

109
00:08:35,092 --> 00:08:40,754
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.

110
00:08:40,754 --> 00:08:45,032
Một khuôn khổ giao diện người dùng front-end điển hình cung cấp nhiều

111
00:08:45,032 --> 00:08:49,840
cách khác để cung cấp điều hướng trên các trang web của bạn.

112
00:08:49,840 --> 00:08:54,555
Chúng bao gồm các tab, thuốc, pagination, thả xuống,

113
00:08:54,555 --> 00:08:59,210
accordions, thẻ và SchrollSpy, và Affix.

114
00:08:59,210 --> 00:09:04,447
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

115
00:09:04,447 --> 00:09:10,614
các bài học khác nhau trong các mô-đun theo bài học cụ thể này.

116
00:09:10,614 --> 00:09:11,114
[ NHẠC]