1
00:00:00,000 --> 00:00:04,114
[背景音乐]
Coursera Global Translator Community

2
00:00:04,114 --> 00:00:07,200
接下来让我们学习导航相关的知识

3
00:00:07,200 --> 00:00:12,980
什么是导航, 为什么导航对您的网站很重要？

4
00:00:12,980 --> 00:00:16,820
以及我们如何为一个网站提供导航？

5
00:00:16,820 --> 00:00:22,264
所以，这些是我们在这节课中将要
尝试解答的问题

6
00:00:23,746 --> 00:00:27,058
第一个显而易见的问题是：

7
00:00:27,058 --> 00:00:30,500
为什么我们需要网站导航？

8
00:00:30,500 --> 00:00:34,680
你会发现大多数网站不再
由一个网页组成

9
00:00:34,680 --> 00:00:37,840
当然，确实存在只有单一页面的网站

10
00:00:37,840 --> 00:00:42,500
像是你计算机部门教授的主页

11
00:00:42,500 --> 00:00:47,450
但大多数网站通常包含不止一页。

12
00:00:47,450 --> 00:00:52,080
正如我们所看到的, 
我们正在建设的 confusion 网站

13
00:00:52,080 --> 00:00:56,300
我们已经添加了第二个名为
 aboutus.html 的页面

14
00:00:56,300 --> 00:01:01,100
现在, 我们导航到 aboutus.html 
页面的方式是

15
00:01:01,100 --> 00:01:06,259
将其键入到浏览器的地址栏中

16
00:01:06,259 --> 00:01:11,300
但这是一个非常不方便的
导航到你的网站的方式

17
00:01:12,380 --> 00:01:17,685
更有意义的是提供用户
一个直观的手段

18
00:01:17,685 --> 00:01:21,125
导航到你的网站

19
00:01:21,125 --> 00:01:26,535
这种直观的方法
可以由许多不同的方法提供,

20
00:01:26,535 --> 00:01:32,972
导航栏是表示此信息的
最常用方法之一

21
00:01:32,972 --> 00:01:37,342
我们将查看几种常见的提供导航的方法

22
00:01:37,342 --> 00:01:41,392
在典型网站上

23
00:01:41,392 --> 00:01:46,656
在这一语境下, 您经常会听到人们
谈论信息架构。

24
00:01:46,656 --> 00:01:51,458
信息架构从系统的结构开始

25
00:01:51,458 --> 00:01:55,879
关于信息的组织方式, 标签方式

26
00:01:55,879 --> 00:02:01,340
导航由这一内容或信息提供

27
00:02:01,340 --> 00:02:05,240
现在, 信息架构本身就是一个大领域

28
00:02:05,240 --> 00:02:09,375
讨论信息架构超出了本课程的范围

29
00:02:09,375 --> 00:02:14,475
但是, 如果你有兴趣组织和

30
00:02:14,475 --> 00:02:18,145
为用户提供信息, 例如,

31
00:02:18,145 --> 00:02:23,067
通过网站, 那么我在额外的资源中
提供了一些链接

32
00:02:23,067 --> 00:02:27,727
你可以去阅读进一步的知识

33
00:02:27,727 --> 00:02:30,317
但无论如何, 当你在设计一个网站时,

34
00:02:30,317 --> 00:02:35,887
重要的是要了解

35
00:02:35,887 --> 00:02:41,697
在您的网站中设计
信息导航结构的需要

36
00:02:43,930 --> 00:02:48,970
在你的网站的信息的组织方式也规定

37
00:02:48,970 --> 00:02:53,545
你在你的网站上提供什么样的导航帮助

38
00:02:53,545 --> 00:02:57,280
根据这些信息是如何组织的。

39
00:02:57,280 --> 00:03:02,300
通常, 网站将组织成某种树结构或

40
00:03:02,300 --> 00:03:04,630
一种分层的方式

41
00:03:04,630 --> 00:03:07,359
它会自动地决定

42
00:03:07,359 --> 00:03:11,913
如何在网站中设计导航支持

43
00:03:11,913 --> 00:03:16,737
使用导航栏、面包屑导航和

44
00:03:16,737 --> 00:03:22,405
其他导航手段是非常, 非常必要的

45
00:03:22,405 --> 00:03:29,760
使用户能够看到您网站的各个部分

46
00:03:29,760 --> 00:03:35,150
当您访问大多数网站时, 
您通常会查找导航栏

47
00:03:35,150 --> 00:03:40,080
导航栏是某种栏目, 通常附在

48
00:03:40,080 --> 00:03:45,570
网站的顶端, 有时在网站的底部, 
有时在侧面,

49
00:03:45,570 --> 00:03:50,865
它为你提供了足够的指针, 指向

50
00:03:50,865 --> 00:03:56,365
您可以在此网站上访问的信息

51
00:03:56,365 --> 00:04:01,095
因此, 您的导航栏通常会包含
指向各种页面的链接,

52
00:04:01,095 --> 00:04:04,615
这些页面组成了你的网站的一部分

53
00:04:04,615 --> 00:04:09,425
所以 你怎么去设计一个
典型的导航栏呢？

54
00:04:09,425 --> 00:04:13,085
当您设计一个典型的导航栏时, 
您应该首先

55
00:04:14,360 --> 00:04:19,500
记住有关如何设计导航栏的
一些‘要’和‘不要’事项

56
00:04:19,500 --> 00:04:23,870
首先是
你要在导航栏中使用用户友好

57
00:04:23,870 --> 00:04:28,960
和简单的术语来表达各种链接

58
00:04:28,960 --> 00:04:34,900
从而用户可以
在您的网站内找到信息

59
00:04:34,900 --> 00:04:37,070
你应该提供一个标准化的导航栏

60
00:04:37,070 --> 00:04:41,090
无论用户在您网站的哪一个
层次结构中,

61
00:04:41,090 --> 00:04:46,590
他们总能够知道如何回到主页, 如何去到下一页,

62
00:04:46,590 --> 00:04:50,760
前一页, 或在某种层次结构中的
上一级或下一级

63
00:04:50,760 --> 00:04:54,670
所以在你的网站的层次结构中
指示用户的位置

64
00:04:54,670 --> 00:04:59,910
是非常, 非常有用的

65
00:04:59,910 --> 00:05:04,790
它提供了用户友好的导航网站的方式

66
00:05:04,790 --> 00:05:09,345
此外, 还有一些人们遵循的标准公约

67
00:05:09,345 --> 00:05:12,365
在设计这些导航栏时

68
00:05:12,365 --> 00:05:17,515
通常, 当你有你的网站的标志或

69
00:05:17,515 --> 00:05:23,832
你的公司包括在你的导航栏, 
点击这些标志或

70
00:05:23,832 --> 00:05:29,177
一个主页按钮应将你带回
层次结构的最高级别或

71
00:05:29,177 --> 00:05:33,711
网站的主页, 通常是 index.html 

72
00:05:33,711 --> 00:05:38,817
你应该记住的一些不要做的事
包括有太多

73
00:05:38,817 --> 00:05:41,457
导航栏选项

74
00:05:41,457 --> 00:05:43,225
你可能会问我什么叫太多

75
00:05:43,225 --> 00:05:48,470
如果您发现使用导航栏导航太繁琐

76
00:05:48,470 --> 00:05:52,240
这意味着您的导航栏上有太多选项

77
00:05:52,240 --> 00:05:58,010
在导航栏中提供合理的选项集合, 
以便您可以

78
00:05:58,010 --> 00:06:04,659
指示用户在浏览您的网站时可以遵循的方向

79
00:06:05,880 --> 00:06:11,230
当您在导航栏中使用这些导航元素时,

80
00:06:11,230 --> 00:06:17,090
不要使用通用标签, 使用有意义的标签

81
00:06:17,090 --> 00:06:22,159
例如, 如果将名为 "产品" 的标签放在导航栏

82
00:06:22,159 --> 00:06:28,630
人们会不明白你所说的产品是什么意思

83
00:06:28,630 --> 00:06:32,650
或者说, 如果您在导航栏中放了一个 “服务”, 
他们可能会感到困惑

84
00:06:32,650 --> 00:06:34,780
你提供什么样的服务？

85
00:06:34,780 --> 00:06:38,790
给一个更具描述性的术语是更有意义的

86
00:06:38,790 --> 00:06:43,710
在导航栏中的标题中

87
00:06:43,710 --> 00:06:46,380
还有另一种提供用户导航的方法

88
00:06:46,380 --> 00:06:50,030
是提供所谓的面包屑导航

89
00:06:50,030 --> 00:06:55,895
它们通常在该页的某处提供

90
00:06:55,895 --> 00:07:00,737
通常在网页的顶端边缘

91
00:07:00,737 --> 00:07:04,954
靠近该网页的标题。

92
00:07:04,954 --> 00:07:10,513
面包屑导航有几分表明了

93
00:07:10,513 --> 00:07:16,255
你现在在你的网站中的层次结构

94
00:07:16,255 --> 00:07:21,595
因此, 这为您的网站提供了辅助导航选项。

95
00:07:21,595 --> 00:07:26,185
所以它可以放在主导航下面的某处。

96
00:07:26,185 --> 00:07:32,082
它可能指示您访问过的页面的层次结构

97
00:07:32,082 --> 00:07:36,687
当前位置可以特别突出显示在

98
00:07:36,687 --> 00:07:38,727
面包屑导航中

99
00:07:38,727 --> 00:07:43,708
所以人们可以以各种方式使用面包屑

100
00:07:43,708 --> 00:07:48,588
包括提供基于路径的导航

101
00:07:48,588 --> 00:07:53,558
举例来说, 如果您有一个用户正在通过一系列步骤, 以便

102
00:07:53,558 --> 00:07:59,358
在你的网站上完成一项任务, 比如说, 预订机票。

103
00:07:59,358 --> 00:08:04,780
那么你就可以使用一个导览路径标示方法, 以向他们表明

104
00:08:04,780 --> 00:08:09,880
用户当前在哪一步

105
00:08:09,880 --> 00:08:14,320
同样, 如果你提供基于位置的导航,

106
00:08:14,320 --> 00:08:18,460
在你的网站中

107
00:08:18,460 --> 00:08:23,785
你位于什么样的等级层次, 以及什么是上一级目录

108
00:08:23,785 --> 00:08:29,680
指向你的根目录, 都可以由你的导览路径标示指示

109
00:08:29,680 --> 00:08:35,092
你的导览路径标示也可以基于属性, 这意味着你

110
00:08:35,092 --> 00:08:40,754
在当前时间点的提供了用户一组选项

111
00:08:40,754 --> 00:08:45,032
典型的前端 UI 框架提供了许多

112
00:08:45,032 --> 00:08:49,840
在网页上导航的其他方法

113
00:08:49,840 --> 00:08:54,555
包括标签, pills, 分页, 下拉列表,

114
00:08:54,555 --> 00:08:59,210
accordions, 标签, SchrollSpy, 和词缀

115
00:08:59,210 --> 00:09:04,447
我们将更仔细地学习它们, 在

116
00:09:04,447 --> 00:09:10,614
接下来的课程中

117
00:09:10,614 --> 00:09:11,114
[背景音乐]
Coursera Global Translator Community