Axure之折疊窗效果

3 評論 7969 瀏覽 5 收藏 4 分鐘

編輯導語:折疊窗效果是產品的一個基礎功能,那么如何用Axure制作呢?本文仔細介紹了通過Axure RP9實現折疊窗效果的詳細步驟和注意事項,希望對讀者有所幫助。

1、 假設做三個標題和三個標題的子內容

2、 先做三個標題的面板,三個子內容面板

三個標題面板:A1,B1,C1

三個子內容面板:a1,b1,c1

3、 設置標題面板和子內容面板的尺寸

標題面板:700,50

子內容面板:700,350

4、將標題面板和子內容面板按照順序從坐標(0,0)位置排列好

A1,a1,B1,b1,C1,c1

4.1 給A1增加兩個狀態:展開和折疊,默認展開

4.2 給B1增加兩個狀態:展開和折疊,默認展開

4.3 給C1增加兩個狀態:展開和折疊,默認展開

如下圖所示:

5、 添加事件(只需給A1,B1,C1添加事件即可)

5.1 給A1添加事件(把產能標題面板看做A1,產能分析面板看做a1)

總結:第一個面板的事件主要是單擊事件,包含兩種情景:每個情景包含設置標題面板A1的狀態、設置子內容面板顯示/隱藏、移動下一個標題面板B1

5.2 給B1添加事件(把業務標題面板看做B1,業務分析面板看做b1)(把訂單標題面板看做C1,訂單分析面板看做c1)

總結:第二個面板(中間)的事件主要是單擊事件、移動事件,單擊事件包含兩種情景:每個情景包含設置標題面板B1的狀態、設置子內容面板顯示/隱藏、移動下一個標題面板C1,移動事件是設置b1和C1跟隨B1的移動而移動。

備注:如果中間還有面板,添加事件跟B1類似,類比添加即可

5.3 給C1添加事件(把發貨標題面板看做C1,發貨分析面板看做c1)

總結:第二個面板(最后)的事件主要是單擊事件、移動事件,單擊事件包含兩種情景:每個情景包含設置標題面板B1的狀態、設置子內容面板顯示/隱藏,移動事件是設置c1跟隨C1的移動而移動。

 

本文由 @不器 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 干貨滿滿,感謝作者!

    來自江蘇 回復
  2. 雖然是知道的,但是系統的列出來還是沒有看到,不錯,感謝作者!

    回復
    1. 共同交流學習進步

      來自湖北 回復