中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：中繼器可以幫助我們儲(chǔ)存頁面、數(shù)據(jù)、圖片等，能夠很好的幫助我們提高工作效率；本文作者教我們中繼器初級(jí)教程，怎么做一個(gè)漂亮的系統(tǒng)首頁展示內(nèi)容，我們一起來學(xué)習(xí)一下。

今天和大家分享如何在axure里，用中繼器做一個(gè)漂亮的系統(tǒng)首頁。

大家也可以把這邊文章當(dāng)作中繼器的初級(jí)教程，本教程中就講到設(shè)置文本、圖片、篩選這幾個(gè)常用的交互事件；希望通過這個(gè)案例，能讓大家學(xué)會(huì)用中繼器。

本文所涉及的原型預(yù)覽地址：https://vwuy7t.axshare.com

一、中繼器的原型

1. 中繼器是什么

簡單來說，中繼器就是一張表，也可以說是一個(gè)數(shù)據(jù)集；可以用于儲(chǔ)存數(shù)據(jù)以下，為了簡單理解，我們把他比作excel表格，只不過他除了儲(chǔ)存文字外，還可以存儲(chǔ)圖片、頁面等內(nèi)容。

2. 中繼器的好處

那中繼器到底有啥好處，為什么我們要用中繼器，不直接把原型話出來呢？

我以下圖為例子，例如你要做一個(gè)美食介紹的原型，里面有成千上百款菜式，先不說交互，你把他畫出來都要很久的時(shí)間。

其實(shí)我們觀察之后可以發(fā)現(xiàn)，其實(shí)每一部分的內(nèi)容都是相像的，就是text+picture元件，所以我們用中繼器來制作的話，就只需要畫一遍；然后再表格中導(dǎo)入圖片和寫粘貼文字即可，大大的縮短了我們制作原型的時(shí)間，提高了效率。

其次，如果設(shè)計(jì)交互，比如說點(diǎn)擊某個(gè)菜，打開這個(gè)菜的詳細(xì)介紹頁面，如果不用中繼器做的話，我們有幾個(gè)菜就要設(shè)置多少次交互，非常復(fù)雜；但是如果用中繼器做的話只需要寫一個(gè)交互即可，省時(shí)省力。

3. 中繼器的特有高保真交互

除了上述的好處之后，中繼器還有自身的高保真交互。

分類篩選：

模糊搜索：

這這兩個(gè)交互效果是用中繼器篩選事件完成的，所以可以說是中繼器特有交互，所以想做一個(gè)高保真交互的原型，中繼器是必不可少的。

二、制作教程

1. 材料準(zhǔn)備

• 中繼器內(nèi)材料：文本標(biāo)簽x1、圖片x1；
• 中繼器外材料：文本標(biāo)簽9個(gè)（分別填寫文字：全部菜品、川菜、鹵菜、粵菜、蘇菜、浙菜、閩菜、湘菜、徽菜）、輸入框x1、搜索圖x1；

2. 中繼器內(nèi)材料擺放

如下圖所示拜訪，圖片大小可以根據(jù)素材設(shè)置：

3. 中繼器表格設(shè)置

中繼器需要設(shè)置3列，如下圖所示：

• type：菜品分類，需要和上邊標(biāo)簽文字（川菜、鹵菜、粵菜、蘇菜、浙菜、閩菜、湘菜、徽菜）一致，如不一致，后續(xù)的分類會(huì)出現(xiàn)問題；
• picture：這里是演示時(shí)展示的圖片，右鍵導(dǎo)入圖片或者直接復(fù)制粘貼即可；
• biaoti：對(duì)應(yīng)演示時(shí)候的標(biāo)題文字。

4. 中繼器內(nèi)交互

中繼器內(nèi)有兩個(gè)交互。

設(shè)置文字，每項(xiàng)加載時(shí)，須有設(shè)置標(biāo)題文字=item.biaoti。

設(shè)置圖像，每項(xiàng)加載時(shí)，設(shè)置展示圖片=item.picture。

5. 中繼器表格外材料擺放

如下圖所示，擺放整齊美觀即可，你們可以用頂端對(duì)齊和水平分布快速對(duì)齊。

6. 分類篩選交互設(shè)置

首先，我們要把9個(gè)文本標(biāo)簽（分別填寫文字：全部菜品、川菜、鹵菜、粵菜、蘇菜、浙菜、閩菜、湘菜、徽菜）設(shè)置為選項(xiàng)組組，鼠標(biāo)單擊時(shí)選中該文本，并且選擇中時(shí)字體變成藍(lán)色，顯示藍(lán)色的下框線。

然后川菜、鹵菜、粵菜、蘇菜、浙菜、閩菜、湘菜、徽菜這8個(gè)文本標(biāo)簽鼠標(biāo)單擊時(shí)，設(shè)置篩選事件；對(duì)中繼器內(nèi)type列進(jìn)行篩選，只顯示type列和選中的文本文字相同的內(nèi)容。

點(diǎn)擊全部菜品時(shí)，我們就不是篩選了，我們是要取消全部篩選即可。

7. 模糊搜索交互設(shè)置

模糊搜索也是用中繼器篩選的事件完成，不過這里要配合indexof函數(shù)使用。

這里簡單介紹一下indexof函數(shù)，例如1234文本，我在里面找1，indexof函數(shù)會(huì)告訴我們1在第0位，如果找2，indexof會(huì)告訴我們他在第一位；如果我們找9的話，因?yàn)?234里面沒有9，所以就找不到，一般我們就用indexof>-1如果成立，即所搜索的存在，否則則不存在。

所以我們這里需要設(shè)置變量LVAR1就是輸入框的文字內(nèi)容，然后在標(biāo)題列里面搜索是否含有對(duì)應(yīng)內(nèi)容，只顯示含有對(duì)應(yīng)內(nèi)容的行。

那到這里就制作完成了，完成之后我們只需要在excel整理好數(shù)據(jù)，然后復(fù)制粘貼到中繼器表格，就馬上實(shí)現(xiàn)了。

以后每次使用基本上兩分鐘就完成自定義的表格，工作效率極高，而且還是高保真的。

最后如果你喜歡我的原型教程的話，記得關(guān)注一下哈，謝謝大家。

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

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