一天上手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


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

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

推荐阅读更多精彩内容