7.0窗口改变大小 axure rp_APP返回顶部如何用Axure画出来

关注公众号学习移动端组件的原型画法，

咱们先看下Axure画出的原型效果，然后再对该组件进行详细讲解。

一、组件介绍

名称	返回顶部
作用	快速回到当前页面的顶部
组成	图标和文字
位置	屏幕右下方
样式	详见上图
交互	①页面默认不显示“返回顶部”按钮。 ②当页面滚动到一定区域，显示“返回顶部”按钮。 ③点击“返回顶部”按钮，向上滚动回到页面顶部。
注意事项	部分产品不会设计单独的返回顶部按钮，会用点击首页标签来实现同样的效果。

二、实际案例

三、画出无交互原型

1、从默认元件库拖动“圆形”到工作区合适位置，尺寸修改为45*45。

2、从默认元件库拖动“水平线”到工作区合适位置，尺寸修改为10*1(选择圆形和水平线然后点击“左右居中”可以调整位置)

3、从默认元件库拖动“垂直线”到工作区合适位置，尺寸修改为1*15，箭头样式修改为“向左”，效果如左图。

4、从默认元件库拖动“文本标签”到工作区合适位置，双击输入文字“顶部”，字号10。

5、点击“预览”按钮，然后在浏览器中查看原型效果。

四、画出有交互原型

6、同时选择相应的元件，右键点击“转换为动态面板”，右侧边栏“样式”点击“固定到浏览器”，勾选“固定到浏览器窗口”，水平固定“居中”，点击“确定”按钮。

7、记住该动态面板的x坐标，然后将该动态面板的x坐标修改0px，然后双击进入动态面板移动相应元件的x坐标为刚刚记住的x坐标。

8、双击该动态面板进入，选择相应的元件右键转换为组合。然后点击组合，右侧边栏切换到“交互”，点击“新建交互”按钮，添加事件“单击时”，添加动作“滚动到元件”，目标选择“框架”，动画“线性”，时间“500毫秒”，点击“完成”按钮。

9、点击右上角“关闭”回到工作区。点击工作区空白区域，右侧边栏切换到“交互”，点击“新建交互”按钮，添加事件“窗口滚动时”，添加动作“显示/隐藏”，目标选择“该动态面板”，值“显示”，点击“完成”按钮。

鼠标移动到“窗口滚动时”，点击右侧的“启用情形”按钮，在弹出框中“添加条件”，值[[Window.scrollY]]>=值667，点击“确定”按钮。

10、点击“添加情形”按钮，在弹出框中“添加条件”，值[[Window.scrollY]]＜值667，点击“确定”按钮。右键Elsf if点击“切换为[如果]或者[否则]”。

回到右侧边栏“交互”，点击“+”按钮添加动作“显示/隐藏”，目标选择“该动态面板”，值“隐藏”，点击“完成”按钮。

11、点击该动态面板，右键点击“设为隐藏”。

12、点击“预览”按钮，然后在浏览器中查看原型效果。

Tips：

• 滚动到元件，可以学习框架组件。

• 查看原型的时候，浏览器高度设为667方便看出所有的交互效果。

五、课后作业

画出该组件的常见交互样式，添加到自己的Axure元件库，方便后续画移动端原型的时候使用。

---

转发到朋友圈，添加微信langzipm获取RP源文件。

点击，学习“浪子教你画移动端组件”视频教程，系统化的学习常用移动端组件，从而掌握移动端原型的画法。