【Axure教程】多條件分類搜索框原型

0 評論 5183 瀏覽 0 收藏 7 分鐘

編輯導語:在我們使用搜索的時候,經常會遇到分類搜索框。它們應該如何制作呢?今天,本文作者教大家如何在Axure里做一個高保真的分類搜索框。

一、什么是分類搜索框?

首先和大家簡單的介紹一下什么是分類搜索框,就是可以按照不同分類來進行搜索,最簡單的例子就是百度搜索,例如我想搜索皮卡丘,我可以按照不同的類別搜索皮卡丘相關的圖片、視頻、貼吧、產品、資訊等等。

原型預覽地址:https://6vytni.axshare.com

下面,我們主要學習如果制作分類外聯搜索的原型,后續也可以多條件搜索表格、卡片、產品的內容。

二、材料準備

  • 輸入框*1——隱藏邊框;
  • 搜索圖標*1——放大鏡的圖標,用于美化原型,相當于搜索按鈕;
  • 矩形外框*1——設置為圓角,作用是美化原型;
  • 中繼器*1——制作下拉的內容,取消勾選隔離選項組效果,默認隱藏;內部表格第一列填入分類選項,案例中的選項為網頁、資訊、視頻、圖片、知道、文庫、貼吧、采購;你們也可以根據實際的分類來制作;
  • 中繼器內部矩形*1——設置成取消邊框,移入的交互樣式將文字設為藍色,選中樣式將文字設為白色,填充顏色設為藍色,設置為單選組;
  • 文字文本——用來回顯選擇了那個分類,案例中默認是搜索網頁;
  • 下箭頭——用于美化原型,

所有材料準備好之后,如下圖所示擺放:

三、交互制作

1. 文字文本和下箭頭組合鼠標單擊時事件

顯示選項中繼器,這里勾選至于頂層,因為如果不勾選的話,演示的時候容易被其他元件擋住,一般像彈窗、彈出列表都要勾選;還需要設置燈箱效果,背景色為透明,設置之后鼠標單擊其他地方就可以將選項中繼器隱藏。

2. 中繼器載入時事件

中繼器載入時,設置中繼器內部的矩形的文本等于中繼器第一列的值,這個是默認事件,即新建中繼器時如果你沒有改動的話自動會出現。

3. 中繼器內部矩形鼠標單擊時事件

1)設置選中狀態

首先要設置當前元件為選中狀態,選中后因為在材料準備的時候設置了交互樣式選中時變藍色,就可以清晰的看到選中那個選項。

2)設置文字

我們需要將選中的值回顯的文本標簽,所以我們將回顯文字的文本標簽的文本值設為當前選項的值(this.text)。

3)隱藏選項中繼器

鼠標單擊選擇選項之后,隱藏中繼器。

4)設置文本焦點

最后,將文本的焦點設置到輸入框內,這里用戶可以快速的繼續輸入搜索內容。

4. 搜索按鈕鼠標單擊時事件

這里需要分條件,首先是判斷輸入框的值是否為空,如果為空,則搜索內容為空,則不進行搜索,所以這是我們把焦點設置在輸入框內,方便用戶直接輸入搜索。

如果輸入內容不為空,那么我們就按照回顯的文字文本進行搜索。

如果回顯文字=網頁,我們就打開對應網頁的地址。這里教大家一個外聯的簡單的方法,例如我們想在百度上搜索網頁皮卡丘,那么我們會得到搜索出來的網址,我們把網址內部的皮卡丘轉換成變量LVAR1,然后再將變量設為輸入框的內容,這樣就可以實現搜索輸入的內容的。

我們用以上的方法設置每一個分類條件打開的對應地址頁面即可,這樣我們就完成了多條件分類搜索框原型的制作的。

最后我們補充一下課外的知識,多條件搜索不僅僅能用于外聯的搜索,也可以搜索表格內容,我們可以將表格每一列的標題例如年齡、學歷等作為分類的條件,然后搜索時,將原來的打開頁面變成對中繼器表格的添加篩選事件即可。

以上就是本期的全部內容了,我們下期見~

 

本文由 @做產品但不是經理 原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

給作者打賞,鼓勵TA抓緊創作!
1人打賞
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!