在絕大多數(shù)產(chǎn)品經(jīng)理的工作中，都需要畫原型，有許多組件都是重復(fù)使用的。例如做app時(shí)，上拉加載、下拉刷新的效果，輪播圖效果等等。對(duì)于這些重復(fù)使用率較高的組件，我們可以建立一個(gè)自己的元件庫，然后把它們做成元件，方便重復(fù)使用。

筆者是個(gè)新人，正在建立擴(kuò)充自己的元件庫，希望把這個(gè)過程寫成文章，與大家分享。我用的是Axure8.0，可能文中的某些操作，7.0不支持，但制作思路基本相同。

前置條件：

在元件庫中選擇創(chuàng)建元件庫，注意這里不是新建一個(gè)rp文件，如下圖：

元件名稱：

仿京東輪播圖

功能描述：

1. n張圖片間的定時(shí)切換，鼠標(biāo)進(jìn)入停止切換；
2. 點(diǎn)擊上一張、下一張切換圖片；
3. 點(diǎn)擊頁碼切換到相應(yīng)圖片。

方法/步驟：

第一步：畫出對(duì)應(yīng)的組件

在這里我們需要一個(gè)存放圖片的動(dòng)態(tài)面板、一個(gè)存放頁碼的動(dòng)態(tài)面板和上一張/下一張按鈕。

1、拖進(jìn)1個(gè)動(dòng)態(tài)面板，名稱為“圖片存放”，在此面板中建立5個(gè)狀態(tài)，用來存放5張圖片。

2、拖進(jìn)1個(gè)動(dòng)態(tài)面板，名稱為“頁碼標(biāo)識(shí)”，在此面板中建立5個(gè)狀態(tài)，用來存放頁碼的選中態(tài)。

在State1中拖進(jìn)1個(gè)矩形，顏色設(shè)為白色，透明度30%，作為背景。

拖進(jìn)5個(gè)矩形，作為頁碼，設(shè)置“1”背景色為黑色，字體為白色，表示選中。

在State1中全選，復(fù)制到State2，設(shè)置“2”背景色為黑色，字體為白色，表示選中，以此類推，如下圖。

3、拖進(jìn)1個(gè)矩形和1個(gè)向左的箭頭，組合作為上一張按鈕，名稱“previous”。矩形線段顏色和填充顏色均設(shè)為黑色，不透明度為40%。按照此方法，再畫一個(gè)下一張按鈕，名稱“next”。（我使用的是Axure8.0，icon中有箭頭元件。）畫完之后，組合，名稱為“按鈕”，設(shè)置為隱藏。

4、完成上述步驟之后，全選，轉(zhuǎn)化為動(dòng)態(tài)面板，名稱為“輪播圖”。

第二步：讓圖片動(dòng)起來

在這我們除了要實(shí)現(xiàn)圖片的輪播，還要實(shí)現(xiàn)頁碼同步切換。

1、選擇“輪播圖”動(dòng)態(tài)面板，為其添加事件——“載入時(shí)”，如下圖：

2、在播放圖片的同時(shí)，頁碼也是要切換的。所以在載入時(shí)，除了要設(shè)置圖片狀態(tài)的切換，還要設(shè)置頁碼狀態(tài)的切換，如下圖。

注意，在設(shè)置頁碼標(biāo)識(shí)循環(huán)時(shí)的選擇跟圖片是不同的，頁碼是不需要設(shè)置進(jìn)入退出動(dòng)畫的。

第三步：鼠標(biāo)的移入移出

這個(gè)步驟，我們要實(shí)現(xiàn)

鼠標(biāo)移入：

圖片、頁碼停止播放；

顯示上一張/下一張按鈕。

鼠標(biāo)移出：

圖片、頁碼開始播放；

隱藏上一張/下一張按鈕。

1、鼠標(biāo)進(jìn)入時(shí)，圖片是停止播放的，添加事件“鼠標(biāo)移入時(shí)”，點(diǎn)擊下方的“更多事件”，選擇“鼠標(biāo)移入時(shí)”。

這個(gè)時(shí)候一定要注意，只有圖片停下來是不行的，我們還要讓頁碼也停下來，如下圖：

顯示上一張/下一張按鈕，如下圖：

3、鼠標(biāo)移出時(shí)，圖片又開始播放，頁碼也要?jiǎng)悠饋?，添加事件“鼠?biāo)移出時(shí)”，仍然在“更多事件”中，選擇“鼠標(biāo)移出時(shí)”，如下圖：

隱藏下一張、下一張按鈕

第四步：下一張、下一張按鈕交互。

1、點(diǎn)擊上一張切換圖片，進(jìn)入“輪播圖”動(dòng)態(tài)面板的State1，為previous添加交互事件，如下圖：

一定要記住，在對(duì)圖片進(jìn)行切換操作時(shí)，也要對(duì)頁碼進(jìn)行操作。

此時(shí)，網(wǎng)頁預(yù)覽之后，我們會(huì)發(fā)現(xiàn)一個(gè)問題，圖片處于State1時(shí)，點(diǎn)擊上一張沒有變化。此時(shí)我們需要添加新的事件，編輯條件，讓圖片狀態(tài)切換到State5，如下圖：

在這里需要注意一個(gè)問題，case2一定要放在case1上面。

2、點(diǎn)擊下一張切換圖片。

按照上面的思路，對(duì)next添加點(diǎn)擊事件。

第五步：頁碼點(diǎn)擊交互。

1、進(jìn)入“頁碼標(biāo)識(shí)”動(dòng)態(tài)面板State1，選擇“2”，添加鼠標(biāo)單擊事件，如下圖：

以此類推，為下面的按鈕以及狀態(tài)添加點(diǎn)擊事件。

OK，至此我們的一個(gè)元件就完成啦，以后需要用到，只要導(dǎo)入元件，直接拖進(jìn)來就可以啦。

作者：ningmengsuan

本文由 @ningmengsuan 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。