响应式导航栏制作教程

本教程将通过组件化思维，引导你创建一个响应式导航栏——只需设计一次，即可让它在桌面端、平板端和移动端之间无缝适配。

概览

完成本教程后，你将拥有一个具备以下功能的导航栏：

• 桌面端、平板端和移动端三种响应式布局
• 菜单项的悬停交互
• 可自定义的文字和链接属性
• 适用于移动端的可折叠汉堡菜单

步骤 1：创建 Header 组件

1. 选中整个导航栏区域。
2. 右键单击并选择 “创建组件”。
3. 将组件命名为 “Header”。

步骤 2：创建可复用的菜单项组件

1. 创建菜单项组件

为了保持设计一致，我们会将每个菜单项制作成可复用组件。

1. 选中一个菜单项，例如“首页”。

2. 将它包裹在一个 Frame 中，然后右键单击并选择 “添加 Stack”。

   

3. 右键单击菜单项容器，选择 “创建组件”，并将它命名为 “NavItem”。

   

2. 添加悬停交互

1. 进入 NavItem 组件的编辑模式。
2. 选中根组件并添加一个 Hover 变体。

3. 在悬停状态下，将文字颜色改为黑色，也可以使用你喜欢的其他颜色。

   

3. 创建组件变量

文字变量

1. 选中 NavItem 组件内的文字图层。

2. 在右侧面板中右键单击文字属性，然后选择 “创建变量”。

   

3. 为变量重新命名，以便识别和管理。

   

链接变量

1. 选中 NavItem 组件的外层容器。
2. 在右侧面板中找到 链接 属性，然后单击 “+” 图标。

3. 右键单击链接属性并选择 “创建变量”。

   

步骤 3：应用菜单项组件

1. 返回 Header 组件。
2. 使用 NavItem 组件替换所有静态菜单项。

3. 为每个菜单项设置各自的文字和链接值。

   

预览设计——当鼠标悬停在菜单项上时，文字颜色会按预期变化。

效果演示

为什么要将菜单项组件化？

• 一次更新，处处生效：只需修改一次样式，所有菜单项都会同步更新，让设计始终保持一致。
• 灵活配置：将文字、链接等动态内容设置为变量，可以更快地迭代设计。

步骤 4：创建移动端导航栏

1. 添加移动端导航元素

1. 单击左上角的 “+” 图标，然后切换到 弹窗 面板。

2. 选择 “导航弹窗”，并将它拖到右侧按钮旁边。

   

2. 设计移动端导航内容

1. 选中菜单和下载按钮图层，按 Ctrl + C 复制，然后将它们粘贴到弹窗容器中。

   

2. 将菜单布局从横向排列改为纵向排列。

   

3. 设置组件变体

1. 选中 Header 组件，然后单击 “+ 变体” 创建一个新变体。

   

2. 将这个新变体命名为 “Mobile”。

   

3. 在 Primary 变体（默认变体）中，隐藏移动端导航组件。

   

4. 在 Mobile 变体中，显示移动端导航，并隐藏常规菜单和下载按钮。

   

步骤 5：创建平板端变体（可选）

如果你的设计需要专门的平板端布局，请按以下步骤操作：

1. 添加另一个变体，并将它命名为 “iPad”。

2. 设置宽度，例如 810px。

   

3. 将菜单项之间的间距调整为 32px。
4. 同时将右侧容器的间距更新为 32px。

步骤 6：应用响应式变体

为不同断点指定对应的变体：

• 桌面端 → Primary

• 平板端 → iPad

  

• 移动端 → Mobile

  

预览设计——现在，你的响应式导航栏应该能够在不同设备上自动切换到合适的布局。

最终效果

完成后，你的响应式导航栏将具备以下特性：

• 桌面端采用横向布局
• 平板端使用调整后的间距
• 移动端使用带有纵向导航的汉堡菜单
• 所有菜单项都具备悬停交互
• 文字和链接属性均可灵活自定义

至此，你已经通过清晰的组件化工作流程构建了一套完整的响应式导航系统。它高效、可复用，并且易于维护。