Axure可以制作出保真度相当高的原型，除了页面布局、UI以外，其强大的交互设计能力让这些本来静止的元素高效交互起来，形成以假乱真的高保真原型。本文介绍如何做一个在滚动中将菜单固定在顶部的页面，属于中级Axure案例。本文旨在展示交互效果，不对页面具体内容和UI进行设计。
　　1、制作页面
　　为了体现效果，我们需要做一个比较长(高)的页面，在Axure工作区中拖入4个矩形，分别为顶部标题、菜单、页面内容、底部。设置矩形宽度和高度，让其看起来像是一个页面布局。
　　2、制作随页面滚动的标题
　　为了让效果更加明显，我们将标题进行区别设置，设置矩形背景色为黄色，你也可以通过设置其他属性来进行区别。将标题命名为“标题1”。
　　3、制作固定的标题
　　滚动中固定在顶部的标题并非页面上的标题，是单独制作的。复制“标题1”，将复制的标题命名为“标题2”，设置“标题2”x坐标等于“标题1”的x坐标，y坐标等于0。修改“标题2”背景色为蓝色。
　　4、制作固定的标题
　　右键单击“标题2”，点击“转换为动态面板”，将动态面板命名为“固定菜单”，在元件属性与样式中点击“固定到浏览器”勾选“固定到浏览器窗口”，完成后隐藏动态面板。
　　5、制作固定锚点
　　在工作区中拖入一个动态面板，设置其x和y坐标等于0，调整其宽度和高度分别为60和20，将动态面板命名为“固定锚点”，设置其固定到浏览器。
　　6、制作滚动锚点
　　在工作区中拖入一个热区，设置其x坐标等于0，y坐标等于“菜单1”的y坐标加上固定锚点的高度，设置其宽度等于固定锚点的宽度，高度直接拖动到页面底部，命名为“滚动锚点”。
　　7、设置交互
　　打开页面交互面板，双击“窗口滚动时”事件，添加条件“元件范围 滚动锚点 接触到 元件范围 固定锚点”，确定，设置动作为“显示 固定菜单”。
　　8、设置交互
　　继续在“窗口滚动时”事件上添加动作，添加条件“元件范围 滚动锚点 未接触 元件范围 固定锚点”，确定，设置动作为“隐藏 固定菜单”。
　　9、预览效果
　　至此，所有设置均已完成，按F5进行预览吧。APP页面上下滑动及弹回效果实现APP页面上下滑动及弹回效果实现人人都是产品经理百家号下拉刷新以及上拉滑动页面，是每个app都具备的最基础的交互效果，本文旨在模拟一个大概效果，细节可忽略。操作环境软件版本：AXURE 8.0 中文版；操作系统：win7 64位操作系统； 浏 览 器：Chrome 版本 63.0.（正式版本） （64 位）实现步骤元件摆放两层动态面板，外层动态面板是手机的可视范围，可以理解为手机的屏幕显示区域；里层的动态面板是具体的页面内容，是需要被移动的内容；上下拖动拖动外层【屏幕动态面板】时，垂直移动内层的【内容动态面板】，同时要设定页面的顶部及页面的底部边界范围，不能出界。弹回效果移动结束时，让内容页面顶部弹回至与顶部菜单对齐；页面底部弹回至与底部菜单对齐。想看效果的，请直接拉到底部链接。下面开始详细操作过程，因为是新手入门，会讲的非常细，也会稍显啰嗦，高手请忽略。第一步，元件摆放及动态面板嵌套（1）拉2个矩形框，分别是顶部（命名top）和底部（命名bottom）；（2）添加一个矩形为屏幕显示层（设置其为动态面板，命名view），然后点击view的state1进去，设置其为动态面版（命名content），长度随意设置，但需要大于view的高度，这样才有拖动的效果；（3）最后设置content的state1（即最终看到的页面内容），这里随便放2张图片，方便演示。每个矩形的尺寸如下：top、bottom：（300，50）view：（300，450）con：（300，800）设置完之后，回到最开始的主页面会看到是这样：这是因为，内容层默认把外围的view层撑大了，这里需要重新调整view层的高度为最开始设置的高度，即450，同时要设置top、bot为最顶层，否则会被覆盖。设置完之后看到的界面及页面层级是这样的：第二步，设置垂直移动交互，限定边界页面摆放完之后，下面开始交互。这一步主要就是设置好页面的上下拖动（滑动）的效果，并限制好页面的顶部、底部边界范围：不能无限制的上下移动，需要给定一个限制范围。逻辑实现：拖动view层的时候，移动con层，并设定好con移动的边界。具体操作：选定view层，添加交互用例【拖动时】，添加【移动】动作，勾选con层，移动效果选择：垂直拖动。然后，设置界限，添加边界。边界设置，依次设置顶部，底部。下面演示两种不同的边界效果（熟练以后，可自行设定任意边界范围）第一种效果页面（con层）向下拖动时，顶部不能脱离top层的下边；页面（con层）向上拖动时，底部不能脱离bot层的上边。因为设置边界是通过Y坐标来实现的。所以，设置边界之前需要搞清楚元件的Y坐标是怎么回事，怎么获取。这里先看设置操作，后面具体细讲坐标。这里的边界设定，其实就是设置Y坐标位置。要想页面的顶部不能脱离top的下边界，那么con层的Y坐标范围需要限定在什么范围？首先，需要搞清楚坐标原点的位置在哪里。坐标原点位置如下（红点位置）：那么页面顶部的Y轴坐标只能在&0 的范围移动（即页面向上移动，Y坐标为负）；同理，底部的Y坐标只能在 &view层高度 的范围内移动（即只能向下移动），这样上下边界就设定好了。那么问题来了，view层的高度怎么获取？难道直接填写高度450吗？（本例中，view的高度是450），如果直接填写450，效果是可以实现的。但如果我们修改了view的高度的话，需要重新设定边界，这样比较麻烦。获取view的高度，还有另外一个办法，用变量和函数即可。我们移动屏幕的时候，其实拖动的是view层，即当前操作对象是view层，所以获取view的高度可以用 this.height 语法来表达（关于具体语法及函数，自行研究）AXURE的函数或变量，通用格式为：[[变量及函数]]因此，最终的表达式可以写成 [[this.height]] 即可。最终的设置如下：效果预览可自己体会。第二种效果页面顶部最多可以下拉到屏幕一半的高度，底部最多可以上滑到屏幕一半的高度。根据以上的逻辑，只需要把坐标改一下即可：顶部&=[[this.height/2]]，底部&=[[this.height/2]]，移动预览截图效果：第三步，设置页面上下边界回弹的效果针对上面第二种效果，我们来实现：当页面顶部下滑出top的下边界时，需要回弹到top的下边界（下拉刷新效果）；当页面底部上拉远离bot上边界时，需要回弹到bot的上边界（我们是有底线的效果）逻辑实现及交互：我们拖动view层结束的时候，如果页面顶部Y坐标&0，那么移动页面顶部的Y坐标回到原点位置（0，0）（即回到top下边界）；同理，我们拖动view层结束的时候，如果页面底部Y坐标&view的高度，那么移动页面底部的Y坐标回到位置（0，view高度）（即回到bot上边界）；以上逻辑需要用函数来表达。设置顶部效果首先得出顶部的临界值。因为页面顶部与con的Y坐标是一致的，此时的临界值就是0，当它从原点（0，0）开始向下滑动时，用函表达就是：[[con.y]]&0，（con.y表示变量con的Y坐标值，也就是红点的那个Y坐标值，需要提前定义局部变量con为con层，否则函数不能生效。）即 如果 [[con.y]]&0，那么 移动 con层到（0，0），同时给一个动画效果：缓慢退出。设置底部效果首先搞清楚的临界值，即页面底部与bot挨着的时候，此时，CON的Y坐标值（以原点位置开始算的）是处于最上面的隐藏看不见的位置，那么此时，con.y的值是多少呢？是 【view高度-con的高度】（为负值），如果继续上滑的时候，Y坐标值就会小于临界值。表达式就是[[con.y]]&[[this.heing-con.height]]，移动con层到（0，[[this.height-con.height]]）。最终的操作如下：需要注意的是，用到con.y的函数时，都需要设定con为局部变量，否则无法生效。设定条件如下：最终效果预览如下：https://wkaay5.axshare.com。~~~END~~~本文由 @恒亮 原创发布于人人都是产品经理。未经许可，禁止转载。本文仅代表作者观点，不代表百度立场。系作者授权百家号发表，未经许可不得转载。人人都是产品经理百家号最近更新：简介:中国最大、最活跃产品经理社区作者最新文章相关文章查看: 933|回复: 1
Axure8 实现移动端页面上下滑动效果
主题帖子积分
1.将Rectangle(矩形)拖至画布,大小设置为w:326px h:640px,位置(0,0),圆角半径38
2.在拖一个矩形至画布,大小设置为w:320px h:568px 位置(3,39)
此时,一个建议的iPhone 5s屏幕就诞生了
下面步入正题
1.拖入一个Dynamic Panel(动态面板),取名First,大小设置为w:320px h:568px 位置(3,39),双击状态1
2.在状态1中继续添加动态面板,取名second,大小设置为w:320px h:800px 位置(0,0).
3.在second的状态1中,添加图片或者控件等,大小在w;320px h:800以内
4.返回到主页面(home页),单击first动态面板,在交互中双击&拖动时&后,进入case1编辑器,选择移动,勾选second,设置为垂直移动
此刻,预览下,会发现已经实现了页面的上下滑动效果,...但是,这个滑动是停不下来的,这就需要我们添加判断界限的条件,下面几步比较关键
5.在主页面(home页)拖一个热区至画布,取名hot1,大小设置w50,h10,位置(131,44)
接着复制hot1取名hot2,位置(131,585)
..相信大家已经清楚了,这两个热区将作为我们判断山下滑动界限的标志
6.还是在first的交互中,双击&拖动结束时&,在case1中,点击&添加条件&
7.同时,case1的动作按下图红框中设置,到现在,就完成了滑动上方界限的限制
8.判断滑动的下方界限就比较麻烦了,需要简单算算坐标,在主页面(home页)中在拖一个矩形,大小设置w:320px h:800px (与second区域一样大小),并移动该控件覆盖first区域(两控件底边重合),弹出来的坐标y值就是我们需要的,记下数值,删掉矩形
9.在first的交互中,双击&拖动结束时&,新增case2,点击&添加条件&,并按下图配置
10,同时,case2的动作按下图红框中设置
11.大功告成...预览吧
<p id="rate_66148_1" onmouseover="showTip(this)" tip="淡定&虚拟币 + 40
" class="mtn mbn">
主题帖子积分
Powered by他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)Axure RP8 学习笔记二（实现移动端页面拖动效果） - 简书
Axure RP8 学习笔记二（实现移动端页面拖动效果）
距离上一篇更新也过去了比较久的时间，因为公司最近一段时间的核心业务在于推广，因此自己也会时不时跳出产品参与到推广工作中来，再回到产品中来也有了不同的认识。因此最近这段时间的文章就简单介绍下自己在近期利用Axure实现的一些简单的功能以及实现方法。本篇是介绍利用Axure实现移动端页面的拖动效果。
我们在用Axure实现网页端页面原型设计时我们往往不用太担心一个网页的页面很多很长怎么办，因为到时候预览原型的时候我们只需要用鼠标滚轮滚动便可以查看原型的全部内容而不用担心它的显示效果。
而当涉及到移动端原型设计的时候，就没有这么简单了。当我们想要在一个固定高度的手机壳中展示很多的内容的时候，如果碰到简单粗暴的设计者，那我们的设计图往往会变成下面这样。
粗暴的原型图
固定高度的手机壳里需要放很多的内容，于是我们就把手机壳一拉伸就好了。这很粗暴，能解决问题，但却不那么美观。如果能像我们真实使用手机一样在一个固定高度的手机壳里用鼠标拖动页面就好了。就像下面这样的效果。
能拖动的原型图
我想这样的问题应该很常见，所以相信Axure必然是有提供解决方案的。搜索后发现解决方法还是有很多的，我也参考了一些资料，就自己所采用的方法的操作步骤做一个简单介绍。
移动端显示的页面是固定尺寸的，因此我们需要使用一个动态面板，使它展示固定高度的内容。
我们需要展示的页面的高度是超长的，因此我们需要把这个页面放到第一点所提及到的动态面板中。
由于需要展示的页面需要能被拖动，所以整个超长的页面也需要是一个动态面板。
所以整体的实现方案是一个固定高度的动态面板中嵌套了一个包含整体展示页面的动态面板。
我们拖拽移动端的页面的时候，如果一直往下拖动直到脱离顶部再松手的时候，它一般会“弹”回到最上面的位置。同理，如果一直往上拖动直到脱离底部的话，它也会“弹”回到最下面的位置。所以我们需要设置离开顶部或底部时，自动返回原位的交互。
我们需要准备一个固定高度的iPhone手机素材，一个顶部导航栏以及一个底部导航栏。这是基本的手机app的结构。
我们需要添加一个固定高度的动态面板，这个面板相当于我们的屏幕，因此取名为「固定页面」。
添加固定页面的动态面板
编辑这个动态面板的State1状态，在State1状态中再添加一个动态面板，这个动态面板就需要展示所有的内容，我们就命名为「展示内容」，所以它的高度会超过「固定页面」这个动态面板的高度。
添加展示内容的动态面板
编辑展示内容这个动态面板的State1状态，然后在编辑页面中添加好相应的展示内容。
添加展示的内容
在做好了上述的工作之后我们会发现手机的屏幕不足以展示所有的内容，所以我们接下来需要为我们的原型添加拖动事件。
首先为「固定页面」这个动态面板添加拖动事件。
为固定页面添加拖动事件
这样的四步完成之后，我们的展示内容已经可以进行拖动了，只是和手机上的真实体验还有些差距，离开顶部或底部后并不会回到相应的位置，我们接下来需要对其进行优化。
拖动手机屏幕
为页面添加离开顶部或底部后，松开拖拽后自动恢复到正确位置的效果。
首先需要为「固定页面」这个动态面板添加拖拽施放(OnDragDrop)事件，并且设置这个事件发生的条件，如下图所示。
为固定页面添加拖动释放事件
接下来则是为这个事件添加相应的执行结果，需要将「展示内容」这个动态面板恢复到相应的位置。
展示内容恢复到正确位置
这样子设置完成之后当我们拖拽页面脱离顶部导航栏的时候页面已经能够自动回复到正确位置。展示效果如下图所示。
拖动后回顶部原位
接下来需要设置拖拽页面脱离底部导航栏的时候页面自动回复到正确的位置。设置的原理和上面的相似。
设置相应事件的条件
设置展示内容动态面板条件
设置相应事件触发的结果，值得一提的是，-115为「固定页面」这个动态面板的高度减去「展示内容」这个动态面板的高度，我这里为316-431 = -115。
设置回到底部
非常细节的一小步，需要右键点击Case2，将Else If转换为If
切换Else If为If
完成之后的Axure面板设置大概是下图这样子。
实现的效果如下图所示。
这只是一个利用Axure实现了一个很简单的功能，也就是移动端页面的拖动效果，在实现过程中用到了动态面板，也利用到了一些基本事件的设置，包括条件的设置等等。我想虽然实现的功能并不复杂，但对于初学者来说这也是一个比较好的实战案例。
来源 人人都是产品经理网站 滑动条、进度条、进度环，是产品原型中比较常见的进度展示功能。今天笔者分享的是使用Axure原型工具实现两种进度展示功能中相对复杂的交互效果。 效果一：可拖动、可显示进度值、可计算多个页面均值的滑动进度条 实现效果 功能流程分析 因为会涉及多个页面...
Axure教程：移动端原型页面横纵向滑动同时实现 现在，移动端已经逐渐超越了PC端成为了主流，各种手机APP称出不穷，占据了我们的绝大多数生活，尤其是微信。无论吃饭、休息，还是工作，我们总不时地拿出手机，从消息的最顶端往下滑，直至看完所有的小红点，然后从右往左滑过通讯录，滑...
近日，开发了一个H5的活动页面，当时只简单的画了个线框图，活动上线以后，不玩游戏且单身的我，由于下班后闲来无聊（你看，为了防止眼高手低的键盘侠喷“研究Axure有啥意义”，逻辑严密的本产品经理加了多少限定条件），便又花了点时间做了个高保真的原型，如下（为避广告嫌疑，替换了所...
一直以来Axure在对移动端原型设计方面的支持都不是十分理想，它没有像目前其它几类原型设计工具(Justinmind、墨刀等)一样提供移动端设备的模板和相关交互组件，但是Axure自由灵活的特性却同样的其它原型设计工具所无法取代的。通过掌握一些设计规范和方法，我们同样可以通...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
今晚新闻报道了一位90后上海小伙去某大银行办理贷款，被告知提供信息与系统不符、不予受理。哪里不符呢？原来，他本人提供了“未婚”的信息，而银行信贷系统则显示为“已婚”。小伙明明是为了买婚房办理房贷，却获知了自己“被结婚”的消息，除了苦笑，便是头疼。接下来该怎么办？ 他坚持认为...
今天延续上期的教程话题，技巧这种东西，很快我们就会学会，但关键还是怎么去应用和创意，所以今天我们继续开开脑洞，先来看看效果，
这个动画里面有两个点用到伸展效果，第一个是中间色块吐出来图片的效果，第二个是左下线条拉起来文字和色块的效果，我们仔细分析下第一个效果...
文|鸳久 图|源自网络 愿有情人终成眷属 愿爱情保持一生 或者相反 极为短暂 极为短暂 匆匆熄灭 愿我从此不再提起 再不提起过去
——摘自海子《秋日黄昏》
01 距离08年的汶川地震已经过去了九年。当这个日子一天天在我脑海里淡出时，...
美丽的风光，清新的空气，海的颜色真的很漂亮，沙滩洁白而细软，而且岛上还有好玩的水上娱乐项目，特别适合拍照，但是岛上的商业化太浓，人总是很多，消费也有点高。 蜈支洲岛享有“中国第一潜水基地”美誉。是躲在亚龙湾美景身后静静绽放光彩的度假天堂。与亚龙湾相比，它更宁静，也更清丽，有...
今天是10月23日，对成果有三个要求：
1、负责提升今天的销售收入，包括售票和产品销售；从延长时间、每半天报一次销售，及时关注和调整；
2、负责执行今天的品牌推广和改进，了解今天的预定宣传，协助接待媒体，研究竞品宣传；
3、负责蔬导员工情绪，
4、负责...