搜索界面設計

❶ 七個網頁界面ui設計細節你掌握了嗎

素馬主張任何高大上的產品概念設計最終落地都化解為版式與圖片。隨著用戶對產品使用的體驗要求越來越高，新銳的版式加上精美的圖片，還需要加上獨特的動效設計（前端製作工藝）才行。那麼，除了網頁設計三大塊版式、圖片、動效外，我們這些看似搬磚，每天做細節設計的ui設計師，是否有大的研究和作為呢。今天分享的這篇文章，主要是針對ui界面中非常細小的設計技巧進行講解。

01

-

使用色彩和字重來創造層次結構，而不是單純的大小對比

小結

-

以上總結的七個ui界面設計小細節處理技巧，都是大量的項目實戰工作中總結出來的，容易理解也容易執行。有人可能說，連一個像素都在磕，又不是搞科學研究火箭發射，有必要嗎？我只能說，這是一個工作的專業度問題和態度問題。也許一像素並不影響ui界面的美觀問題，但是卻是一位大師和普通工人的區別。

❷ 搜索引擎的設計技巧

一、搜索引擎的分類

獲得網站網頁資料，能夠建立資料庫並提供查詢的系統，我們都可以把它叫做搜索引擎。按照工作原理的不同，可以把它們分為兩個基本類別：全文搜索引擎（FullText Search Engine）和分類目錄Directory）。

全文搜索引擎的資料庫是依靠一個叫「網路機器人（Spider）」或叫「網路蜘蛛（crawlers）」的軟體，通過網路上的各種鏈接自動獲取大量網頁信息內容，並按以定的規則分析整理形成的。Google、網路都是比較典型的全文搜索引擎系統。

分類目錄則是通過人工的方式收集整理網站資料形成資料庫的，比如雅虎中國以及國內的搜狐、新浪、網易分類目錄。另外，在網上的一些導航站點，也可以歸屬為原始的分類目錄，比如「網址之家」。

全文搜索引擎和分類目錄在使用上各有長短。全文搜索引擎因為依靠軟體進行，所以資料庫的容量非常龐大，但是，它的查詢結果往往不夠准確；分類目錄依靠人工收集和整理網站，能夠提供更為准確的查詢結果，但收集的內容卻非常有限。為了取長補短，現在的很多搜索引擎，都同時提供這兩類查詢，一般對全文搜索引擎的查詢稱為搜索「所有網站」或「全部網站」，比如Google的全文搜索（http://www.google.com/intl/zh-CN/）；把對分類目錄的查詢稱為搜索「分類目錄」或搜索「分類網站」，比如新浪搜索和雅虎中國搜索（http://cn.search.yahoo.com/dirsrch/）。

在網上，對這兩類搜索引擎進行整合，還產生了其它的搜索服務，在這里，我們權且也把它們稱作搜索引擎，主要有這兩類：

⒈元搜索引擎(META Search Engine)。這類搜索引擎一般都沒有自己網路機器人及資料庫，它們的搜索結果是通過調用、控制和優化其它多個獨立搜索引擎的搜索結果並以統一的格式在同一界面集中顯示。元搜索引擎雖沒有「網路機器人」或「網路蜘蛛」，也無獨立的索引資料庫，但在檢索請求提交、檢索介面代理和檢索結果顯示等方面，均有自己研發的特色元搜索技術。比如「metaFisher元搜索引擎」
（http://www.hsfz.net/fish/），它就調用和整合了Google、Yahoo、AlltheWeb、網路和OpenFind等多家搜索引擎的數據。

⒉集成搜索引擎（All－in－One Search Page）。集成搜索引擎是通過網路技術，在一個網頁上鏈接很多個獨立搜索引擎，查詢時，點選或指定搜索引擎，一次輸入，多個搜索引擎同時查詢，搜索結果由各搜索引擎分別以不同頁面顯示，比如「網際瑞士軍刀」（http://free.okey.net/%7Efree/search1.htm）。

二、搜索引擎的工作原理

全文搜索引擎的「網路機器人」或「網路蜘蛛」是一種網路上的軟體，它遍歷Web空間，能夠掃描一定IP地址范圍內的網站，並沿著網路上的鏈接從一個網頁到另一個網頁，從一個網站到另一個網站採集網頁資料。它為保證採集的資料最新，還會回訪已抓取過的網頁。網路機器人或網路蜘蛛採集的網頁，還要有其它程序進行分析，根據一定的相關度演算法進行大量的計算建立網頁索引，才能添加到索引資料庫中。我們平時看到的全文搜索引擎，實際上只是一個搜索引擎系統的檢索界面，當你輸入關鍵詞進行查詢時，搜索引擎會從龐大的資料庫中找到符合該關鍵詞的所有相關網頁的索引，並按一定的排名規則呈現給我們。不同的搜索引擎，網頁索引資料庫不同，排名規則也不盡相同，所以，當我們以同一關鍵詞用不同的搜索引擎查詢時，搜索結果也就不盡相同。

和全文搜索引擎一樣，分類目錄的整個工作過程也同樣分為收集信息、分析信息和查詢信息三部分，只不過分類目錄的收集、分析信息兩部分主要依靠人工完成。分類目錄一般都有專門的編輯人員，負責收集網站的信息。隨著收錄站點的增多，現在一般都是由站點管理者遞交自己的網站信息給分類目錄，然後由分類目錄的編輯人員審核遞交的網站，以決定是否收錄該站點。如果該站點審核通過，分類目錄的編輯人員還需要分析該站點的內容，並將該站點放在相應的類別和目錄中。所有這些收錄的站點同樣被存放在一個「索引資料庫」中。用戶在查詢信息時，可以選擇按照關鍵詞搜索，也可按分類目錄逐層查找。如以關鍵詞搜索，返回的結果跟全文搜索引擎一樣，也是根據信息關聯程度排列網站。需要注意的是，分類目錄的關鍵詞查詢只能在網站的名稱、網址、簡介等內容中進行，它的查詢結果也只是被收錄網站首頁的URL地址，而不是具體的頁面。分類目錄就像一個電話號碼薄一樣，按照各個網站的性質，把其網址分門別類排在一起，大類下面套著小類，一直到各個網站的詳細地址，一般還會提供各個網站的內容簡介，用戶不使用關鍵詞也可進行查詢，只要找到相關目錄，就完全可以找到相關的網站（注意：是相關的網站，而不是這個網站上某個網頁的內容，某一目錄中網站的排名一般是按照標題字母的先後順序或者收錄的時間順序決定的）。
搜索引擎並不真正搜索互聯網，它搜索的實際上是預先整理好的網頁索引資料庫。

真正意義上的搜索引擎，通常指的是收集了網際網路上幾千萬到幾十億個網頁並對網頁中的每一個詞（即關鍵詞）進行索引，建立索引資料庫的全文搜索引擎。當用戶查找某個關鍵詞的時候，所有在頁面內容中包含了該關鍵詞的網頁都將作為搜索結果被搜出來。在經過復雜的演算法進行排序後，這些結果將按照與搜索關鍵詞的相關度高低，依次排列。

現在的搜索引擎已普遍使用超鏈分析技術，除了分析索引網頁本身的內容，還分析索引所有指向該網頁的鏈接的URL、AnchorText、甚至鏈接周圍的文字。所以，有時候，即使某個網頁A中並沒有某個詞比如「惡魔撒旦」，但如果有別的網頁B用鏈接「惡魔撒旦」指向這個網頁A，那麼用戶搜索「惡魔撒旦」時也能找到網頁A。而且，如果有越多網頁（C、D、E、F……）用名為「惡魔撒旦」的鏈接指向這個網頁A，或者給出這個鏈接的源網頁（B、C、D、E、F……）越優秀，那麼網頁A在用戶搜索「惡魔撒旦」時也會被認為更相關，排序也會越靠前。

搜索引擎的原理，可以看做三步：從互聯網上抓取網頁→建立索引資料庫→在索引資料庫中搜索排序。

從互聯網上抓取網頁
利用能夠從互聯網上自動收集網頁的Spider系統程序，自動訪問互聯網，並沿著任何網頁中的所有URL爬到其它網頁，重復這過程，並把爬過的所有網頁收集回來。

建立索引資料庫
由分析索引系統程序對收集回來的網頁進行分析，提取相關網頁信息（包括網頁所在URL、編碼類型、頁面內容包含的關鍵詞、關鍵詞位置、生成時間、大小、與其它網頁的鏈接關系等），根據一定的相關度演算法進行大量復雜計算，得到每一個網頁針對頁面內容中及超鏈中每一個關鍵詞的相關度（或重要性），然後用這些相關信息建立網頁索引資料庫。

在索引資料庫中搜索排序
當用戶輸入關鍵詞搜索後，由搜索系統程序從網頁索引資料庫中找到符合該關鍵詞的所有相關網頁。因為所有相關網頁針對該關鍵詞的相關度早已算好，所以只需按照現成的相關度數值排序，相關度越高，排名越靠前。
最後，由頁面生成系統將搜索結果的鏈接地址和頁面內容摘要等內容組織起來返回給用戶。
搜索引擎的Spider一般要定期重新訪問所有網頁（各搜索引擎的周期不同，可能是幾天、幾周或幾月，也可能對不同重要性的網頁有不同的更新頻率），更新網頁索引資料庫，以反映出網頁內容的更新情況，增加新的網頁信息，去除死鏈接，並根據網頁內容和鏈接關系的變化重新排序。這樣，網頁的具體內容和變化情況就會反映到用戶查詢的結果中。

互聯網雖然只有一個，但各搜索引擎的能力和偏好不同，所以抓取的網頁各不相同，排序演算法也各不相同。大型搜索引擎的資料庫儲存了互聯網上幾億至幾十億的網頁索引，數據量達到幾千G甚至幾萬G。但即使最大的搜索引擎建立超過二十億網頁的索引資料庫，也只能佔到互聯網上普通網頁的不到30%，不同搜索引擎之間的網頁數據重疊率一般在70%以下。我們使用不同搜索引擎的重要原因，就是因為它們能分別搜索到不同的內容。而互聯網上有更大量的內容，是搜索引擎無法抓取索引的，也是我們無法用搜索引擎搜索到的。

你心裡應該有這個概念：搜索引擎只能搜到它網頁索引資料庫里儲存的內容。你也應該有這個概念：如果搜索引擎的網頁索引資料庫里應該有而你沒有搜出來，那是你的能力問題，學習搜索技巧可以大幅度提高你的搜索能力。

❸ 網頁設計中如何做一個好看的搜索框

通過from表單，將查詢的關鍵詞，通過 like 跟數據進行模糊查詢對比
從topics表中查詢欄位subject與傳進來的參數'$_POST['topic']進行比較模糊查詢
設subject欄位數據為：數學，英語，物理，化學，英文
$subject=$_POST['topic'];
$sql = "select * from topics where subject like '%" .$subject. "%'";
$result = mysql_query($sql);
若從表單提交的『topic』值為「學」，得到的結果將是：數學，化學
多個欄位匹配查詢：
$sql = "select id,subject from topics where (id like '%" .$id. "%') or (name like '%" .$name. "%') or (subject like '%" .$subject. "%') order by id desc";

❹ html設計搜索框。

<div id="search">

<form.....>

<input id="searchbox"......./><input id="submit"......./>

</form>

</div>

css:

#search{background:那張圖哈（div長寬保證和圖片長寬一致）; width:200(和你圖片寬度一致)px; height:(和你那張搜索圖片高度一致哈)35px;}

• 再用css固定一下輸入框和提交按鈕的位置就好。你會的吧？應該會哈。

❺ 電商網站的搜索框，是怎樣設計的

互聯網所具備的特點就是信息的快速傳播，而速度則是現代用戶所最為追求的。用戶們訪問企業網站，最想達到的目標就是快速的尋找所需要的目標信息。那電商網站要怎麼做到這一點呢？其實，凡科自助建站平台，可以通過簡單的模塊添加功能，為網站添加上搜索功能，搜索功能可以快速將用戶帶到想要的信息頁面，從而讓用戶在企業網站上，以最短的時間獲得最大的便利性。樓主可以參考下咯

❻ 搜索結果界面與歷史訂單界面怎樣區別設計

後台可以設置：SPRO---物料管理---采購---采購訂單----定義憑證層的屏幕格式，但這個設置不能回隨意更改，答它與財務的欄位狀態組的更改要同步，對於兩邊共有的欄位，如果一方設置了顯示、一方設置不顯示，則在建采購訂單時會報錯，須謹慎更改。

❼ 聯想筆記本的搜索框怎麼設計中文

1、
滑鼠右健點擊「任務欄」，在「工具欄」邊把「Windows
Search」前面去勾；
2、單擊開始>設置>控制面板>添加刪除程序,找到
Windows
Search.
卸載

❽ 如何設計搜索框

所謂搜索框，實際上就是一個輸入域和提交按鈕的組合。有人可能會認為搜索框並不需要設計， 畢竟它只涉及到兩個簡單的元素。然而，在那些重內容的網站上，搜索框常常都是用戶最用到的設計元素。當用戶遇到一個相對復雜的網站時，他們往往會首先尋找這個網站內的搜索框，以便能快速高效地到前往自己想去的頁面或找到自己最為關心的內容。因此，搜索框的設計及其可用性問題其實是一個不容忽視的要點。

1、使用放大鏡圖標

一個搜索框應該始終與放大鏡圖標放在一起。所謂圖標，其實就是代表著一個對象、動作、想法等多種含義的圖形符號。我們通過圖標看到的不僅僅是圖標本身，而是它所代表的內在含義。然而，對於用戶來講，具有通用性代表含義的圖標為數並不多，幸運的是，放大鏡圖標正是其中之一。

2、搜索框要顯著

如果搜索是你的應用程序/網站的一個重要功能，那麼搜索框的顯示務必要足夠顯著，以保證用戶能夠最快的發現它。直接顯示完整的搜索框很重要，因為默認只顯示搜索圖標（點擊圖標才展開搜索框）的話會使搜索功能不那麼明顯，而且增加了用戶的交互成本。

3、提供一個搜索按鈕

搜索按鈕可以幫助用戶識別出觸發搜索操作的下一步——即使他們可能往往會通過按Enter鍵來執行此操作。

提示：

1）提交按鈕的尺寸大小要合適，以便用戶不必非常精確地移動滑鼠位置到它上面。較大的可點擊區域會使得按鈕本身更容易被發現和點擊。

2）使用Enter鍵或點擊搜索按鈕都應該能執行搜索操作才對，畢竟許多用戶仍然有點擊搜索按鈕來提交搜索的習慣。

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

用戶在每個頁面上都應該能獲取搜索框，因為如果用戶找不到他們要找的內容，他們往往會自然而然地想要嘗試使用搜索功能來進行查找，他們才不關心自己當前是在你網站的哪個地方（以及該不該有搜索）。

5、搜索框要足夠簡單

如果你設計了一個搜索框，請確保它看起來確實像是一個搜索框，並且使用起來要足夠簡單。可用性研究表明，默認情況下不顯示高級搜索選項對用戶會更加友好。高級搜索選項（例如下面的示例中的布爾搜索查詢）可能會混淆要嘗試使用它的用戶。

6、將搜索框放在用戶預期找到的位置

如果因為搜索框不夠突出、不容易察覺，用戶還得花費精力去找它，那這個設計無疑是不夠友好的。因此，最好將搜索框放在頁面的右上方或中上方，以確保用戶能在預期的位置找到它。

提示：

1）理想情況下，雖然搜索框在用戶需要的地方應該能輕易出現，但是搜索框的設計也應該完美地契合網站的整體設計效果。

2）內容越重的站點，你越希望搜索框顯著。如果搜索對你的網站至關重要，請使用大的對比度，以便搜索框和圖標能從頁面背景和周圍元素中脫穎而出。

7、搜索框尺寸大小要合適

輸入框太短是設計人員常犯的一個錯誤。當然，用戶可以鍵入長查詢，但一次只能看到一部分輸入的文本，這自然也就存在可用性問題，因為用戶無法輕松地回看和編輯其剛剛才輸入的查詢條件。事實上，當搜索框具有有限數量的可見字元時，用戶會被迫使用短的、不精確的查詢條件，因為更長的查詢條件將不易閱讀。 但如果輸入框的長度是根據用戶的預期輸入來確定大小的，那對用戶而言就友好多了。

經驗表明一個可以輸入27個字元的輸入框是比較合適的，它能夠適應90％的查詢條件。

提示：不妨考慮使用擴展型的搜索框，它會在用戶點擊時展開文本輸入框。這種做法一方面節省了屏幕空間，同時仍能給予用戶足夠的視覺提示以便他們快速找到並執行搜索。

8、使用自動檢索匹配機制

自動檢索匹配機制可根據用戶輸入的字元進行預測來幫助用戶找到一個可能匹配的查詢條件。 該機制並不是為了加快搜索過程，而是為了引導用戶並幫助他們構建他們的查詢條件。普通用戶在構建查詢方面往往會有困難：如果他們在第一次嘗試查詢後沒有獲得滿意的結果，後面的查詢也會很難順利，事實上，他們常常就會放棄。而當自動檢索匹配機制運作順利時，它們就能幫助用戶將查詢條件表達的更加清楚。

Google 搜索自2008年起就已經開始應用該機制，現在已經相當成熟。由於用戶常常會多次搜索相同的內容，因此通過記住搜索記錄，Google既節省了時間成本又能創造出更為便捷高效的搜索體驗。

提示：

1）確保自動檢索匹配機制是有效的，若設計不當，就可能會混淆和分散用戶的注意力。因此，不妨使用自動更正拼寫錯誤、根詞識別和文本預測等做法，來改進這種機制發揮更好的作用。

2）你應該盡快提供自動檢索匹配，例如在用戶輸入第三個字元後就提供有效匹配以減少用戶的輸入成本。

3）匹配的查詢條件不要多餘10個（而且不要顯示滾動條），以保證信息不會變得過載。

4）允許使用鍵盤在匹配的條件列表中導航。一旦用戶在最後一個項目中接著向下滾動，他們應該重新返回到列表的頂部。另外，Esc 鍵應該允許用戶退出列表。

5）突出輸入部分跟匹配部分的差異（例如，輸入文本具有標准字重，而匹配部分使用粗體字重）。

9、明確告訴用戶可以搜索哪些內容

在輸入框中顯示一個搜索查詢的示例條件是一個不錯的做法，這樣能夠向用戶表明他們究竟可以應用該搜索框搜索哪些/哪類內容。 如果用戶可以搜索多個條件，則使用輸入提示模式來向用戶說明（例如，HTML5 技術使得我們可以很輕松地在輸入框中寫明作為佔位符的提示文本。）

結論：

對於創建一個重內容的應用程序或網站而言，搜索理應作為一個基本的操作和關鍵要素。即使小幅的改進（例如使搜索框長度更合適或者指明可以搜索哪些信息）都可以顯著增加搜索的可用性以及整體的用戶體驗。

❾ 網頁設計 類似百度搜索頁面是怎麼做出來的

網頁設計這個一般都是要求會前端代碼，html css js flash 還有些其他的腳本插件什麼的。

如果代碼寫的熟練可以不用DW。寫網頁的工具很多，用txt文本文檔也可以。

好了，貼上搜索框代碼，使用需要後台程序支持，直接點了可是什麼都沒有哦。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>搜索框</title>
<styletype="text/css"media="screen">
body{
background-color:#f1f1f1;
margin:0;
}
body,
input,
button{
font-family:"HelveticaNeue",Helvetica,Arial,sans-serif;
}
.container{margin:30pxauto40pxauto;width:800px;text-align:center;}

a{color:#4183c4;text-decoration:none;font-weight:bold;}
a:hover{text-decoration:underline;}

h3{color:#666;}
ul{list-style:none;padding:25px0;}
li{
display:inline;
margin:10px50px10px0px;
}
input[type=text],
input[type=password]{
font-size:13px;
min-height:32px;
margin:0;
padding:7px8px;
outline:none;
color:#333;
background-color:#fff;
background-repeat:no-repeat;
background-position:rightcenter;
border:1pxsolid#ccc;
border-radius:3px;
box-shadow:inset01px2pxrgba(0,0,0,0.075);
-moz-box-sizing:border-box;
box-sizing:border-box;
transition:all0.15sease-in;
-webkit-transition:all0.15sease-in0;
vertical-align:middle;
}
.button{
position:relative;
display:inline-block;
margin:0;
padding:8px15px;
font-size:13px;
font-weight:bold;
color:#333;
text-shadow:01px0rgba(255,255,255,0.9);
white-space:nowrap;
background-color:#eaeaea;
background-image:-moz-linear-gradient(#fafafa,#eaeaea);
background-image:-webkit-linear-gradient(#fafafa,#eaeaea);
background-image:linear-gradient(#fafafa,#eaeaea);
background-repeat:repeat-x;
border-radius:3px;
border:1pxsolid#ddd;
border-bottom-color:#c5c5c5;
box-shadow:01px3pxrgba(0,0,0,.05);
vertical-align:middle;
cursor:pointer;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-appearance:none;
}
.button:hover,
.button:active{
background-position:0-15px;
border-color:#ccc#ccc#b5b5b5;
}
.button:active{
background-color:#dadada;
border-color:#b5b5b5;
background-image:none;
box-shadow:inset03px5pxrgba(0,0,0,.15);
}
.button:focus,
input[type=text]:focus,
input[type=password]:focus{
outline:none;
border-color:#51a7e8;
box-shadow:inset01px2pxrgba(0,0,0,.075),005pxrgba(81,167,232,.5);
}

label[for=search]{
display:block;
text-align:left;
}
#searchlabel{
font-weight:200;
padding:5px0;
}
#searchinput[type=text]{
font-size:18px;
width:705px;
}
#search.button{
padding:10px;
width:90px;
}

</style>
</head>
<body>
<divclass="container">
<divid="search">
<labelfor="search"></label>
<inputtype="text"name="q">
<inputclass="button"type="submit"value="Search">
</div>
</div>
<divstyle="text-align:center;margin:100px0;font:normal14px/24px'MicroSoftYaHei';">
</div>
</body>
</html>

❿ 網站設計中搜索框的設計技巧有哪些

設計精美的網站當然很吸引人，但如果你的網站設計精美，內容上乘，就是不明白網站為何沒達到運營預期目標，問題可能就出在搜素框這一元素的運用之上。本文指出了設計者必須避免的錯誤，並分享了一些搜索框設計技巧，希望在優化網站性能方面有所幫助。

在瀏覽整個網站中，搜索框通常是通向用戶使用的最後一道關卡。如果你的網站內容很多，包含了詳盡的特色，功能，設計元素，產品和服務等等，那麼搜索框就成為了網站不可或缺的一部分。網站的成長往往需要時間。當然，從整個網站設計和開發過程來看，設計肯定要簡潔，有文章和評論，以及非正式的網站通知，特色內容和服務等等。不過，隨著網站層次不斷提升和更新，與網站相關的內容的只是起到了裝飾作用。因此，搜索框對網站的性能優化起到了至關重要的作用。

優質的職能和運作對網站開發確實很重要，但與此同時，我們也不可忽視網站的前端性能。你的網站也許在特色內容，功能以及內容質量等方面都很出眾，但是，如果網站前端性能令人不滿意，並且沒有以用戶為中心，那麼網站其它方面做得再好，也起不到任何作用。

錯誤觀念：搜索框不需要設計

在整個網站設計中，搜索框的外觀要顯眼，方便用戶快速找到。網站站長普遍認為搜索框只是一個輸入和提交內容的按鈕而已，因此他們根本不需要花時間設計。

但是由於錯誤觀念泛濫，站長們也錯失了一些潛在的機會。由於設計上的缺失以及亮點不突出，用戶通常會被搜索框的位置弄得焦頭爛額，他們通常會點擊「返回」按鈕（離開網頁）。因此，設計平庸，辨識度不高的搜索框就是導致這一切的元兇，如果想要網站獲得可觀的流量，但是網站轉化率卻低得離譜，這是不行的。

如果用戶對你的網站感到失望，搜索框則有助於留住用戶。在大量的網站中，真正帶給用戶絕佳體驗的少之又少，用戶有時還沒深入了解整個網站，可能就不斷點擊後退，離開網頁了。如果用戶能進行搜索，他們只需在搜索框中輸入自己想找的內容，上述問題也就迎刃而解了。

在如今這個快速成功的社會，時間就是金錢。搜索框不僅能幫助用戶節約時間，還可帶給用戶高度愉悅和簡潔的瀏覽體驗。

搜索框設計技巧

在為網站設計搜索框時，你可重點考慮以下建議：

1. 搜索框要顯眼

搜索框要清晰可見，千萬不可放在難以注意到的位置。即使你的網站主題是純白色，為搜索框設置黑色的邊框，選用紅色等亮色作為字體顏色，這都可能會解決搜索框不明顯的問題。

2. 搜索框要有搜索框的樣

你可以嘗試在搜索框設計中融入創意，但是不要把它弄得不倫不類。這也是搜索框必須是框狀的原因。訪問網站的用戶不會仔細瀏覽完整個網站的內容，他們只會關注自己感興趣的內容，而且許多學習條件是受制於他們的行為，在用搜索框進行搜索時，實際上用圓角矩形的搜索框就可以了。

3. 搜索框的位置

搜索框的位置對網站優化和性能提升十分重要。一般的經驗表明搜索框的最佳位置應在網站頂部的左上角或右上角，因為用戶希望節約時間和精力，直接搜索到他們所需的內容。但是受廣告等內容的影響，迫使設計者將搜索框放在頁面底部。這並沒真正解決搜索框在網站中的實用性問題，必須避免。

另外，在每個網頁中都放入搜索框是一個明智的主意，即使用戶在網站中迷失，他們也能夠方便地找到需要的內容。

4. 為提交按鈕取一個有創意的名字

搜索框的名字要取得有創意，不要簡單地放上單調的「go」，「find」或「search」在旁邊。不管給它起什麼名字，只要不為難用戶去猜意思就好。

5. 為用戶提供分類搜索

用戶可自由搜索各種分類。同樣的思路，你也可以顯示分類，用戶在輸入區域進行搜索。在JavaScript的幫助下，用戶只需將滑鼠懸停在搜索框上，即可顯示類型或進行用戶自定義搜索，從用戶的角度講，這是一個很棒的選擇。

設計者必須避免的錯誤

我們在試用其它網站的搜索時發現他們在搜索框的顯示上犯了不少錯。這些都是些很常見的錯誤，如果你希望通過搜索框優化網站性能，那麼就必須得避免這些問題。

1. 隱藏搜索框

我們反復強調搜索框的明確顯示的必要性。不要把搜索框放在網站底部，放在網站的右上角效果會更好，如果網站設計得很混亂，用戶在沒有瀏覽到接近網站的底部時就已經離開網頁了。

2. 切忌輸入區域過短

為用戶提供所需范圍准確的輸入查詢。搜索框輸入區域太短只會讓用戶對搜索框感到失望，因為，他們不會在整個區域輸入想查詢的內容。再者，這也非常不方便用戶閱讀和回應。

3. 切忌提交按鈕過短

受網站設計限制，提交按鈕不應過長，但是太短又會讓用戶感到失望，因為他們在滑鼠點擊的准確性上又會有偏差，從而浪費搜索時間，還會被轉入到到一些不同頁面上。

4. 切勿將搜索框與其它菜單混排在一起

如果把搜索框和與新聞和導航條混排在一起，這是相當讓人不爽的事。這樣用戶很難在郵件訂閱或文章搜索欄中區分出搜索框。因此，搜索框應與其它菜單分開排列。

5. 過度設計搜索框

不要因為搜索框要顯眼，在設計時就受到影響。雖然搜索框要清晰地展現出來，但也不要設計過度，以免影響到它的直觀性。

6. 沒必要提供高級搜索工具

高級搜索當然會有它的用處，但這會使本來簡單的搜索變得更加復雜。因此，沒必要提供高級搜索工具，除非你是為了迎合懂技術的用戶。如果你只是搞定一般用戶，盡量保持搜索選項簡單。

7. 一個搜索框有多個提交按鈕

這條建議非常有意思，我們很少看到有網站設置了多個搜索提交按鈕，比如同時有「go」和「find」。很明顯，這會擾亂按鈕的選擇。

8. 如果在網站設計中，你遵從了以上建議，我們相信一個高效的搜索框能夠起到優化網站性能的作用。