作為一個(gè)純粹的coder，本來(lái)也就只是簡(jiǎn)單的使用下axure畫下原型圖（拖拽拼湊更為恰當(dāng)），由于老婆大人要從UI向產(chǎn)品方向轉(zhuǎn)型，我也就簡(jiǎn)單的研究了下，替老婆先去探探路，好了廢話不多說(shuō)，直奔主題。

動(dòng)手前的分析

1 .首先我們平常所看到的Tabbar都是由一個(gè)一個(gè)的item組成，每個(gè)item又由一個(gè)icon和title組成.

2 .其次當(dāng)我們點(diǎn)擊每個(gè)item的時(shí)候，最直觀的變化就是icon和title都會(huì)變色（一般是變成主題的顏色），并且這個(gè)時(shí)候會(huì)有頁(yè)面切換的事件。

開始動(dòng)手

1、先制作一個(gè)簡(jiǎn)單的Tabbar樣子出來(lái)

1.1 .在新建的項(xiàng)目中創(chuàng)建一個(gè)tabbar母版。

創(chuàng)建tabbar母版-1

創(chuàng)建tabbar母版-2

1.2 .在母版中制作一個(gè)單獨(dú)的item
此處以iphone6作為示例，寬度為375，那么做3個(gè)item，每一個(gè)就是125.

item-1.png

然后設(shè)置一下，去掉外部矩形的邊框，只留最上面的邊框。

設(shè)置邊框.png

然后復(fù)制粘貼，更換不同的icon和title，一個(gè)簡(jiǎn)單的tababr界面就出來(lái)了。

簡(jiǎn)單tabbar.png

2、使tabbar可以點(diǎn)擊變色。

根據(jù)之前分析，首先是在點(diǎn)擊item的時(shí)候，會(huì)有變色的效果，其實(shí)在axure中也就是選中的狀態(tài)。給每一個(gè)item設(shè)置交互樣式中的選中狀態(tài)的字體顏色和icon圖片即可，因?yàn)榈谝粋€(gè)item默認(rèn)的是選中狀態(tài)，所以多勾選一個(gè)選中即可。

設(shè)置選中字體顏色.png

設(shè)置icon選中樣式.png

3、實(shí)現(xiàn)點(diǎn)擊變色

首先給母版添加事件，因?yàn)槲覀冇腥齻€(gè)item，所以添加3個(gè)事件。

給母版添加觸發(fā)事件.png

設(shè)置事件，頁(yè)面載入時(shí)，出發(fā)事件qiangdan，每個(gè)item點(diǎn)擊時(shí)觸發(fā)對(duì)應(yīng)的事件。

設(shè)置點(diǎn)擊事件.png

事件設(shè)置好了，我們開始使用母版，并在對(duì)應(yīng)的事件中添加對(duì)應(yīng)的實(shí)現(xiàn)邏輯。

使用母版-1.png

設(shè)置事件邏輯.png

給每一個(gè)item設(shè)置好事件邏輯之后，我們就可以在瀏覽器中看到點(diǎn)擊的效果了。

點(diǎn)擊效果.gif

4、實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)

至此我們已經(jīng)完成了一個(gè)tabbar的點(diǎn)擊變色效果，只差最后一步頁(yè)面跳轉(zhuǎn)了，是不是有點(diǎn)小激動(dòng)呢，哈哈，趕快開始頁(yè)面跳轉(zhuǎn)。這里我們使用的是動(dòng)態(tài)面板，首先在頁(yè)面上部拖動(dòng)一個(gè)動(dòng)態(tài)面板使其大小正好能填充tabbar以外的界面。

添加動(dòng)態(tài)面板.png

然后雙擊動(dòng)態(tài)面板，設(shè)置其狀態(tài)，我們有三個(gè)界面需要來(lái)回切換跳轉(zhuǎn)，所以設(shè)置三個(gè)狀態(tài)，分別命名成對(duì)應(yīng)的頁(yè)面名稱。

設(shè)置動(dòng)態(tài)面板狀態(tài).png

給每個(gè)動(dòng)態(tài)面板的狀態(tài)簡(jiǎn)單制作個(gè)導(dǎo)航欄，便于區(qū)分。

設(shè)置簡(jiǎn)單界面.png

最后一步，給母版的三個(gè)事件添加具體的事情，使每一個(gè)事件對(duì)應(yīng)一個(gè)動(dòng)態(tài)面板的狀態(tài)。

設(shè)置母版事件對(duì)應(yīng)的動(dòng)態(tài)面板狀態(tài).png

OK，大功告成，下面讓我們?cè)跒g覽器中一起看看效果吧。

最終效果.gif

總結(jié)

總結(jié)一下，其實(shí)這個(gè)效果還是比較簡(jiǎn)單的，我做的時(shí)候?qū)xure并沒有什么概念，可以稍微研究了下基本控件也就有了思路，所以感覺做產(chǎn)品的時(shí)候，或者說(shuō)學(xué)習(xí)新東西的時(shí)候一定不要怕，要充滿自信的去學(xué)習(xí)和嘗試，感覺和寫代碼是一樣的道理，只有自己親手去制作一遍，才能夠理解和掌握。（PS：聲明本人新手一枚，如果有什么寫的不好，或者方法錯(cuò)誤的地方還希望大家指出，一起學(xué)習(xí)共同進(jìn)步。大家也知道的程序猿苦逼的生物，平時(shí)都要忙著搬磚，比較少的能有時(shí)間來(lái)寫博客，不過(guò)有些心得我還是會(huì)擠出時(shí)間寫出來(lái)和大家交流學(xué)習(xí)的。下一篇會(huì)寫一下使用axure制作可以滾動(dòng)的列表（tableview）的Demo。）