Axure原型设计:仿移动端HTML5滑动介绍页面
首页
阅读:
admin
2019-08-18 21:03

  每次QQ有新的重要版本发布时,移动端的介绍使用了HTML5页面,通过7个独立的页面简洁地介绍了它的主要功能。在每个页面切换时伴随着背景图片的切换,让介绍页面生动有趣。

  我们来看看如何实现这种APP介绍页面的效果,点击下方的链接查看完成后的效果,下面是完成后的效果图:

  5、准备资源:资源包括介绍页面上的图片,通过查看源代码,样式表从中获取图片位置并下载,最终下载后的资源如下图所示(从演示页面下载源文件):

  (1)添加一个矩形框作为菜单栏,大小为480*67,背景为蓝色,文字为白色,字体大小为18,设置文字内容为“Im QQ 每一天 , 乐在沟通”。

  ,大小为480*680,放在标题栏下方,命名为main,取消“自动调整为内容尺寸”勾选状态,双击进入第一个状态,添加第一个介绍页面。

  导入背景图,设置大小480*680,添加QQ的logo和介绍文字图片,添加版本信息和发布日期,最后添加一个无边框矩形作为下载按钮,大小为250*60,蓝底白字,文字大小为28,圆角大小30:

  (3)为动态面板main添加第二个状态,在中间位置添加一个文字,大小为28,文字颜色为白色(为了教程看得清楚,将文字设置成了黑色)。

  ,作为菜单栏,双击修改文字内容为”点击下载源文字“,单击后下载本实例源文件(在浏览器中打开页面后下载)。

  添加箭头图片,命名为arrow,右键转换为动态面板,双击进入动态面板状态一,添加一个热区元件用来做事件控制,命名为control,这个热区通过显示和隐藏事件来处理箭头动画的循环向上滑动显示效果。

  c.隐藏箭头图片和控制元件control,箭头添加淡出动画效果,时长1秒,control的隐藏时会触发它的隐藏事件。

  显示当前control元件和箭头图片,显示control时会触发它的显示时事件,这样达到循环处理的目的。

  添加一个新的动态面板,大小为480*680,命名为back_img,添加三个状态,用来放置背景的三张图片,将该动态面板放在动态面板main之后。

  添加两个热区,用来控制向上和向下拖动结束事件,给热区添加单击事件,事件里分别添加两个事件分支,分别显示不同的背景图片。

  您好大神,案例的原件能分享下么,我想学习,谢谢了。 没找到这个案例的 下载地方,如果方便,可以发我邮箱 2039655515,或者分享个百度网盘链接也可以的,跪谢了,大神!

  请问是如何将演示原型,通过链接置于您的文章中的呢?我只知道axure有axure share的分享功能。求指导,谢

  用axure自带的就好了。要么就自己去阿里云买个最低配置的服务器,原型画完生成html放上去就可以了。

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。