AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

编辑导语:本文是针对AxureRP9,如何快速实现Tab选项卡切换设计的小白教程,实现Tab选项卡切换的关键点在于记得创建选项组,希望对大家有帮助,我们一起来看一下吧。

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

一、思路

  1. 有几个选项Tab,就设计几个选项Tab。
  2. 通过动态面板设计实现内容页面切换。
  3. 设计Tab按钮的交互设计,绑定到对应的动态面板,实现动态按钮的状态切换。
  4. 设计Tab选项组,设置选中效果,实现Tab的选中切换效果。

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

二、步骤

1)在基本元件中找到“矩形”,拖动矩形到页面面板。

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

2)复制多两个矩形,分别命名为“页面1”、“页面2”、“页面3”,并设置成自己喜欢的样式。

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

3)设置tab的交互样式,为实现交互效果,可设计不同的“鼠标悬停”、“鼠标按下”以及“选中”的样式。

鼠标悬停:

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

鼠标按下:

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

选中:

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

设计完之后,可以选择顶部的“预览”功能,以预览自己设计的效果。

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

4)在基本元件中找到“动态面板”,拖拽到页面面板,设计适合的尺寸,并将其命名为“页面内容”。

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

5)双击动态面板,进入动态的状态管理页面。

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

6)点击“state1”,把其改成“状态1”,并添加两个状态,分别命名为“状态2”、“ 状态3”。

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

7)点击“状态1”,并放置在点击“页面1 ”tab的时候想要呈现的内容。“状态2”和“状态3”操作逻辑同样。

状态1:

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

状态2:

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

状态3:

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

8)设计好动态面板的状态后,点击右上角“关闭”,退出动态面板设计。

9)接下来是通过交互设计,把各个tab和动态面板的对应状态关联起来。

页面1&状态1:

选择“页面1”,点击右边的交互,再点击“新建交互”。

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

选择“单击时”:

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

选择元件动作组里的“设置面板状态”:

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

如下图所示,把目标面板选择为“页面内容”,把state(状态)选择为“状态1”,然后点击右下角“确定”按钮。

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

页面2&状态2:

页面2操作一样,把目标面板选择为“页面内容”,把state(状态)选择为“状态2”,然后点击右下角“确定”按钮。

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

页面3&状态3:

页面3操作一样,把目标面板选择为“页面内容”,把state(状态)选择为“状态3”,然后点击右下角“确定”按钮。

10)接下来设计顶部tab的选中效果,即选择了对应的页面后,该顶部tab会一直呈现选中的效果,直到选择另一个tab。同时,我们设置页面1为默认选中。

首先,选中三个页面的矩形,右击选择“选项组”。

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

然后把组名称设置为“切换Tab“,然后点击确定。

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

然后设置每个页面tab的选中效果。如下图,点击“页面1”矩形,在“单击时”的交互下点击“+”号,继续插入动作。

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

插入动作里,选择“设置选中”。

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

把选中目标选择为“当前元件”,并设置“值”到达“真”,然后点击右下角“完成”。

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

页面2和页面3矩形的操作同上。

最后,我们设置页面1为默认页面,页面1的矩形设置为默认选中。点击“页面1”矩形,双击打开菜单栏,选择“选中”。

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

到此,tab选项卡切换就实现了,我们可以点击预览可以看一下效果实现了没,之后可以再美化一下导航按钮。

AxureRP9原型教程:实现Tab选项卡切换的交互效果设计

 

题图来自Unsplash,基于CC0协议

本文由 @旺财 发布于 职涯宝 ,未经作者许可,禁止转载,欢迎您分享文章

发表评论

登录后才能评论
小程序
小程序
微信客服
微信客服
QQ客服 建站服务
分享本页
返回顶部