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,这期内容到这里就结束了。

我是大明同学

下期见

相关推荐
云雀衔光19 小时前
MCP + 应用生成:让 AI 直接产出可交互的应用
java·人工智能·测试工具·microsoft·交互·ai编程
smartpi_ai2 天前
自学习“放着不动“会自动退出吗?超时退出缺席的交互兜底、退出条件挂串口的状态联动设计
学习·microsoft·交互
CappuccinoRose2 天前
Web Components 基础
前端·javascript·交互·web component·shadow dom
xy34532 天前
axure9.0 如何打造一个计时器(简单版)
前端·ui·html·axure·原型·产品设计
做萤石二次开发的哈哈3 天前
海康班班通交互一体机技能接入实战:ISAPI透传+OTAP双协议封装,Web/App/小程序教学管理应用一站生成
前端·物联网·小程序·交互·萤石开放平台·蓝海aiot一站式工作台·aiot开发
LayZhangStrive3 天前
Agent开发 - 实现人类与Manus智能体的终端窗口命令交互
ai·交互·agent·react·终端·manus
yyt3630458414 天前
KLineChartQuant:GLSL 的精度问题及 RTC 解法
前端·vue.js·react.js·交互·图形渲染·webgl·数据可视化
Dream-Y.ocean4 天前
基于具身交互智能数字人,我用Flask搭了一个AI教学平台:课代表AI全流程实战
人工智能·flask·交互
励志不掉头发的内向程序员4 天前
【LibreCAD 2D架构】从鼠标点击到图形创建:RS_ActionDrawLine交互流程与状态机解析
开发语言·c++·qt·学习·系统架构·计算机外设·交互
Htr_4 天前
Reflexio 使用指南:让 AI 智能体从每次交互中持续学习
人工智能·学习·交互