這類(lèi)高亮搜索原型模板最直接的價(jià)值是幫你快速搭建一個(gè)“所見(jiàn)即所得”的交互演示讓產(chǎn)品經(jīng)理、設(shè)計(jì)師或開(kāi)發(fā)在評(píng)審時(shí)能直觀看到用戶(hù)在搜索框輸入、結(jié)果列表高亮匹配關(guān)鍵詞的完整過(guò)程。它解決的不是代碼實(shí)現(xiàn)而是溝通效率和需求確認(rèn)問(wèn)題。如果你經(jīng)常需要向團(tuán)隊(duì)演示搜索功能或者想提升原型保真度來(lái)減少開(kāi)發(fā)誤解這個(gè)模板的思路就值得一看。它的核心不是畫(huà)幾個(gè)輸入框和列表而是模擬出實(shí)時(shí)搜索、動(dòng)態(tài)高亮、結(jié)果篩選這一系列連貫的交互狀態(tài)讓靜態(tài)線框圖“活”起來(lái)。下面我會(huì)按實(shí)際制作和使用的順序拆解如何從零搭建一個(gè)具備高亮搜索效果的高保真原型。重點(diǎn)不是給你一個(gè)現(xiàn)成的.rp文件而是讓你理解背后的交互邏輯、Axure元件的使用技巧以及如何避開(kāi)那些讓原型卡頓或不真實(shí)的常見(jiàn)坑點(diǎn)。1. 先想清楚你要模擬的是哪種搜索場(chǎng)景在動(dòng)手畫(huà)任何元件之前先明確需求。搜索功能千變?nèi)f化原型模板的復(fù)雜度和實(shí)現(xiàn)方式也完全不同。1.1 區(qū)分三種核心搜索類(lèi)型根據(jù)你的項(xiàng)目需要選擇一種作為起點(diǎn)本地靜態(tài)數(shù)據(jù)搜索這是最常見(jiàn)、對(duì)原型性能最友好的類(lèi)型。所有待搜索的數(shù)據(jù)如產(chǎn)品列表、用戶(hù)名稱(chēng)、文章標(biāo)題已經(jīng)預(yù)先放在Axure的元件里例如中繼器。用戶(hù)在輸入框打字原型即時(shí)過(guò)濾并高亮顯示匹配項(xiàng)。它不涉及網(wǎng)絡(luò)請(qǐng)求完全在瀏覽器中運(yùn)行。模擬接口搜索你需要模擬一個(gè)帶有加載狀態(tài)、網(wǎng)絡(luò)延遲、分頁(yè)或錯(cuò)誤提示的搜索過(guò)程。這通常需要結(jié)合動(dòng)態(tài)面板的狀態(tài)切換和計(jì)時(shí)器事件來(lái)模擬“請(qǐng)求-等待-響應(yīng)”的流程。復(fù)雜條件搜索除了關(guān)鍵詞還包含多個(gè)篩選器如分類(lèi)、時(shí)間范圍、價(jià)格區(qū)間。這需要處理多個(gè)輸入控件之間的聯(lián)動(dòng)邏輯。對(duì)于大多數(shù)演示和評(píng)審場(chǎng)景本地靜態(tài)數(shù)據(jù)搜索已經(jīng)足夠。它實(shí)現(xiàn)簡(jiǎn)單、運(yùn)行流暢能清晰傳達(dá)“高亮匹配”的核心交互。本文也將主要圍繞這種類(lèi)型展開(kāi)。1.2 定義“高亮”的具體表現(xiàn)“高亮”也有很多種做法需要提前確定整行背景高亮匹配到的結(jié)果項(xiàng)整行背景變色。關(guān)鍵詞文本高亮在結(jié)果文本中將匹配到的關(guān)鍵詞用不同顏色如黃色背景標(biāo)記出來(lái)。這是最直觀、信息量最大的方式也是本文的重點(diǎn)。圖標(biāo)或標(biāo)簽高亮在匹配項(xiàng)旁邊顯示一個(gè)特殊的圖標(biāo)或標(biāo)簽。我建議從“關(guān)鍵詞文本高亮”開(kāi)始因?yàn)樗钅荏w現(xiàn)搜索的精準(zhǔn)性也是開(kāi)發(fā)實(shí)現(xiàn)時(shí)最需要明確細(xì)節(jié)的地方。2. 搭建基礎(chǔ)環(huán)境與元件結(jié)構(gòu)不要一上來(lái)就寫(xiě)復(fù)雜的交互。先把舞臺(tái)和演員準(zhǔn)備好。2.1 核心元件清單在你的Axure畫(huà)布上需要放置以下核心元件搜索輸入框使用“文本框”元件。建議設(shè)置默認(rèn)提示文字如“請(qǐng)輸入關(guān)鍵詞…”并為其命名例如SearchInput。數(shù)據(jù)容器使用“中繼器”元件。這是實(shí)現(xiàn)動(dòng)態(tài)過(guò)濾和高亮的靈魂元件。將其命名為DataRepeater。中繼器內(nèi)部項(xiàng)模板在中繼器內(nèi)部放置一個(gè)或多個(gè)“矩形”或“文本標(biāo)簽”元件用于顯示每一條數(shù)據(jù)。例如一個(gè)命名為ItemText的文本標(biāo)簽?！八阉鳌卑粹o可選如果需要點(diǎn)擊按鈕才觸發(fā)搜索可以添加一個(gè)按鈕。但對(duì)于實(shí)時(shí)搜索輸入即搜索按鈕不是必須的。2.2 為中繼器填充靜態(tài)數(shù)據(jù)這是實(shí)現(xiàn)本地搜索的基礎(chǔ)。選中DataRepeater在右側(cè)的“檢視”面板中找到“中繼器”標(biāo)簽頁(yè)。點(diǎn)擊“數(shù)據(jù)集”表格你可以直接在里面添加、編輯數(shù)據(jù)。例如創(chuàng)建一列名為Content的列然后填入若干行文本數(shù)據(jù)如“Axure高保真原型設(shè)計(jì)指南”、“搜索交互原型模板詳解”、“如何制作動(dòng)態(tài)高亮效果”等。確保中繼器內(nèi)部的ItemText元件其文本值綁定到了[[Item.Content]]。這樣中繼器每加載一行數(shù)據(jù)ItemText就會(huì)顯示對(duì)應(yīng)的內(nèi)容。2.3 頁(yè)面布局與樣式將輸入框和中繼器排列好?？梢越o中繼器項(xiàng)模板設(shè)置懸停、選中等交互樣式讓原型看起來(lái)更真實(shí)。這一步主要是視覺(jué)準(zhǔn)備邏輯在下一步。3. 實(shí)現(xiàn)輸入即搜索與高亮邏輯這是最核心的一步我們將通過(guò)Axure的交互事件來(lái)實(shí)現(xiàn)。3.1 為輸入框添加“文本改變時(shí)”事件選中SearchInput輸入框在“檢視”面板的“交互”標(biāo)簽頁(yè)中點(diǎn)擊“新建交互”。觸發(fā)事件選擇“文本改變時(shí)”。這能實(shí)現(xiàn)用戶(hù)一邊輸入結(jié)果一邊實(shí)時(shí)過(guò)濾的效果。添加動(dòng)作選擇“添加篩選”。配置篩選目標(biāo)目標(biāo)選中我們之前創(chuàng)建的DataRepeater。設(shè)置篩選規(guī)則這是關(guān)鍵。規(guī)則是“按條件篩選”。條件選擇值。左邊選擇[[Item.Content]]中間運(yùn)算符選擇“包含”右邊選擇“值”并輸入[[LVAR1]]。配置變量點(diǎn)擊“fx”圖標(biāo)在彈出的編輯文本對(duì)話框中插入“局部變量”LVAR1并將其值設(shè)置為“元件文字”于SearchInput。這樣LVAR1就動(dòng)態(tài)代表了輸入框里的當(dāng)前文本。最終規(guī)則表達(dá)式看起來(lái)應(yīng)該是[[Item.Content]].indexOf([[LVAR1]]) 0或其等效形式。這表示只顯示Content字段包含輸入關(guān)鍵詞的數(shù)據(jù)行。完成這一步后預(yù)覽原型你應(yīng)該已經(jīng)可以實(shí)現(xiàn)基本的輸入過(guò)濾了輸入“原型”只會(huì)顯示包含“原型”二字的數(shù)據(jù)行。3.2 實(shí)現(xiàn)關(guān)鍵詞文本高亮基礎(chǔ)過(guò)濾有了但還不夠直觀。我們需要在顯示的文字里把匹配到的“原型”兩個(gè)字標(biāo)黃。Axure本身沒(méi)有直接的高亮文本函數(shù)但我們可以用一個(gè)巧妙的組合方案改造中繼器項(xiàng)模板刪除或隱藏原本的ItemText文本標(biāo)簽。在原位置放置一個(gè)“矩形”元件命名為HighlightContainer作為高亮文本的容器。將其填充設(shè)為無(wú)邊框設(shè)為無(wú)使其不可見(jiàn)僅作為布局容器。利用“富文本”元件動(dòng)態(tài)生成高亮我們需要通過(guò)交互動(dòng)態(tài)生成帶HTML標(biāo)簽的文本。在中繼器“每項(xiàng)加載時(shí)”事件中實(shí)現(xiàn)。選中DataRepeater在“交互”標(biāo)簽頁(yè)新建“每項(xiàng)加載時(shí)”的交互。添加“設(shè)置文本”動(dòng)作目標(biāo)元件選擇HighlightContainer。在“設(shè)置文本為”的選項(xiàng)中選擇“富文本”。點(diǎn)擊“編輯文本”進(jìn)入富文本編輯器。這里我們需要用函數(shù)動(dòng)態(tài)拼接HTML。編寫(xiě)高亮邏輯函數(shù)核心 在富文本編輯器中不要直接輸入文字點(diǎn)擊“插入變量或函數(shù)”我們需要使用Axure的函數(shù)進(jìn)行字符串替換。 假設(shè)你的數(shù)據(jù)列是Content輸入框的值我們通過(guò)局部變量LVAR1獲取需要在“每項(xiàng)加載時(shí)”事件里也定義這個(gè)變量指向SearchInput的文字。 一個(gè)通用的高亮思路是將[[Item.Content]]中所有出現(xiàn)的[[LVAR1]]替換為span stylebackground-color:yellow;[[LVAR1]]/span。 但是Axure的函數(shù)處理字符串替換和大小寫(xiě)不敏感比較有點(diǎn)繁瑣。一個(gè)相對(duì)可靠的實(shí)現(xiàn)步驟如下首先定義局部變量在“每項(xiàng)加載時(shí)”交互的頂部添加“設(shè)置變量值”動(dòng)作設(shè)置一個(gè)局部變量如SearchKey等于輸入框SearchInput的文字。然后使用多個(gè)函數(shù)組合[[Item.Content.replace(SearchKey, span style\background-color:yellow;\ SearchKey /span)]]注意這個(gè)簡(jiǎn)單替換對(duì)大小寫(xiě)敏感且可能替換掉單詞中間部分。對(duì)于演示原型通常可以接受。如果需要更精確邏輯會(huì)復(fù)雜數(shù)倍可能涉及循環(huán)和正則表達(dá)式Axure支持有限對(duì)于原型來(lái)說(shuō)性?xún)r(jià)比不高。更穩(wěn)妥的演示級(jí)做法 如果上述函數(shù)遇到問(wèn)題或者你想先確保功能跑通可以采用一個(gè)“妥協(xié)”但絕對(duì)有效的高保真方案不在中繼器內(nèi)部做實(shí)時(shí)文本替換。而是為每一條數(shù)據(jù)預(yù)先制作兩個(gè)狀態(tài)一個(gè)普通狀態(tài)一個(gè)高亮狀態(tài)。將它們放在一個(gè)動(dòng)態(tài)面板里。在“每項(xiàng)加載時(shí)”判斷如果[[Item.Content]]包含[[SearchKey]]則顯示動(dòng)態(tài)面板的高亮狀態(tài)這個(gè)狀態(tài)里的文字是事先手動(dòng)標(biāo)黃的否則顯示普通狀態(tài)。這種方法犧牲了動(dòng)態(tài)性但視覺(jué)保真度極高且性能穩(wěn)定非常適合固定關(guān)鍵詞集的演示。處理空關(guān)鍵詞和特殊情況 在設(shè)置高亮文本前加一個(gè)判斷如果SearchKey為空則直接顯示原始[[Item.Content]]不做任何高亮替換。這可以通過(guò)“條件”分支來(lái)實(shí)現(xiàn)。完成這一步后再次預(yù)覽。當(dāng)你在搜索框輸入時(shí)不僅列表被過(guò)濾結(jié)果中匹配的關(guān)鍵詞也應(yīng)該被高亮顯示了。4. 優(yōu)化體驗(yàn)與處理邊界情況一個(gè)健壯的原型能應(yīng)對(duì)各種用戶(hù)操作。4.1 添加“清空”功能在搜索輸入框右側(cè)或內(nèi)部添加一個(gè)“×”圖標(biāo)。為其添加交互單擊時(shí)設(shè)置SearchInput的文本為“”空值。由于輸入框文本變化會(huì)自動(dòng)觸發(fā)我們之前設(shè)置的“文本改變時(shí)”事件從而清空篩選顯示全部列表。4.2 處理無(wú)結(jié)果狀態(tài)當(dāng)沒(méi)有數(shù)據(jù)匹配時(shí)中繼器可能為空頁(yè)面顯得很空。應(yīng)該給用戶(hù)一個(gè)反饋。在畫(huà)布上放置一個(gè)提示元件如文本“未找到相關(guān)結(jié)果”并將其設(shè)置為隱藏。命名為NoResultTip。在輸入框的“文本改變時(shí)”事件中在“添加篩選”動(dòng)作之后添加一個(gè)“設(shè)置面板狀態(tài)”動(dòng)作。目標(biāo)選擇DataRepeater所在的一個(gè)外層動(dòng)態(tài)面板如果沒(méi)有可以臨時(shí)包裹一個(gè)或者直接使用“顯示/隱藏”動(dòng)作。添加條件如果DataRepeater的“可見(jiàn)項(xiàng)數(shù)量”等于0則顯示NoResultTip否則隱藏NoResultTip。4.3 性能優(yōu)化提示如果你的數(shù)據(jù)量很大比如超過(guò)50條在Axure預(yù)覽或生成HTML時(shí)實(shí)時(shí)搜索和高亮計(jì)算可能會(huì)感到卡頓。對(duì)策可以改用“點(diǎn)擊按鈕搜索”代替“文本改變時(shí)實(shí)時(shí)搜索”。將觸發(fā)事件從輸入框移到搜索按鈕上。數(shù)據(jù)量控制原型用于演示數(shù)據(jù)量不必追求真實(shí)精選10-20條典型數(shù)據(jù)即可涵蓋匹配、部分匹配、不匹配等情況。4.4 視覺(jué)細(xì)節(jié)打磨輸入框焦點(diǎn)狀態(tài)為輸入框設(shè)置獲取焦點(diǎn)時(shí)的邊框顏色變化。加載狀態(tài)模擬接口時(shí)如果需要可以在觸發(fā)搜索時(shí)先顯示一個(gè)旋轉(zhuǎn)的加載圖標(biāo)然后用“等待”動(dòng)作模擬延遲最后隱藏加載圖標(biāo)并顯示結(jié)果。結(jié)果項(xiàng)交互為每個(gè)中繼器項(xiàng)添加“鼠標(biāo)單擊時(shí)”事件可以鏈接到詳細(xì)頁(yè)面或者設(shè)置“選中”狀態(tài)模擬多選。5. 發(fā)布、共享與開(kāi)發(fā)對(duì)接原型做完了怎么用起來(lái)5.1 生成HTML并預(yù)覽Axure菜單欄選擇“發(fā)布”-“預(yù)覽選項(xiàng)”可以設(shè)置瀏覽器、是否包含搜索等。然后點(diǎn)擊“生成HTML文件”。在瀏覽器中打開(kāi)生成的index.html全面測(cè)試搜索、高亮、清空、無(wú)結(jié)果等所有交互。重點(diǎn)檢查高亮效果是否在所有目標(biāo)瀏覽器Chrome, Firefox, Edge中正常顯示。復(fù)雜的HTML拼接在極少數(shù)情況下可能因?yàn)g覽器兼容性出現(xiàn)問(wèn)題。5.2 共享給團(tuán)隊(duì)成員Axure Cloud上傳到Axure Cloud可以獲得一個(gè)鏈接團(tuán)隊(duì)成員在線即可查看和評(píng)論交互無(wú)需安裝Axure。HTML包將整個(gè)生成的文件夾打包發(fā)送給他人。這是最通用的方式。導(dǎo)出說(shuō)明文檔Axure可以生成Word格式的需求文檔其中會(huì)包含帶交互說(shuō)明的原型截圖。對(duì)于需要存檔的正式需求這個(gè)很有用。5.3 與開(kāi)發(fā)人員溝通要點(diǎn)當(dāng)你拿著這個(gè)高保真原型去和前端開(kāi)發(fā)評(píng)審時(shí)不要只說(shuō)“這里要高亮”。應(yīng)該清晰地傳達(dá)交互邏輯“用戶(hù)輸入時(shí)列表實(shí)時(shí)過(guò)濾并且匹配的關(guān)鍵詞在結(jié)果中高亮顯示。這里有一個(gè)清空按鈕這里是無(wú)結(jié)果的提示?！备吡烈?guī)則“高亮是精確匹配輸入框的連續(xù)字符大小寫(xiě)不敏感/敏感根據(jù)你的設(shè)計(jì)。高亮的樣式是黃色背景#FFFACD?！睌?shù)據(jù)與狀態(tài)“這些是模擬的靜態(tài)數(shù)據(jù)。實(shí)際接口返回的數(shù)據(jù)結(jié)構(gòu)大概是這樣的……加載狀態(tài)、錯(cuò)誤狀態(tài)如原型所示?！边吔鐥l件“輸入框?yàn)榭諘r(shí)顯示全部列表不高亮。無(wú)匹配結(jié)果時(shí)顯示這個(gè)提示文案。”把原型當(dāng)作一個(gè)可視化的需求說(shuō)明書(shū)而不是一個(gè)最終必須一模一樣的UI約束。開(kāi)發(fā)可能會(huì)從性能角度建議優(yōu)化實(shí)現(xiàn)方式例如在前端用更好的JavaScript庫(kù)進(jìn)行文本高亮但只要核心交互邏輯雙方確認(rèn)清楚目的就達(dá)到了。最后這個(gè)高亮搜索原型模板的核心價(jià)值在于它把一段復(fù)雜的交互描述變成了一個(gè)可操作、可體驗(yàn)的演示。自己動(dòng)手搭一遍遠(yuǎn)比下載一個(gè)現(xiàn)成模板更能理解其中的交互邏輯和Axure的實(shí)現(xiàn)邊界。遇到問(wèn)題時(shí)優(yōu)先檢查中繼器的數(shù)據(jù)綁定、局部變量的獲取以及交互事件的觸發(fā)順序大多數(shù)問(wèn)題都出在這幾個(gè)環(huán)節(jié)。