Axure之折疊窗效果
編輯導語:折疊窗效果是產品的一個基礎功能,那么如何用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協議
干貨滿滿,感謝作者!
雖然是知道的,但是系統的列出來還是沒有看到,不錯,感謝作者!
共同交流學習進步