作为一个纯粹的coder，本来也就只是简单的使用下axure画下原型图（拖拽拼凑更为恰当），由于老婆大人要从UI向产品方向转型，我也就简单的研究了下，替老婆先去探探路，好了废话不多说，直奔主题。
动手前的分析
1 .首先我们平常所看到的Tabbar都是由一个一个的item组成，每个item又由一个icon和title组成.
2 .其次当我们点击每个item的时候，最直观的变化就是icon和title都会变色（一般是变成主题的颜色），并且这个时候会有页面切换的事件。
开始动手
1、先制作一个简单的Tabbar样子出来
1.1 .在新建的项目中创建一个tabbar母版。
创建tabbar母版-1
创建tabbar母版-2
1.2 .在母版中制作一个单独的item
此处以iphone6作为示例，宽度为375，那么做3个item，每一个就是125.
item-1.png
然后设置一下，去掉外部矩形的边框，只留最上面的边框。
设置边框.png
然后复制粘贴，更换不同的icon和title，一个简单的tababr界面就出来了。
简单tabbar.png
2、使tabbar可以点击变色。
根据之前分析，首先是在点击item的时候，会有变色的效果，其实在axure中也就是选中的状态。给每一个item设置交互样式中的选中状态的字体颜色和icon图片即可，因为第一个item默认的是选中状态，所以多勾选一个选中即可。
设置选中字体颜色.png
设置icon选中样式.png
3、实现点击变色
首先给母版添加事件，因为我们有三个item，所以添加3个事件。
给母版添加触发事件.png
设置事件，页面载入时，出发事件qiangdan，每个item点击时触发对应的事件。
设置点击事件.png
事件设置好了，我们开始使用母版，并在对应的事件中添加对应的实现逻辑。
使用母版-1.png
设置事件逻辑.png
给每一个item设置好事件逻辑之后，我们就可以在浏览器中看到点击的效果了。
点击效果.gif
4、实现页面跳转
至此我们已经完成了一个tabbar的点击变色效果，只差最后一步页面跳转了，是不是有点小激动呢，哈哈，赶快开始页面跳转。这里我们使用的是动态面板，首先在页面上部拖动一个动态面板使其大小正好能填充tabbar以外的界面。
添加动态面板.png
然后双击动态面板，设置其状态，我们有三个界面需要来回切换跳转，所以设置三个状态，分别命名成对应的页面名称。
设置动态面板状态.png
给每个动态面板的状态简单制作个导航栏，便于区分。
设置简单界面.png
最后一步，给母版的三个事件添加具体的事情，使每一个事件对应一个动态面板的状态。
设置母版事件对应的动态面板状态.png
OK，大功告成，下面让我们在浏览器中一起看看效果吧。
最终效果.gif
总结
总结一下，其实这个效果还是比较简单的，我做的时候对Axure并没有什么概念，可以稍微研究了下基本控件也就有了思路，所以感觉做产品的时候，或者说学习新东西的时候一定不要怕，要充满自信的去学习和尝试，感觉和写代码是一样的道理，只有自己亲手去制作一遍，才能够理解和掌握。（PS：声明本人新手一枚，如果有什么写的不好，或者方法错误的地方还希望大家指出，一起学习共同进步。大家也知道的程序猿苦逼的生物，平时都要忙着搬砖，比较少的能有时间来写博客，不过有些心得我还是会挤出时间写出来和大家交流学习的。下一篇会写一下使用axure制作可以滚动的列表（tableview）的Demo。）
网友评论