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

在手風(fēng)琴中，每一個(gè)header在點(diǎn)擊的時(shí)候，會(huì)擴(kuò)展出自己的子內(nèi)容，用于展示更多信息。有些設(shè)計(jì)是可以在點(diǎn)擊手風(fēng)琴控制器的一個(gè)header的時(shí)候，自動(dòng)關(guān)閉其他部分

Step0: 下載練習(xí)文件

在這里下載AxureTraining.rp文件，并用Axure RP打開(kāi)

Step1: GETTING STARTED

1. 打開(kāi)"Accordion control"頁(yè)面
2. 頁(yè)面包含了三組小部件，每一組部件包含了一個(gè)header和一個(gè)四個(gè)“body”組件， 這四個(gè)body會(huì)在開(kāi)始的時(shí)候隱藏，只有當(dāng)對(duì)應(yīng)的“header”被點(diǎn)擊的時(shí)候才會(huì)顯示
3. 點(diǎn)擊“Accordion 1”Group選中，然后再次點(diǎn)擊編輯Group內(nèi)部
4. 選中所有的四個(gè)“Body 1”組件，右擊選擇“Convert to Dynamic panel”， 將這個(gè)Dynamicpanel命名為Body1, 并將其標(biāo)記為“Hidden”狀態(tài)
5. 對(duì)body2,3,4重復(fù)步驟4

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

Step2: Accordion Interaction(手風(fēng)琴交互)

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

Step3: Collapse other sections when one section is opened（選擇一個(gè)部分的時(shí)候，講其他部分關(guān)閉）

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

   ---

注: 本人Axure系列的翻譯blog僅供個(gè)人記錄學(xué)習(xí)，侵刪.