axure商城

【Axure9.0】挑战高保真视频类实用项目原型

原型预览链接:http://119.29.198.241:8080/pp/index.html

本文主要聊一聊本原型的制作思路,如有不妥,欢迎小伙伴进行指正。

另外,本原型是用Axure9.0制作,使用Axure8.0的小伙伴也可以借鉴一下

【Axure9.0】挑战高保真视频类实用项目原型

首先是制作原型的思路:

【Axure9.0】挑战高保真视频类实用项目原型

整个原型只有两个页面构成,“上帝视角”页面手机屏幕部分是一个框架,指向了“主页”页面,其余的都是一些辅助性的东西,例如背景,顶部导航栏等等,这样做看起来会很整洁,思路会清晰一些。

再来看主页

【Axure9.0】挑战高保真视频类实用项目原型

“上帝视角”的框架就是指向这里,所有的交互都在这里,我是用一个动态面板,四个状态,每个状态下分别是“首页”,“视频”,“分类”,“我的”这四个模块,在每个模块进行动态面板的嵌套,显示每个模块包含的不同页面。就这样,层层递进,拼成了原型的所有页面,都在这一个动态面板里,至于页面跳转,都是动态面板的显示与隐藏,状态的切换,还可以伴随着特效。不过有一个缺点,就是在制作过成中容易操作错误。

第二就是模拟手指滑动

【Axure9.0】挑战高保真视频类实用项目原型【Axure9.0】挑战高保真视频类实用项目原型【Axure9.0】挑战高保真视频类实用项目原型

这里我做了下拉刷新,上拉加载,

记住是要用鼠标拖的哦,而且松开鼠标他会自己回去,这也是为了高度还原手机app使用场景,比用鼠标滑轮更加形象,所用到的知识点就是动态面板的拖动,

拖动时移动当前动态面板跟随拖动

当动态面板的顶部大于**时,显示**,

拖动结束时,当动态面板顶部大于**时,移动动态面板到达绝对位置(**.**)

隐藏**

事件就是这样的,因为详细说的话太多太多了,我这里就简单说一下。

在本原型里,几乎所有页面我都做了鼠标滑动效果,很麻烦,不过效果还是不错的。

第三就是中继器的综合运用

【Axure9.0】挑战高保真视频类实用项目原型【Axure9.0】挑战高保真视频类实用项目原型【Axure9.0】挑战高保真视频类实用项目原型

中继器的用法很多很多,我这里主要是用了中继器“删除数据”和“加载数据”的功能,其实还有很多很多功能这里用不到。关于中继器,用法比较复杂,这里就不详细解释了。

第四就是变量及字符串函数的运用

【Axure9.0】挑战高保真视频类实用项目原型 【Axure9.0】挑战高保真视频类实用项目原型

本原型高仿了登录注册功能,以及账号密码的判断,以及各种提示文字

手机号:0755

密码:8888

不但高仿登录,注册也可以,可以在原型的注册页面进行注册,并且可以用注册成功的账号密码进行登录

这就是考验 “全局变量”,”局部变量”,以及”字符串函数”的综合运用了。

以上就是这个原型的制作思路,以及运用的知识模块,有很多地方我没有细说,因为内容实在太多了。。。

最后希望我的原型店铺早些批复,本网站越来越好

初念@制作

给TA打赏
共{{data.count}}人
人已打赏
Axure教程

Axure教程(高级):跟随鼠标方向的面板滑动动画

2019-3-24 18:50:18

Axure教程

Axure RP Chrome插件安装失败后的解决办法

2019-3-29 21:37:05

axure商城
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索