南京排名推广(南京产品推广)
31
2022-12-19
本文目录一览:
作品名称:订餐小程序(外卖+堂食扫码点餐)原型模板
当前版本:V1.0
软件版本:Axure RP 8
文件格式:RP
作品预览及获取链接:
作品介绍:
这是一款外卖点餐、堂食(扫码点餐)的微信小程序,
主要功能包括:外卖以及堂食订餐、订单管理(堂食以及外卖)、我的(个人中心)以及积分商城四大模板
部分功能展示如下:
浏览并获取更多原型作品和资源,欢迎访问纤纤露的官方店:
模板(母版)是在不同页面需要同样部件时用的。 我理解你描述的需求是,框架固定,框架内内容变化,若是如此,做嵌套的动态面板即可。
axure制作的是网页原型,很难做到很精致,但是做的很快,跟w3标准不符,也不是冲着网页去的。php制作的网页其实就是动态的生成了html,本质是html,你对前端不了解的话,去开创者素材多下载几个前端模板熟悉熟悉就知道了!
Axure RP 8打开之后可以看到很多母板,可以利用母板保持整体系统设计风格一致。对母板进行修改,其他的母板也相应的进行修改更新,可以很大程度上节约时间。母板可以进行新建页面、添加文件夹、添加子页面等。
两种模式均有模板,使用非常简单。
用了模板之后,只需要填写中继器内容,删除不需要的搜索/筛选框,修改文本框提示文字即可使用。
筛选条件不用自己写,系统能自动根据中继器内容自动添加(由于模板筛选的中继器较多,所以加载大约需要10秒时间,请耐心等待,删除不需要的筛选条件后反应很迅速,如案例)。
Axure RP是一款专业的快速原型设计工具。Axure(发音:Ack-sure),代表美国Axure公司;RP则是Rapid Prototyping(快速原型)的缩写。
总结如下:
Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。
作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理 。
Axure RP的使用者主要包括商业分析师、信息架构师、产品经理、IT咨询师、用户体验设计师、交互设计师、UI设计师等,另外,架构师、程序员也在使用Axure。
一位有PC端原型设计经验的产品人员,设计移动端产品原型时,遇到的第一个问题可能就是页面拖动的效果了。我们在设计PC端产品时,利用鼠标滚轮进行整个页面的展示,然后到了移动端,利用手指进行拖动,滑动展示整个页面。两种交互方式截然不同。
axure制作移动端产品原型时,会遇到很多难题,建议产品同事尝试一些诸如mockplus等更适合移动端的原型设计工具。当然,axure是完全可以实现移动端交互的,只是我们需要利用动态模板、坐标定位等等方式灵活的实现目标。
接下来进入主题,跟大家分享一下【如何利用axure实现移动端页面拖动展示效果】
打开axure前,大家不妨先设想一下任务的实现方法:
1、移动端显示的页面是固定尺寸的,里面的整体页面可能会超出固定尺寸范围,所以我们需要建立一个动态模板,使其成为固定尺寸的页面,而将超长的整体页面放入其中。
2、整体页面必须可以被拖拽,所以整体页面又是一个动态面板
3、在我们使用移动端产品,进入页面后,向下拖拽,一般页面会被下拉,而且上方会出现【放开刷新】的提示;同理,我们手指上滑,页面被拖至底部,再不停上滑,页面会被上拉,手指放开后,页面下滑至原位。所以我们axure中对整体页面的动态模板需要设置离开顶部或者离开底部时,自动返回原位的交互
这三个实现方法,是我们实现拖动交互的主要思路。接着我们就具体看一下如何在axure中实现目标。
1、准备工作:打开axure,新建文档,添加一张iphone的背景素材,顶部添加的wifi和电量的信息,以及顶部导航栏(这些素材百度都可以找到,ios8 UIkit),准备工作完毕
2、?添加一个动态面板,这个面板相当于我们的屏幕,所以名字可以称为“固定页面”
3、?动态面板内再添加一个动态面板,这第二个面板相当于我们要展示的内容,需要拖动才能展示整个内容,长度自然也比“固定页面”要长,可以称之为“长内容”
4、?长内容的面板内添加正文内容,这里我添加了一张图片
5、?接下来先实现长面板的拖动功能,在固定页面内对长内容面板添加onDrag交互,交互的内容是move,而且move with y,也就是长面只能沿着Y轴拖动
6、?拖动功能已经实现,我们可以先预览一下已经完成的效果(点击axure操作栏的Preview按钮),尝试着上下拖动图片,结果符合预期,只是拖动后,图片不能复位,那么接下去就要实现复位的功能
7、?为了实现复位,我们需要在固定页面的顶部和底部添加两个判断用的矩形。顶部的矩形我们暂且称之为“上离开判断区域”,顾名思义,当长内容面板向下拖动,离开“上离开判断区域”,长内容需要move到原始的"0,0"坐标,这个交互我们称之为“下拉复位”。判断区域可以设置为透明,与长内容同宽,高度为象征性的2px
8、?选择长内容面板,在onDrag动作中添加新的交互“下拉复位”,增加触发条件:当area of widget 长内容 is not over area of widget 上离开判断区域。那么首先wait 400ms,接着move 长内容,编辑结果 move to X:0 Y:0。
注意:编辑完下拉复位后,这里有一个很重要的改动,在交互栏中,右击将“下拉复位”的else if条件更改为if。必须这样做,不然下拉复位的动作无法实现。至于这样做的原因,就留给大家思考吧。
9、?上拉复位的动作完成后,我们还要实现下拉复位。首先我们添加一个判断框,边框与填充均为透明,尺寸为长内容的宽度与象征性的2px,定位于固定页的底部
10、?在实现下拉复位的时候,我们给长内容的复原位定为X:0和Y:0,这个很容易理解,长面板向上复位时肯定移动到(0,0)的位置。但现在实现上拉复位,我们需要计算长面板的高度,这是因为长面板拖到底部后,固定页面显示的是长面板的下部分内容。这里可能有些费解,看我的截图也许能帮助理解
11、?经过上一步的操作,我们得知当整个长内容显示到最底部时,整个长内容的定位为(0,-295),接下去就和实现下拉复位一样了,在交互栏onDrag动作中添加交互“上拉复位”,添加触发条件 当area of widget 长内容 is not over area of widget 下离开判断区域。那么首先wait 400ms,接着move 长内容,编辑结果 move to X:0 Y:-295。
编辑完上拉复位后,在交互栏中,右击将“上拉复位”的else if条件更改为if。
12、?所有条件编辑完毕,查看一下交互栏onDrag动作中的所有交互
13、?大功告成,赶紧运行一下观察效果
总结:
利用axure实现移动端最基本的上拉与下拉动作是如此复杂,所以我还是建议利用其它原型工具制作移动端原型。然而即便如此,axure还是有其优势,实现静态的页面要比其它原型工具都要便利。
这次的功能实现,还有很多能提升的提升的地方,比如复位的时候,我们可以添加动效,使得复位时页面的移动更加平滑。诸如此类的改进,还是留给热爱axure的大家去探索吧。
关于axure模板网页和axure模板怎么用的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注云尚网络www.ysfad.net。
发表评论
暂时没有评论,来抢沙发吧~