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