Axure RP如何制作返回顶部以及悬浮效果(axure怎么做返回顶部)优质

扫码添加渲大师小管家,免费领取渲染插件、素材、模型、教程合集大礼包!

Axure RP在制作网页原型图时。经常会设计到轮播图片。返回顶部。悬浮效果和生成文件等基础功能。那么Axure RP如何制作返回顶部以及悬浮效果呢?其实并不复杂。小渲这就来告诉大家。

工具/软件

硬件型号:小新Air14

系统版本:Windows7

所需软件:Axure RP 8

方法/步骤

第1步

打开Axure RP软件。点击工程。选择页面样式编辑器。在页面样式编辑器里有对齐。字体选项。将页面调试为居中显示。字体选择宋体。如下图所示:

Axure RP如何制作返回顶部以及悬浮效果(axure怎么做返回顶部)

Axure RP如何制作返回顶部以及悬浮效果(axure怎么做返回顶部)

第2步

点击布置。选择网格和辅助线。根据需要进行调试。网格和辅助线对设计会起到辅助作用。如下图所示:

Axure RP如何制作返回顶部以及悬浮效果(axure怎么做返回顶部)

轮播图片

第1步

做轮播图。轮播图也是动态的。同样也需要动态面板。将动态面板拖动致设计区。调整位置和大小。并设置状态。然后在添加一个图片切换指示按钮。也是用动态面板。添加状态。在每个状态里显示不同的指示样式。如下图所示:

Axure RP如何制作返回顶部以及悬浮效果(axure怎么做返回顶部)

第2步

点击右侧编辑区里的载入时。设动画效果。设置的参数要和轮播的图片对应。设置参数。如下图所示:

Axure RP如何制作返回顶部以及悬浮效果(axure怎么做返回顶部)

第3步

点击预览。查看效果。如下图所示:

Axure RP如何制作返回顶部以及悬浮效果(axure怎么做返回顶部)

返回顶部

第1步

在最下面有一个回到顶部的按钮。在库里找个矩形和一个箭头。按快捷键Ctrl+G。将其组合。然后右键。转换为动态面板。如下图所示:

Axure RP如何制作返回顶部以及悬浮效果(axure怎么做返回顶部)

第2步

在库里在选择一个占位符。放到最顶端。透明度设置为0。如下图所示:

Axure RP如何制作返回顶部以及悬浮效果(axure怎么做返回顶部)

第3步

选择返回顶部按钮。设置鼠标单击时的参数。如下图所示:

Axure RP如何制作返回顶部以及悬浮效果(axure怎么做返回顶部)

第4步

点击确定。返回顶部按钮就设置完成了。

悬浮效果

第1步

做右侧的欢迎咨询。它是浮动在右侧的。按照欢迎咨询的样式编辑好后。转换为动态面板。选择固定到浏览器。设置参数。如下图所示:

Axure RP如何制作返回顶部以及悬浮效果(axure怎么做返回顶部)

第2步

到这里。数通畅联官网首页的内容全部做完了。点击预览。就可以看到以假乱真的设计原型了。如下图所示:

Axure RP如何制作返回顶部以及悬浮效果(axure怎么做返回顶部)

生成文件

第1步

预览没有问题后。点击发布按钮。生成html文件。如下图所示:

Axure RP如何制作返回顶部以及悬浮效果(axure怎么做返回顶部)

第2步

弹出编辑框。选择生成路径。点击生成。就可以生成html文件了。如下图所示:

Axure RP如何制作返回顶部以及悬浮效果(axure怎么做返回顶部)

以上关于“Axure RP如何制作返回顶部以及悬浮效果(axure怎么做返回顶部)”的内容小渲今天就介绍到这里。希望这篇文章能够帮助到小伙伴们解决问题。如果觉得教程不详细的话。可以在本站搜索相关的教程学习哦!

以上是由资深渲染大师 小渲 整理编辑的,如果觉得对你有帮助,可以收藏或分享给身边的人

本文标题:Axure RP如何制作返回顶部以及悬浮效果(axure怎么做返回顶部)
本文地址:http://www.hszkedu.com/59809.html ,转载请注明来源:云渲染教程网
友情提示:本站内容均为网友发布,并不代表本站立场,如果本站的信息无意侵犯了您的版权,请联系我们及时处理,分享目的仅供大家学习与参考,不代表云渲染农场的立场!

发表评论