❶ 如何設計搜索框
所謂搜索框,實際上就是一個輸入域和提交按鈕的組合。有人可能會認為搜索框並不需要設計, 畢竟它只涉及到兩個簡單的元素。然而,在那些重內容的網站上,搜索框常常都是用戶最用到的設計元素。當用戶遇到一個相對復雜的網站時,他們往往會首先尋找這個網站內的搜索框,以便能快速高效地到前往自己想去的頁面或找到自己最為關心的內容。因此,搜索框的設計及其可用性問題其實是一個不容忽視的要點。
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 技術使得我們可以很輕松地在輸入框中寫明作為佔位符的提示文本。)
結論:
對於創建一個重內容的應用程序或網站而言,搜索理應作為一個基本的操作和關鍵要素。即使小幅的改進(例如使搜索框長度更合適或者指明可以搜索哪些信息)都可以顯著增加搜索的可用性以及整體的用戶體驗。
❷ 怎樣在網頁加入搜索的功能
分類: 電腦/網路 >> 互聯網
問題描述:
最近在做我自己主頁,我想在頁面中加入搜索功能,比如有的網頁上有綜合搜索功能,我只想加入網路,可是,我從別的網頁上弄下來的代碼放進去後,不能用!應該怎麼弄啊?比如:7939/上的綜合搜索一樣的。
解析:
這個經過測試,所有殺毒軟體都不起作用。。所以要手動刪除!
有人說用超級兔子之類的能有用,但經過本人實驗,不能根本上根除這個木馬!
(一)首先按CTRL+ALT+DEL在任務管理中把進程Realplayer.exe結束掉!
(二)打開我的電腦!選工具——文件夾選項——查看(快捷鍵按ALT+T再按O)中的"隱藏受保護的操作系統文件(推薦)"的勾取消,把"顯示所有文件和文件夾"選中!
(三)把WINDOWS\system32\Realplayer.exe找到!按CTRL+F查找Realplayer.exe更快!(這就是一個木馬腳本程序,沒在安全模式下刪除不掉,經過我反復實驗終於找到刪除的辦法)
打開任務管理把進程中的explorer.exe結束掉,接著桌面變消失了,不怕!選中任務管理器的「文件(F)」——「新任務(運行。。)(N)」然後運行explorer.exe桌面就又出來了!接著把在system 32中的Realplayer.exe刪除
(四)在開始——運行中輸入regedit按CTRL+F查找Realplayer.exe把查到的值刪掉再按F3查。知道把所有的值都刪完!
(五)運行「regedit」命令,按以下路徑: HKEY_CURRENT_USER\Sofare\Microsoft\Inter Explorer\Main 顯灰到這個項 然後就在右邊就可以找到: Start Page 這個鍵值了 雙擊改成"about:blank」
然後右擊Inter Explorer選屬性點使用空白就好了!(接下來如果不是菜鳥就在注冊表中搜索 7939 把查到的項,值都刪除掉!)
至此大功告成!
❸ 網頁怎麼製作搜索框
方法/步驟
1
首先,我們打開自己建了一半的網頁或者是新建一個頁面,個人建議用HTML5。
2
然後,我們開始編寫代碼。搜索框要有輸入框和搜索按鈕兩部分組成,我用的都是input
3
我們會在input框的外面再套一個標簽,我是仿照網路搜索的樣子,在input的外面套了一個span標簽,在最外層套了一個form表單
4
我們的第一個input框是用來輸入文字的,其type類型應該是text,第二個是搜索的,我用的type類型是submit(提交),
5
這樣一個簡單的搜索框就算是做出來了,我們可以在瀏覽器中查看一下。可以看到兩個框之間是有一定的距離的,這個就需要我們重新定位提交按鈕的位置
6
我採用的是relative定位方法,將第二個input框的位置定位為left-:10px。這樣剛好和前面的輸入框的邊重合
7
這樣一個基本的搜索框就做好了,我們可以再調整一下框的高度和寬度,以及整體的位置,使得這個搜索框更加美觀大方。
❹ 怎麼用yandex網站搜索想要的內容
跟正常瀏覽器一樣進行搜索操作就可以。
打開瀏覽器,輸入Yandex的瀏覽器搜索框中輸入搜索。然後在搜索狗結果中,根據需要單擊其中一個,然後在打開的頁面中單擊本地下載,然後在彈出的頁面中單擊下載。
下載完成後,解壓縮,解壓縮,你可以看到它有兩個程序文件,一個是32位,另一個是64位,選擇按需要安裝。雙擊安裝程序,它將在一段時間後安裝,然後您可以在桌面上看到yandex瀏覽器的快捷方式。
在桌面上,然後雙擊該快捷方式Yandex的瀏覽器打開它,就可以正常使用這個瀏覽器了。首先,我們在桌面上打開Yandex瀏覽器。此時,我們將看到頁面顯示我們無法訪問該頁面。別擔心。我們點擊頁面右上角的三個垂直點。然後在彈出窗口中單擊[設置]。然後我們拉下頁面,在搜索引擎處切換yandex到任意網站,使用後,單擊右上角關閉瀏覽器。
❺ 如何在網頁中實現搜索功能
有三種常見的方式
1、自己設計表單、編程、與資料庫鏈接檢索。
2、在網路或谷歌注冊申請站內搜索功能。獲得代碼,添加到自己的頁面中。
3、使用第三方的工具軟體,搭建檢索功能
下面是製作』PHP搜索』功能
准備:
資料庫(mysql):一個資料庫(search),庫裡面一個表(title),表裡面一個欄位(name).
PHP頁面:兩個頁面(index.php search.php)
製作工具:Dreamweaver
開始:
——————————————————
第一步.創建資料庫.(目前大家應該都是用的phpmyadmin來操作資料庫的吧?)
建立一個資料庫.
第二步.建表
在剛建立的search資料庫里插入一個名字為title的表.建表時讓你選插入幾個欄位.寫1就可以了.
第三步.建欄位
插入的欄位命名為name,長度值20就可以了.
—–資料庫部分已經做完,接下來是網頁部分—–
第四步.建立兩個頁面
建立兩個文件:index.php和search.php可以使用記事本等文本工具直接建立.我使用的工具是Dreamweaver(方便嘛.呵呵).
第五步.index.php的頁面製作.
這個頁面是用來傳遞你搜索的關鍵字的.代碼如下:
這段代碼是建立一個FORM表單.專門用來提交數據的.
第一行是FORM表單的開始.它的傳遞方式是post,傳遞到search.php這個頁面.表單名為name.
第二行是文本域和提交按鈕.文本域命名為search,按鈕默認就可以了.
第三行是FORM表單的結束語句.
第五步.search.php的頁面製作.
這個頁面很關鍵.因為他是獲取index頁面傳遞過來的值,然後導出搜索的數據.
首先要綁定你建立的search資料庫,我用的DW生成的.
上一個頁面傳送的文本域是search.所以,這里需要建立一個search變數.來接收你輸入的關鍵詞.用以下語句定義變數:
<?php
$searchs = $_POST['search'];
?>
然後建立一個記錄集,選擇高級.SQL語句中填寫:
SELECT *
FROM title
WHERE name like 『%$searchs%』
這句的意思是選擇title表裡面的所有欄位(*),然後查詢name中的$searchs變數。這個變數也就是你在index中輸入的值啦。
然後在BODY裡面綁定一個動態文本。選擇NAME。
—–網頁部分完成.真個搜索功能也就完成了—–
❻ html5搜索框是怎麼實現搜索功能的
搜索功能需要結合網站程序功能來實現,一般主流程序都有搜索功能的。
html5隻是一個界面的美觀,自身沒有搜索功能。
也可以使用網路等搜索引擎的站內搜索,配合html5顯示效果更佳。
❼ 北大青鳥設計培訓:常用的搜索框設計的七大技巧
1.使用放大鏡圖標根據定義,圖標是對象,動作或想法的可視化表示,並且有幾個圖標是用戶記憶最深刻的,也是通用的。
沈陽北大青鳥http://www.kmbdqn.cn/認為放大鏡圖標就是其中之一。
即使沒有文字標簽,用戶也可以識別放大鏡圖標的作用。
2.將搜索框放在用戶希望找到的地方如果搜索對於你的應用或網站來說是重要的功能,那麼搜索框必須放在顯眼的位置,讓用戶一眼就能找到。
研究發現,搜索框放置的最佳位置是你網站上每個頁面的左上角或右上角,用戶可以使用常見的F形掃描模式輕松找到它。
理想情況下,搜索框應該完美匹配網站的整體設計,並在用戶需要時輕松展現。
3.為搜索框提供搜索按鈕搜索按鈕可以幫助人們了解還有額外的觸發操作_即使他們通常使用Enter鍵。
4.將搜索框放在每一頁上始終提供對每個頁面的搜索框的訪問許可權,因為如果你的用戶找不到他們正在查找的內容,他們將會使用搜索功能,無論他們處於你網站的哪個位置。
5.使搜索框簡單如果你設計一個搜索框,請確保它看起來像一個搜索框,並盡可能簡單的使用。
根據可用性研究,默認情況下沒有顯示高級搜索選項,這樣更加顯示用戶友好。
高級搜索選項可能會混淆將嘗試使用它的用戶。
6.自適應欄位大小輸入欄位太短是設計人員常見的錯誤。
當然用戶可以鍵入長查詢,但只有一部分文本可見,部分文字被隱藏,這意味著可用性差。
因為用戶無法輕松查看和編輯其查詢。
實際上,當搜索框能夠輸入的文本有限時,用戶被迫使用短的文本進行查詢,這樣就不能精確的查詢。
如果輸入欄位根據其預期輸入進行大小調整,那麼它們更容易閱讀並給用戶提供良好的用戶體驗。
7.使用自動建議機制自動建議機制可以幫助用戶通過輸入的字元進行預測來找到正確的查詢。
自動建議機制不是加快搜索過程,而是關於指導用戶並幫助他們構建搜索查詢。
用戶在查詢配置方面非常差:如果在第一次嘗試時沒有獲得良好的結果,他們可能就放棄了。
自動建議機制可以幫助用戶更好地表達他們需要的搜索查詢。
❽ 用DW製作網頁時怎樣在頁面中加入搜索欄
1、新建一個asp頁面,保存為「sousuojieguo.asp」。
❾ 搜索框是什麼
搜索框一種常見的交互控制項,用於精準提取海量的信息中的准確內容。搜索框幾乎存在所有的網站和APP中,尤其是海量內容為導向的產品之中,例如音樂庫、電商類網站,做好搜索(框)尤其重要。
一些電商網站,巧妙利用搜索框中預置的詞,可以達到活動推薦的效果,例如搜索框內置「油煙機」一詞,用戶只需通過點擊搜索即可直達結果頁或者活動頁面。
(9)網站搜索框怎麼用擴展閱讀
搜索框的類別
(1)隱藏式搜索框
只提供一個放大鏡圖標,需要再點擊圖標跳轉到搜索頁面;或者是需要下拉時才出現,例如微信首頁的搜索框。
(2)普通搜索框
通常固定在頁面頂部,包含搜索框的普通要素(放大鏡+線框)。
(3)有提示搜索框
此類搜索框的特徵是,中間有提示語,通常這類的都可以復合搜索,例如可以搜名稱或者代碼。
(4)含圖片搜索框
顧名思義,與普通搜索框相比,增加可以「以圖識圖」的搜索功能,例如淘寶就可以通過上傳圖片,搜索與圖片同類的商品。
❿ 如何在網站中加入站內搜索功能
一、什麼是站內搜索
站內搜索是相對於網站本身而言的一種搜索狀態,用戶一般情況下可以利用站內搜索在本站內運行各種搜索需求,而無法跨網站進行。
二、如何在網站中加入站內搜索功能
這里以wordpress程序安裝網路站內搜索功能為例進行講解:
1、在網路搜索引擎中搜索「站內搜索」關鍵詞,進入網路站內搜索官網