一、中繼器的原型
1. 中繼器是什么
簡單來說，中繼器就是一張表，也可以說是一個數(shù)據(jù)集；可以用于儲存數(shù)據(jù)以下，為了簡單理解，我們把他比作excel表格，只不過他除了儲存文字外，還可以存儲圖片、頁面等內(nèi)容。
2. 中繼器的好處
那中繼器到底有啥好處，為什么我們要用中繼器，不直接把原型話出來呢？
我以下圖為例子，例如你要做一個美食介紹的原型，里面有成千上百款菜式，先不說交互，你把他畫出來都要很久的時間。
其實我們觀察之后可以發(fā)現(xiàn)，其實每一部分的內(nèi)容都是相像的，就是text picture元件，所以我們用中繼器來制作的話，就只需要畫一遍；然后再表格中導入圖片和寫粘貼文字即可，大大的縮短了我們制作原型的時間，提高了效率。
其次，如果設計交互，比如說點擊某個菜，打開這個菜的詳細介紹頁面，如果不用中繼器做的話，我們有幾個菜就要設置多少次交互，非常復雜；但是如果用中繼器做的話只需要寫一個交互即可，省時省力。
3. 中繼器的特有高保真交互
除了上述的好處之后，中繼器還有自身的高保真交互。
分類篩選：
模糊搜索：
這這兩個交互效果是用中繼器篩選事件完成的，所以可以說是中繼器特有交互，所以想做一個高保真交互的原型，中繼器是必不可少的。
二、制作教程
1. 材料準備
- 中繼器內(nèi)材料：文本標簽x1、圖片x1；
- 中繼器外材料：文本標簽9個（分別填寫文字：全部菜品、川菜、鹵菜、粵菜、蘇菜、浙菜、閩菜、湘菜、徽菜）、輸入框x1、搜索圖x1；
2. 中繼器內(nèi)材料擺放
如下圖所示拜訪，圖片大小可以根據(jù)素材設置：
3. 中繼器表格設置
中繼器需要設置3列，如下圖所示：
- type：菜品分類，需要和上邊標簽文字（川菜、鹵菜、粵菜、蘇菜、浙菜、閩菜、湘菜、徽菜）一致，如不一致，后續(xù)的分類會出現(xiàn)問題；
- picture：這里是演示時展示的圖片，右鍵導入圖片或者直接復制粘貼即可；
- biaoti：對應演示時候的標題文字。
4. 中繼器內(nèi)交互
中繼器內(nèi)有兩個交互。
設置文字，每項加載時，須有設置標題文字=item.biaoti。
設置圖像，每項加載時，設置展示圖片=item.picture。
5. 中繼器表格外材料擺放
如下圖所示，擺放整齊美觀即可，你們可以用頂端對齊和水平分布快速對齊。
6. 分類篩選交互設置
首先，我們要把9個文本標簽（分別填寫文字：全部菜品、川菜、鹵菜、粵菜、蘇菜、浙菜、閩菜、湘菜、徽菜）設置為選項組組，鼠標單擊時選中該文本，并且選擇中時字體變成藍色，顯示藍色的下框線。
然后川菜、鹵菜、粵菜、蘇菜、浙菜、閩菜、湘菜、徽菜這8個文本標簽鼠標單擊時，設置篩選事件；對中繼器內(nèi)type列進行篩選，只顯示type列和選中的文本文字相同的內(nèi)容。
點擊全部菜品時，我們就不是篩選了，我們是要取消全部篩選即可。
7. 模糊搜索交互設置
模糊搜索也是用中繼器篩選的事件完成，不過這里要配合indexof函數(shù)使用。
這里簡單介紹一下indexof函數(shù)，例如1234文本，我在里面找1，indexof函數(shù)會告訴我們1在第0位，如果找2，indexof會告訴我們他在第一位；如果我們找9的話，因為1234里面沒有9，所以就找不到，一般我們就用indexof>-1如果成立，即所搜索的存在，否則則不存在。
所以我們這里需要設置變量LVAR1就是輸入框的文字內(nèi)容，然后在標題列里面搜索是否含有對應內(nèi)容，只顯示含有對應內(nèi)容的行。
那到這里就制作完成了，完成之后我們只需要在excel整理好數(shù)據(jù)，然后復制粘貼到中繼器表格，就馬上實現(xiàn)了。
以后每次使用基本上兩分鐘就完成自定義的表格，工作效率極高，而且還是高保真的。
承擔因您的行為而導致的法律責任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。