Axure PR 9 锚点定位滚动 设计&交互


大家好,我是大明同学。

这期内容,我们来探讨Axure中的锚点滚动设计与交互技巧。

锚点定位滚动

创建锚点滚动所需的元件

1.打开一个新的 RP 文件并在画布上打开 Page 1。

2.在元件库中拖出一个矩形元件。

3.选中矩形元件,样式窗格中,将线宽为0,输入文本段落一。

4.依次复制粘贴段落一元件,将文本改为段落二、段落三 垂直分布。

5.在元件库中拖入一个矩形制作顶部Banner或者头图,大小样式不限。

6.拖入三段内容,并复制段落文本作为内容标题,将段落二、三元件命名为 "2""3"。

7.在元件库中拖入一个热区,将热区元件命名为 "1"放在Banner或者头图左上角。

8.在段落底部(段落三)右侧制作一个置顶 (top)icon。

9.在元件库中拖入一个内联框架,右键转为动态面板,将制作好的Banner(头图)段落内容复制粘贴到动态面板中,并删除内联框架动态面中的内联框架。

*内联框架动态面板不能将置顶(top)icon遮住

10.选中内联框架动态面板,右键内联框架 滚动条 垂直滚动。

11.在元件库中拖入一个动态面板,将内联框架动态面板复制粘贴到动态面板中。

*动态面板需要覆盖住内联框架动态面板的滚动条。

创建交互

创建导航名称交互状态

1.选中段落一元件,在交互窗格点击新建交互,单击时,滚动到元件 "1"热区 垂直滚动 缓慢进入 500毫秒。

2.选中段落二元件,在交互窗格点击新建交互,单击时,滚动到元件 "2"段落二 垂直滚动 缓慢进入 500毫秒,同理配置段落三。

3.双击动态面板,双击内联框架动态面板,下拉到段落三,选中置顶(TOP)按钮,在交互窗格点击新建交互,单击时,滚动到元件 "1"热区 垂直滚动 缓慢进入 500毫秒。

预览交互

点击预览,在预览页面中,鼠标点击段落一、二、三会滚动到对应标题的内容,点击TOP按钮会滚动到首页。

预览地址:https://ad0qg7.axshare.com

OK,这期内容到这里就结束了。

我是大明同学

下期见

相关推荐
招风的黑耳11 小时前
Axure设计之下拉多选框制作教程A(中继器)
ui·axure·选择器·下拉多选框
梓贤Vigo11 小时前
【Axure原型分享】输入框控制环形进度条
交互·产品经理·axure·原型
xwz小王子13 小时前
Science Advances 视触觉传感机制的交互装置,可以实时测量来自手不同部位的分布力
交互·分布力
云计算练习生15 小时前
Adobe Photoshop下载安装和使用教程
ui·adobe·photoshop·ps
梓贤Vigo20 小时前
【Axure视频教程】中继器表格——控制开关按钮
交互·产品经理·axure·原型·中继器
咩咩觉主1 天前
Unity 实现一个可拓展的简单物品交互系统
microsoft·unity·c#·交互
过期的H2O21 天前
【H2O2 | 软件开发】Axios发送Http请求
前端·http·axios·交互
招风的黑耳2 天前
SpringUI高保真动态交互元件库:助力产品原型设计
交互·axure·产品设计·元件库·springui·高保真
招风的黑耳2 天前
【Axure资料】110套优质可视化大屏模板+图表组件+科技感元件等
axure
tangweiguo030519873 天前
Android自定义View全解析:从基础绘制到复杂交互,实战多种自定义View实现
android·交互