热门推荐
Axure从零到实战:制作简单的小程序原型
2025-01-01 11:24

由于腾飞杯需要,国庆假期我需要做一个APP原型出来。在墨刀和Axure之间纠结了半天,最终还是选择了Axure。硬要说为什么的话,答案是以前接触过墨刀,假期权当多学一项技能吧。

Axure从零到实战:制作简单的小程序原型

这个无需多说,网上随便一找都可以安装,也不需要配置环境啊路径啊之类的额外操作。我安装的是Axure RP 8。

我是从零开始的,推荐自学网站

http://www.iaxure.com/3768.html

这个教程很基础,也并不难,我看了40个就开始上手实操了。

手机外壳的图片是网上找的,最终我们使用的是华为P30。不过我还是觉得这种老版的苹果比较好看,而且中间是矩形的很好处理;像XS或者P30,它们的刘海屏就很难处理。

遇到的第一个困难就是如何实现APP上滑动的效果。以这次的小程序为例,这里要用到两个动态面板:UI和Content。

这样一来,滑动效果就做好了。大家可以按F5预览用鼠标拖拽感受一下。

方法一

上面只是做出了最基本的滑动效果。如果你有试验它的html文件,你会发现滑动到边界时它不仅不能弹回来,还会拽到屏幕外。
所以,我们接下来要实现滑动到边界的交互。
还记得我之前在Content中设置的四个border(矩形)吗?他们就是用来判断边界的。
在UI的OnDragDrop中,添加8个事件,从上到下依次为用户滑动到

  1. case 5 左下角
  2. case 6 左上角
  3. case 7 右上角
  4. case 8 右下角
  5. case 1 上
  6. case 2 下
  7. case 3 右
  8. case 4 左

只列举4个case的action,因为截不下= = 不过都大同小异,没什么差别。
有几个需要注意的点

MOVE到的绝对坐标方向以及大小问题

先明确三点
1 输入的坐标将会是移动对象最终左上角的目标。这点很重要,它将决定你计算出来的坐标大小。
2 计算坐标的时候填写的是移动对象在自己页面(此例为第二个动态面板的页面)的相对坐标。
3 坐标系以右为x正方形,下为y正方向。
移动到的绝对坐标是需要动手算的。先给出我自己项目的参数
UI宽230 高360
Content宽713 高458
举两个栗子
1.超过右边界时,我希望屏幕横向(向左)慢慢回来,这时因为UI的左上角是(0,0),所以需要把Content放到-(713-230=483)即-483的位置,这样右边界线就重合了。再用cursor.y得到当前鼠标(手指)的y坐标。
2.移动到左下边界时,我希望屏幕定格在左下角。所以Content需要在(0,-(458-360=98))即(0,-98)处。

细节处理

每次action我都设置的是linear 500ms。即设置一个线性缓冲,如果没有缓存就弹回来得很突兀。

方法二(一条捷径

如果你觉得上面算来算去的太复杂,那其实还有一条捷径可走
在Case的Move中选择to x,y before drag,也可以达到相似的效果。
在赶时间的时候,推荐用这个,效果差不多,还方便快捷。
不过我个人觉得这个出来的效果没有我上面那种好,你分别试验一下就有感觉了。

比如这里,设置展开状态(state2)回到折叠状态(state1,左划入和右划出,效果比较真实。

    以上就是本篇文章【Axure从零到实战:制作简单的小程序原型】的全部内容了,欢迎阅览 ! 文章地址:http://www78564.xrbh.cn/quote/28545.html 
     动态      相关文章      文章      同类文章      热门文章      栏目首页      网站地图      返回首页 迅博思语移动站 http://www78564.xrbh.cn/mobile/ , 查看更多