AxureRP9原型教程：实现Tab选项卡切换的交互效果设计
一、思路
- 有几个选项Tab，就设计几个选项Tab。
- 通过动态面板设计实现内容页面切换。
- 设计Tab按钮的交互设计，绑定到对应的动态面板，实现动态按钮的状态切换。
- 设计Tab选项组，设置选中效果，实现Tab的选中切换效果。
二、步骤
1）在基本元件中找到“矩形”，拖动矩形到页面面板。
2）复制多两个矩形，分别命名为“页面1”、“页面2”、“页面3”，并设置成自己喜欢的样式。
3）设置tab的交互样式，为实现交互效果，可设计不同的“鼠标悬停”、“鼠标按下”以及“选中”的样式。
鼠标悬停：
鼠标按下：
选中：
设计完之后，可以选择顶部的“预览”功能，以预览自己设计的效果。
4）在基本元件中找到“动态面板”，拖拽到页面面板，设计适合的尺寸，并将其命名为“页面内容”。
5）双击动态面板，进入动态的状态管理页面。
6）点击“state1”，把其改成“状态1”，并添加两个状态，分别命名为“状态2”、“ 状态3”。
7）点击“状态1”，并放置在点击“页面1 ”tab的时候想要呈现的内容。“状态2”和“状态3”操作逻辑同样。
状态1：
状态2：
状态3：
8）设计好动态面板的状态后，点击右上角“关闭”，退出动态面板设计。
9）接下来是通过交互设计，把各个tab和动态面板的对应状态关联起来。
页面1&状态1：
选择“页面1”，点击右边的交互，再点击“新建交互”。
选择“单击时”：
选择元件动作组里的“设置面板状态”：
如下图所示，把目标面板选择为“页面内容”，把state（状态）选择为“状态1”，然后点击右下角“确定”按钮。
页面2&状态2：
页面2操作一样，把目标面板选择为“页面内容”，把state（状态）选择为“状态2”，然后点击右下角“确定”按钮。
页面3&状态3：
页面3操作一样，把目标面板选择为“页面内容”，把state（状态）选择为“状态3”，然后点击右下角“确定”按钮。
10）接下来设计顶部tab的选中效果，即选择了对应的页面后，该顶部tab会一直呈现选中的效果，直到选择另一个tab。同时，我们设置页面1为默认选中。
首先，选中三个页面的矩形，右击选择“选项组”。
然后把组名称设置为“切换Tab“,然后点击确定。
然后设置每个页面tab的选中效果。如下图，点击“页面1”矩形，在“单击时”的交互下点击“+”号，继续插入动作。
插入动作里，选择“设置选中”。
把选中目标选择为“当前元件”，并设置“值”到达“真”，然后点击右下角“完成”。
页面2和页面3矩形的操作同上。
最后，我们设置页面1为默认页面，页面1的矩形设置为默认选中。点击“页面1”矩形，双击打开菜单栏，选择“选中”。
到此，tab选项卡切换就实现了，我们可以点击预览可以看一下效果实现了没，之后可以再美化一下导航按钮。
本文作者 @糖芽
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
