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

一、思路

  1. 有几个选项Tab,就设计几个选项Tab。
  2. 通过动态面板设计实现内容页面切换。
  3. 设计Tab按钮的交互设计,绑定到对应的动态面板,实现动态按钮的状态切换。
  4. 设计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选项卡切换就实现了,我们可以点击预览可以看一下效果实现了没,之后可以再美化一下导航按钮。

产品经理,产品经理网站

 

本文作者 @糖芽

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部