把搜索放在人們期望的地方
建立良好搜索體驗(yàn)的第一步是確保人們能夠找到它。根據(jù)Neilsen-Norman的研究，人們傾向于在網(wǎng)頁(yè)的右上角尋找搜索 - 正好在你的主要導(dǎo)航元素通常去的地方。
將搜索放在您期望的位置。
對(duì)于絕大多數(shù)網(wǎng)站來說，堅(jiān)持這個(gè)經(jīng)驗(yàn)法則應(yīng)該可以解決問題。如果您正在構(gòu)建一個(gè)更傾向于解決問題的網(wǎng)站 - 例如幫助中心，維基，詞匯表或知識(shí)庫(kù) - 那么更加突出的位置會(huì)讓您更好。
如果您在確定使用搜索欄的方式時(shí)遇到任何問題，請(qǐng)考慮以下經(jīng)驗(yàn)法則：
搜索是為了解他們正在尋找什么的人。
如果您的網(wǎng)站更傾向于發(fā)現(xiàn)和探索，或者有一個(gè)更集中的目標(biāo)，如駕駛注冊(cè)，右上角就可以了。否則，將其放在前面和中心位置，以支持基于任務(wù)的集中解決問題。
配對(duì)放大鏡圖標(biāo)和文本提示
正如我們?cè)凇?網(wǎng)頁(yè)設(shè)計(jì)中圖標(biāo)的優(yōu)缺點(diǎn) ”中所討論的那樣，通常最好不要依賴圖標(biāo)來向用戶傳達(dá)意義。對(duì)搜索使用的研究?jī)A向于支持這一點(diǎn) - 雖然放大鏡圖標(biāo)已成為搜索功能的近乎通用的標(biāo)志，但僅圖標(biāo)搜索設(shè)計(jì)仍然會(huì)減慢任務(wù)完成速度。
加入少許文字您的搜索啟示的便利好處是，你可以用文字來引導(dǎo)有關(guān)訪問者什么，他們可以搜索您的網(wǎng)站。
IMDb的搜索表單將一個(gè)僅帶圖標(biāo)的按鈕與占位符文本配對(duì)，指導(dǎo)您的搜索，同時(shí)肯定是，這實(shí)際上是一個(gè)搜索欄，并告訴您要查找的內(nèi)容。
鑒于搜索的顯著位置，這個(gè)占位符副本提供了幾乎類似于標(biāo)語的功能。它不僅告訴您在IMDb上可以找到什么，而且確實(shí)是整個(gè)網(wǎng)站的內(nèi)容。
為輸入框選擇合理的大小
一般來說，您希望自己的搜索框足夠大，以包含針對(duì)您的內(nèi)容的平均查詢。畢竟，輸入你看不到的東西很難。
如果您的空間不足或想要最小化盒子默認(rèn)狀態(tài)的大小，您可以設(shè)置交互以在訪問者點(diǎn)擊它時(shí)展開該框。
點(diǎn)擊觸發(fā)搜索并返回/輸入
雖然我們大多數(shù)受過Google培訓(xùn)的人都會(huì)在我們完成打字時(shí)點(diǎn)擊返回/輸入，但提供高度可見的可用性很少會(huì)很痛，就像提供點(diǎn)擊搜索的按鈕一樣。與數(shù)字設(shè)計(jì)中的情況一樣，最好是為每個(gè)功能都支持新手和“專業(yè)”用戶！
將搜索放在移動(dòng)設(shè)備前面和中心
網(wǎng)頁(yè)搜索框怎么設(shè)計(jì)
Shopify的幫助中心在移動(dòng)設(shè)備上提供搜索優(yōu)質(zhì)房地產(chǎn)。
當(dāng)導(dǎo)航網(wǎng)站信息架構(gòu)的想法聽起來充其量時(shí)，搜索真的是最強(qiáng)大的。移動(dòng)設(shè)備通常就是這種情況！
因此，不要讓訪問者遍歷您隱藏的菜單并冒險(xiǎn)一遍又一遍地翻閱錯(cuò)誤的鏈接，而是通過在移動(dòng)視圖上突出顯示您的搜索表單來幫助人們更快地到達(dá)目的地。
永遠(yuǎn)不要單靠搜索
盡管它的強(qiáng)大和輕松，但在您的網(wǎng)站上搜索并不能免除您擁有合理，立即可見的網(wǎng)站結(jié)構(gòu)。
如上所述，搜索最適合那些知道他們正在尋找什么的人。清晰，清晰的導(dǎo)航功能可以幫助那些正在探索的人，如果設(shè)計(jì)得很好，通?？梢詭椭藗儽人阉鞲斓氐竭_(dá)他們想要的地方。
學(xué)習(xí)flexbox的有趣方式......
掌握Flexbox的基礎(chǔ)知識(shí)，在28個(gè)越來越具有挑戰(zhàn)性和樂趣的層面，無需編寫一行代碼。
設(shè)計(jì)搜索引擎結(jié)果頁(yè)面（SERP）
當(dāng)然，如果結(jié)果體驗(yàn)對(duì)搜索者沒有幫助和明確，那么美妙的搜索體驗(yàn)并不意味著什么。值得慶幸的是，這些提示將幫助您完善網(wǎng)站的搜索用戶體驗(yàn)。
在結(jié)果頁(yè)面上添加搜索欄
搜索通常不會(huì)在第一次嘗試后結(jié)束。無論結(jié)果是否不符合搜索者的需求，或者搜索者只是決定尋找其他東西，不要強(qiáng)迫他們回溯是有道理的。
通過在結(jié)果頁(yè)面上放置一個(gè)搜索欄 - 默認(rèn)情況下Webflow會(huì)執(zhí)行此操作 - 您可以輕松（并且不那么令人沮喪）讓搜索者再次使用它。如果他們正在尋找有關(guān)多個(gè)主題的信息，他們可以輕松打開結(jié)果，然后在新選項(xiàng)卡中生成結(jié)果，而無需離開SERP。
如果一些文本可以傳達(dá)大量所需信息，請(qǐng)使用以文本為中心的列表（如果有用則添加圖像 ）
