編輯導語：中繼器可以幫助我們儲存頁面、資料、圖片等，能夠很好的幫助我們提高工作效率；本文作者教我們中繼器初級教程，怎麼做一個漂亮的系統首頁展示內容，我們一起來學習一下。
今天和大家分享如何在axure裡，用中繼器做一個漂亮的系統首頁。
大家也可以把這邊文章當作中繼器的初級教程，本教程中就講到設定文字、圖片、篩選這幾個常用的互動事件；希望透過這個案例，能讓大家學會用中繼器。
本文所涉及的原型預覽地址：https://vwuy7t.axshare.com
一、中繼器的原型1. 中繼器是什麼簡單來說，中繼器就是一張表，也可以說是一個數據集；可以用於儲存資料以下，為了簡單理解，我們把他比作excel表格，只不過他除了儲存文字外，還可以儲存圖片、頁面等內容。
2. 中繼器的好處那中繼器到底有啥好處，為什麼我們要用中繼器，不直接把原型話出來呢？
我以下圖為例子，例如你要做一個美食介紹的原型，裡面有成千上百款菜式，先不說互動，你把他畫出來都要很久的時間。
其實我們觀察之後可以發現，其實每一部分的內容都是相像的，就是text+picture元件，所以我們用中繼器來製作的話，就只需要畫一遍；然後再表格中匯入圖片和寫貼上文字即可，大大的縮短了我們製作原型的時間，提高了效率。
其次，如果設計互動，比如說點選某個菜，開啟這個菜的詳細介紹頁面，如果不用中繼器做的話，我們有幾個菜就要設定多少次互動，非常複雜；但是如果用中繼器做的話只需要寫一個互動即可，省時省力。
3. 中繼器的特有高保真互動除了上述的好處之後，中繼器還有自身的高保真互動。
分類篩選：
模糊搜尋：
這這兩個互動效果是用中繼器篩選事件完成的，所以可以說是中繼器特有互動，所以想做一個高保真互動的原型，中繼器是必不可少的。
二、製作教程1. 材料準備- 中繼器內材料：文字標籤x1、圖片x1；
- 中繼器外材料：文字標籤9個（分別填寫文字：全部菜品、川菜、滷菜、粵菜、蘇菜、浙菜、閩菜、湘菜、徽菜）、輸入框x1、搜尋圖x1；
如下圖所示拜訪，圖片大小可以根據素材設定：
中繼器需要設定3列，如下圖所示：
- type：菜品分類，需要和上邊標籤文字（川菜、滷菜、粵菜、蘇菜、浙菜、閩菜、湘菜、徽菜）一致，如不一致，後續的分類會出現問題；
- picture：這裡是演示時展示的圖片，右鍵匯入圖片或者直接複製貼上即可；
- biaoti：對應演示時候的標題文字。
中繼器內有兩個互動。
設定文字，每項載入時，須有設定標題文字=item.biaoti。
設定影象，每項載入時，設定展示圖片=item.picture。
如下圖所示，擺放整齊美觀即可，你們可以用頂端對齊和水平分佈快速對齊。
6. 分類篩選互動設定首先，我們要把9個文字標籤（分別填寫文字：全部菜品、川菜、滷菜、粵菜、蘇菜、浙菜、閩菜、湘菜、徽菜）設定為選項組組，滑鼠單擊時選中該文字，並且選擇中時字型變成藍色，顯示藍色的下框線。
然後川菜、滷菜、粵菜、蘇菜、浙菜、閩菜、湘菜、徽菜這8個文字標籤滑鼠單擊時，設定篩選事件；對中繼器內type列進行篩選，只顯示type列和選中的文字文字相同的內容。
點選全部菜品時，我們就不是篩選了，我們是要取消全部篩選即可。
模糊搜尋也是用中繼器篩選的事件完成，不過這裡要配合indexof函式使用。
這裡簡單介紹一下indexof函式，例如1234文字，我在裡面找1，indexof函式會告訴我們1在第0位，如果找2，indexof會告訴我們他在第一位；如果我們找9的話，因為1234裡面沒有9，所以就找不到，一般我們就用indexof>-1如果成立，即所搜尋的存在，否則則不存在。
所以我們這裡需要設定變數LVAR1就是輸入框的文字內容，然後在標題列裡面搜尋是否含有對應內容，只顯示含有對應內容的行。
那到這裡就製作完成了，完成之後我們只需要在excel整理好資料，然後複製貼上到中繼器表格，就馬上實現了。
以後每次使用基本上兩分鐘就完成自定義的表格，工作效率極高，而且還是高保真的。
最後如果你喜歡我的原型教程的話，記得關注一下哈，謝謝大家。
本文由 @做產品但不是經理 原創釋出於人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基於CC0協議。