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

我是大明同学

下期见

相关推荐
cy_cy0025 小时前
互动地面投影:优化展厅动线的智能向导
大数据·科技·人机交互·交互·软件构建
左手厨刀右手茼蒿6 小时前
Flutter for OpenHarmony:mailer — 基于 SMTP 的极速邮件投递服务(适配鸿蒙 HarmonyOS Next ohos)
android·flutter·华为·交互·harmonyos
梓贤Vigo10 小时前
【Axure教程】字母定位选择器
交互·产品经理·axure·原型·中继器
钛态1 天前
Flutter 三方库 result_type 深入鸿蒙强类型返回栈跨界交互适配:肃清空指针回调与运行时崩溃、大幅增注接口安全壁垒且提升多隔离桥接数据抛出健壮性-适配鸿蒙 HarmonyOS ohos
flutter·交互·harmonyos
点云SLAM1 天前
Qt+PCL手把手教材(第11讲)——PCL库PCLVisualizer点云可视化以及与 VTK 交互器(Interactor)详解和代码示例
人工智能·交互·3d数据可视化·pcl点云库·qt+pcl·pclvisualizer使用·vkt
全栈若城1 天前
HarmonyOS6 半年磨一剑 - RcInput 组件清空、密码切换与图标交互机制
架构·交互·harmonyos6·三方库开发实战·rchoui·三方库开发
结衣结衣.1 天前
【Linux】命名管道的妙用:实现进程控制与实时字符交互
linux·运维·开发语言·学习·操作系统·交互
想你依然心痛1 天前
HarmonyOS 5.0车机应用开发实战:基于方舟引擎的智能座舱多模态交互系统
华为·交互·harmonyos
我是先生1 天前
无需安装,打开即用:一款高还原度的在线图片编辑新选择
图像处理·生活·photoshop
yume_sibai2 天前
Vue 3 表单设计器实现
vue.js·交互·ux