交互設(shè)計(jì)指南—網(wǎng)頁的“搜索”功能該如何設(shè)計(jì)？

時(shí)間：2023-09-08 21:36:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-08 21:36:02 來源：網(wǎng)站運(yùn)營

交互設(shè)計(jì)指南—網(wǎng)頁的“搜索”功能該如何設(shè)計(jì)？：當(dāng)一個(gè)網(wǎng)站包含大量內(nèi)容時(shí)，瀏覽者往往不知道如何找到他們想要的信息。因此，他們經(jīng)常使用搜索欄來查找特定的事實(shí)或提出問題。




如果一個(gè)網(wǎng)站的內(nèi)容沒有很好地組織，搜索按鈕就是一個(gè)關(guān)鍵的導(dǎo)航工具。它經(jīng)常為迷路的用戶提供指導(dǎo)，并幫助他們找到答案。最好的網(wǎng)站會(huì)在主頁上提供一個(gè)簡單且清晰可見的搜索按鈕。




也許一些網(wǎng)站在一開始設(shè)計(jì)良好，但網(wǎng)站內(nèi)容往往會(huì)隨著時(shí)間積累。網(wǎng)站所有人經(jīng)常會(huì)添加新內(nèi)容，有時(shí)還會(huì)添加新的導(dǎo)航工具。這些變化經(jīng)常會(huì)改變網(wǎng)站結(jié)構(gòu)，使內(nèi)容更難找到。







結(jié)果是網(wǎng)站雜亂無章，讓觀眾感到困惑或惱火。內(nèi)容可能很難找到或分散在整個(gè)網(wǎng)站。




你的搜索按鈕是你最棒的助手，負(fù)責(zé)管家的角色，幫助客人解決問題，滿足他們的需求。不過，它確實(shí)需要精心設(shè)計(jì)。搜索框直接影響著用戶的留存。你的瀏覽者只需提交一個(gè)查詢，而不是沮喪地關(guān)閉頁面。




如果沒有一個(gè)設(shè)計(jì)良好且易于導(dǎo)航的搜索按鈕，沮喪的瀏覽者只會(huì)離開你的網(wǎng)站。當(dāng)他們這樣做時(shí)，你就冒著直接把他們送到你的競爭對手那里去的風(fēng)險(xiǎn)。這意味著失去一個(gè)潛在的客戶。

你什么時(shí)候需要一個(gè)搜索按鈕?

當(dāng)你的網(wǎng)站內(nèi)容在遞增時(shí)，你便需要一個(gè)搜索按鈕。如果你覺得你的網(wǎng)站擴(kuò)展到無法為客戶提供快速且簡單的答案，而且內(nèi)容還不太適合分類，搜索框可能是你需要的答案。

用戶已經(jīng)熟悉這種經(jīng)常接收問題和關(guān)鍵詞的搜索引擎了，所以一個(gè)搜索框?qū)τ脩魜碚f易用且自然。




使用墨刀制作的“搜索框”原型




它將幫助你的用戶在找不到他們想要的東西時(shí)重新獲得控制感。




如果你計(jì)劃建立一個(gè)大型網(wǎng)站，比如一個(gè)有多個(gè)品牌的電子商務(wù)網(wǎng)站，或者你打算在你的網(wǎng)站上分享大量的內(nèi)容，你的網(wǎng)站可能會(huì)從一開始就從“搜索框設(shè)計(jì)”中受益——你的用戶會(huì)很高興能夠找到他們想要的東西。

使用熟悉的放大鏡圖標(biāo)

設(shè)計(jì)搜索框時(shí)，還是使用“放大鏡圖標(biāo)”，用戶會(huì)感到熟悉。

用戶試圖尋找信息或一個(gè)似乎遙不可及的產(chǎn)品時(shí)，已經(jīng)夠沮喪了，所以搜索欄就讓它能一眼看出吧！

保持“搜索欄“突出顯示

顯示搜索欄時(shí)，請將設(shè)計(jì)保持突出，以便始終容易找到。當(dāng)答案比較難找到時(shí)，你的搜索欄必須是一個(gè)快速而簡單的解決方案。顯示搜索框文本字段和圖標(biāo)，以便訪問者知道在哪里提問。

設(shè)計(jì)師們經(jīng)常爭論把搜索欄放在哪里。最好的地方是用戶希望它在哪里：在頁面的右上角或中上部分。

提供“提交“按鈕

你網(wǎng)站上的搜索按鈕就類似谷歌，只是搜索范圍是你自己的網(wǎng)站而不是全網(wǎng)而已。因此，觀眾應(yīng)該有理由期望，他們同樣也是通過輸入問題，然后再點(diǎn)擊“回車”按鈕才能實(shí)現(xiàn)搜索。




不過，有一個(gè)大的“搜索“按鈕確實(shí)有助于告訴瀏覽者怎么去做。這樣也擴(kuò)大“搜索”功能的區(qū)域，使觀眾不必小心控制著鼠標(biāo)或點(diǎn)擊手機(jī)或平板電腦上的狹窄區(qū)域。




許多用戶會(huì)選擇敲“回車”鍵，而不是點(diǎn)擊“搜索“按鈕。在設(shè)計(jì)網(wǎng)站時(shí)，您還需要測試enter按鈕是否有效。

把你的搜索框放在每一頁上

為了保持你網(wǎng)站的高效性，在每一頁都放一個(gè)搜索框。這將有助于您保持您的網(wǎng)站易于導(dǎo)航。你的觀眾可能點(diǎn)擊了某個(gè)頁面，是希望看到他們沒有找到的內(nèi)容。




他們也許找到了答案，但希望探索更多的信息。把你的搜索欄放在一些“死胡同”鏈接上，比如任何404頁，這樣你的瀏覽者就可以找到他們正在尋找的信息，并在需要的時(shí)候返回到你的主站點(diǎn)。

保持搜索字段足夠長

當(dāng)你的用戶在搜索欄中輸入一個(gè)問題時(shí)，你希望他們有足夠的空間來查看他們輸入了什么。

這樣，你的用戶將能夠查看或編輯他們的查詢。27個(gè)字符或更長的文本框是理想的，因?yàn)榇蠖鄶?shù)查詢都將包含在這個(gè)空間中。

如果你想節(jié)省空間，可以考慮使用一個(gè)可擴(kuò)展的搜索字段，該字段隨著用戶鍵入問題而增長。這將給你的用戶足夠的空間提出問題，同時(shí)保持你的網(wǎng)站簡單。

考慮使用“自動(dòng)建議“

自動(dòng)建議幫助你幫助用戶找到他們想要的東西。這是因?yàn)樗兄谥笇?dǎo)他們的搜索查詢。




用戶通常不知道如何合適地表述問題，如果他們在第一次嘗試時(shí)找不到信息，他們往往不知道如何重新措辭或縮小搜索范圍。通過使用自動(dòng)建議框，用戶可以有效地搜索內(nèi)容。

小貼士

創(chuàng)建自動(dòng)建議時(shí)，請以對用戶有幫助的方式使用關(guān)鍵字。




使用關(guān)鍵詞、預(yù)測性文本和常見問題。還可以提供自動(dòng)拼寫更正，以便用戶能夠搜索他們真正想要的單詞或術(shù)語。




在工具欄中顯示一系列選項(xiàng)，以便你的用戶能夠獲得所需的選擇，包括圍繞特定關(guān)鍵字或主題的一系列問題。允許用戶使用鍵盤或滾動(dòng)鍵選擇選項(xiàng)。一旦它們滾動(dòng)到頁面底部，允許它們自動(dòng)返回頂部。允許他們使用鍵盤關(guān)閉頁面。




“自動(dòng)建議”最好使用凸出的字體，這將有助于吸引他們的注意力。你也可以給用戶展示一系列的圖標(biāo)，幫助他們尋找他們真正想要的。

最后的建議

搜索欄為瀏覽者提供了快速高效地瀏覽網(wǎng)站的機(jī)會(huì)，以便找到他們正在搜索的內(nèi)容。




這有助于用戶感覺到一種控制感。把搜索欄設(shè)計(jì)得顯而易見，用戶將不再對如何查找信息感到迷惑。




創(chuàng)建一個(gè)可識(shí)別的搜索欄，快速查找且易于使用，將提高用戶留存度。用簡單的提示和吸引人的圖標(biāo)來幫助他們，你就不用擔(dān)心你的用戶會(huì)在你的網(wǎng)站上迷失方向。




文章由墨刀編譯自Bogdan Sandu的 UX Best Practices for Using Search on Your Website