網站建設

其實搜索框在(zài)網站制作中扮演的(de)角色不(bù)容小觑，一(yī / yì ／yí)個(gè)可用性較高的(de)搜索框往往可以(yǐ)有效節省用戶獲取信息和(hé / huò)内容的(de)時(shí)間，大(dà)大(dà)提升用戶的(de)浏覽體驗。作爲(wéi / wèi)網頁中最常見的(de)UI控件之(zhī)一(yī / yì ／yí)，搜索框的(de)組成非常簡單：輸入框+觸動按鈕，不(bù)少站長也(yě)因此沒有對它給予足夠的(de)重視。尤其是(shì)在(zài)内容爲(wéi / wèi)主的(de)網站中，當用戶面對複雜的(de)内容時(shí)，他(tā)們第一(yī / yì ／yí)時(shí)間就(jiù)會尋找搜索框，輸入關鍵詞以(yǐ)獲取想要(yào / yāo)的(de)内容，強大(dà)的(de)搜索框能夠促進用戶交互行爲(wéi / wèi)的(de)發生。所以(yǐ)在(zài)設計網站時(shí)我們應多花些時(shí)間思考搜索框如何設計。如果您沒有什麽頭緒，不(bù)用擔心，和(hé / huò)廣州網站建設公司佰維網絡一(yī / yì ／yí)起來(lái)看看搜索框設計的(de)幾個(gè)要(yào / yāo)點吧!

1. 使用放大(dà)鏡圖标

現在(zài)，一(yī / yì ／yí)看見放大(dà)鏡圖标，用戶自然而(ér)然就(jiù)會想起搜索功能，這(zhè)種聯系是(shì)在(zài)長期使用過程中逐漸形成的(de)，是(shì)爲(wéi / wèi)大(dà)家所廣泛認可接受的(de)。因此在(zài)網站中設計搜索框時(shí)，我們可以(yǐ)多使用放大(dà)鏡圖标，畢竟它是(shì)最常使用、最易于(yú)辨認的(de)(即使沒有文本标簽，用戶也(yě)能輕松識别)。當然也(yě)要(yào / yāo)注意，放大(dà)鏡圖标應該簡潔直觀，盡量減少一(yī / yì ／yí)些不(bù)必要(yào / yāo)的(de)細節，提高圖标的(de)可辨識度。

2. 讓搜索框足夠顯眼

搜索框設計有一(yī / yì ／yí)條重要(yào / yāo)的(de)準則就(jiù)是(shì)：讓搜索框足夠顯眼，清晰可見的(de)搜索框能讓用戶快速發現并使用。下圖就(jiù)很好地(dì / de)證明這(zhè)一(yī / yì ／yí)點，左右兩側是(shì)兩種不(bù)同的(de)搜索框設計，左邊的(de)搜索框隐藏在(zài)圖标之(zhī)後，這(zhè)種隐性的(de)搜索框太不(bù)顯眼了(le／liǎo)，用戶很難發現并使用。相比而(ér)言，右側的(de)搜索框就(jiù)能及時(shí)給用戶提供幫助。

3. 提供搜索按鈕

在(zài)搜索框中設置按鈕是(shì)爲(wéi / wèi)了(le／liǎo)讓用戶能夠明白搜索的(de)觸動方式，帶有按鈕的(de)搜索框更易吸引用戶點擊進行搜索。不(bù)過，在(zài)設計搜索按鈕時(shí)，我們要(yào / yāo)注意控制它的(de)尺寸大(dà)小，選取合适的(de)區域，讓用戶可以(yǐ)移動光标或手動輕松點擊。另外，設置回車鍵提交搜索的(de)功能也(yě)是(shì)有必要(yào / yāo)的(de)，因爲(wéi / wèi)現在(zài)很多用戶仍然保留着點擊回車鍵觸動按鈕的(de)習慣。

4. 每頁都保留搜索輸入框

網站的(de)每個(gè)頁面最好都有搜索框。這(zhè)樣一(yī / yì ／yí)來(lái)，當用戶在(zài)特定的(de)頁面找不(bù)到(dào)想要(yào / yāo)的(de)内容時(shí)，可以(yǐ)立即通過搜索框獲取内容，這(zhè)種設置是(shì)快速便捷的(de)，是(shì)能夠顯著提高用戶對網站好感的(de)。

5. 讓搜索框盡量簡單

搜索框設計還有一(yī / yì ／yí)條原則，那就(jiù)是(shì)簡單易用。研究表明，一(yī / yì ／yí)個(gè)沒有顯示高級選項的(de)搜索框看上(shàng)去更加友好，可用性也(yě)更強。所以(yǐ)，一(yī / yì ／yí)般情況下，在(zài)給用戶提供搜索框時(shí)最好不(bù)要(yào / yāo)提供複雜的(de)搜索選項。　

6. 使用自動搜索推薦機制

什麽是(shì)自動搜索推薦機制?以(yǐ)Google爲(wéi / wèi)例，當我們在(zài)搜索框中輸入"Apple Watch 2"，它會自動出(chū)現相關詞條推薦搜索，這(zhè)就(jiù)是(shì)自動搜索推薦機制的(de)表現形式。谷歌在(zài)這(zhè)方面擁有絕對的(de)發言權，從2008年開始，它就(jiù)開始統計用戶的(de)搜索曆史，整理詞條推薦，以(yǐ)幫助用戶節省時(shí)間，創造更佳的(de)用戶體驗。自動搜索推薦機制能夠動态地(dì / de)預測用戶的(de)搜索方向，幫助用戶更快完成搜索。不(bù)過，在(zài)使用這(zhè)種機制時(shí)我們也(yě)要(yào / yāo)注意以(yǐ)下幾點：

确保自動搜索的(de)推薦内容是(shì)有價值的(de)。如果輸入框中出(chū)現不(bù)恰當或無用的(de)搜索推薦，這(zhè)非但不(bù)能爲(wéi / wèi)用戶的(de)搜索提供便利，反而(ér)容易混淆和(hé / huò)分散用戶的(de)注意力。自動搜索的(de)推薦内容一(yī / yì ／yí)定要(yào / yāo)基于(yú)用戶的(de)搜索曆史數據來(lái)決定;

當用戶在(zài)輸入框輸入關鍵詞時(shí)，盡快給予用戶推薦信息，比如在(zài)第三個(gè)字符之(zhī)後，爲(wéi / wèi)用戶開始提供即時(shí)、有價值的(de)建議，降低用戶的(de)輸入難度和(hé / huò)工作量;

盡量爲(wéi / wèi)用戶提供少于(yú)10個(gè)搜索結果，避免信息過載。

突出(chū)顯示輸入信息和(hé / huò)推薦内容之(zhī)間的(de)差異;

7. 讓用戶明白哪些可以(yǐ)搜索到(dào)

讓用戶知道(dào)在(zài)網站中可以(yǐ)搜索到(dào)哪些内容，也(yě)是(shì)一(yī / yì ／yí)種能夠提高用戶對網站好感度的(de)方法，這(zhè)可以(yǐ)通過在(zài)輸入框中添加占位符文字做到(dào)。下圖是(shì)IMDB的(de)網站，它在(zài)搜索框中添加了(le／liǎo)一(yī / yì ／yí)些占位字符，提示用戶搜索框中可搜索的(de)内容，吸引用戶進行搜索。随着HTML5建站技術的(de)不(bù)斷發展，這(zhè)種形式的(de)占位符添加在(zài)設計時(shí)也(yě)不(bù)沒有什麽難度。不(bù)過這(zhè)裏建議占位符的(de)内容不(bù)要(yào / yāo)太多，避免給用戶帶來(lái)認知負擔。

8. 合理的(de)輸入框尺寸

輸入框尺寸太小是(shì)最常見的(de)搜索框設計錯誤。不(bù)少網站的(de)輸入框都太小，雖然可以(yǐ)容納較長的(de)内容，但部分内容卻是(shì)不(bù)可見的(de)，這(zhè)種設計的(de)可用性很差。由于(yú)視覺範圍的(de)限制，用戶在(zài)輸入内容可能會下意識覺得隻能采用短的(de)、不(bù)精确的(de)查詢方式，或是(shì)輸入了(le／liǎo)較長的(de)關鍵詞，卻在(zài)修改時(shí)遇到(dào)麻煩。因此，小飛建議使用能夠根據輸入關鍵詞長度而(ér)變長的(de)輸入框，這(zhè)不(bù)僅可以(yǐ)節省屏幕空間，還能給予用戶充分的(de)視覺提示。

9. 讓搜索框處于(yú)用戶預期的(de)位置

當用戶想要(yào / yāo)使用搜索框，卻需要(yào / yāo)花費不(bù)少精力去找時(shí)，用戶的(de)體驗就(jiù)已經大(dà)大(dà)降低了(le／liǎo)。網站上(shàng)的(de)搜索框最好易于(yú)察覺，放在(zài)用戶預期的(de)位置，哪裏才是(shì)用戶預期的(de)位置呢?下面這(zhè)個(gè)圖表是(shì)來(lái)自 A. Dawn Shaikh 和(hé / huò) Keisi Lenz 的(de)一(yī / yì ／yí)項研究結果，他(tā)們抽樣調查了(le／liǎo)142名用戶，了(le／liǎo)解用戶對于(yú)網站搜索框位置的(de)偏好。從圖表中，我們可以(yǐ)看出(chū)大(dà)多數用戶會在(zài)網站的(de)左上(shàng)角和(hé / huò)右上(shàng)角尋找搜索框，這(zhè)主要(yào / yāo)是(shì)因爲(wéi / wèi)用戶在(zài)浏覽網站時(shí)使用F型掃視法，而(ér)網站右上(shàng)角是(shì)大(dà)多數用戶的(de)首選區域，因此在(zài)設計搜索框時(shí)我們最好把它放在(zài)頂部靠右或頂部居中的(de)位置。

小貼士：

在(zài)理想情況下，搜索框的(de)設計應和(hé / huò)整個(gè)網站的(de)設計風格保持一(yī / yì ／yí)緻。不(bù)過在(zài)視覺上(shàng)要(yào / yāo)略微突出(chū)，便于(yú)用戶發覺它的(de)存在(zài);

網站的(de)内容越多，搜索框就(jiù)應該越明顯，确保輸入框和(hé / huò)按鈕能夠與背景區域相互區别。

總體而(ér)言，雖然搜索框看似簡單，其背後卻蘊藏着大(dà)量的(de)設計知識。由于(yú)一(yī / yì ／yí)點點變化也(yě)會對整個(gè)網站的(de)用戶體驗造成很大(dà)的(de)影響，我們在(zài)改動搜索框時(shí)一(yī / yì ／yí)定要(yào / yāo)足夠謹慎。如果你網站目前的(de)轉化率還不(bù)錯，搜索框就(jiù)不(bù)要(yào / yāo)做什麽大(dà)的(de)改動了(le／liǎo);但如果你網站的(de)轉化率很低，其他(tā)區塊設計也(yě)沒有發現什麽問題，記得看看搜索框的(de)設計是(shì)否存在(zài)缺陷。