Axure制作Tab切换效果-阿里云开发者社区

开发者社区> 大江小浪> 正文

Axure制作Tab切换效果

简介: axure 作为一款原型工具,能够帮助我们快速的设计原型,从而将产品人员的想法快速准确的传递给技术人员。 我们希望的最终效果如下图: Technorati 标签: axure,原型,tab,切换 最简单的一种办法就是通过 Dynamic Panels 来实现。
+关注继续查看

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

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

0004

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

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

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

0005 

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

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

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

0006 

 

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

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

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

参考资料:
1、Axure Sample

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10050 0
8 cocos2dx添加场景切换效果,控制场景切换彻底完成之后再执行动画
 1 添加场景切换效果 供场景切换的类: CCTransitionJumpZoom CCTransitionProgressRadialCCW CCTransitionProgressRadialCW CCTransitionProgressHorizontal CCTransitionProgressVertical
1476 0
Android Studio 使用ViewPager + Fragment实现滑动菜单Tab效果 --简易版
描述:         之前有做过一个记账本APP,拿来练手的,做的很简单,是用Eclipse开发的;         最近想把这个APP重新完善一下,添加了一些新的功能,并选用Android Studio来开发;         APP已经完善了一部分,现在就想把已经做好的功能整理一下,记录下来。
2541 0
Module切换,如何实现loading效果
Flex里面没有那么麻烦的 复制代码 即可 如何使用代码,Flex里有ModuleManager  import mx.
567 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13865 0
jQuery 写的插件图片上下切换幻灯效果
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
588 0
Iphone [Tab Bar实现多view切换,Picker,DataPicter实现
用Tab Bar Controller处理IPhone多个view切换, 而且还附有创建空项目,picker和DataPicker的实现! 具体步骤: 1.创建一个空项目,选择User Interface->View,命名为rootView。
852 0
+关注
大江小浪
平心静气,破浪劈坚!
292
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载