AxureRP教程–组件样式变换

AxureRP的各个组件都自带了很多样式变换效果,如选中时,禁用时,鼠标按下时等,都可以根据动作的不同设置不同的展示样式,这个功能丰富了AxureRP的展现形式,且设置简单,配合上鼠标移入和移出交互事件,能基本满足网站内样式变换效果的设计,本文就着重介绍样式变换效果的设置方式。
在AxureRP内,并不是所有的组件都带有样式变化效果,部分组件的展示样式是比较固定的,如按钮,单行和多行文本框等,样式变化主要集中于图片组件,矩形和形状组件,以及菜单组件、树菜单组件等,这些也是常见的会带样式变换效果设计的元素。下面介绍一些这些组件自带的变换效果设置。

轮换效果
在AxureRP里,轮换效果有普通的轮换效果和图片轮换效果,其中图片轮换效果只应用于图片组件,其实效果都是一样的,只不过一种是变化图片而已。轮换效果实际上与OnMouseEnter和OnMouseOut事件的交互效果也一样,其实就是鼠标移入移出效果,只是后者设置更复杂一些,能胜任更多样的设计要求。前者设置简单,能更快速的完成设计效果。

?

轮换效果的设置窗口打开方式都是在组件上右键—选择编辑(组件名称)—选择编辑轮换或者图片轮换,由上图可对比看出,图片轮换效果可以导入图片,而普通轮换效果则可以设置更多的属性。导入图片只需点选导入—选择相应的图片即可,AxureRP会自动缩放图片,下面介绍一些通用的设置属性:

  • 字体 Font,可设置不同的字体
  • 字体大小 Font Size,可设置不同的字体大小
  • 粗体 Bold,可设置是否变为粗体
  • 斜体 Italic,可设置是否变为斜体
  • 下划线 Underline,可设置是否加下划线
  • 字体颜色 Font Color,可设置不同的字体颜色
  • 填充颜色 Fill Color,可设置不同的填充颜色,并有实心和渐变两种效果
  • 线条颜色 Line Color,可设置不同的线条颜色,并有实心和渐变两种效果
  • 线条宽度 Line Width,可设置不同的线条宽度
  • 线条样式 Line Style,可设置实线、虚线等线条样式

以上样式可跟据实际设计需要选择,只需选择各样式前面的复选框,就激活了该样式。设置了变换样式之后,可以选择预览提早预览效果,也可以在组件上,利用鼠标滑过组件左上角的黑白色方块来预览变换效果。

鼠标按下效果

这种效果在鼠标在组件上按下时才会展示出来,设置方式也是在组件上右键—选择编辑(组件名称)—选择编辑鼠标按下时的样式,里面的各个样式设置与上面类似,不再介绍。

选中效果

这个效果顾名思义就是要组件对象被选中的时候才会有效,不过当设计页面生成原型后,用鼠标先点一下组件这种并不算选中状态,这个效果要通过交互事件里面的设置组件为选中状态(Set Widget to Selected State)来配合使用,设置方式也是在组件上右键—选择编辑(组件名称)—选择编辑选中时的样式,里面的各个样式设置与上面类似,不再介绍。

禁用效果

这个效果即是当组件在禁用状态时的效果,组件本身可以在初始化的时候就设置为禁用状态,也可以通过交互事件里面的禁用组件事件来达到这个效果,一般在涉及权限控制或者操作限制的场景中会用到,设置方式也是在组件上右键—选择编辑(组件名称)—选择编辑禁用时的样式,里面的各个样式设置与上面类似,不再介绍。

样式变换设置比较简单,就不提供演示了。



无觅相关文章插件,快速提升流量

“AxureRP教程–组件样式变换”4 条评论

commenter

转走了哦。。。。。7685

commenter

不错,学习了!!

android market | 2012-01-29 23:25 |
commenter

Hey There. I found your blog using msn. This is a very well written article. I’ll make sure to bookmark it and return to read more of AxureRP. Thanks for the post. I will certainly comeback.

HYIP | 2012-01-29 23:25 |
commenter

学习