《Axure高保真教程:画图标记原型》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强背景,动态面板,文本标签,图片等多维度案例或实操来进行更多的学习;此教程是由Prometheus在2021-08-25发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。
在很多软件中,我们都能看到画图标记功能。例如在阅读时,标注出重点内容;截图时,圈出需要他人注意的地方。但Axure在演示时,并没有相关功能。因此,作者分享了Axure高保真教程,总结如何制作画图标记原型,一起来看看吧。
画图标记在很多软件中是一个常用的功能,例如阅读时标记出好词好句;看地图时标记出具体位置;玩找不同的游戏时标记出不同的地方……
由于Axure在演示时并没有相关的标记功能,所以本期教程已找不同的游戏为案例,主要介绍如果制作动态的标记元件,方便我们日后的使用。
原型地址:https://noq0h4.axshare.com/#g=1
1. 背景图片
需要被标记的图片,如果需要被标记的是文章或者地图,也可以用他们代替,原理都是一样,只是做背景使用。
2. 圆形图案
填充颜色选择透明,边框颜色为红色,案例中是圆形图案,如果你们需要用矩形或者下划线,也可以用对应形状代替。
新建两个文本标签,其中一个命名为x值,另外一个命名为y值,默认文本0,这两个文本用于后续计算逻辑,所以可以隐藏起来。
4. 动态面板
动态面板的大小和背景图片一致,移动至和背景图片相同的位置。或者说动态面板的所在的地方,就是能实现动态交互的地方。
我们将圆形以及xy值的文本放在动态面板内。
交互处理:
在动态面板鼠标按下时:
鼠标拖动时:
拖动结束时:
这里解释一下,为什么要将当前的动态面板和图片都置于底层,因为如果需要标记多个位置的话,我们首先需要复制上述写好交互的动态面板,需要标记几个就复制几个,当第一个画完后,会挡住下面的元件。
因此需要将他置底,置底后又被图片挡住了,看不到已标记的内容,所以还需要将图片置底,这样就可以实现标记多个的交互了。
以上就是Axure高保真教程:画图标记原型的全部内容介绍了,关于更多Axure教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。
赠人玫瑰,手有余香
< 上一篇 axure中继器使用教程之制作直播视频的卡片列表操作实例
> 下一篇 Axure用中继器制作抽签原型操作实例
2022-05-24 09:35
2022-04-15 10:21
首席设计师
高级视觉设计师
高级插画设计师
输入的验证码不正确
评论区
暂无评论