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,这期内容到这里就结束了。
我是大明同学
下期见