【Axure原型圖】—— 6. 手風琴效果控制（according control）

在手風琴中，每一個header在點擊的時候，會擴展出自己的子內容，用于展示更多信息。有些設計是可以在點擊手風琴控制器的一個header的時候，自動關閉其他部分

Step0: 下載練習文件

在這里下載AxureTraining.rp文件，并用Axure RP打開

Step1: GETTING STARTED

1. 打開"Accordion control"頁面
2. 頁面包含了三組小部件，每一組部件包含了一個header和一個四個“body”組件， 這四個body會在開始的時候隱藏，只有當對應的“header”被點擊的時候才會顯示
3. 點擊“Accordion 1”Group選中，然后再次點擊編輯Group內部
4. 選中所有的四個“Body 1”組件，右擊選擇“Convert to Dynamic panel”， 將這個Dynamicpanel命名為Body1, 并將其標記為“Hidden”狀態
5. 對body2,3,4重復步驟4

6. 然后將Header1, header2, header3依次擺放整齊
   

Step2: Accordion Interaction(手風琴交互)

1. 點擊“Accordion 1”Group選中，然后再次點擊編輯Group內部， 選中內部的“Header1”， 在Properties標簽中，雙擊“Onclick”, 添加一個Onclick case
2. 在左列，選擇“ToggleVisibility”
3. 在右邊列，選中“Body 1”dynamic panel
4. 在右邊列的底下，確保選中“Toggle” , 然后點擊“Push/Pull widgets”復選框， Direction選擇“Below”
5. 點擊"OK", 關閉case編輯器
6. 給Header2和Header3分別選擇對應"Body2"和"Body3"dynamicpanel， 這個時候就可以先預覽一下效果了

Step3: Collapse other sections when one section is opened（選擇一個部分的時候，講其他部分關閉）

1. 選擇“Header 1”，雙擊“Case1”, 打開再次編輯
2. 左側點擊“hide”
3. 右側選擇"Body2" dynamic panel
4. 點擊“pull widgets”復選框, 確保Direction 選項選擇"Below"
5. 下一步選擇"Body3"dynamic panel
6. 點擊"Pull widgets"復選框，確保Direction選項選擇"Below"
7. 點擊OK， 關閉Case編輯器
8. 然后給Header2和Header3重復這個步驟，在自己的case內，hiding其他的兩個Body
   

   ---

注: 本人Axure系列的翻譯blog僅供個人記錄學習，侵刪.