013. 图片热区——axure线框图部件库介绍

1. 图片热区为页面图片或者其他部件添加热区,添加交互

我们一般在做专题的时候,会遇到一些组合商品,但是又需要单独分别设置连接,如果是2张图片还好办点,可是如果和下图一样是集成在一张图片中的,可能就需要我们借用图片热区组件,给每一束鲜花添加热区,然后再设置交互,在新窗口打开链接地址。

鲜花1

我们为上面的图片添加热区,设置点击鲜花图片,单独开新的连接地址

添加热区

 

2. 图片热区作为页面锚点的使用

我们经常在有些网站看到一些楼层快速直达的链接按钮,如图:

楼层直达

其实,使用axure的页面锚点功能我们也可以制作出类似的效果

对于拖动出来的图片热区,我们必须首先给他设置标签,这样在设置交互的时候,我们才知道要滚动到哪一个锚点

设置锚点

 

如果页面没有发生相应的滚动效果,可能是你的页面设置不够长,随便放上个组件,把页面撑长。
页面够长了,点击按钮时才能体现出滚动效果。

 3. 图片热区相关属性设置

008. 认识axure部件库中各个部件的属性:http://www.heguangming.com/?p=122

4. 点击下载源文件

013. 图片热区——axure线框图部件库介绍

(本文出自萧何)

原创文章,作者:Smiler李想,如若转载,请注明出处:https://www.iamue.com/353/

(0)
Smiler李想Smiler李想
上一篇 2014-09-12 13:22
下一篇 2014-09-12 13:31

相关推荐

  • Axure RP 8 BETA

    新一代的Axure 8.0 现在推出 beta版本   [button type="danger" text="官网下载beta版本" url="http://www.axure.com/beta" open_new_tab="true"] 快速下载地址: Win版下载地址:http://pan.baidu.com/s/1o6p…

    2015-08-13
  • Mockplus原型交互跟我做之12–使用滚动区组件实现页面滚动

    Mockplus使用滚动区组件实现页面滚动

    2016-07-18
  • 需求与原型之间有堵墙

    从最初的一个产品概念到最终的产品上线,中间凝聚着一个IT团队的心血和付出。产品经理作为其中的主导者,在一定程度上影响着产品的成败和优劣。在整个产品研发流程中,每一环节都需要产品经理稳扎稳打的来推动项目…

    2016-11-01
  • 004. 如何关闭IE浏览器在生成原型时候的安全警告

    在上一节中,我们学习了如何生成网页原型的三种方法,当时我们采用的默认浏览器,搜狗浏览器,没有弹出安全警告,一般情况下,如果你的浏览器是IE的话,在每次生成网页原型的时候都会弹出如下安全警告,如图: &nbs…

    2014-09-12
  • 018. 内部框架——axure线框图部件库介绍

    网页框架代码<iframe border=0 name=lantk src="要嵌入的网页地址" width=400 height=400 allowTransparency scrollbars=yes frameBorder="0"></iframe>      看到上面这段代码,很多人肯定认出这是htm…

    2014-09-12
  • Axure RP 9 最新版汉化包下载-小楼

    【汉化包下载】Axure RP 9测试版汉化包V1.8版 For 3623下载 【使用方法】 1、将汉化压缩包解压缩。 2、将解压缩后的lang文件夹和dll文件全部复制粘贴到软件安装根目录下。 【Windows系统汉化路径】 以Win7-64位系统…

    Axure 2018-09-18
  • 009.图片组件——axure线框图部件库介绍

    我们在后面的组件使用中,都统一使用“从部件区域拖拽图片组件到页面区域中”   1. 图片载入 1.1 将图片组件拖拽到页面区域 1.2 双击图片组件 1.3 选择合适图片,点击打开 1.4 载入图片时会询问是进行优化。 1.5…

    2014-09-12
  • Principle 2.0.6Mac平台交互动效设计神器和谐版下载

    #交互学堂##Principle# 是前 Apple 工程师打造的一款交互设计工具,五分钟即可制作出一个具有完整交互动画的原型,并且可将交互动画生成视频或者 Gif 分享到 Dribbble、Twitter 等社交平台。此外 Principle 还支持…

    2016-10-31
  • axure日常使用问题集锦,不断更新!

    1. axure生成的原型文件,如何自动隐藏sitemap和page notes 答:axure默认打开的都是index为索引的文件,我们只需要打开其他的页面文件,就可以自动隐藏sitemap和page notes 2. axure 6.5版 如何让一个部件在页面向…

    原型设计教程 2014-09-12
  • 爱上Axure设计原型的十大理由

    10. 你的需求说明从未看起来如此的棒 让我们勇敢的面对吧,无论你对商业和系统的需求是多么的了解,写出所有相关人员都能够认真阅读并且确认的需求文档从来不是一件简单的事情。冗长而低效的会议让你无法忍耐,于是…

    原型设计教程 2014-09-12