2013-9-5 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( www.73404.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來(lái)源：http://www.54xiaomeng.com/?p=546
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
搜索能夠幫助用戶(hù)在海量的數(shù)據(jù)庫(kù)中實(shí)現(xiàn)大海撈針，是產(chǎn)品最核心的模塊之一。本篇是從設(shè)計(jì)的角度介紹搜索模塊，包含Web和ios兩個(gè)平臺(tái)，下面直接開(kāi)始正文：
1.快速搜索
搜索是幫助用戶(hù)簡(jiǎn)單快速的匹配相關(guān)內(nèi)容，最簡(jiǎn)單的search box主要包含兩個(gè)元素：①文本框 ②按鈕（可以隱藏用回車(chē)代替）
快速搜索是最基本的搜索模型，用戶(hù)輸入文字點(diǎn)擊按鈕或直接回車(chē)即可完成搜索。
2.垂直搜索
如果搜索引擎明確只是在海量數(shù)據(jù)庫(kù)中尋找一個(gè)特定的子集，那么這時(shí)候會(huì)使用到垂直搜索。垂直搜索主要元素包括：①文本框 ②按鈕 ③標(biāo)簽或下拉框。
▎下拉框模式
關(guān)于下拉框前置與后置，我在公司也與同事進(jìn)行過(guò)討論，有幾種說(shuō)法：
①.業(yè)務(wù)人員覺(jué)得: 下拉框前置會(huì)減少產(chǎn)品曝光量，增加商情和廠(chǎng)商的曝光量，這樣的結(jié)果對(duì)網(wǎng)站來(lái)說(shuō)弊大于利。（B2B網(wǎng)站類(lèi)）
②技術(shù)控覺(jué)得:用戶(hù)操作習(xí)慣是 鼠標(biāo)→鍵盤(pán)輸入→回車(chē)（搜索），如果下拉框后置就會(huì)打斷這樣連貫的操作。
③調(diào)研同類(lèi)網(wǎng)站發(fā)現(xiàn)下拉框內(nèi)容較少的時(shí)候前置，內(nèi)容分類(lèi)較多的時(shí)候后置。
▎標(biāo)簽?zāi)Ｊ?a style="border:0px;font-family:inherit;font-size:15px;font-style:inherit;margin:0px;outline:0px;padding:0px;vertical-align:baseline;color:#195685;text-decoration:none;">
標(biāo)簽?zāi)Ｊ奖容^適合獨(dú)立的搜索框，相比下拉框模式更具有引導(dǎo)性。但視覺(jué)元素復(fù)雜，不太適合在頁(yè)面內(nèi)容較多的頁(yè)面。淘寶首頁(yè)的頂部的視覺(jué)元素已經(jīng)顯得雜亂了，但堅(jiān)持這樣做應(yīng)該是為了最大化的推廣天貓和兼容老用戶(hù)的操作習(xí)慣。
ios樣式
3.查詢(xún)建議工具
查詢(xún)建議工具有好幾種說(shuō)法：提前鍵入（type-ahead)、搜索建議（suggest)或者自動(dòng)填充（autofill），也可以稱(chēng)呼為實(shí)時(shí)搜索。主要目的基本上是為了減少用戶(hù)輸入和推廣相關(guān)詞組。下面直接看圖例：
ios樣式
4.關(guān)聯(lián)搜索
關(guān)聯(lián)搜索主要用于地圖路線(xiàn)搜索，我也不知道還有什么地方用的到，就簡(jiǎn)單介紹一下：
5.高級(jí)搜索
高級(jí)搜索是為了讓搜索結(jié)果匹配，普遍應(yīng)用與電子商務(wù)網(wǎng)站。通常的樣式是一堆篩選條件+搜索按鈕。
因?yàn)閕so平臺(tái)上不存在下拉框控件的操作，所以ios平臺(tái)上的高級(jí)搜索都是通過(guò)列表跳轉(zhuǎn)的方式來(lái)實(shí)現(xiàn)高級(jí)搜索。
6.過(guò)濾器
大都數(shù)人都不喜歡使用高級(jí)搜索，為了匹配搜索結(jié)果頁(yè)面，所以在結(jié)果列表頁(yè)面都會(huì)添加過(guò)濾器。過(guò)濾器實(shí)際上就是對(duì)當(dāng)前子集的二次搜索。過(guò)濾器的設(shè)計(jì)非常的講究，以后的文章為重點(diǎn)講解，本章就簡(jiǎn)單介紹一下：
國(guó)內(nèi)的網(wǎng)站因?yàn)榭紤]右側(cè)賣(mài)banner廣告位，過(guò)濾器都會(huì)放置在頂端位置：
國(guó)外的習(xí)慣將過(guò)濾器放置在左側(cè)，可以一般看圖一邊篩選：
在ios平臺(tái)上大都數(shù)應(yīng)用都會(huì)設(shè)計(jì)快速搜索+過(guò)濾器的模型：
7.Best bet
best bet可以翻譯為更好的選擇，當(dāng)產(chǎn)品運(yùn)營(yíng)一段時(shí)間后積累了一定規(guī)模的訪(fǎng)問(wèn)量，可以從訪(fǎng)問(wèn)數(shù)據(jù)中為用戶(hù)提供更好的選擇。看看相關(guān)網(wǎng)站是如何做到這一點(diǎn)的：
8.搜索結(jié)果
搜索的最終結(jié)果會(huì)以列表或櫥窗的視圖呈現(xiàn)，這是整個(gè)開(kāi)發(fā)團(tuán)隊(duì)都希望看到的結(jié)果，但如果沒(méi)有匹配的結(jié)果出現(xiàn)，設(shè)計(jì)人員還需要鼓勵(lì)用戶(hù)重新搜索或更換關(guān)鍵詞：
總結(jié)
搜索是電商網(wǎng)站最最核心的一個(gè)模塊，做好這個(gè)模塊需要優(yōu)秀的工程師和一定規(guī)模的訪(fǎng)問(wèn)量，但作為設(shè)計(jì)師也必須對(duì)這個(gè)模塊有足夠的了解，這樣才能做出優(yōu)秀體驗(yàn)的設(shè)計(jì)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.73404.com.cn