如何讓你的搜索框設計「一舉成名」

許多人可能認爲搜索框不須要設計; 畢竟這只是兩個簡單的元素。然而，在內容繁雜的網站中，搜索框一般是最經常使用的設計元素。當用戶遇到相對複雜的網站時，他們會當即尋找搜索框，已到達到最終目的。搜索框的設計及其可用性就顯得尤其重要。

 

兩種類型

一、即時搜索：

結果當即顯示在用戶界面上，不須要按鈕，放大鏡僅顯示爲一個圖標，輸入時當即搜索

二、常規搜索：

經過用戶點擊搜索按鈕後纔開始執行搜索

什麼時候使用

一、目標對象很難找到時

a) 對象不少時；如從Mockplus的圖標庫中須要找到某個圖標時。

b) 可能的目標對象不在同一個位置時；如在磁盤中查找某類型文件時。

c) 數據很難找到時；如在一篇長文本中搜索某個字符串時。

二、須要查找特定的內容時；好比咱們在淘寶中搜索匹配某種特徵的商品時。

三、須要的結果不能在5秒找到時。

設計理念

一、它是界面的一部分，因此要放在一個顯眼的位置，要容易找到；

二、在同一應用中，它們應該有統一的外觀；

三、它的功能應該是有效的，它的結果應該是準確的，它的速度應該是儘量快速的。

外觀特徵

一、不須要使用標籤，使用一個可選的提示；

二、提示能夠是一個指令（如搜索類型），或者一個範圍；

三、提示語要簡短；

四、即時搜索時，提示首字母大寫；常規搜索時，首字母小寫。

搜索框設計的8個技巧

1.使用放大鏡圖標

根據定義，圖標是對象，動做或想法的可視化表示，而且有幾個圖標是用戶記憶最深入的，也是通用的。放大鏡圖標就是其中之一。即便沒有文字標籤，用戶也能夠識別放大鏡圖標的做用。

 

2. 將搜索框放在用戶但願找到的地方

若是搜索對於你的應用或網站來講是重要的功能，那麼搜索框必須放在顯眼的位置，讓用戶一眼就能找到。

研究發現，搜索框放置的最佳位置是你網站上每一個頁面的左上角或右上角，用戶可使用常見的F形掃描模式輕鬆找到它。理想狀況下，搜索框應該完美匹配網站的總體設計，並在用戶須要時輕鬆展示。

3.爲搜索框提供搜索按鈕

搜索按鈕能夠幫助人們瞭解還有額外的觸發操做 - 即便他們一般使用Enter鍵。

4.將搜索框放在每一頁上

始終提供對每一個頁面的搜索框的訪問權限，由於若是你的用戶找不到他們正在查找的內容，他們將會使用搜索功能，不管他們處於你網站的哪一個位置。

 

5.使搜索框簡單

若是你設計一個搜索框，請確保它看起來像一個搜索框，並儘量簡單的使用。根據可用性研究，默認狀況下沒有顯示高級搜索選項，這樣更加顯示用戶友好。高級搜索選項可能會混淆將嘗試使用它的用戶。

7.自適應字段大小

輸入字段過短是設計人員常見的錯誤。固然用戶能夠鍵入長查詢，但只有一部分文本可見，部分文字被隱藏，這意味着可用性差。由於用戶沒法輕鬆查看和編輯其查詢。實際上，當搜索框可以輸入的文本有限時，用戶被迫使用短的文本進行查詢，這樣就不能精確的查詢。若是輸入字段根據其預期輸入進行大小調整，那麼它們更容易閱讀並給用戶提供良好的用戶體驗。

經驗法則是具備27個字符的文本輸入（它能夠容納90％的查詢）。

 

 

8.使用自動建議機制

自動建議機制能夠幫助用戶經過輸入的字符進行預測來找到正確的查詢。自動建議機制不是加快搜索過程，而是關於指導用戶並幫助他們構建搜索查詢。用戶在查詢配置方面很是差：若是在第一次嘗試時沒有得到良好的結果，他們可能就放棄了。自動建議機制能夠幫助用戶更好地表達他們須要的搜索查詢。

Google早在2008就掌握此項技術。因爲用戶傾向於屢次搜索相同的內容，經過記住搜索記錄，Google能夠節省時間並建立更加便捷的體驗。

有人會說，我不想本身去設計，有現成能夠直接用的搜索框嗎？固然，Mockplus這款原型軟件封
裝了彈出面板、內容面板、滾動區、抽屜、輪播等系列經常使用交互組件以及近200個組件，提供3000
個以上的圖標素材。作圖時，只須要把這些組件放入工做區進行組合，一張原型圖就能夠迅速呈
現。想用什麼直接搜索，方便，快捷，讓你在這個追求效率的時代省時更高效。

據說Mockplus最近還放出了前所未有的限時優惠。俗話說：「過了這個村就沒這個店」。可否抓住，你決定!