雖然搜索框在整個(gè)網(wǎng)站頁(yè)面上可以說(shuō)是一個(gè)不起眼的，但它的意義非常大。任何用戶都可以方便地找到他們想知道的內(nèi)容，在設(shè)計(jì)搜索框時(shí)需要小心，以便用戶可以輕松使用。那么，搜索框設(shè)計(jì)的要素是什么？具體來(lái)說(shuō)，讓我們看一下沈陽(yáng)網(wǎng)站設(shè)計(jì)小編的介紹。

搜索框時(shí)常用的UI控件之一，它存在于所有網(wǎng)站和APP中。許多人認(rèn)為搜索框不需要設(shè)計(jì)。它的存在感覺(jué)是由普通元素組成的。實(shí)際上，搜索框很明顯。它是否會(huì)直接影響用戶體驗(yàn)，而且顯而易見(jiàn)程度可以反映在設(shè)計(jì)中。

1.使用放大鏡圖標(biāo)

今天，搜索概念與放大鏡圖標(biāo)之間的關(guān)系已根深蒂固，根深蒂固。在常用且易于識(shí)別的幾個(gè)圖標(biāo)中，放大鏡所代表的搜索圖標(biāo)就是其中之一。

即使沒(méi)有文本標(biāo)簽，用戶也可以輕松識(shí)別圖標(biāo)的含義。

提示：使用簡(jiǎn)單直觀的放大鏡圖標(biāo)，細(xì)節(jié)越少，識(shí)別越容易。

2.顯眼的搜索輸入框

如果搜索是您的網(wǎng)站或APP的重要功能，您應(yīng)該使搜索框足夠顯眼，以允許用戶快速發(fā)現(xiàn)它的存在。

左：搜索功能隱藏在圖標(biāo)

顯示完整的文本輸入框很重要。隱藏在按鈕后面的輸入框?qū)⑹褂脩舾杏X(jué)不那么明顯并且不容易檢測(cè)到。用戶需要單擊才能看到它。 3.提供搜索按鈕

按鈕的存在允許用戶理解如何觸發(fā)搜索。——這是通過(guò)觸發(fā)按鈕完成的。

提示：

·控制搜索按鈕的大小，以便用戶可以輕松地找到并單擊光標(biāo)，使觸發(fā)區(qū)域大小合適。 ·允許用戶通過(guò)Enter鍵提交搜索。許多用戶仍然習(xí)慣通過(guò)單擊鍵盤(pán)按鈕來(lái)觸發(fā)搜索。

4，每個(gè)頁(yè)面保留搜索輸入框

您應(yīng)該有權(quán)立即搜索每個(gè)頁(yè)面，如果您的用戶無(wú)法在特定頁(yè)面上找到他們想要的內(nèi)容，他們可以通過(guò)搜索立即獲取內(nèi)容，無(wú)論他們?cè)诰W(wǎng)站的哪個(gè)位置。

5.使搜索框盡可能簡(jiǎn)單

設(shè)計(jì)搜索框時(shí)，請(qǐng)嘗試使其看起來(lái)像搜索框，并且易于使用。可用性研究表明，默認(rèn)情況下不顯示高級(jí)選項(xiàng)的搜索框看起來(lái)更友好，因此提供給用戶的搜索框通常不知道提供高級(jí)搜索選項(xiàng)。

6.將搜索框保留在用戶期望的位置

當(dāng)用戶想要搜索內(nèi)容時(shí)，他們還需要花精力去尋找搜索框，這非常令人尷尬。這意味著搜索框本身不易察覺(jué)。

以下研究顯示了142位受訪者對(duì)網(wǎng)站搜索框的預(yù)期位置。此研究表明，網(wǎng)站的左上角和右上角是用戶期望的搜索框的位置，用戶可以在使用F掃描查看內(nèi)容時(shí)輕松找到搜索框。

該研究還表明，右上角的區(qū)域是用戶搜索輸入框的選定區(qū)域。因此，將輸入框放在右上角或頂部中心，用戶將主動(dòng)在此處查找搜索框。

提示：

在理想的情況下，搜索框的設(shè)計(jì)應(yīng)該與整個(gè)網(wǎng)站的設(shè)計(jì)風(fēng)格一致，同時(shí)它應(yīng)該在視覺(jué)上突出，以便用戶可以找到它。如果網(wǎng)站的內(nèi)容足夠，則搜索框應(yīng)設(shè)計(jì)得更加重要。如果搜索功能對(duì)于網(wǎng)站很重要，那么您應(yīng)該使用更大的對(duì)比度來(lái)確保輸入框和按鈕從背景中脫穎而出。

7.合理的輸入框大小

輸入框太小。常見(jiàn)的搜索框設(shè)計(jì)是錯(cuò)誤的。雖然用戶可以輸入比輸入框更長(zhǎng)的內(nèi)容，但是可見(jiàn)部分通常不完全可見(jiàn)。這種設(shè)計(jì)的可用性并不強(qiáng)。由于可見(jiàn)范圍有限，這樣的輸入框可能會(huì)提示用戶使用簡(jiǎn)短，不準(zhǔn)確的查詢方法，因?yàn)檩^長(zhǎng)的內(nèi)容不適合閱讀。如果輸入框與用戶公共輸入的大小匹配，則它將更有用。

根據(jù)經(jīng)驗(yàn)，輸入框可以攜帶的理想字符數(shù)為27，并且90％的搜索內(nèi)容都在此長(zhǎng)度內(nèi)。

提示：建議考慮使用可根據(jù)輸入長(zhǎng)度增長(zhǎng)的輸入框。這不僅節(jié)省了屏幕空間，還為用戶提供了足夠的視覺(jué)提示和快速訪問(wèn)搜索。

8，使用自動(dòng)搜索建議機(jī)制

自動(dòng)建議機(jī)制可以幫助用戶在輸入過(guò)程中動(dòng)態(tài)預(yù)測(cè)正確的查詢方向。自動(dòng)建議不會(huì)加快搜索過(guò)程，但它可以幫助用戶構(gòu)建正確的搜索關(guān)鍵字/內(nèi)容。普通用戶很少會(huì)在搜索結(jié)果不理想的情況下繼續(xù)嘗試，并且自動(dòng)建議會(huì)很好用，這將有助于用戶更好地搜索。

Google搜索在該領(lǐng)域擁有豐富的經(jīng)驗(yàn)。自2008年以來(lái)，Google已開(kāi)始記錄用戶搜索記錄，從而節(jié)省時(shí)間，優(yōu)化結(jié)果并創(chuàng)造更好的體驗(yàn)。

提示

·確保您的自動(dòng)搜索建議很有用。不正確的搜索建議可能會(huì)混淆和分散用戶的注意力。嘗試幫助用戶糾正拼寫(xiě)，識(shí)別根，預(yù)測(cè)文本和改進(jìn)工具。 ·當(dāng)用戶開(kāi)始輸入時(shí)，盡快開(kāi)始向用戶提供建議，例如，在第三個(gè)字符之后，為用戶提供即時(shí)有價(jià)值的建議，減少用戶的輸入難度和工作量。 ·嘗試為用戶提供少于10個(gè)搜索結(jié)果，以避免信息過(guò)載。允許使用鍵盤(pán)進(jìn)行交互。當(dāng)用戶使用箭頭鍵向下滾動(dòng)到下一個(gè)項(xiàng)目時(shí)，滾動(dòng)繼續(xù)跳轉(zhuǎn)到頂部項(xiàng)目。允許用戶使用Esc按鈕啟動(dòng)列表。 ?突出顯示輸入信息與建議信息之間的差異。

9.讓用戶知道可以搜索哪些

眾所周知的是在輸入框中包含一個(gè)示例，因此您可以向用戶提供建議。如果用戶可以輸入多個(gè)關(guān)鍵字搜索，那么可以給出建議，如下面的IMDB的網(wǎng)站。 HTML5可以輕松地將文本占位符添加到輸入框中。

提示：建議的內(nèi)容不應(yīng)太多，因此用戶會(huì)產(chǎn)生認(rèn)知負(fù)擔(dān)。