Axure制作Tab切换效果

axure 作为一款原型工具,能够帮助我们快速的设计原型,从而将产品人员的想法快速准确的传递给技术人员。

我们希望的最终效果如下图:

Technorati 标签: axure,原型,tab,切换

最简单的一种办法就是通过 Dynamic Panels 来实现。

首先创建一个空白的 Dynamic Panel,然后在 State 1 中开始绘制我们需要的样式。

下面就是最关键的一步,让这些元素都动起来。

首先选中一个 Tab,然后单击右侧的 OnClick,在弹出的窗口中选中 Set panel state to state。选中对应的状态,确定就 OK 了。

然后,可以将设计好的元素全部 拷贝 到其他两个状态中,并且修改 Tab 的样式,来适应当前的状态。如下图:

这样就完成了 Tab 效果的切换,如果希望鼠标移到 Tab 上时能够有相应的响应效果,我们可以右键 –> Edit Button Shape –> Edit Roll Over Style 中进行样式的编辑。

其实 Axure 这款软件的易用性比较不错,上手很快,特别是如果掌握一些 DW 或者 MS Visual 系列工具使用经验的用户。

PS:虽然 axure 几乎能够做出各种各样的效果来,但我一直对于做出复杂效果的投入是否值得心存疑虑,原型作为一个中间过渡的产品,其价值就在于传递产品的设计和使用理念,而且在原型交接的过程中,一般都会有产品人员和技术人员面对面的沟通,这样一些很复杂的效果完全可以通过叙述来让技术人员明白,这样产品人员就可以节省时间来思考更多的关于产品本身的问题了。

参考资料: 1、Axure Sample

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Web 开发

写得少,都吐不出墨水了

最近在弄毕业设计,总有个现象,就是一个段落,自己吐墨水的话,吐不超过两句就吐完了。回头看看博客,发现这一年来,才3篇文章,原来是这样才缺乏墨水啊。

5100
来自专栏网络

终于,小编我边哭边写,把web前端从入门到精通的路线写出来了

一、前端开发入门 在入门阶段,你首先要学会最基本的技能:根据UI的设计稿,实现HTML的静态页面制作。这就要求你得掌握HTML、CSS页面布局排版、样式美化等技...

26490
来自专栏企鹅号快讯

数据分析常用工具

本文总结数据分析常用的软件,以及推荐相应的学习参考资料。 1. Excel 常用操作有函数、可视化、数据透视表、VBA。 函数 可视化 i.单元格 ii.静态图...

29290
来自专栏知晓程序

开发 | 小程序如何快速适配 iPhone X?

但是,由于 iPhone X 的「异型」屏幕,以及底部的「小白条」的存在,不少开发者都头疼应该如何适配这块略显奇怪的屏幕。

32140
来自专栏程序人生 阅读快乐

《CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation》谢郁(作者)mobi

想象一下,一个网页只有HTML,没有CSS,那就是素颜和上妆的区别。而一个网页只有CSS,没用CSS 3,那就是马车和汽车的区别!汽车代表的是高效、美观,CSS...

15130
来自专栏進无尽的文章

干货篇-一些有用的链接

iOS超全开源框架、项目和学习资料汇总(5)AppleWatch、经典博客、三方开源总结篇

10810
来自专栏企鹅号快讯

2017JavaScript框架战报-React分战场

【IT168 资讯】我们来看看与React有关的软件包的生态系统。当Facebook构建React时,就有许多来自开源社区的第三方软件包。为提供完整的应用程序体...

20170
来自专栏更流畅、简洁的软件开发方式

以【联动列表框】来看单一职责!

联动列表框,简简单单的五个字,仅仅从字面上看,就可以分出来两个职责: 职责一:列表框 职责二:联动 我们先来看这两个职责,然后再说引申出来的另外两个职责。 职责...

29090
来自专栏知晓程序

你发的朋友圈为什么会被折叠?| 晓技巧

14720
来自专栏dodott的专栏

盒子端 CSS 动画性能提升研究

不同于传统的 PC Web 或者是移动 WEB,在客厅盒子端,接大屏显示器下,许多能流畅运行于 PC 端、移动端的 Web 动画,受限于硬件水平,在盒子端的表现...

10210

扫码关注云+社区

领取腾讯云代金券