搜索框(Search Box)

問題

用戶需要找到一個項目或者特定的信息赁酝。

解決方案

提供搜索犯祠。

From www.tucows.com

何時使用

任何一個已經(jīng)有主導航的網(wǎng)站,用戶可能想要在一個類別里尋找一個項目或者想要進一步詳述一個問題酌呆?衡载。

如何用

1.搜索界面
提供包括一個搜索文案,關鍵字輸入框肪笋,過濾(如果需要)和“搜索”按鈕 的搜索功能月劈。按下回車鍵有著和點擊“搜索”按鈕有著相同的效果。同時在一個獨立的頁面里提供搜索小貼士(Search Tips)和例子藤乙,并在搜索功能的旁邊放上這個頁面的鏈接猜揪。搜索的輸入框要足夠大到能夠放下用戶最常用的三個問題(一般在20個字符左右)。如果過濾條件多過兩個坛梁,使用下拉列表框來承載條件的選擇而姐,否則使用單選框。

搜索--輸入框-- 在--過濾條件--搜索按鈕
或者僅僅是
--輸入框--搜索按鈕

2.展示搜索結(jié)果
搜索結(jié)果在一個至少包括“搜索結(jié)果”或者其他清晰標題的新頁面呈現(xiàn)划咐。搜索功能在頁面的頂部重復出現(xiàn)拴念,并且為了讓用戶知道當前搜索的關鍵字,輸入框里要顯示這個關鍵字褐缠。

呈現(xiàn)搜索命中的數(shù)量政鼠,并且結(jié)果列表是有組織和順序的,匹配程度最好的結(jié)果呈現(xiàn)在最前面队魏。當有多于10條以上的結(jié)果公般,使用翻頁(Paging)機制。每一個搜索結(jié)果呈現(xiàn)結(jié)果本身的鏈接和一段介紹的文字胡桨。如果能夠有一個總結(jié)或概要放在每個結(jié)果的第一行文字上是最好的官帘。結(jié)果一般是這樣的:
a.頁面標題
b.描述
c.分類
d.URL,尺寸昧谊,日期

3.關鍵字匹配
如果搜索引擎需要搜索多個字段刽虹,那么需要遵守如下規(guī)則:如果沒有使用特定的分隔符(不包括空格),搜索應該被翻譯成“或”邏輯呢诬,同時匹配兩個字段的結(jié)果在列表中優(yōu)先呈現(xiàn)涌哲。如果使用了特殊的分隔符,搜索引擎必須能夠應對自如尚镰。例如:有些時候使用“+”和“-”或“包括”和“不包括”來表達“與/或”邏輯膛虫,搜索引擎必須能夠正確的識別。同時搜索引擎還必須能夠容忍至少一個字符的拼寫錯誤钓猬。

為什么

通過使用以上的設計模式,整個搜索讀起來就變得好像是搜索問題的句子撩独。

更多案例

From tucows

在這個來自 tucows 的例子里敞曹,實際上設計師能夠讓這個輸入框讀起來就像一個句子:用戶能夠“下載針對于win2000的軟件安裝包”...

原文鏈接:
http://www.welie.com/patterns/showPattern.php?patternID=search

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末账月,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子澳迫,更是在濱河造成了極大的恐慌局齿,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,546評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件橄登,死亡現(xiàn)場離奇詭異抓歼,居然都是意外死亡,警方通過查閱死者的電腦和手機拢锹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,224評論 3 395
  • 文/潘曉璐 我一進店門谣妻,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人卒稳,你說我怎么就攤上這事蹋半。” “怎么了充坑?”我有些...
    開封第一講書人閱讀 164,911評論 0 354
  • 文/不壞的土叔 我叫張陵减江,是天一觀的道長。 經(jīng)常有香客問我捻爷,道長辈灼,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,737評論 1 294
  • 正文 為了忘掉前任也榄,我火速辦了婚禮巡莹,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘手蝎。我一直安慰自己榕莺,他們只是感情好,可當我...
    茶點故事閱讀 67,753評論 6 392
  • 文/花漫 我一把揭開白布棵介。 她就那樣靜靜地躺著钉鸯,像睡著了一般。 火紅的嫁衣襯著肌膚如雪邮辽。 梳的紋絲不亂的頭發(fā)上唠雕,一...
    開封第一講書人閱讀 51,598評論 1 305
  • 那天,我揣著相機與錄音吨述,去河邊找鬼岩睁。 笑死,一個胖子當著我的面吹牛揣云,可吹牛的內(nèi)容都是我干的捕儒。 我是一名探鬼主播,決...
    沈念sama閱讀 40,338評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼刘莹!你這毒婦竟也來了阎毅?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,249評論 0 276
  • 序言:老撾萬榮一對情侶失蹤点弯,失蹤者是張志新(化名)和其女友劉穎扇调,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體抢肛,經(jīng)...
    沈念sama閱讀 45,696評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡狼钮,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,888評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了捡絮。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片熬芜。...
    茶點故事閱讀 40,013評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖锦援,靈堂內(nèi)的尸體忽然破棺而出猛蔽,到底是詐尸還是另有隱情,我是刑警寧澤灵寺,帶...
    沈念sama閱讀 35,731評論 5 346
  • 正文 年R本政府宣布曼库,位于F島的核電站,受9級特大地震影響略板,放射性物質(zhì)發(fā)生泄漏毁枯。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,348評論 3 330
  • 文/蒙蒙 一叮称、第九天 我趴在偏房一處隱蔽的房頂上張望种玛。 院中可真熱鬧,春花似錦瓤檐、人聲如沸赂韵。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,929評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽祭示。三九已至,卻和暖如春谴古,著一層夾襖步出監(jiān)牢的瞬間质涛,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,048評論 1 270
  • 我被黑心中介騙來泰國打工掰担, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留汇陆,地道東北人。 一個月前我還...
    沈念sama閱讀 48,203評論 3 370
  • 正文 我出身青樓带饱,卻偏偏與公主長得像毡代,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,960評論 2 355

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,152評論 25 707
  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫月趟、插件灯蝴、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,105評論 4 62
  • 打開一個星期鮮少打開的播放器,在搜索引擎輸入“夢想合伙人”孝宗,就這樣,自己又一次開始了新的旅途…… 這部電影不算...
    糖醋小丸子閱讀 662評論 0 0
  • 世界不是一座體育場而是一片青草地耕肩;生活不是一場賽跑而是各人在青草地上一次自顧自的散步因妇。
    郭綠獅閱讀 163評論 0 1
  • 是深夜。 導航將我們引向陌生的地方猿诸,舊屋婚被,路燈,無盡的荒涼梳虽,仿佛上個世紀遺留下來的房屋透著森森的冷意址芯,與此截然相反...
    山有扶蘇_1fb5閱讀 194評論 0 0