Axure教程：高等搜刮

在原型中，搜刮是一個稀有的交互計劃。但不少同硯由于武藝不熟習就沒有做對應的交互后果。這篇文章，作者分享了計劃搜刮功效的整個流程，信賴看完你也能做一個很牛逼的交互。

高等搜刮可以經過使用準確的緊張詞或短語，協助用戶找到特定的內容。尤其在面臨多量搜刮后果時，經過過濾條件變小范圍，可以節流時間。他允許用戶使用多個條件舉行組合（比如條件婚配、含糊搜刮、區間挑選等）來精準獲取干系內容。

今天我們就來學習，怎樣在Axure里使用交互，完成高等搜刮的后果，此中包含：

一、后果展現

1、切換搜刮辦法——點擊右上角搜刮筆墨可以切換高等搜刮或快速搜刮

2、多條件聯動搜刮——包含輸入框含糊搜刮、下拉列表選項搜刮、數字區間挑選、單選按鈕組搜刮

3、中繼器表格——表格內容是用中繼器制造的，使用時維護中繼器表格內容即可

原型地點：
https://hrioua.axshare.com/#g=1&p=高等搜刮案例

二、制造教程

1、質料準備

搜刮欄我們要做兩個頁面，快速搜刮和高等搜刮兩個頁面，分散放在同一個動態面板的兩個形態里。

1.1 快速搜刮

尋常快速搜刮是搜刮常用的信息，比如工號、姓名、職位，以是我們可以在快速搜刮頁面，可以經過輸入框、文本標簽、矩形、下拉列表、按鈕來制造，如下圖所示擺放

1.2 高等搜刮

高等搜刮的話搜刮的條件會愈加過細，可以精準的找到必要的數據，以是會在快速搜刮的基本上，在增長一些搜刮辦法、比如區間搜刮、單選按鈕組搜刮等。用到的元件包含輸入框、文本標簽、矩形、下拉列表、按鈕、單選按鈕等，如下圖所示擺放

完成之后我們將它放在同一個動態面板的兩個形態頁里，后續會經過交互來切換。

1.3表格內容

表格我們分為表頭和表格內容

表頭的話我們用多個矩形擺放而成，每個矩形對應一列，如下圖所示

表格內容我們用中繼器來制造，在中繼器里相反增長和表頭一樣多的矩形，每個對應一列，寬度和對應的表頭矩形一律，如下圖所示擺放

假如必要移入對應行變色的后果，可以設置鼠標懸停樣式，將他們組合在一同，然后勾選允許觸發組合內交互樣式。

中繼器表格我們增長對應的列數，案例中是11列，Column1~11，每列關于中繼器里1-11的矩形

假如是Axure10的話，我們點擊表格里的毗連元件，選擇對應的矩形，就可以將表格內容設置到矩形上，假如是Axure8或9，就要在中繼器每項加載時，用設置文本的交互，將對應列的值設置到對應的矩形上

2、交互制造

2.1 快速搜刮和高等搜刮之間的切換

鼠標單擊右上角快速搜刮的筆墨時，就代表先切換到快速搜刮里，以是我們用設置面板形態的交互，將動態面板設置到高等搜刮的頁面；

同理鼠標單擊右上角高等搜刮的筆墨時，就代表先切換到高等搜刮里，以是我們用設置面板形態的交互，將動態面板設置到高等搜刮的頁面；

在設置完頁面之后，由于快速搜刮和高等搜刮里有三個條件是一樣的，分散是工號、姓名和職位，以是我們要把之前輸入了的值傳到另一個頁面，輸入框里的值我們用設置文本的交互就可以設置了，下拉列表的值，我們要經過設置列表選中項的交互，將值傳到另一個頁面的下拉列表里

2.2 搜刮按鈕的交互

鼠標單擊搜刮按鈕時，我們應該依據填寫的內容對中繼器表格舉行挑選

2.2.1 輸入框含糊搜刮

像員工號、姓名這種，我們可以用含糊搜刮，比如搜刮張，可以找到一切包含張的名字。這里我們必要用indexof函數，這個函數可以查察目標筆墨里對否含有指定的文本，假如有后果就大于-1，不然就即是-1

2.2.2下拉列表挑選

像員工崗亭這種，有僅限的選擇值的，我們就可以用下拉列表挑選，挑選條件是下拉列表的選項筆墨即是對應列里的筆墨。這里必要注意的是，下拉列表尋常有一個選項是提示筆墨，比如請選擇，我們在挑選之前，要把這種情況剔除，我們可以加一個條件，假如選項筆墨不是默許筆墨，才實行挑選的交互。

2.2.3 單選按鈕組挑選

單選按鈕組挑選也很簡便，我們在單選按鈕選中時，用設置文本的交互，將選中的值用文本紀錄下去，然后用挑選的交互，條件是目標行對應列的值，即是紀錄的文本值

2.2.4 區間挑選

尋常像年事、工齡這種，我們會用區間挑選的辦法，挑選的條件是目標行對應列的值要大于左側輸入框的值，并且小于右側輸入框的值。

這里必要注意的是，假如輸入框文本為空，那他就默以為0，如此假如只輸入了左側最小值是40，那他搜刮的條件就是40到0，如此分明是不合錯誤的，以是在輸入框丟失核心時，我們要推斷他對否為空，假如為空，就在紀錄文本里設置一個無窮大的值，比如99999999；假如不為空，就紀錄輸入框里填寫的值。挑選時不是對輸入框舉行挑選，是對紀錄的筆墨舉行挑選，如此就可以制止這個成績了

2.2.5 團結挑選

由于各個挑選條件的干系是并的干系，以是我們一次添加挑選事變就可以了，必要注意的一點是，在挑選開頭的時分，我們要先用移出挑選的交互，移除全部挑選，然后才開頭新的挑選

如此我們就可以完成搜刮了，必要注意的是，在快速搜刮頁面，只對前方三個條件舉行挑選，高等搜刮頁面，才是對全部條件舉行挑選。

2.2.6 重置

鼠標單擊重置按鈕時，我們要將表格和搜刮條件恢復原狀，假如是輸入框，我們用設置文本的交互，將他設置為空就可以了；假如是紀錄筆墨，我們也是用設置文本的交互，將他設置為默許值，比如最大值是設置為99999；假如是下拉列表，就用設置列表選項的交互，將他設置為默許選項；假如是單選按鈕，我們就用取消選中的交互將他們取消。最初用觸發的交互，觸發搜刮按鈕鼠標單擊時，相當于觸發了移出挑選，表格就主動規復到未挑選之前的形態。

如此我們就完成高等搜刮的原型模板了，后續使用也很便利，表格數據只必要在中繼器表格里填寫，預覽后即可主動天生對應的后果。

那以上就是本期教程的全部內容，感興致的同硯們可以入手試試哦，感激您的閱讀，我們下期見。

本文由 @AI產物人 原創公布于各位都是產物司理，未經允許，克制轉載

題圖來自 Unsplash，基于 CC0 協議

該文看法僅代表作者本人，各位都是產物司理平臺僅提供信息存儲空間辦事。