axure 9 绘制一个TAB选项卡原型

1. 创建一个Dynamic panel

2. 添加面板状态

双击动态面板，点击state1添加，编辑面板状态

添加至三个面板状态

3. 创建选项卡

确保是在对应的state里面添加

4. 添加选项卡点击事件

为选项卡添加点击切换到对应的state的状态

依次添加直至所有选项卡都有可切换到对应state的点击事件

5. 设置响应状态

在不同的state下，设置对应state应该显示的效果

依次将组件复制到其他state并设置对应显示效果

6. 预览效果

交互逻辑拆解

这个 TAB 原型的核心不是画三个按钮，而是把“当前选中项”表达清楚。动态面板的每个 State 对应一种完整界面，点击 TAB 时切换 State，同时让选中项在颜色、下划线或背景上与其他项区分开。只做内容切换、不做选中态，原型虽然能点，但使用者会不知道自己正在看哪一页。

对于三个以上的 TAB，逐个复制元件很容易改漏。可以先完成一个 State 的排版和交互，确认字号、间距、选中样式都没问题，再复制出其他 State。复制后要重点检查两处：点击事件的目标 State 是否正确，以及当前 State 的高亮项是否对应。

容易遇到的问题

• 预览时点击没反应：检查事件是否加在可点击元件上，上层是否还有透明矩形挡住了鼠标。
• 切换后内容位置跳动：各个 State 的画布尺寸、内边距和首个元件坐标要保持一致。
• 选项卡文字修改不同步：很多时候是复制了多套独立元件，后期需要逐页更新。
• 交互过多：原型用来说明产品逻辑，不必把每个动画都做成真实代码一样的精度。

如果 TAB 中只是少量文字或表单，动态面板很好用；如果每页内容非常复杂，还可以改用多个容器配合显示/隐藏动作。选哪种做法不重要，重要的是后面接手原型的人能一眼看懂状态是怎么变的。

可用性说明：本文发布于 2019 年 10 月，距今已超过五年。文中涉及的软件版本、接口、下载地址、命令参数和操作界面可能已经发生变化，部分方案在当前环境下可能失效。请结合官方最新文档核对后再操作，生产环境使用前务必先行验证。

版权声明: 本文首发于 指尖魔法屋-axure 9 绘制一个TAB选项卡原型（https://blog.thinkmoon.cn/post/452-guide-axure-tab/） 转载或引用必须申明原指尖魔法屋来源及源地址！