UI教程-如何設計一個完美的搜索框

到這個標題，你可能會認為搜索是不需要設計的，畢竟只是一個文字輸入框和搜索按鈕的組合。

然而，在信息爆炸的互聯網時代，搜索框成為我們每天必須要使用到的功能。當用戶面對復雜的網站，難以找到自己想要看到東西的時候，他們會立即尋找并使用搜索框，快速的達到目的。這時候搜索功能的設計以及易用性就會顯得尤為重要。本次我從“搜索框（一）”和下期的“搜索結果（二）”倆部分來分享比較正確的做法。

1.使用放大鏡圖標

在用戶界面中放大鏡圖標和搜索功能如影隨行，圖標是對于操作對象、動作或想法可視化的表達，用戶具有普遍認知的圖形元素，我們通常也稱之為icon。放大鏡就是這樣的圖標之一。

提示:盡量使用最簡單的圖形，較少的使用細節裝飾會提高識別效率。

2.顯示搜索字段

如果你設計的產品中搜索是一個高頻操作的功能，你應該將它放在相對明顯和便捷的位置，便于用戶快速找到并使用。

顯示完整的搜索提示字段很重要，因為隱藏在圖標中的搜索會使得搜索功能不那么明顯，并增加無效的交互成本。

盡量避免這種形式的設計，因為它隱藏了搜索提示

3.為搜索框設計一個搜索按鈕。

一個搜索按鈕可以明確的告知用戶，激活搜索框后的額外操作，即使他們已經決定了按下Enter鍵。

提示

適當的調整提交按鈕觸發區域的大小，使用戶不必精確的指向就可以操作，更大的點擊區域使其更容易被發現和便于點擊。

雖然大部分用戶會通過Enter鍵提交搜索結果，但是依然有不少用戶習慣于使用鼠標點擊實際按鈕來完成操作，倆個操作方式應當同時存在。

4.每一個頁面都出現搜索框

你的用戶應該在每個頁面都可以使用搜索功能，不論他們在網站的什么位置，當他們找不到他們正在查找的內容的時候，他們將嘗試使用搜索功能。

5.設計一個簡單的搜索框

讓搜索框看起來盡可能的簡單。根據可用性研究，在默認情況下不顯示高級搜索是更友好的選擇。在下面的例子中，高級搜索會使用戶感到疑惑。

6.將搜索框放在用戶更希望看到的地方

也就是說，搜索框的位置要盡可能符合大部分用戶的心理預期。

A.Dawn Shaikh和Keisi Lenz做了一個研究，研究結果（如下圖）表示了142位參與者在調查中預期搜索功能在網頁中出現的位置。研究發現，將搜索功能放在網站的左上角或者右上角是最好的選擇，用戶可以使用常見的“F形”掃描模式輕松找到。

因此，將搜索框放在頁面的右上角或者中上部區域，是用戶預期出現的位置。

提示：

理想情況下，搜索功能應該匹配于網站的整體設計，在用戶需要的時候出現。

網站的內容越多，搜索功能顯得越重要，如果搜索對你的網站至關重要，就要從視覺、尺寸、位置、顏色等方面增強搜索的權重，以便搜索功能在復雜的內容中脫穎而出。

7.確保輸入框可以容納足夠的字段

輸入框設計的太窄是設計師常見的錯誤做法，如果輸入框不夠寬，當用戶在輸入框內輸入較長的文本查詢時，意味著有一部分文字將不被看到，用戶無法輕松的查看和編輯他查詢的內容，可用性將非常差。當輸入框僅允許輸入有限可見的文本時，用戶將被迫用短的，不精確的查詢，因為較長的查詢難以閱讀。有好的做法是輸入框根據用戶預期輸入的文本調整大小，那么他們將更容易幫助用戶閱讀和查詢。

研究表明，可容納27個字符的搜索框可以滿足90％用戶的搜索需求。

提示：考慮使用可變化的寬度的搜索框（激活輸入框后輸入框變寬），這樣既可以節省屏幕空間，也可以為用戶提供足夠的可視化提示，以便快速查找和執行搜索動作。

8.啟用“搜索聯想”機制

“搜索聯想”（自動建議）可以幫助用戶通過已輸入的文本來預測可以找到的查詢結果。搜索聯想的目的不是加快搜索的過程，而是幫助用戶構建正確的搜索查詢機制。常見的場景是：當用戶第一次搜索沒有得到想要的結果時，稍后會更少使用搜索，意味著更低的成功率。事實是用戶會就此放棄搜索。所以搜索聯想會幫助用戶更好的構建搜索路徑。

Google字2008年以來掌握并實施“搜索聯想”，由于搜索引擎會記住用戶每多一次且相同的搜索記錄，所以Google為用戶節省了時間并創造了更加便捷的體驗。

提示：

確保搜索聯想是有效的，設計不完善的搜索聯想會混淆和分散用戶的注意力，所以使用拼寫自動更正、詞根識別、語義識別和預測，可以改進搜索體驗。

盡可能快速的提供搜索聯想，例如輸入到第三個字的時候，就給用戶提供相匹配的聯想詞匯，以此減少用戶數據錄入的工作，

只提供少于10個項目的聯想詞句（不建議使用滾動條），否則信息將會變得難以承受。

允許用戶通過鍵盤的上下鍵控制選擇列表，當滾動到最后一個項目，如果繼續向下翻動則自動返回到列表頂部，用戶也可以使用Esc按鍵關閉搜索聯想列表。

已輸入文本和建議文本視覺上保持差異（例如，通常情況下建議的詞匯通過加粗表示）

9.描述用戶可以搜索的內容

在輸入框中可以添加搜索示例，告知用戶那些內容是可以搜索的，以及如何使用功能。如果用戶可以搜索多個條件，請使用輸入提示模式說明。

（Html5的技術將文本占位符添加到輸入框中是極其容易的）

提示：簡要的概述，否則會增加用戶的認知負擔。

結論

搜索是構建內容繁重應用程序或門戶網站最基本和最關鍵的功能。即使最小的變化，例如輸入框可輸入的字段大小或搜索框中的提示字段信息可有效的提升搜索的可用性以及整體的用戶體驗。

歡迎加入UI設計群587751709

HTML5簡介:

定義：HTML5號稱下一代HTML，html的最新版本，定義了新的標簽、css、JavaScript，html5新標簽IE9以上版本瀏覽器才兼容，因此在實際開發中要問老板是否兼容低版本瀏覽器。

擴展內容：語義化標簽、本地儲存、兼容特性、2D 3D、動畫過渡、CSS3新特性、性能與集成

HTML5常用新標簽：

HTML5標簽多為語義化標簽，主要是針對瀏覽器搜索引擎，IE9瀏覽器中主要將所有語義化標簽都轉化為塊級元素，語義化標簽在移動端支持比較好，后面會有更多語義化標簽學習。

HTML5常用新標簽：

datalist選項輸入框:

此標簽和input標簽搭配可以實現input輸入提示，注意：input標簽中必須要有list屬性，其值綁定的是datalist的id值，option標簽中的value值不能為空，否則此功能失效。

    <body>
        <input type="text" value="輸入科目" list="lis" >
        <datalist id='lis'>
        <option value="科目1"></option>
        <option value="科目2"></option>
        <option value="科目3"></option>
        <option value="科目4"></option>
        </datalist>
    </body>

fieldset表單元素分組:

此標簽和legend標簽搭配可以將表單內相關元素分組（外部用一個矩形的方框包裹）


    <body>
      <fieldset>
        <legend>用戶信息</legend>    <!-- 矩形框邊插入的文本信息,去掉此標簽則為 封閉的矩形 -->
        <input type="text" value="user"><br>
        <input type="password" value="password">
      </fieldset>
    </body>

html5中input標簽的type屬性新增屬性值：

input中新增屬性：

提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者刪除。

筆者：苦海123

其它問題可通過以下方式聯系本人咨詢：

QQ：810665436

微信：ConstancyMan

TML5+jquery實現的搜索匹配效果，或者說是搜索過濾，當你在文本框輸入一個字符時，如果下邊的列表中有以此為開頭的內容時，將自動為你顯示相關內容，示例中僅列出了一些，希望對你是有幫助的。

html結構：

css樣式：

這里引入了bootstrap.css。大家可以鏈接自己本地的bootstrap樣式表

javascript：