国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

在原型中，搜索是一個(gè)常見的交互設(shè)計(jì)。但不少同學(xué)因?yàn)榧寄懿皇煜ぞ蜎]有做對(duì)應(yīng)的交互效果。這篇文章，作者分享了設(shè)計(jì)搜索功能的整個(gè)流程，相信看完你也能做一個(gè)很牛逼的交互。

高級(jí)搜索可以通過使用精確的關(guān)鍵詞或短語，幫助用戶找到特定的內(nèi)容。尤其在面對(duì)大量搜索結(jié)果時(shí)，通過過濾條件縮小范圍，能夠節(jié)省時(shí)間。他允許用戶使用多個(gè)條件進(jìn)行組合（例如條件匹配、模糊搜索、區(qū)間篩選等）來精準(zhǔn)獲取相關(guān)內(nèi)容。

今天我們就來學(xué)習(xí)，怎么在Axure里使用交互，實(shí)現(xiàn)高級(jí)搜索的效果，其中包括：

一、效果展示

1、切換搜索方式——點(diǎn)擊右上角搜索文字可以切換高級(jí)搜索或快速搜索

2、多條件聯(lián)動(dòng)搜索——包括輸入框模糊搜索、下拉列表選項(xiàng)搜索、數(shù)字區(qū)間篩選、單選按鈕組搜索

3、中繼器表格——表格內(nèi)容是用中繼器制作的，使用時(shí)維護(hù)中繼器表格內(nèi)容即可

二、制作教程

1、材料準(zhǔn)備

搜索欄我們要做兩個(gè)頁面，快速搜索和高級(jí)搜索兩個(gè)頁面，分別放在同一個(gè)動(dòng)態(tài)面板的兩個(gè)狀態(tài)里。

1.1 快速搜索

一般快速搜索是搜索常用的信息，例如工號(hào)、姓名、職位，所以我們可以在快速搜索頁面，可以通過輸入框、文本標(biāo)簽、矩形、下拉列表、按鈕來制作，如下圖所示擺放

1.2 高級(jí)搜索

高級(jí)搜索的話搜索的條件會(huì)更加細(xì)致，可以精準(zhǔn)的找到需要的數(shù)據(jù)，所以會(huì)在快速搜索的基礎(chǔ)上，在增加一些搜索方式、例如區(qū)間搜索、單選按鈕組搜索等。用到的元件包括輸入框、文本標(biāo)簽、矩形、下拉列表、按鈕、單選按鈕等，如下圖所示擺放

完成之后我們將它放在同一個(gè)動(dòng)態(tài)面板的兩個(gè)狀態(tài)頁里，后續(xù)會(huì)通過交互來切換。

1.3表格內(nèi)容

表格我們分為表頭和表格內(nèi)容

表頭的話我們用多個(gè)矩形擺放而成，每個(gè)矩形對(duì)應(yīng)一列，如下圖所示

表格內(nèi)容我們用中繼器來制作，在中繼器里同樣增加和表頭一樣多的矩形，每個(gè)對(duì)應(yīng)一列，寬度和對(duì)應(yīng)的表頭矩形一致，如下圖所示擺放

如果需要移入對(duì)應(yīng)行變色的效果，可以設(shè)置鼠標(biāo)懸停樣式，將他們組合在一起，然后勾選允許觸發(fā)組合內(nèi)交互樣式。

中繼器表格我們?cè)黾訉?duì)應(yīng)的列數(shù)，案例中是11列，Column1~11，每列對(duì)于中繼器里1-11的矩形

如果是Axure10的話，我們點(diǎn)擊表格里的連接元件，選擇對(duì)應(yīng)的矩形，就可以將表格內(nèi)容設(shè)置到矩形上，如果是Axure8或9，就要在中繼器每項(xiàng)加載時(shí)，用設(shè)置文本的交互，將對(duì)應(yīng)列的值設(shè)置到對(duì)應(yīng)的矩形上

2、交互制作

2.1 快速搜索和高級(jí)搜索之間的切換

鼠標(biāo)單擊右上角快速搜索的文字時(shí)，就代表先切換到快速搜索里，所以我們用設(shè)置面板狀態(tài)的交互，將動(dòng)態(tài)面板設(shè)置到高級(jí)搜索的頁面；

同理鼠標(biāo)單擊右上角高級(jí)搜索的文字時(shí)，就代表先切換到高級(jí)搜索里，所以我們用設(shè)置面板狀態(tài)的交互，將動(dòng)態(tài)面板設(shè)置到高級(jí)搜索的頁面；

在設(shè)置完頁面之后，因?yàn)榭焖偎阉骱透呒?jí)搜索里有三個(gè)條件是一樣的，分別是工號(hào)、姓名和職位，所以我們要把之前輸入了的值傳到另一個(gè)頁面，輸入框里的值我們用設(shè)置文本的交互就可以設(shè)置了，下拉列表的值，我們要通過設(shè)置列表選中項(xiàng)的交互，將值傳到另一個(gè)頁面的下拉列表里

2.2 搜索按鈕的交互

鼠標(biāo)單擊搜索按鈕時(shí)，我們應(yīng)該根據(jù)填寫的內(nèi)容對(duì)中繼器表格進(jìn)行篩選

2.2.1 輸入框模糊搜索

像員工號(hào)、姓名這種，我們可以用模糊搜索，例如搜索張，可以找到所有包含張的名字。這里我們需要用indexof函數(shù)，這個(gè)函數(shù)可以查看目標(biāo)文字里是否含有指定的文本，如果有結(jié)果就大于-1，否則就等于-1

2.2.2下拉列表篩選

像員工崗位這種，有有限的選擇值的，我們就可以用下拉列表篩選，篩選條件是下拉列表的選項(xiàng)文字等于對(duì)應(yīng)列里的文字。這里需要注意的是，下拉列表一般有一個(gè)選項(xiàng)是提示文字，例如請(qǐng)選擇，我們?cè)诤Y選之前，要把這種情況剔除，我們可以加一個(gè)條件，如果選項(xiàng)文字不是默認(rèn)文字，才執(zhí)行篩選的交互。

2.2.3 單選按鈕組篩選

單選按鈕組篩選也很簡(jiǎn)單，我們?cè)趩芜x按鈕選中時(shí)，用設(shè)置文本的交互，將選中的值用文本記錄下來，然后用篩選的交互，條件是目標(biāo)行對(duì)應(yīng)列的值，等于記錄的文本值

2.2.4 區(qū)間篩選

一般像年齡、工齡這種，我們會(huì)用區(qū)間篩選的方法，篩選的條件是目標(biāo)行對(duì)應(yīng)列的值要大于左側(cè)輸入框的值，并且小于右側(cè)輸入框的值。

這里需要注意的是，如果輸入框文本為空，那他就默認(rèn)為0，這樣如果只輸入了左側(cè)最小值是40，那他搜索的條件就是40到0，這樣明顯是不對(duì)的，所以在輸入框失去焦點(diǎn)時(shí)，我們要判斷他是否為空，如果為空，就在記錄文本里設(shè)置一個(gè)無限大的值，例如99999999；如果不為空，就記錄輸入框里填寫的值。篩選時(shí)不是對(duì)輸入框進(jìn)行篩選，是對(duì)記錄的文字進(jìn)行篩選，這樣就可以避免這個(gè)問題了

2.2.5 聯(lián)合篩選

因?yàn)楦鱾€(gè)篩選條件的關(guān)系是并的關(guān)系，所以我們一次添加篩選事件就可以了，需要注意的一點(diǎn)是，在篩選開始的時(shí)候，我們要先用移出篩選的交互，移除全部篩選，然后才開始新的篩選

這樣我們就可以完成搜索了，需要注意的是，在快速搜索頁面，只對(duì)前面三個(gè)條件進(jìn)行篩選，高級(jí)搜索頁面，才是對(duì)全部條件進(jìn)行篩選。

2.2.6 重置

鼠標(biāo)單擊重置按鈕時(shí)，我們要將表格和搜索條件恢復(fù)原狀，如果是輸入框，我們用設(shè)置文本的交互，將他設(shè)置為空就可以了；如果是記錄文字，我們也是用設(shè)置文本的交互，將他設(shè)置為默認(rèn)值，例如最大值是設(shè)置為99999；如果是下拉列表，就用設(shè)置列表選項(xiàng)的交互，將他設(shè)置為默認(rèn)選項(xiàng)；如果是單選按鈕，我們就用取消選中的交互將他們?nèi)∠?。最后用觸發(fā)的交互，觸發(fā)搜索按鈕鼠標(biāo)單擊時(shí)，相當(dāng)于觸發(fā)了移出篩選，表格就自動(dòng)恢復(fù)到未篩選之前的狀態(tài)。

這樣我們就完成高級(jí)搜索的原型模板了，后續(xù)使用也很方便，表格數(shù)據(jù)只需要在中繼器表格里填寫，預(yù)覽后即可自動(dòng)生成對(duì)應(yīng)的效果。

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