在系統(tǒng)表格中，想要快速找到對應(yīng)的數(shù)據(jù)，通常會用條件篩選來完成。但篩選的話，其他數(shù)據(jù)就看不到了，所以一般需要數(shù)據(jù)對比的情況下更多的是用標(biāo)記數(shù)據(jù)的方式，將符合條件的數(shù)據(jù)標(biāo)記過來。本文作者分享了如何在Axure中用中繼器制作能夠?qū)ふ液蜆?biāo)記數(shù)據(jù)的原型模板，一起來看一下吧。

在系統(tǒng)表格中，我們想在表格中快速找到對應(yīng)的數(shù)據(jù)，通常我們會用條件篩選來完成，但是用篩選的方式，其他數(shù)據(jù)就看不到了，少了兩種條件之間的對比。所以如果需要數(shù)據(jù)對比的情況下，我們更多的是用標(biāo)記數(shù)據(jù)的方式，將符合條件的數(shù)據(jù)標(biāo)記起來，從而快速對比條件內(nèi)外數(shù)據(jù)的差別。

今天作者就教大家如何在Axure中用中繼器制作能過尋找和標(biāo)記數(shù)據(jù)的原型模板，我們會以區(qū)間范圍標(biāo)注的案例展開學(xué)習(xí)。

一、效果展示

1. 可以按照三種區(qū)間進行標(biāo)注，分別是左側(cè)單區(qū)間（例如3萬以上），右側(cè)單區(qū)間（例如6萬以下），雙側(cè)雙區(qū)間（例如3到6萬），將符合條件的數(shù)據(jù)用指定顏色標(biāo)記。
2. 可以多種條件同時標(biāo)記，例如對存款余額300萬以上的數(shù)據(jù)進行標(biāo)記，同時對理財余額600萬以下的數(shù)據(jù)進行標(biāo)記。
3. 可以按照各類進行升降序排序。

二、制作教程

1. 材料準備

1）輸入框和按鈕

材料包括文本標(biāo)簽、輸入框、按鈕、矩形等。

文本標(biāo)簽主要是提示文字和~

輸入框的類型我們選擇number，我們將他設(shè)置成透明無邊框，兩個輸入框之間用~文本標(biāo)簽隔開，用背景矩形包裹組成輸入框組，這樣會更加好看。有幾組條件，就增加幾組輸入框組。

按鈕一個是標(biāo)注一個是重置。

2）表格表頭

表格表頭，我們用矩形制作，中間需要排序的增加上下箭頭，如下圖所示排版：

這里所有箭頭我們增加一個單選組，增加選中樣式，填充顏色為藍色。

3）中繼器表格

中繼器表格里面我們主要是矩形，每列對應(yīng)一個矩形，需要和表頭每列矩形的寬度一一對應(yīng)。矩形我們用透明矩形，這樣我們設(shè)置中繼器背景單雙行顏色就不會被遮擋，從而實現(xiàn)斑馬線效果

操作列是是參考報表的文字，我們可以增加鼠標(biāo)懸停樣式，增加下劃線

需要被標(biāo)注的列對應(yīng)的矩形元件，我們要設(shè)置選中樣式為紅色文本。

如果需要移入行變色效果的話，我們可以增加透明的背景矩形，將他們包括起來，至于底層，增加選中樣式，填充淺藍色，這里不要懸停樣式，是因為如果勾選觸發(fā)內(nèi)部元件交互樣式的話，就會導(dǎo)致移入該行，上面設(shè)置操作文字就會觸發(fā)懸停，所以這里我們用選中樣式。將中繼器里所有元件組合在一起，增加鼠標(biāo)移入選中背景矩形，鼠標(biāo)移出時取消選中的交互

中繼器表格里我們填寫對應(yīng)的內(nèi)容，你們可以根據(jù)你們實際需要填寫。

column1~6是填寫表格1到6列對應(yīng)的內(nèi)容即可，gengxinlie用于邏輯交互，默認為空即可。

填寫完成后，我們需要將表格的數(shù)據(jù)設(shè)置到對應(yīng)的矩形里，如果是Axure10的話，直接點擊中繼器里的連接，選擇對應(yīng)的矩形元件即可。如果是axure8、9的話，就要寫交互來完成，在中繼器每項加載時，我們用設(shè)置文本的交互，將中繼器表格里每列的值設(shè)置到對應(yīng)的元件里。

2. 交互制作

1）標(biāo)注的條件

我們以第二列存款余額為例，我們要分3種情況來討論：

第一種情況是，如果只填寫了最小值，又填寫最大值，那就是雙區(qū)間標(biāo)注，我們就找出第二列里大于對應(yīng)最小值的輸入框，并且小于對應(yīng)最大值的輸入框，用設(shè)置選中的交互，將他選中，因為前面設(shè)置了選中樣式，所以就戶變紅。

第二種情況是，填寫了最小值，沒有填寫最大值，這個相當(dāng)于最小值的單區(qū)間，例如三萬以上，這樣我們只需要找出第二列里大于對應(yīng)最小值的輸入框，用設(shè)置選中的交互，將他選中。

第三種情況是，沒有填寫了最小值，只填寫最大值，這個相當(dāng)于最答值的單區(qū)間，例如六萬以下，這樣我們只需要找出第二列里小于對應(yīng)最大值的輸入框，用設(shè)置選中的交互，將他選中。

這樣就完成了對存款余額按條件標(biāo)記的交互了，如果有多列多個標(biāo)注條件，也是用以上同上的方式添加交互。

2）按鈕觸發(fā)事件

在上面條件交互寫好之后，我們需要點擊標(biāo)注按鈕或者重置按鈕，將他們標(biāo)注或者取消標(biāo)注。

鼠標(biāo)單擊標(biāo)準按鈕時，相當(dāng)于我們要根據(jù)輸入框內(nèi)容，判斷中繼器里哪些行符合條件，所以，我們用更新行的交互，更新一下中繼器表格數(shù)據(jù)，相當(dāng)于重新尋找標(biāo)記數(shù)據(jù)。這個我們先標(biāo)記所有行，然后更新他們的值，更新的內(nèi)容是什么不重要，最重要是不要和更新前一樣就行了，否則會導(dǎo)致更新失敗，所以我們用簡單的數(shù)學(xué)，讓他等于他之前的值+1。

那我們怎么重置數(shù)據(jù)了，其實很多辦法都可以，我們可以用打開鏈接的交互，刷新頁面，這是最直接的，但是這樣體驗不會太好，因為會閃一下，電腦卡的話刷新還要時間

所以我們用設(shè)置文本的交互，將所有條件輸入框的值設(shè)置為空，相當(dāng)于恢復(fù)原樣，然后在觸發(fā)標(biāo)注按鈕，重新標(biāo)注即可。

3）中繼器表格的排序

因為前面我們默認設(shè)置存款余額的下箭頭為選中，所以在中繼器載入的時候，我們要用添加排序的交互，對存款余額對應(yīng)列的數(shù)據(jù)進行降序排列。

鼠標(biāo)單擊對應(yīng)按鈕時，我們要先用選中的交互，將當(dāng)前按鈕設(shè)置為選中，然后在用添加排序的交互，對對應(yīng)列的數(shù)據(jù)進行排列，如果是上箭頭就用升序，如果是下箭頭就用降序。

對于默認選中的按鈕，案例中是存款余額的下按鈕，我們可以勾選默認選中，也可以在按鈕載入時，觸發(fā)該按鈕鼠標(biāo)單擊時的交互，都可以起到默認選中的效果。

這樣我們就制作完成了中繼器表格尋找和標(biāo)記數(shù)據(jù)的原型模板了，下次使用時，只需要在中繼器表格里維護對應(yīng)的數(shù)據(jù)，預(yù)覽時就會自動生成效果了，是不是很方便呢？

那以上就是本期教程的全部內(nèi)容，感興趣的同學(xué)們可以動手試試哦，感謝您的閱讀，我們下期見。