一天上手Axure RP (2.1) Web案例

Demo

整个Web案例我们分为三阶段：

1. 导航栏

2. Banner

3. 嵌入视频 & 固定导航栏

从基本的点击跳转页面，状态样式，隐藏显示组件，到动态面板的使用，条件判断的使用等。

那么我们现在开始第一步“导航栏”：

STEP 1 . 拖放导航栏

---

导航栏底色：从组件库(Libraries)中拖出"Box 1"组件到画布中，并设置其样式(Style)：坐标、宽、高、填充色、边框。

Style

导航栏菜单：再来一个Box，设置为：

Border还是None

然后再复制几个，便成了这样：

Result 1

加入图标，使用Axure RP 8自带的icons组件库(Apple、Search、Shopping Basket)：

Result 2

这样就感觉有模有样了。

STEP 2 . 增加鼠标进入样式

---

菜单按钮样式：选择所有菜单按钮，设置其"属性(PROPERTIES) > 交互样式(Interaction Styles) > MouseOver"，Selected样式也可以设置：

改变鼠标进入/选中时的字体颜色

这样，当鼠标进入菜单按钮时，就会触发我们设置的样式。

图标样式：同样，当鼠标进入icon时，也会触发新样式。设置方法相同，只不过icon不是改变字体颜色，而是填充色。

改变鼠标进入时的填充色

这样，我们的导航栏就完成了。

预览效果 Result

看视频可以看到，更多内容，更细节的操作哟。

工具能表现你的思考结果，甚至过程，过分依赖工具则会束缚你的思维。