AxureRP教程–使用图片映射

图片映射组件(Image Map Region) ,这个组件个人感觉比较纠结,如果不是交互事件里面有“滚动到图片映射区域”这个功能,估计很少会用到它,不过既然AxureRP提供了这样的一个组件,自然还是有它利用的价值,总结下来有如下三点:第一就是交互事件里面有“滚动到图片映射区域”功能,可以用来做页面定位;第二是其支持OnClick事件,OnMouseEnter事件,OnMouseOut事件,有些地方可以善加利用;第三是其自带有提示功能,这个可以大大省却某些需要带注释功能的设计工作。主要就是这三部分功能了,可能与其他组件配合使用还能实现更多的功能,留待大家研究,本文结合一些例子,说明这三个功能的一些应用和实现方法。

页面定位

这个在网站设计当中经常会遇到,如返回顶端啊,定位到某个栏目之类的,AxureRP提供的图片映射组件能实现这个功能,不过只是支持在同一页面内的定位,不支持不同页面间的跳转。“滚动到图片映射区域”事件的选择图片映射属性支持垂直滚动、水平滚动和同时垂直水品滚动三种,视情况选择。需要应用这个页面定位的功能,必然页面的高度需要足够的够,否则没有定位的效果。

?

设置两个栏目,一个栏目演示图片映射组件所支持的OnMouseEnter事件,一个栏目演示图片映射组件自带的提示功能,两个栏目隔的距离远一些。添加两个图片映射组件,放置在栏目名称后面,做好命名,以便区分,再添加两个按钮,设置按钮的OnClick事件,选择“滚动到图片映射区域”事件的同时进行水平与垂直滚动,然后选择好要滚动到的图片映射区域,这样就算设置完了。

图片映射组件的OnMouseEnter事件应用

之前演示过动态面板组件的状态切换功能,是用设置TAB标签的OnClick事件切换动态面板状态来实现的,这里就可以用图片映射组件的OnMouseEnter事件来切换动态面板状态,达到鼠标移入即切换面板状态的效果。

添加一个动态面板,设置三个状态:产品、活动、新闻,然后添加三个图片映射组件,放置在三个状态的TAB标签上,并设置OnMouseEnter事件选择切换动态面板状态即可。

?

图片映射组件的提示功能

这个功能是比较好的,设置起来也很方便,即鼠标放在指定区域上会有提示,主要还是图片映射组件在生成原型之后是透明的,不会影响页面的设计。在图片映射组件上右键—-编辑图片映射区域—编辑工具提示,然后在弹出窗口当中输入所需要的提示内容,生成原型后即可看到效果。

图片映射组件最常用到的是第一和第三个功能,与其他组件配合使用的时候,用到就是图片映射组件的这三种特性,大家可以研究下新的使用特性。

例子在AxureRP5.5版本下调试通过?

点此查看演示

点此下载源文件



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

“AxureRP教程–使用图片映射”2 条评论

初学者 | 2011-07-15 13:38 |
commenter

还真是没有用到过这个组件,学习了,以后可以尝试一下

八月 | 2011-12-26 15:30 |
commenter

很有用!~~ 感谢