定義
搜索欄（Search Bars）：通過在其中輸入字段请敦，來實(shí)現(xiàn)對(duì)大量數(shù)據(jù)合集的查詢。
基礎(chǔ)設(shè)計(jì)指南
將搜索框放在用戶預(yù)期的位置
搜索框最佳的位置累颂，網(wǎng)站上是每個(gè)頁面的正上方或右上方敷燎，移動(dòng)端是每個(gè)頁面的導(dǎo)航欄下方，也可以固定在導(dǎo)航欄中或默認(rèn)隱藏待下滑時(shí)再顯示澄惊。-
占位文字提示可搜索的內(nèi)容和上下文
搜索欄可以包含占位符文本唆途，如“搜索服裝，鞋子和配件”或簡(jiǎn)單地顯示“搜索” ——作為搜索上下文的提醒掸驱。
search_Placeholder 提供一個(gè)帶有放大鏡圖標(biāo)的搜索按鈕
放大鏡圖標(biāo)具備高效識(shí)別的特點(diǎn)肛搬，搜索按鈕則提示用戶進(jìn)行下一步，即使大多數(shù)用戶會(huì)按Enter鍵執(zhí)行此操作毕贼。-
提供清除按鈕
輔助用戶快速清除已經(jīng)輸入的文字內(nèi)容温赔。
search_Clear -
適時(shí)提供一個(gè)取消按鈕
立即終止搜索的取消按鈕，為用戶提供了取消當(dāng)前搜索行為的操作方式鬼癣。
search_Cancel 保持搜索欄簡(jiǎn)潔陶贼，默認(rèn)情況下不顯示高級(jí)搜索選項(xiàng)，但可以考慮在搜索欄下方提供有用的快捷方式和其他內(nèi)容扣溺。
幫助用戶更快地獲取內(nèi)容骇窍，例如，Safari在點(diǎn)擊搜索欄后會(huì)立即顯示出已收藏的書簽锥余，不輸入任何字段就可以點(diǎn)擊跳轉(zhuǎn)至對(duì)應(yīng)書簽頁腹纳。當(dāng)搜索正在執(zhí)行時(shí)，提供明確的狀態(tài)反饋驱犹。
通過視覺提示向用戶反饋系統(tǒng)當(dāng)前的工作狀態(tài)嘲恍，可以在搜索結(jié)果中對(duì)用戶已輸入的字符內(nèi)容進(jìn)行突出顯示。
體驗(yàn)優(yōu)化Tips
遵循顯性搜索（Explicit Search）的原則
例如雄驹，在輸入域周圍提供明顯的操作按鈕佃牛，提供撤銷搜索選項(xiàng)，通過反饋告知用戶搜索動(dòng)作已完成自動(dòng)補(bǔ)全（Auto-Complete）輸入內(nèi)容
根據(jù)已輸入內(nèi)容医舆，推測(cè)或提示關(guān)聯(lián)搜索詞俘侠，用戶點(diǎn)擊后自動(dòng)補(bǔ)全輸入內(nèi)容象缀。
匹配的查詢條件不要超過10個(gè)（且不要顯示滾動(dòng)條），以保證信息不會(huì)過載爷速。
可以在搜索結(jié)果中加粗已輸入的字符央星，突出顯示。動(dòng)態(tài)搜索（Dynamic Search）
針對(duì)已輸入的內(nèi)容惫东，即時(shí)呈現(xiàn)搜索結(jié)果莉给。
對(duì)有限的數(shù)據(jù)，如地址薄或個(gè)人媒體庫廉沮，比較有效颓遏；不適合搜索海量數(shù)據(jù)。-
范圍搜索（Scoped Search）
在搜索之前或之后對(duì)搜索對(duì)象的類型和范圍進(jìn)行限定滞时，從而得到更匹配的搜索結(jié)果叁幢。
根據(jù)數(shù)據(jù)集提供合理的搜索范圍選項(xiàng)或設(shè)定默認(rèn)分類，3-6個(gè)足夠漂洋，必要的時(shí)候可以通過表單來實(shí)現(xiàn)高級(jí)搜索功能遥皂。
例如，將范圍分欄（Scope Bars）添加到搜索欄下方刽漂，適用于有明確分類定義的場(chǎng)景，縮小搜索范圍弟孟。
ScopeBar 保存搜索記錄（Saved&Recent）
顯示最近搜索的內(nèi)容贝咙，便于用戶選擇搜索過的關(guān)鍵詞，節(jié)省重新輸入的時(shí)間拂募。搜索結(jié)果（Search Results）
標(biāo)明搜索結(jié)果的總項(xiàng)數(shù)庭猩，提供合理的默認(rèn)排序規(guī)則和信息呈現(xiàn)形式。移動(dòng)端通常采用延遲加載（Lazy Loading）的方式
首先加載一部分搜索結(jié)果陈症，另一部分繼續(xù)載入蔼水。兩種方式觸發(fā)更多內(nèi)容的加載，一是瀏覽內(nèi)容下滑到未加載位置時(shí)自動(dòng)加載录肯，二是用戶點(diǎn)擊某個(gè)按鈕或鏈接來加載趴腋。網(wǎng)頁端可根據(jù)實(shí)際場(chǎng)景確定搜索結(jié)果是否采用分頁顯示的方式
分頁可以幫助用戶從一個(gè)很長(zhǎng)的列表中定位某個(gè)特定的項(xiàng)目；對(duì)于瀏覽性的表格來說论咏，點(diǎn)擊顯得比較多余优炬。如果內(nèi)容僅限于單一字段，輸入框可以確定一個(gè)合適長(zhǎng)度
根據(jù)輸入內(nèi)容的長(zhǎng)度規(guī)劃字符數(shù)厅贪，體驗(yàn)更佳蠢护。
以電商為例
其搜索位置明顯，定位是按需要精準(zhǔn)購買的用戶养涮；
通常在搜索框內(nèi)及周圍推薦商品品類葵硕；
鼠標(biāo)定位在輸入框時(shí)眉抬，會(huì)顯示熱搜推薦和歷史記錄提示，以及更加細(xì)分的某類別（或提供分類搜索框指定搜索范圍）懈凹；
有字段容錯(cuò)功能吐辙，支持語音輸入。
參考來源：
Search Patterns: Design for Discovery
Designing Search: UX Strategies for eCommerce Success
移動(dòng)應(yīng)用UI設(shè)計(jì)模式
Apple developer Human Interface Guidelines
