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

我是大明同学

下期见

相关推荐
ZYJCSZKJ11 小时前
AI数字人直播系统的技术架构与多方言交互实现方案——基于广西区域商业场景的工程实践
人工智能·架构·交互
易点云徐源1 天前
(已解决)Photoshop 多画板 Alt+拖动复制随机卡死 4~5 分钟
windows·photoshop
love530love2 天前
虚拟显示驱动导致 Photoshop / Camera Raw 卡死?OrayIddDriver 的锅
运维·人工智能·ui·photoshop·orayidddriver·hags 调度
柳叶方舟5 天前
Nature Medicine IF=50.0 | 公众医疗助手LLM可靠性存隐忧:真人交互表现未优于对照组,现有评估基准失效
论文阅读·人工智能·深度学习·交互·健康医疗
dwm888888886 天前
FluidVoice 智能语音交互落地实战指南
交互
人工智能研究所6 天前
GitHub 10k+ Star:用自然语言描述系统,AI 帮你生成可交互架构图
人工智能·github·交互·自然语言·系统架构图·archify
circuitsosk7 天前
构建高可用AI后端服务:REST API设计、数据库交互及异步任务编排经验总结
数据库·人工智能·python·交互·fastapi·数据库连接池·rest api
Designerpupu7 天前
如何在 PS 中为护肤品做主图?3 步GPT-image2生成电商主图
gpt·photoshop·电商设计·ps2026·gpt-image2·电商主图·主图设计
CDN3608 天前
俄语区跨境站点优化实战:CDN+Nginx 解决 H5 白屏、交互延迟、链路卡顿问题
运维·nginx·交互·h5 加速·nginx 轻交互调优
love530love9 天前
Photoshop 2026 AI 功能排障复盘:Camera Raw 卡死 / Neural Filters 灰 / 皮肤平滑下载失败 全定位
人工智能·ui·photoshop