如何用 Axure 制作类似的手机滑屏效果原型

来源：蜘蛛抓取(WebSpider) 时间：2017-04-24 13:41 标签： axure 快速原型设计
axure制作手机APP滑动屏幕，实现上下滚动屏幕效果_道友_请-留-步_新浪博客
axure制作手机APP滑动屏幕，实现上下滚动屏幕效果
脑图概览
1.控件：顶部导航和底部导航（矩形：300*30），前面板（动态面板：300*360），后面板（动态面板：300*720）
2.填充：在后面板的状态里添加控件，方便查看滑动的效果。
3.事件：添加拖动事件
①选中【前面板】，选择事件【拖动时】双击添加事件。在用例编辑器中选择【移动】
②编辑用例，选择【后面板】【垂直拖动】，确定。
③选中【前面板】，选择事件【拖动结束时】，添加条件【后面板】【未接触】【顶部导航】，确定。
④编辑动作，将【后面板】移动至【（0，0）】位置，选择【摇摆】
【200ms】，确定。
⑤添加第二个【拖动结束时】事件，设置条件，【后面板】接触【顶部导航】，未接触【底部导航】，确定。
⑥设置动作，移动【后面板】至【（0，-360）】【摇摆】【200ms】（-360=360-720），确定。
⑦最后比较重要的一步，在用例上右键把条件切换一下，改【else if】为【if】。
⑧效果预览（动态图，点击大图可预览效果）
本文的原型，链接: /s/1kVlRWGJ 密码: 3sx4
娴嬭瘯鐨勫晩鍟婂晩鍟婂晩鍟婂晩1111
博客等级：
博客积分：0
博客访问：11,913
关注人气：0
荣誉徽章：您的位置：
& Axure制作产品原型如何手机上运行？
Axure制作产品原型如何手机上运行？
来源：产品100干货速递　|　作者：　|　时间：　|　 标签：
　|　分享到：
4、复制生成的html中原型链接，选择without Sitemap,如图5：
图5 复制链接
5、在safari中粘贴链接，并打开，已经可以看到和屏幕宽度的界面，并添加到主屏幕，如图6：。
图6 添加到主屏幕
6、可以通过桌面的快捷icon，进入原型，这个时候已经适配了手机，躺着桌面的icon,丝毫不会让人看得出是原型，下图7：
图7 test桌面icon快捷启动
小编我拿公司的产品原型按步骤做了下，可以实现的哟！还把公司程序员给忽悠了一下。小编给大家把细节补充一下：
1. 使用axureshare比EasyWebSevr要方便
2. 在得到链接后，需要使用iphone手机上的safari浏览器
3. 一定要记住你设置的文件密码哟！访问链接时需要输入的。
博主写在最后：其实不一定是iphone才可以的，安卓的其他浏览器也是可以的，只是没有那么仿真，但是在手机上显示还是可以的。
原文地址：
好特网发布此文仅为传递信息，不代表好特网认同期限观点或证实其描述。注册 | 登录
投稿、稿件问题联系Q：
产品经理就业特训营，专门为大学生和准备转型做产品的人量身定制，60天线下培训，包就业！
axure 8.0出了这么久了，在不久前出了正式版，正式版相对于测试版，相对稳定了好多。然而8.0相对于7.0在功能上又丰富了好多，主要增加了对设计这一块的功能，对于一些要求不是很高的设计，在8.0上就可以完成。
今天就以8.0，写了一篇关于模拟手机端纵向滑动的效果。
当我们的手机的内容超过屏幕尺寸的时候，就需要滑动浏览之前未出现的内容。
此份教程也可以模拟出上拉刷新和下拉刷新事件。
先看预览效果吧：
OK，话不多说，接下来进入正题。
因为是教程，所以很多对于设计和排版上就没过多的装饰了，这里主要有三个部分：一个是状态栏、内容、底栏。这次要操作的部件就是“内容”面板。内容面板一共有两个面板组成，最外层的面板的作用是固定尺寸，固定拖动的范围。第二个面板作用是固定内容，添加事件，完成交互效果。如下图
这里要添加事件的是“内容”面板，也就是里层的面板，这里涉及到两个事件：“on drag”拖动事件和“on drag drop”拖动停下事件。
“on drag”，该事件的作用是，让我们的面板能够被拖动，并限制拖动的方向和范围。这里设置的是y轴方向拖动。
接下来是比较重要的，如果只有上面的事件，当我们预览的时候会发现，我们拖动中间的内容面板，面板会超过屏幕尺寸，在距底栏和状态栏会有一片空白。这时就需要第二个事件“on drag drop”，拖动落下时。增加这个条件，就可以防止上面的情况发生。
在添加下面事件之前，我们需要确定两个位置，一个是“内容”面板的起始位置，也就是离开状态栏时的位置，这里是（0，5）第二个位置是，内容面板离开底栏时的位置，这里的坐标是（0，-435）。
双击“on drag drop”，添加条件，如下图：
这里解释一下这个条件，这里一共两个值和一个条件，一个值是this.y，这里的this就是当前所操作的部件，这里是“内容”面板，第二个值是5，5是“内容”面板起始所在位置。整句条件表达式的意思是，当我们拖动时，如果“内容”面板的y坐标大于或等于5，就让“内容”面板回到该位置。
同理：当向上拖动面板时，如果“内容”面板离开了底栏，也就是y坐标小于了－435，就让面板回到该位置。
到此，整个教程就完成了，可以预览一下效果了。
做这种效果，其实方法还是有很多的，接下来可以再介绍一个方法，在文章之前提到了状态栏和底栏，我们可以根据它们的所在位置，设置如下条件。
方法很多，就看大家对事件的理解程度和对软件的熟悉程度了。
这里就不放原型原件了，毕竟交互比较简单，看教程也应该能做出来，而且放了原件，如果某些童鞋实在做不出来，直接看的原件，就没有了求学的欲望，这样还是不可行的。所以希望大家多多摸索摸索，熟悉熟悉部件和事件。axure是个比较强大的工具，好好利用。
作者：叶强（微信号Jason_Ye），1年互联网产品设计经验，SaaS行业。
本文由 @叶强 原创发布于人人都是产品经理。未经许可，禁止转载。
收藏已收藏 | 145赞已赞 | 15
投稿、稿件问题联系Q：
产品经理群运营交流群营销交流群
文案交流群
Axure交流群
PM要学点技术
关注微信公众号
12个回答54人关注
8个回答11人关注
8个回答17人关注
13个回答16人关注
9个回答58人关注
16个回答22人关注

我要回帖

更多关于 axure 快速原型设计 的文章

 

随机推荐