先上一張原型主界面的圖片，原型在文章末尾，自己去下載

本案例是以瀏覽圖片為范本的原型設(shè)計（僅供娛樂與學(xué)習(xí)）。內(nèi)部包含多層動態(tài)面板，函數(shù)應(yīng)用，應(yīng)該會對初學(xué)者有一點幫助。

不過話說在前面，學(xué)習(xí)Axure還是要循序漸進：先從認(rèn)識部件，認(rèn)識函數(shù)開始（函數(shù)要學(xué)好，很重要滴），基礎(chǔ)打牢后再繼續(xù)打磨會事半功倍，不要上來就直接copy人家的函數(shù)與動作，要知道實現(xiàn)思路，知道“雞”是怎么來滴。

下面開始一個一個開始介紹實現(xiàn)方法：

第一部分：主界面的美女顯示面板

項目內(nèi)容動態(tài)面板部件結(jié)構(gòu)

在這里需要再看一下主界面顯示的情況

這里我們設(shè)置想讓圖片可以上下拖動，顯示其他的未顯示出來的內(nèi)容，注意：這里要設(shè)定上下滑動的邊界；

并且在相應(yīng)的圖片上進行左右滑動時可以觸發(fā)動態(tài)面板中圖片的切換；

在鼠標(biāo)單擊時彈出“看圖模式”，進行圖片的瀏覽，在這個界面中必須點擊退出按鈕才能退出到主界面。

實現(xiàn)思路：

首先動態(tài)面板要能拖動（設(shè)定沿y軸拖動）——設(shè)定上下滑動邊界條件與動作——設(shè)定光標(biāo)接觸部件條件——在相應(yīng)的接觸區(qū)域?qū)崿F(xiàn)左右滑動切換圖片的動作——單擊相應(yīng)的圖片時候，顯示隱藏的對應(yīng)動態(tài)面板并到頂層——點擊退出按鈕回到主界面

好了，看一下函數(shù)的截圖：

主頁動態(tài)面板動作設(shè)定：

1，這里的top與bottom我說一下邊界設(shè)定

top函數(shù)：是指部件的頂部Y坐標(biāo)，這里是不想讓動態(tài)面板一直向下拖動使主界面中出現(xiàn)無內(nèi)容區(qū)域，所以要設(shè)定動態(tài)面板沿Y軸拖動時top不能大于0，如果大于0的話我們就設(shè)定他的位置回到絕對位置（0,0）

bottom函數(shù)：部件的底部，這里與top對應(yīng)的也是不想讓部件的底部一直向上滑出現(xiàn)無內(nèi)容區(qū)域，所以要設(shè)定底部bottom的y值不能小于動態(tài)面板的區(qū)域高度；本案例是525（根據(jù)個人設(shè)定不同），如果小于525那么就移動到相對位置到（0,[[525-LVAR1.bottom-1]]）。

(這里再解釋一下相對位置：就是以目標(biāo)位置為基準(zhǔn)，是需要正向移動還是反向移動，本案例就是正向移動，所以用大數(shù)-小數(shù)：525-LVAR1.bottom，說道這個程度如果還不理解我也沒辦法了，慢慢想吧)

這里有一個點要看一下

在嵌套內(nèi)部動態(tài)面板時為了使顯示內(nèi)容為一個整體，并方便改動內(nèi)部內(nèi)容時而外面的函數(shù)不受影響，我將主頁動態(tài)面板的顯示內(nèi)容區(qū)域用一個動態(tài)面板來顯示的，并且將動態(tài)面板設(shè)定為“調(diào)整大小以適合內(nèi)容”

2，這次再看光標(biāo)接觸部件時左右滑動切換圖片的條件

3，鼠標(biāo)單擊進入看圖模式

這里的動作是設(shè)定在pageA與pageB上的，然后觸發(fā)相應(yīng)的動態(tài)面板“看圖A與看圖B”

pageA動作設(shè)定

看圖A的界面

看圖A的動作

返回主界面

第二部分：排序位置

這里是一個矩形部件與動態(tài)面板的互動，矩形的顯示文字就是動態(tài)面板的選中文字（這里我用的toString函數(shù)），實現(xiàn)選擇的效果。

并讓動態(tài)面板再次展開時，現(xiàn)在顯示的文字與對應(yīng)的動態(tài)面板中的部件處于選中狀態(tài)，這里又涉及到條件判斷，大家看下案例吧。

排序面板，一個例子：智能排序動作配置

第三部分：篩選按鈕

看一下篩選動態(tài)面板的內(nèi)部

這里用到了一個小東西，就是分組，這樣能夠?qū)崿F(xiàn)每個組中只有一個能夠處于選中狀態(tài)，不會出現(xiàn)復(fù)選。

原型百度云盤：

作者源：http://pan.baidu.com/s/1bovpVI3

官方源：http://pan.baidu.com/s/1ntW9str 密碼: dq4c

在線原型體驗：http://9al1jc.axshare.com

建議下載體驗，Axure官網(wǎng)在線響應(yīng)比較慢，下載下來還可以直接看原型的函數(shù)設(shè)置

今天的案例分享就到這里了。其實是一個很簡單的案例，用到的東西并不多，但是還是比較有助于初學(xué)者認(rèn)識一下Axure的一些函數(shù)與條件的綜合應(yīng)用的。

對于學(xué)習(xí)Axure我還是文章開頭說的話（沒注意看的再看一遍）：把各個部件混熟，各種函數(shù)會用，各個界面的多種功能認(rèn)清完成，然后你的Axure之路才真正開始。

注：本人也在不斷學(xué)習(xí)進步，如有交流可以加我微信：fzl690894512，歡迎打擾。

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