当前位置: 首页 > article >正文

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

我是大明同学

下期见


http://www.kler.cn/a/471482.html

相关文章:

  • 面向对象分析与设计Python版 活动图与类图
  • nodeJS下npm和yarn的关系和区别详解
  • Backend - EF Core(C# 操作数据库 DB)
  • 打包部署若依(RuoYi)SpringBoot后端和Vue前端图文教程
  • STM32 I2C通信外设
  • 解决ESP32 wifi scan:1. 获取WIFI扫描列表个数为0 的问题 2.扫描WIFI列表时导致程序崩溃问题。
  • IP查询于访问控制保护你我安全
  • 虚拟机Linux Red Hat 7.9 Docker部署.Net 7 Zr.Admin项目(后端)
  • nfs开机自动挂载
  • 《Mcal》--MCU模块
  • HTML-多媒体标签
  • TypeScript语言的正则表达式
  • 区别:支持向量机 (SVM) 和逻辑回归
  • Flink概念知识讲解之:Restart重启策略配置
  • Python如何导入自定义的类
  • 12-Gin 中的 Session --[Gin 框架入门精讲与实战案例]
  • GDPU Android移动应用 期末习题集 一天速成(更新ing)
  • 如何确保爬虫程序稳定运行?
  • Baumer工业相机堡盟LXT工业相机如何升级固件使得相机具有RDMA功能
  • 数据治理如何激活企业沉睡数据价值?
  • transformers蒸馏版本对话小模型
  • Redis源码阅读-源码阅读方式
  • 基于Django的农业管理系统
  • linux redis7.2.1安装,版本更新
  • kafka生产者专题(原理+拦截器+序列化+分区+数据可靠+数据去重+事务)
  • NLP 复习大纲