Axure教程：快速搭建有滚动交互效果的网页框架（附源文件下载）

绘制网页原型说来简单，技术上与系统、产品的原型相比大同小异。但我们会发现，将几个内容区域画好后罗列在一起，预览时的效果总觉得与真实的网站有很大差距。而问题的关键，便在于是否能够打磨网页中的细节交互。

下面，以内容较多的首页为例，围绕最常使用的交互效果，进行简要讲解。

一、划分区域，设置宽度自适应

首页包含的信息量很大，浏览时通常按内容分为若干屏，一次展示一屏。因此，可以先将各屏内容的背景摆放好，并做好宽度自适应的配置。

步骤1

准备几个尺寸1348*640px的矩形作为区域背景（本机演示分辨率为1366*768，可根据不同分辨率自行设置尺寸），分别命名为“第X屏背景”，竖向摆放在一起，并设置相互交替的颜色。这里设置交替颜色是为了各屏的预览效果更明显。

步骤2

点击空白处，取消选中所有元件。在右侧的“交互”下，双击打开“页面载入时”用例编辑窗口。

步骤3

在用例编辑窗口中，左侧选择“元件”-“设置尺寸”（Set Size），在右侧的元件选择区域中，勾选所有背景矩形，可以看到中间的组织动作区域中已经带出了相应事件。在元件选择区域的下方，点击“宽”后面的fx小按钮，打开编辑值窗口。

步骤4

在所有矩形“宽”的编辑值窗口中，删掉原宽度数值（这里为1348），点击上方的插入变量或函数链接，选择“窗口”-“Window.width”。点击“确定”，可以看到所有背景矩形在页面载入时的宽度均已设置为Window.width，即与当前浏览器窗口同宽，在用例编辑窗口中点击“确定”。

步骤5

在右侧的“交互”中点击“页面载入时”的Case1，Ctrl+C复制；点击“窗口调整尺寸时”，Ctrl+V粘贴事件。预览页面可以看到此时在页面载入与窗口调整尺寸时，所有背景区域的宽度始终能占满整个屏幕。

二、增加导航，设置锚点交互

上述首页背景设置好后，开始为首页添加顶部导航栏，并实现点击不同导航按钮，页面滚动到相应区域，且滚动到下方时导航栏能固定在顶部的效果。

步骤1

准备一个尺寸1348*75px的矩形作为导航栏背景，背景上摆放六个105*75px的矩形作为导航栏按钮。

步骤2

选中导航栏背景和六个导航按钮，右键点击“转换为动态面板”。为动态面板命名为“导航面板”，在面板状态管理窗口中，复制一个state1状态为state2，为两个状态分别命名为“样式1”“样式2”。

步骤3

分别编辑“导航面板”中“样式1”“样式2”两个状态内各自的导航栏样式。在“样式1”状态中，设置元件的背景色均为透明，导航栏按钮文字颜色为白色；“样式2”状态中，设置元件的背景色均为白色，且具有蓝色下边框，导航栏按钮文字为黑色。

步骤4

分别在各屏背景的左上角，放置一个20*20的热区元件，元件的下边框与各屏背景的上边框重合，并为各个热区元件命名为“第X屏锚点”。

步骤5