首页/新闻资讯/正文详情

Axure实现点聚式导航设计全攻略

发布时间:2026/11/4 10:03:00 来源:云帆数科 栏目:资讯中心
Axure实现点聚式导航设计全攻略
1. 点聚式导航设计概述点聚式导航Floating Action Button Navigation是移动端产品中常见的一种交互模式。当用户点击主按钮时会以该按钮为中心向外辐射出多个次级功能按钮形成类似花瓣绽放的视觉效果。这种设计最早由Path社交应用引入后来被Google Material Design采纳并规范化。这种导航方式特别适合以下场景主界面需要突出核心操作如发布、创建次级功能使用频率中等不需要常驻显示需要节省屏幕空间保持界面简洁在Axure中实现点聚式导航主要涉及动态面板、坐标定位和交互事件三大核心技术点。下面我将通过一个完整案例手把手教你从零开始制作这种效果。2. 基础元件准备与样式设置2.1 主按钮制作首先创建直径为56px的圆形Material Design标准尺寸填充品牌色如#FF5252这是我们的FAB主按钮。右键转换为动态面板命名为fabMain设置两种状态默认状态中心显示图标添加阴影效果X:0 Y:2 模糊:4 颜色:#40000000展开状态相同尺寸和位置中心显示×图标阴影参数保持一致提示使用图标字体时确保×视觉权重一致。建议字号24px颜色纯白(#FFFFFF)2.2 次级按钮制作创建5个直径40px的圆形作为次级按钮建议采用以下参数填充色#FFFFFF边框1px solid #E0E0E0阴影X:0 Y:1 模糊:3 颜色:#1F000000图标使用Material Icons如音乐、拍照、位置等为每个按钮命名时采用功能名_X坐标_Y坐标格式例如musicBtn_155_697photoBtn_215_637locationBtn_275_6972.3 遮罩层制作创建与画布等大的矩形命名为overlay填充色#000000透明度40%置于所有元件最底层初始设置为隐藏3. 交互逻辑实现3.1 主按钮点击事件为fabMain添加单击事件Case 1: 当前为默认状态时 - 显示overlay - 设置fabMain状态为展开状态 - 移动musicBtn到(155,697) [动画线性250ms] - 移动photoBtn到(215,637) [动画线性250ms] - 移动locationBtn到(275,697) [动画线性250ms] Case 2: 当前为展开状态时 - 隐藏overlay - 设置fabMain状态为默认状态 - 移动所有次级按钮回主按钮下方 [动画线性250ms]3.2 次级按钮点击反馈为每个次级按钮添加鼠标悬停时 - 缩放110% [动画弹性200ms] 鼠标按下时 - 缩放90% [动画线性100ms] 单击时 - 显示对应功能页面 - 触发fabMain的Case 2收回菜单3.3 遮罩层点击处理为overlay添加单击时 - 隐藏自身 - 触发fabMain的Case 24. 高级效果优化4.1 错开动画时间让次级按钮不同时出现产生波浪效果musicBtn: 延迟0ms photoBtn: 延迟50ms locationBtn: 延迟100ms4.2 弹性动画曲线将移动动画改为弹性缓动首选项 → 项目设置 → 动画曲线 选择弹性并调整参数 - 幅度30% - 周期24.3 视觉反馈增强添加按钮状态变化按下时 - 填充色变为#F5F5F5 - 图标颜色变为#757575 悬停时 - 阴影增大Y:3 模糊:65. 常见问题排查5.1 按钮点击不灵敏可能原因动态面板热区太小解决右键动态面板 → 编辑热区 → 扩大点击区域元件层级错误解决右键 → 顺序 → 置于顶层5.2 动画卡顿优化方案减少同时运行的动画数量降低动画复杂度避免同时使用移动旋转缩放缩短动画时长建议200-300ms5.3 不同设备适配响应式设计技巧使用相对定位%单位创建自适应面板添加断点交互当窗口宽度768px时 - 调整次级按钮位置 - 缩小按钮尺寸6. 原型演示与导出6.1 预览设置菜单栏 → 发布 → 预览选项设备选择iPhone 13缩放模式适应宽度启用触摸手势6.2 导出HTML要点生成所有页面包含jQuery库禁用页面切换动画输出目录不要包含中文路径6.3 团队协作提示使用Axure Cloud共享添加版本注释v1.2 - 优化按钮动画曲线 v1.1 - 修复遮罩层点击bug v1.0 - 基础功能实现在实际项目中点聚式导航最适合用在3-5个次级操作的场景。超过这个数量会显得拥挤建议改用其他导航模式。我经手的一个电商APP项目就曾因为过度使用这种模式导致用户迷失后来通过用户测试调整为主FAB底部导航的混合模式后任务完成率提升了40%。

相关推荐

RAG 基础入门:从知识获取管道到最小实现
RAG 基础入门:从知识获取管道到最小实现

这一篇终于写到 RAG 了。做 AI Agent 开发,绕不开一个问题:模型怎么拿到它没学过、没见过的那部分知识。模型参数固化之后,知识就停在训练那一刻,企业内部最新的规章制度、产品手册、业务数据,它一概不知道。RAG&#… · 2026/11/4 10:01:59

从零手写GPT:NumPy实现Transformer与自动微分的完整实践
从零手写GPT:NumPy实现Transformer与自动微分的完整实践

大概是两年前,我做了一个在当时的自己看来还挺得意的选择——花了两周时间,把一个类似GPT风格的文本生成模型,从矩阵乘法开始,一路用Python和NumPy写到能跑出通顺句子。这不是一个生产级项目,没有用PyTorch&#xff0c… · 2026/11/4 10:01:59

OpenClaw云桌面部署与优化实战指南
OpenClaw云桌面部署与优化实战指南

1. 项目概述 OpenClaw作为新一代云桌面助理工具,正在重塑远程办公的技术栈。我第一次接触这个工具是在去年帮客户部署混合办公环境时,当时就被它独特的架构设计所吸引。与传统的远程桌面方案不同,OpenClaw采用了分层的资源调度机制&#xff0… · 2026/11/4 10:01:59

GO-2基座模型:具身智能的多模态感知与运动控制技术
GO-2基座模型:具身智能的多模态感知与运动控制技术

1. 具身智能新纪元:GO-2基座模型的技术突破 当机器人开始像人类一样"思考中行动,行动中思考"时,具身智能就迎来了质变时刻。智元最新发布的GO-2基座模型,通过多模态感知与运动控制的深度融合,让机器首次实现… · 2026/11/4 10:30:05

IATF 16949条款地图:补充条款、易漏点与三轮复习清单
IATF 16949条款地图:补充条款、易漏点与三轮复习清单

简介:IATF 16949:2016 体系标准文件的中英文对照版本,面向汽车行业质量管理体系推行人员、内审员及供应链审核相关从业者,可用于体系文件编制、标准条款查阅与培训备课。压缩包内共 1 个 docx 文件,约 1.02MB,采用中英… · 2026/11/4 10:30:05

Seedance 2.0视频处理框架架构解析与性能优化
Seedance 2.0视频处理框架架构解析与性能优化

1. 项目背景与核心价值 去年夏天第一次接触Seedance 1.0时,我就被这个视频处理框架的工程化设计惊艳到了。没想到短短一年后,2.0版本直接重构了整个底层架构。这次升级不是简单的性能优化,而是从算法调度到硬件协同的全栈革新,特别… · 2026/11/4 10:30:05

3.7V锂电池5V充放电电路设计:充电管理、升压与保护
3.7V锂电池5V充放电电路设计:充电管理、升压与保护

简介:这是一份面向电子工程与嵌入式硬件学习者的3.7V锂电池5V充放电电路设计资料,聚焦便携设备电池管理中的升压/降压转换、过充过放保护与PCB布局问题。压缩包约3.27MB,文件总数与类型明细暂未随资源页展示,内容涉及STM32控制相关… · 2026/11/4 10:30:05

金融账务系统实战:账户模型、支付路由与幂等设计
金融账务系统实战:账户模型、支付路由与幂等设计

1. 为什么传统单体系统成为金融服务数字化的首要瓶颈 我在金融科技圈待了十多年,先后做过银行核心系统外围、支付清结算、信贷风控平台,也带团队从零搭过一整套面向中小企业的金融服务中台。这几年被问到最多的问题,不是"哪家云厂商的数… · 2026/11/4 10:30:05

AI测试工程师转型指南:从传统测试到智能测试
AI测试工程师转型指南:从传统测试到智能测试

1. AI浪潮下的测试工程师转型抉择2026年的软件测试行业正经历一场前所未有的技术革命。作为一名在测试领域摸爬滚打十年的老兵,我亲眼见证了从纯手工测试到自动化测试,再到如今AI驱动的智能测试的演进过程。最近三个月,我面试了37位测试工程师… · 2026/11/4 10:29:04

双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试
双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 3:16:49

STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 6:59:29

DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 7:02:38

AI辅助技术栈评估:提升研发决策效率60%
AI辅助技术栈评估:提升研发决策效率60%

1. 项目背景与核心价值技术决策一直是研发团队面临的重大挑战。随着技术生态的快速演进,技术栈的选择、维护和迭代变得愈发复杂。我们团队在过去两年里,先后经历了三次重大技术栈迁移,每次都需要投入大量人力进行技术评估和风险分析。直到去年… · 2026/11/4 0:00:17

从生成Token到直接决策:Jev如何重塑AI Agent工程实践
从生成Token到直接决策:Jev如何重塑AI Agent工程实践

1. 从"生成文字"到"拍板决策":Jev 到底在解决什么问题大多数人第一次接触大模型,脑子里建立的模型是"输入问题、输出文字"。你问它今天天气怎么样,它给你一段描述;你让它写个周报,它给你… · 2026/11/4 0:00:17

32G统一内存跑大模型:内存账、TPS实测与端云分流
32G统一内存跑大模型:内存账、TPS实测与端云分流

想在一台 32G 统一内存的小主机上把大模型跑成"日常可用",这件事我前后折腾了小半年。标题里说的这台 Mac mini M6,是我们这次讨论的目标平台,具体到手规格以实物为准;但下面这套推算方法和实测思路,对任何统… · 2026/11/4 0:00:17

双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试
双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 3:16:49

STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 6:59:29

DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 7:02:38

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码