Axure教程:高級(jí)搜索
在原型中,搜索是一個(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)手試試哦,感謝您的閱讀,我們下期見。
本文由 @AI產(chǎn)品人 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Unsplash,基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
- 目前還沒評(píng)論,等你發(fā)揮!