搜索框由一(yī)個(gè)輸入域和(hé)提交按鈕的(de)組合。有(yǒu)人(rén)可(kě)能(néng)會(huì)認為(wèi)搜索框并不(b±ù)需要(yào)設計(jì)， 畢竟它隻涉及到(dào)兩個(gè)簡單的(de)元素。然而，在那(nà)些(xiē)重內(nèi)容的(de)網站(zhàn)上(shàng)，搜索框常常都(>dōu)是(shì)用(yòng)戶經常用(yòng)到(dào)的(de)設計(jì)元素。當用(yòng)戶遇到(dào)一(yī)個σ(gè)相(xiàng)對(duì)複雜(zá)的(de)網站(zhàn)時(shí)，他(tā)們往往會(huì)首先尋找這(zhè)個(gè)網站(zhàn)內(¶nèi)的(de)搜索框，以便能(néng)快(kuài)速高(gāo)效地(dì)到(dào)前往自(zì)己想去(qù)的(de)頁面或找到(dào)自(zì)己最為(wèi)關心的(de')內(nèi)容。因此，搜索框的(de)設計(jì)及其可(kě)用(yòng)性問(wèn)題其實是(shì)一(yī)個(gè)不(bù)容忽視(shì)的(de→)要(yào)點。

在這(zhè)篇文(wén)章(zhāng)中，蘇州謝(xiè)謝(xiè)網絡和(hé)大(dà)家(jiā)一(yī)起看(kàn)看(kàn)怎樣設計(jì)更好(hǎo)的(↓de)搜索框樣式？怎樣減少(shǎo)用(yòng)戶所需要(yào)花(huā)費(fèi)的(dλe)查詢時(shí)間(jiān)。

1、使用(yòng)放(fàng)大(dà)鏡圖标

一(yī)個(gè)搜索框應該始終與放(fàng)大(dà)鏡圖标放(fàng)在一(yī)起。所謂圖标，其實就(jiù)是(↓shì)代表著(zhe)一(yī)個(gè)對(duì)象、動作(zuò)、想法等多(duō)種含義的(de)圖形符号。我們通(tōng)過圖标看(kà→n)到(dào)的(de)不(bù)僅僅是(shì)圖标本身(shēn)，而是(shì)它所代表的(de)內(nèi)在含義。然而，對(duì)于用(yòng)戶來(l₹ái)講，具有(yǒu)通(tōng)用(yòng)性代表含義的(de)圖标為(wèi)數(shù)并不(bù)多(duō)，幸運的(d'e)是(shì)，放(fàng)大(dà)鏡圖标正是(shì)其中之一(yī)。
即使沒有(yǒu)文(wén)本标簽，用(yòng)戶也(yě)能(néng)輕易地(dì)識别放(fàng)大(dà)鏡☆圖标

提示：使用(yòng)示意型的(de)圖标即可(kě)，這(zhè)也(yě)是(shì)最簡單的(de)放(fàng)大(dà)鏡圖标版本。更少(shǎo)的(de)圖形細節能(néng&)夠加快(kuài)用(yòng)戶的(de)識别效率。

2、搜索框要(yào)顯著

如(rú)果搜索是(shì)你(nǐ)的(de)應用(yòng)程序/網站(zhàn)的(de)一(yī)個(gè)重要(yào)功能(néng)，那(nà)麽搜索框的(de)顯示務必要(yào)足↑夠顯著，以保證用(yòng)戶能(néng)夠最快(kuài)的(de)發現(xiàn)它。
直接顯示完整的(de)搜索框很(hěn)重要(yào)，因為(wèi)默認隻顯示搜索圖标（點擊圖标才展開(kāi)搜索框）的(de)≠話(huà)會(huì)使搜索功能(néng)不(bù)那(nà)麽明(míng)顯，而且增加了(le)用(yòng)戶的(de)交互成本：
3、提供一(yī)個(gè)搜索按鈕

搜索按鈕可(kě)以幫助用(yòng)戶識别出觸發搜索操作(zuò)的(de)下(xià)一(yī)步——即使≈他(tā)們可(kě)能(néng)往往會(huì)通(tōng)過按Enter鍵來(lái)執行(xíng)此操作(zuò)。
提示：

1）提交按鈕的(de)尺寸大(dà)小(xiǎo)要(yào)合适，以便用(yòng)戶不(bù)必非常精确地(dì)移動鼠标位置到(d→ào)它上(shàng)面。較大(dà)的(de)可(kě)點擊區(qū)域會(huì)使得(de)按鈕本身(shēn)更容易被發現(xiàn)和(hé)點擊。

2）使用(yòng)Enter鍵或點擊搜索按鈕都(dōu)應該能(néng)執行(xíng)搜索操作(zuò)才¶對(duì)，畢竟許多(duō)用(yòng)戶仍然有(yǒu)點擊搜索按鈕來(lái)提交搜索的(de)習(xí)慣。

4.、将搜索框放(fàng)在每一(yī)頁上(shàng)

用(yòng)戶在每個(gè)頁面上(shàng)都(dōu)應該能(néng)獲取搜索框，因為(wèi)如(rú)果用(yòng)戶找不(bù)到λ(dào)他(tā)們要(yào)找的(de)內(nèi)容，他(tā)們往往會(huì)自(zì)然而然地(dì)σ想要(yào)嘗試使用(yòng)搜索功能(néng)來(lái)進行(xíng)查找，他(tā)們才不(bù)關心自(zì↔)己當前是(shì)在你(nǐ)網站(zhàn)的(de)哪個(gè)地(dì)方（以及該不(bù)δ該有(yǒu)搜索）。

5、搜索框要(yào)足夠簡單

如(rú)果你(nǐ)設計(jì)了(le)一(yī)個(gè)搜索框，請(qǐng)确保它看(kàγn)起來(lái)确實像是(shì)一(yī)個(gè)搜索框，并且使用(yòng)起來(lái)要(yào)足夠簡單。可(kě)用(yòng)性研究表明(míng)，默認情況→下(xià)不(bù)顯示高(gāo)級搜索選項對(duì)用(yòng)戶會(huì)更加友(yǒu)好(hǎo)。高(gāo)級搜索 選項（例如(rú)下(xià)面的(de)示例中的(de)布爾搜索查詢）可(kě)能(néng)會(huì)混淆要(yào)嘗試使用(yòng)它的(de)用(yòn£g)戶。
6、将搜索框放(fàng)在用(yòng)戶預期找到(dào)的(de)位置

如(rú)果因為(wèi)搜索框不(bù)夠突出、不(bù)容易察覺，用(yòng)戶還(hái)得(de$)花(huā)費(fèi)精力去(qù)找它，那(nà)這(zhè)個(gè)設計(jì)無疑是(s₽hì)不(bù)夠友(yǒu)好(hǎo)的(de)。

下(xià)面的(de)圖表來(lái)自(zì) A. Dawn Shaikh 和(hé) Keisi Le∞nz 的(de)一(yī)項研究：它顯示了(le)參與調查的(de)142名參與者針對(duì)網站×(zhàn)中的(de)搜索表單的(de)位置的(de)預期情況。研究發現(xiàn)，對(duì)于用(yòng)戶來(lái)說®(shuō)，搜索框最佳的(de)位置是(shì)網站(zhàn)上(shàng)每個(gè)頁面的(de)左上(shàng)方或右上(shàng)方——用(yòng)戶可(k÷ě)以使用(yòng)常見(jiàn)的(de)F形浏覽模式輕松地(dì)找到(dào)它。

該圖說(shuō)明(míng)了(le)參與者對(duì)搜索框所處位置的(de)預期情況。 右上(shàng)方仍然是(shì)用(yòng)戶希♣望找到(dào)搜索的(de)第一(yī)個(gè)地(dì)方
因此，最好(hǎo)将搜索框放(fàng)在頁面的(de)右上(shàng)方或中上(shàng)方，以确保用(yòng)戶能(néng)σ在預期的(de)位置找到(dào)它。



重內(nèi)容的(de)YouTube把搜索放(fàng)置在頁面的(de)中上(shàng)方

提示：

1）理(lǐ)想情況下(xià)，雖然搜索框在用(yòng)戶需要(yào)的(de)地(dì)方應該能(néng)輕易出現(xiàn)，但(dàn)是(shì)搜索框的®(de)設計(jì)也(yě)應該完美(měi)地(dì)契合網站(zhàn)的(de)整體(tǐ)設計(jì)效果。

2）內(nèi)容越重的(de)站(zhàn)點，你(nǐ)越希望搜索框顯著。如(rú)果搜索對(duì)你(nǐ)的(de)網站(zhàn)至關重要(yào)，請(qǐng)使用 (yòng)大(dà)的(de)對(duì)比度，以便搜索框和(hé)圖标能(néng)從(cóng±)頁面背景和(hé)周圍元素中脫穎而出。

7、搜索框尺寸大(dà)小(xiǎo)要(yào)合适

輸入框太短(duǎn)是(shì)設計(jì)人(rén)員(yuán)常犯的(de)一(yī)個(gè)錯(cuò)誤。當然，用(yòng)戶可(kě)以鍵入長(cháng)查詢，但‍(dàn)一(yī)次隻能(néng)看(kàn)到(dào)一(yī)部分(fēn)輸入的(de)文(wén)本，這(zhè)自(zì)然也(yě)就(jiù)存在可(kě)用(yòng)性問(•wèn)題，因為(wèi)用(yòng)戶無法輕松地(dì)回看(kàn)和(hé)編輯其剛剛才輸入的(de)查詢條件(jiàn)。事(shì)實上(shàng)，當搜索框具有δ(yǒu)有(yǒu)限數(shù)量的(de)可(kě)見(jiàn)字符時(shí)，用(yòng)戶會(huì)被迫使用(yòng)短(duǎn)的(de)、不(b§ù)精确的(de)查詢條件(jiàn)，因為(wèi)更長(cháng)的(de)查詢條件(jiàn)将不(b&ù)易閱讀(dú)。 但(dàn)如(rú)果輸入框的(de)長(cháng)度是(shì)根據用(yòng)戶的(de)預期輸™入來(lái)确定大(dà)小(xiǎo)的(de)，那(nà)對(duì)用(yòng)戶而言就(jiù)友(yǒu)好(hǎo)多(duō)了(le)。

經驗表明(míng)一(yī)個(gè)可(kě)以輸入27個(gè)字符的(de)輸入框是(shì)比較合适的(de)，​它能(néng)夠适應90％的(de)查詢條件(jiàn)。



Amazon使用(yòng)長(cháng)度合适的(de)搜索框

提示：不(bù)妨考慮使用(yòng)擴展型的(de)搜索框，它會(huì)在用(yòng)戶點擊時(shí)展開(kāi)文(wén)本輸β入框。這(zhè)種做(zuò)法一(yī)方面節省了(le)屏幕空(kōng)間(jiān)，同時(shí)仍能(néng)給予用(yòng)戶足♦夠的(de)視(shì)覺提示以便他(tā)們快(kuài)速找到(dào)并執行(xíng)搜索。



8、使用(yòng)自(zì)動檢索匹配機(jī)制(zhì)

自(zì)動檢索匹配機(jī)制(zhì)可(kě)根據用(yòng)戶輸入的(de)字符進行(xíng)預測來(lái)幫助用(yσòng)戶找到(dào)一(yī)個(gè)可(kě)能(néng)匹配的(de)查詢條件(jiàn)。 該機(jī)制(zhì)$并不(bù)是(shì)為(wèi)了(le)加快(kuài)搜索過程，而是(shì)為(wèi)了(le)引導用(yòng)戶并幫助‌他(tā)們構建他(tā)們的(de)查詢條件(jiàn)。普通(tōng)用(yòng)戶在構建查詢方面往往會(huì)有(yǒu)&困難：如(rú)果他(tā)們在第一(yī)次嘗試查詢後沒有(yǒu)獲得(de)滿意的(de)結果，™後面的(de)查詢也(yě)會(huì)很(hěn)難順利，事(shì)實上(shàng)，他(tā)們常常就(jiù)會(huì)放★(fàng)棄。而當自(zì)動檢索匹配機(jī)制(zhì)運作(zuò)順利時(shí)，它們就(jiù)能(n✔éng)幫助用(yòng)戶将查詢條件(jiàn)表達的(de)更加清楚。

Google 搜索自(zì)2008年(nián)起就(jiù)已經開(kāi)始應用(yòng)該機(jī)制(zβhì)，現(xiàn)在已經相(xiàng)當成熟。由于用(yòng)戶常常會(huì)多(duō)次搜索相(xiàng)同的(de)內(nèi) 容，因此通(tōng)過記住搜索記錄，Google既節省了(le)時(shí)間(jiān)成本又(yòu)能(néng)創造出更為(wèi)便捷高(gāo)效的(de)$搜索體(tǐ)驗。

提示：

1）确保自(zì)動檢索匹配機(jī)制(zhì)是(shì)有(yǒu)效的(de)，若設計(jì)不(bù)當，就(jiù)可(kě)能(néng)會(huì)混淆和(hé)分(fēn✔)散用(yòng)戶的(de)注意力。因此，不(bù)妨使用(yòng)自(zì)動更正拼寫錯(cuò)誤、根詞識别和(hé)文(wén)本預測等做(✔zuò)法，來(lái)改進這(zhè)種機(jī)制(zhì)發揮更好(hǎo)的(de)作(zuò)用(y∏òng)。

2）你(nǐ)應該盡快(kuài)提供自(zì)動檢索匹配，例如(rú)在用(yòng)戶輸入第三個(gè)字符後就(jiù)提供有(yǒu)效匹配以減少(shǎo)用(yεòng)戶的(de)輸入成本。

3）匹配的(de)查詢條件(jiàn)不(bù)要(yào)多(duō)餘10個(gè)（而且不(b↑ù)要(yào)顯示滾動條），以保證信息不(bù)會(huì)變得(de)過載。

4）允許使用(yòng)鍵盤在匹配的(de)條件(jiàn)列表中導航。一(yī)旦用(yòng)戶在最後一(yī)個(gè)項目中接著(zhe)×向下(xià)滾動，他(tā)們應該重新返回到(dào)列表的(de)頂部。另外(wài)，Esc 鍵應該允許用(yòng)戶退出列表。Ω

5）突出輸入部分(fēn)跟匹配部分(fēn)的(de)差異（例如(rú)，輸入文(wén)本具有(yǒu)标準字重，而匹配部分(fēn)使用(yòng)粗體(tǐ)字重）。&



自(zì)動完成模式可(kě)以節省用(yòng)戶時(shí)間(jiān)，給用(yòng)戶合适的(de)引導

9、明(míng)确告訴用(yòng)戶可(kě)以搜索哪些(xiē)內(nèi)容

在輸入框中顯示一(yī)個(gè)搜索查詢的(de)示例條件(jiàn)是(shì)一(yī)個(gè)不(bù)錯(cuò)的(de)做(zuò€)法，這(zhè)樣能(néng)夠向用(yòng)戶表明(míng)他(tā)們究竟可(kě)以應用(yò'ng)該搜索框搜索哪些(xiē)/哪類內(nèi)容。 如(rú)果用(yòng)戶可(kě)以搜索多(duō)個(gè)條件(jiàn)，則使用(yòng)輸入提示模式來( lái)向用(yòng)戶說(shuō)明(míng)（例如(rú)，下(xià)面示例中的(de)IMDb。 HTML5 技(jì)術(shù)使得(de)我們可(kě)以很(hěn)輕松地(dì<)在輸入框中寫明(míng)作(zuò)為(wèi)占位符的(de)提示文(wén)本。



提示： 提示部分(fēn)要(yào)限制(zhì)在幾個(gè)字之內(nèi)，否則反而會(huì)增加用(yòng)戶的(de)認知(zhī)負擔。

結論

對(duì)于創建一(yī)個(gè)重內(nèi)容的(de)應用(yòng)程序或網站(zhàn)而言，搜索理(lǐ)應作(zuò)為(wèi)一(yī)個(gè)基本的(de)操作(z÷uò)和(hé)關鍵要(yào)素。即使小(xiǎo)幅的(de)改進（例如(rú)使搜索框長(cháng)度更合适或者指明(míng)可(±kě)以搜索哪些(xiē)信息）都(dōu)可(kě)以顯著(zhe)增加搜索的(de)可(kě)用(yòng)性以及整體(tǐ)的(de)用(yòng)戶體(tǐ)驗。