編輯導語：在系統(tǒng)原型設計中，手風琴也是一個常見的樣式設計。那么，若不想用動態(tài)面板或其他方式、而想采用中繼器進行手風琴原型制作的話，應該如何操作呢？本篇文章里，作者總結了中繼器制作手風琴原型模板的流程，一起來看一下。

手風琴是系統(tǒng)原型很常用的一個原型，但在Axure里的原生元件并沒有手風琴，所以當我們需要用到手風琴的時候就需要自己制作了。

很多同學都會制作簡單的手風琴效果，他們往往用動態(tài)面板、隱藏顯示等事件去制作，目前很少有人真正用到中繼器去做一個手風琴的模板，這樣就會導致效率的低下，每次維護內容都要進行很多次復制粘貼等重復的工作，如果要做交互的話，那么就會更加麻煩。

所以作者今天教大家用中繼器制作手風琴的原型模板，以后再次使用時，我們只需要在表格內填寫文字即可，一鍵生成高保真的手風琴。

今天主要教大家制作兩種效果的手風琴，一種是鼠標移入時自動展開全部內容，另一種是鼠標單擊時才展開全部內容。

原型預覽地址：https://98at54.axshare.com

下面我們一起來學習吧~~~

一、材料準備

標題矩形——用于顯示標題文字，適當調整矩形的大小、填充顏色和邊框線顏色。

內容矩形——用于顯示內容文字，適當調整矩形的大小、填充顏色和邊框線顏色，默認隱藏，并設置單項組。

向下箭頭——內容展開或收起的標志，讓手風琴更加清晰。

中繼器——將上面三個元件組合到一塊，然后復制到中繼器內部，如下圖所示擺放。

中繼器表格增加2列：

1. title列——代表對應每個手風琴內的標題；
2. text列——代表對應每個手風琴內該標題下面隱藏的內容。

如下圖所示，在表格內填入內容即可：

注：中繼器要取消勾選隔離列表之間的選項組。

二、交互制作

1. 中繼器每項加載時

設置文本——中繼器每項加載時，我們要把中繼器列表里的item.title列的文字設置到標題矩形，把item.text列的文字設置到內容矩形。

設置選中——我們是通過設置內容矩形是否選中來控制內容矩形的顯示與隱藏。這部分后續(xù)會詳細介紹，這里要介紹的是，我們會默認顯示第一行手風琴的內容，其余隱藏，所以我們在這加一個條件，如果item.index==1，就是第一行的意思，設置選中內容矩形為真。

2. 內容矩形選中時

顯示——當內容矩形選中時，我們就顯示當前元件，即顯示內容矩形。由于內容矩形默認是隱藏的，所以在中繼器加載第一行時，會選中第一行的內容矩形，這樣內容矩形就會顯示出來。

旋轉——內容矩形顯示時，將向下箭頭旋轉180度，這樣向下的箭頭就會變成向上。

3. 內容矩形取消選中時

隱藏——當內容矩形取消選中時，我們就隱藏當前元件，即隱藏內容矩形。

有的同學可能會問，沒有看到有觸發(fā)內容矩形取消選中的事件，其實這里我們不需要寫取消選中的事件，因為我們開始的時候對內容矩形設置成單選組，所以當另外一行被選中時，當前選中的狀態(tài)就會自動取消，這也是單選組的妙用之處。

旋轉——內容矩形隱藏時，將箭頭旋轉180度，這樣就可以恢復原來位置了。

4. 鼠標移入顯示內容

鼠標移入中繼器內組合時，設置內容矩形為選中狀態(tài)，這樣就可以顯示鼠標當前所在手風琴內的隱藏內容了?？梢院唵蔚乩斫鉃椋髽艘迫胗|發(fā)了選中，選中又觸發(fā)了顯示，而又因為是單選組，當這行內容顯示時有導致其他內容隱藏。

5. 鼠標單擊顯示內容

鼠標單擊時中繼器內組合時，同樣也是設置矩形為選中狀態(tài)，和上面的是一模一樣的，原理也是相同的。一般而言，鼠標移入效果和鼠標單擊效果二者選一，你們可以根據實際的需求設置。

三、后續(xù)拓展

恭喜你已經學會用中繼器制作手風琴了，后續(xù)你可以根據實際的需要，在隱藏內容里邊添加不同大小顏色的文本、圖片、鏈接。原理同時一樣的，需要拓展的話在中繼器內添加對應列的內容，然后把選中隱藏內容矩形變成需要隱藏組合即可。

以上就是本期的全部內容了，感謝您的閱讀，我們下期見，88~~~

本文由 @做產品但不是經理 原創(chuàng)發(fā)布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協(xié)議。