Axure 小技巧:翻滚吧页面

简介: Axure 小技巧:翻滚吧页面

引言

在日常交互场景中,我们经常会使用【返回顶部】或者【锚点定位】功能,来快速到达自己想去的页面,那么如何使用 Axure 实现这一交互效果呢,本文将利用 Axure【滚到元件】的交互去实现这两个功能。

一.返回顶部

这个功能在日常使用中非常常见,其实最简单的方式就三点

1、默认隐藏【返回顶部】;

2、页面向下滑动一定距离后显示【返回顶部】;

3、点击【返回顶部】返回到页面顶部

接下来开始动手做吧:

最上面的矩形作为顶部内容,再画一块矩形拉长页面,最后用一个动态面板画一个回到顶部的按钮。

image.png

首先页面是可以持续滚动的,而【返回顶部】的按钮是固定在页面上的,所以需要对按钮所在的【动态面板】配置【固定到浏览器】

image.png

接下来给【动态面板】设置【单击】 【滚动到原件】,目标为【顶部矩形】

image.png

这个时候【返回顶部】的功能就做完了,但是当页面已经处于顶部的时候,通常情况下是不需要显示返回按钮的,而是当页面向下滑动一定距离后才显示,所以可以优化一下

我们点一下画布的空白处,给页面添加【窗口滚动时】的交互,当窗口垂直滑动的距离大于顶部矩形高度的手则【显示】 【动态面板】 ,否则就【隐藏】

交互设置完成之后我们再去默认隐藏【动态面板】就完成了

image.png

二.锚点定位

当网页内容较长时,通过设置锚点,用户可以通过点击链接直接跳转到页面的特定区域。

这种方式不仅提升了页面的可访问性,也使得用户在浏览大量信息时更加快捷。

接下来模拟这样一个场景:四个内容四个标题,一个动态面板

image.png

然后给动态面板设置【单击】 【滚动到原件】的事件,目标就是对应的标题,一 一对应设置好就完成啦

image.png

感谢您的阅读,希望本文能够启发您的设计灵感,期待在设计的道路上与您相遇



相关文章
|
人工智能 自然语言处理 安全
Claude官网中文版:在国内使用claude AI的最佳选择!
Claude 是 Anthropic 公司开发的一款大型语言模型,类似于 OpenAI 的 ChatGPT 或 Google 的 Bard。它被设计成一个乐于助人 😊、诚实 🤝 且无害 😇 的 AI 助手。
|
人工智能 安全 数据挖掘
AI在灾害预警与管理中的应用:提升应急响应能力
【9月更文挑战第23天】AI在灾害预警与管理中的应用正在逐步改变我们对灾害的应对方式。通过实时监测与数据分析、精准预测与风险评估、快速响应与决策支持、智能调度与资源优化以及灾后评估与恢复重建等多种手段,AI正逐步提升我们的应急响应能力,为保障人民生命财产安全提供有力支持。未来,随着AI技术的不断发展和完善,我们有理由相信,AI将在灾害预警与管理中发挥更加重要的作用,为人类社会的可持续发展贡献更多力量。
1111 5
|
SQL 消息中间件 分布式计算
大数据-130 - Flink CEP 详解 - CEP开发流程 与 案例实践:恶意登录检测实现
大数据-130 - Flink CEP 详解 - CEP开发流程 与 案例实践:恶意登录检测实现
347 0
|
运维 Linux Shell
运维:Linux服务器崩了怎么办,快来看看这份”急救命令指南“吧!
当服务器出现问题,如崩溃、内存耗尽或CPU使用率过高时,运维工程师需要保持冷静,并通过一系列Shell命令来诊断和解决。首先,检查是否有异常SSH登录活动,查看`/etc/passwd`和`.bash_history`文件,以及用户最近的登录信息。接着,监控网络连接和端口,使用`netstat`和`lsof`命令找出资源占用高的进程,并查看进程启动时间和详细信息。同时,排查可能的恶意文件,检查定时任务和服务配置以确保没有异常启动项。最后,分析系统日志,如`/var/log`目录下的各种日志文件,找出潜在问题。通过这些步骤,可以有效定位和解决服务器故障。
|
机器学习/深度学习 算法 数据挖掘
技术经验分享:DTW和DBA
技术经验分享:DTW和DBA
268 0
|
存储 分布式计算 大数据
MaxCompute操作报错合集之自定义udf的函数,引用了import net.sourceforge.pinyin4j.PinyinHelper;但是上传资源后,出现报错,是什么原因
MaxCompute是阿里云提供的大规模离线数据处理服务,用于大数据分析、挖掘和报表生成等场景。在使用MaxCompute进行数据处理时,可能会遇到各种操作报错。以下是一些常见的MaxCompute操作报错及其可能的原因与解决措施的合集。
372 0
|
存储 编解码 Shell
|
设计模式 运维 分布式计算
工作经验小结(2023.11.21)
工作经验小结(2023.11.21)
315 1
|
关系型数据库 MySQL API
微服务框架 go-zero 快速实战
微服务框架 go-zero 快速实战
793 1
|
JavaScript 前端开发 开发工具
Notion做思维导图,用自带的功能就够了!
Notion做思维导图,用自带的功能就够了!
11004 2
Notion做思维导图,用自带的功能就够了!