2018-9-25 鶴鶴
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
一.為什么要做搜索功能
主要是方便用戶(hù)，讓用戶(hù)更便捷地從大量信息內(nèi)容中通過(guò)一些關(guān)鍵詞迅速找到自己感興趣的內(nèi)容；其次可以通過(guò)適當(dāng)?shù)囊龑?dǎo)設(shè)計(jì)來(lái)完成產(chǎn)品的商業(yè)需求
二 .搜索種類(lèi)
根據(jù)搜索識(shí)別內(nèi)容的不同，可分為語(yǔ)音搜索，圖像搜索及文字搜索，一般會(huì)根據(jù)產(chǎn)品業(yè)務(wù)的特點(diǎn)以及公司開(kāi)發(fā)能力結(jié)合多種搜索。語(yǔ)音搜索常見(jiàn)于音樂(lè)相關(guān)產(chǎn)品，通過(guò)識(shí)別聲音來(lái)找到某段音樂(lè)；圖像搜索常見(jiàn)于電商產(chǎn)品，電商行業(yè)商品種類(lèi)繁多，名稱(chēng)復(fù)雜，通過(guò)文字描述很難找到對(duì)應(yīng)商品，故用戶(hù)可通過(guò)商品條形碼或外觀來(lái)搜索對(duì)應(yīng)的商品，可以盡量縮小目標(biāo)商品范圍；由于目前常見(jiàn)的是文字搜索為主，故本文主要探討文字搜索
三.搜索流程及功能大綱
研究了諸多產(chǎn)品，按照最簡(jiǎn)單的搜索流程把搜索相關(guān)的功能或內(nèi)容都羅列出來(lái)，使用要根據(jù)自身產(chǎn)品，業(yè)務(wù)和用戶(hù)的特點(diǎn)做針對(duì)性設(shè)計(jì)，切勿一股腦兒照搬
四.搜索流程及功能詳細(xì)分析
接下來(lái)按照簡(jiǎn)化的搜索流程去看下每個(gè)步驟在設(shè)計(jì)的時(shí)候需要涉及哪些功能或內(nèi)容
4.1找到搜索入口
目前常見(jiàn)的有五種搜索入口，主要因?yàn)樽陨懋a(chǎn)品的業(yè)務(wù)以及搜索功能對(duì)于整個(gè)產(chǎn)品而言的重要程不同，通常在一個(gè)產(chǎn)品中也結(jié)合多種來(lái)使用
4.1.1 底部標(biāo)簽欄
入口：底標(biāo)簽欄，作為單獨(dú)一個(gè)版塊，
樣式：底標(biāo)簽欄的一個(gè)搜索icon，通常在搜索版面會(huì)結(jié)合導(dǎo)航欄中搜索框的樣式。
適用：目前采用該入口的產(chǎn)品相對(duì)較少，且版塊逐漸演變成“發(fā)現(xiàn)”“分類(lèi)”，通過(guò)推薦+搜索來(lái)讓用戶(hù)找到感興趣的內(nèi)容。適用于搜索功能占比非常大的業(yè)務(wù)形態(tài)
舉例：蘋(píng)果的apple store和music，印象筆記，專(zhuān)為搜索設(shè)置了一個(gè)版面。因?yàn)樗阉靼婷婵臻g足夠大，所以可供運(yùn)營(yíng)的空間比較大，可以結(jié)合產(chǎn)品業(yè)務(wù)對(duì)搜索版面進(jìn)行內(nèi)容豐富。例如拼多多的搜索，結(jié)合商品分類(lèi)
4.1.2 導(dǎo)航欄中的搜索框
入口：導(dǎo)航欄中間
樣式：搜索框+搜索icon+提示詞+（圖像icon/聲音icon）
搜索框+提示詞+搜索按鈕（文字或圖標(biāo)）
適用：將搜索框放在導(dǎo)航欄上，按照人眼正常的瀏覽順序，從上往下，從左往右，搜索框占據(jù)了比較重要的位置，用戶(hù)一眼就能看到，并且輕松進(jìn)入搜索流程，此類(lèi)適合對(duì)搜索功能依賴(lài)較重的產(chǎn)品，至少有一半用戶(hù)是通過(guò)搜索來(lái)獲取自己感興趣的內(nèi)容
舉例：該搜索入口是目前絕大多數(shù)產(chǎn)品的選擇，常見(jiàn)于電商，閱讀，音樂(lè)，影視等產(chǎn)品，如淘寶，小米有品，蝦米，愛(ài)奇藝，網(wǎng)易蝸牛等
4.1.3 導(dǎo)航欄邊的搜索按鈕
入口：導(dǎo)航欄邊
樣式：一個(gè)搜索icon
適用：此類(lèi)搜索在整個(gè)頁(yè)面的視覺(jué)比重弱了很多，適合對(duì)搜索功能依賴(lài)不深的產(chǎn)品，大部分用戶(hù)主要通過(guò)產(chǎn)品推薦來(lái)獲取信息，小部分會(huì)通過(guò)搜索，所以保留了搜索入口，僅僅弱化了樣式。此搜索入口還有個(gè)優(yōu)點(diǎn)，相比上一種節(jié)省了空間，可以在導(dǎo)航欄放置其他重要的功能
舉例：如支付寶的理財(cái)版塊，因?yàn)橹Ц秾毜挠脩?hù)群體較廣，所以它的理財(cái)版塊是針對(duì)非專(zhuān)業(yè)人士設(shè)計(jì)的，此時(shí)理財(cái)版塊更重視產(chǎn)品推薦而非搜索，故弱化了搜索的同時(shí)也方便部分用戶(hù)可以直接搜搜自己感興趣的理財(cái)內(nèi)容
4.1.4 隱藏的搜索框
入口：位于導(dǎo)航欄下方
樣式：搜索框+搜索icon+提示詞
適用：因?yàn)榇祟?lèi)搜索框入口通常不可見(jiàn)，只有當(dāng)用戶(hù)需要搜索功能時(shí)，通過(guò)某種手勢(shì)喚起后才可見(jiàn)。搜索在該產(chǎn)品中是相對(duì)較弱但是又有可能用到的一個(gè)功能。
舉例：ios的信息和微信首頁(yè)打開(kāi)后，搜索框都是隱藏的，只有當(dāng)下拉頁(yè)面時(shí)，搜索框才出現(xiàn)。
4.1.5 頁(yè)面中間的搜索表單
入口：頁(yè)面中間
樣式：通常是一組用于輸入多個(gè)限制條件的表單以及搜索按鈕。
適用：只能通過(guò)搜索來(lái)達(dá)到自己明確目的的產(chǎn)品，如票務(wù)，旅居之類(lèi)需要時(shí)間地點(diǎn)等更多條件才能明確搜索目標(biāo)的業(yè)務(wù)。
舉例：攜程，飛豬，螞蜂窩的機(jī)票業(yè)務(wù)版面，螞蜂窩的酒店預(yù)訂版面
此類(lèi)搜索流程和以上四種略有差異，本文暫不做展開(kāi)分析；
4.2 進(jìn)入搜索版面
通過(guò)上述對(duì)于入口的介紹，我們很快可以找到搜索入口，進(jìn)入搜索版面。
4.2.1 搜索框內(nèi)默認(rèn)提示詞
第一種：一般默認(rèn)提示詞會(huì)提醒用戶(hù)搜索哪些關(guān)鍵詞，比如搜索訂單編號(hào)，搜索商品名稱(chēng)等，適用于產(chǎn)品初期，用戶(hù)不太會(huì)玩，所以需要一個(gè)很好的引導(dǎo)（eg：MONO，花瓣網(wǎng)）
第二種：默認(rèn)提示詞也被用來(lái)進(jìn)行運(yùn)營(yíng)推廣，將業(yè)務(wù)需要的關(guān)鍵詞置于搜索框內(nèi)，用戶(hù)看到感興趣，直接搜索即可得到相應(yīng)結(jié)果，這可以用作活動(dòng)的流量入口。（eg：淘寶，蝦米）
4.2.2 歷史搜索
歷史搜索是之前搜過(guò)的關(guān)鍵詞集成的一個(gè)版塊，點(diǎn)擊任一關(guān)鍵詞即可跳轉(zhuǎn)到相應(yīng)內(nèi)容，因?yàn)榇蟛糠钟脩?hù)的喜好是固定的，搜索有一定的重復(fù)性，故通過(guò)選擇先前的記錄，進(jìn)一步幫助用戶(hù)節(jié)省時(shí)間，操作。當(dāng)然首次用搜索功能是沒(méi)有歷史搜索這塊內(nèi)容的。
因?yàn)闅v史搜索會(huì)越來(lái)越多，所以一般歷史搜索版塊會(huì)有一個(gè)全部刪除功能，用于清除歷史搜索（eg：淘寶）；部分業(yè)務(wù)還會(huì)有逐條刪除的功能，給了用戶(hù)比較大的自主權(quán)，留下常用的歷史搜索，刪掉不常用的（eg：微博，知乎）。除此外還會(huì)有顯示搜索記錄按鈕，因?yàn)榘婷嫦拗茖?dǎo)致當(dāng)前放不下較多的歷史搜索，只能展示部分搜索記錄，剩余會(huì)隱藏，點(diǎn)擊顯示后，搜索記錄全部顯示（eg：微博）
4.2.3 熱門(mén)搜索
熱門(mén)搜索一般會(huì)根據(jù)已有的搜索數(shù)據(jù)，放一些搜索頻次較高的關(guān)鍵詞，便于大部分用戶(hù)的快捷選擇；除此外就是運(yùn)營(yíng)層面的應(yīng)用，會(huì)放一些商品或者活動(dòng)入口的關(guān)鍵詞，增加活動(dòng)或商品曝光的機(jī)會(huì)。還可以通過(guò)視覺(jué)上的處理來(lái)突出想要突出的重點(diǎn)信息，比如加個(gè)品牌色，加個(gè)tag標(biāo)簽（eg：網(wǎng)易嚴(yán)選，微博）
因?yàn)槟承┊a(chǎn)品（新聞資訊類(lèi)，泛娛樂(lè)類(lèi)）的用戶(hù)對(duì)于資訊的獲取是大量的，源源不斷的，所以當(dāng)熱門(mén)搜索版塊的內(nèi)容較多時(shí)，需要考慮其交互方式，目前有三種交互方式，
第一種：加個(gè)更多按鈕，用一個(gè)新的頁(yè)面承載更多的熱搜內(nèi)容（eg：微博，優(yōu)酷）
第二種：先展示一部分，然后有按鈕可以在本頁(yè)面展開(kāi)更多（eg：蝦米）
第三種：用tabbar來(lái)承載不同分類(lèi)下的熱搜內(nèi)容，節(jié)約了空間，放下更多的內(nèi)容，同時(shí)有了明確的分類(lèi)，用戶(hù)更容易找到感興趣的東西（eg：優(yōu)酷）
4.2.4 取消/返回
用戶(hù)很有可能中途改變主意，不想搜索，所以必須給這類(lèi)用戶(hù)提供一個(gè)返回的途徑，讓其可以進(jìn)行搜索之外的其他選擇——退回上一頁(yè)（eg：同上配圖）
4.2.5 限定搜索范圍
由于某些業(yè)務(wù)范圍較廣，內(nèi)容較復(fù)雜，所以用戶(hù)在搜索頁(yè)面即可限定搜索范圍，讓搜索更為準(zhǔn)確
第一種：二級(jí)tabbar的切換，直觀且操作方便，適合于限定范圍頻繁的業(yè)務(wù)
（eg:淘寶，站酷）
第二種：搜索框左側(cè)文字按鈕，點(diǎn)擊后出現(xiàn)浮層選擇范圍；相對(duì)來(lái)說(shuō)，視覺(jué)上弱于上兩種，適合于使用限定范圍不太頻繁的業(yè)務(wù)（eg：大眾點(diǎn)評(píng)）
第三種：文字或者按鈕的不同范圍的入口，點(diǎn)擊后進(jìn)入該范圍內(nèi)的搜索。適用于目的性較強(qiáng)的搜索（eg：微信，京東金融）
4.2.6 其他推薦
名稱(chēng)可根據(jù)業(yè)務(wù)需求來(lái)定，是運(yùn)營(yíng)延展的一個(gè)版塊，多是推廣業(yè)務(wù)需求，作為流量入口，增加點(diǎn)擊量，從而提升銷(xiāo)量或播放量等業(yè)務(wù)相關(guān)數(shù)據(jù)；為了推薦更多的內(nèi)容，有些推薦版塊還會(huì)提供一個(gè)換一批的功能，便于用戶(hù)有更多的選擇，讓更多的內(nèi)容有曝光機(jī)會(huì)（eg：微信讀書(shū)，淘寶，天貓）
4.3 實(shí)時(shí)搜索和非實(shí)時(shí)搜索
可以根據(jù)是否實(shí)時(shí)給出搜索結(jié)果分為實(shí)時(shí)搜索和非實(shí)時(shí)搜索，主要還是看業(yè)務(wù)場(chǎng)景，還要結(jié)合開(kāi)發(fā)資源等因素，選擇適合的搜索。因?yàn)椴煌乃阉鞣绞綍?huì)有不同的樣式和功能，故分開(kāi)來(lái)分析接下來(lái)的流程
4.3.1 實(shí)時(shí)搜索
實(shí)時(shí)搜索就是當(dāng)輸入文字時(shí)，系統(tǒng)直接能根據(jù)給的關(guān)鍵字給出搜索結(jié)果
適用：適合小數(shù)量范圍內(nèi)的搜索，一般是搜索，適合在聯(lián)系人，好友，我關(guān)注的等有固定且明確的小范圍的業(yè)務(wù)中使用
此搜索中，輸入關(guān)鍵詞和得到搜索結(jié)果是同步進(jìn)行的
直接按照輸入的字給出對(duì)應(yīng)的結(jié)果（eg：通訊錄），當(dāng)內(nèi)容類(lèi)別較多時(shí)，會(huì)將結(jié)果的類(lèi)別也展示出來(lái)，便于用戶(hù)直接選擇想要的（eg：微信首頁(yè)）
若沒(méi)有匹配結(jié)果，一般有三種情況
第一種：無(wú)顯示（ios通訊錄）
第二種：文字提示“未搜到結(jié)果”（微博我的好友搜索）
第三種：文字提示+相似推薦等其他推薦（eg：大麥網(wǎng)）
4.3.2 非實(shí)時(shí)搜索
非實(shí)時(shí)搜索就是當(dāng)輸入關(guān)鍵詞后點(diǎn)擊搜索按鈕后才能得到搜索結(jié)果
適用：大量數(shù)據(jù)范圍的內(nèi)容搜索，一般是模糊搜索
4.3.2.1 輸入關(guān)鍵詞
a.給出與文字匹配的關(guān)鍵詞建議
根據(jù)輸入的字來(lái)預(yù)測(cè)用戶(hù)想要搜索的內(nèi)容，并實(shí)時(shí)給出相應(yīng)推薦，這種方式提前預(yù)測(cè)用戶(hù)想搜索的內(nèi)容，為用戶(hù)多考慮一步，減少輸字的步驟，讓用戶(hù)更方便，提供更好的用戶(hù)體驗(yàn)
樣式：搜索框下方，關(guān)鍵詞+詳細(xì)描述+（圖標(biāo)），關(guān)鍵詞一般用品牌色等來(lái)區(qū)分，圖標(biāo)的作用主要是為了示意用戶(hù)可點(diǎn)擊，一般是搜索圖標(biāo)或是箭頭，有些還會(huì)加上詳細(xì)類(lèi)別，便于用戶(hù)篩選（eg：淘寶，考拉，愛(ài)奇藝，知乎）
b.清除按鈕
方便用戶(hù)直接刪除輸入的多個(gè)關(guān)鍵字，為用戶(hù)提供方便，一般是個(gè)刪除按鈕，適用于所有搜索框場(chǎng)景（eg：淘寶，網(wǎng)易考拉的清除按鈕，配圖同上）
4.3.2.2 得到搜索結(jié)果
a.正常結(jié)果
當(dāng)?shù)玫秸５慕Y(jié)果頁(yè)時(shí)，除了正常的結(jié)果列表，還有其他功能幫助用戶(hù)更地搜索，常見(jiàn)的有三種情況
第一種：輔助挑選欄，里面一般有排序，篩選等功能，也是便于用戶(hù)在繁多的結(jié)果中按照自己的需求找到需要的內(nèi)容。適用于業(yè)務(wù)體系龐大且繁雜的業(yè)務(wù)（淘寶，京東）
第二種：分類(lèi)tabbar，能縮小范圍，便于用戶(hù)更地查找；適用于有明確類(lèi)別的業(yè)務(wù)（站酷，蝦米）
第三種：更細(xì)致的選擇標(biāo)簽，有多選也有單選，幫助用戶(hù)更精細(xì)的篩選（eg：衣二三）
b.無(wú)匹配結(jié)果
當(dāng)沒(méi)有搜到任何結(jié)果時(shí)，基本上會(huì)出現(xiàn)以下兩類(lèi)
第一種：無(wú)結(jié)果的提示（eg：京東，蝦米）
第二種：無(wú)結(jié)果的提示+推薦版塊（eg：網(wǎng)易嚴(yán)選，考拉海購(gòu)）
無(wú)結(jié)果的提示如果加上情感化設(shè)計(jì)可以用一些小插畫(huà)豐富畫(huà)面，提升體驗(yàn)；
當(dāng)用戶(hù)沒(méi)有找到想要的內(nèi)容，推薦版塊（猜你喜歡之類(lèi)的）可以提供給用戶(hù)一些其他選擇，也增大一些內(nèi)容的曝光
五. 總結(jié)
以上總結(jié)的都是常見(jiàn)的搜索功能，整個(gè)搜索流程還是涉及到不少內(nèi)容和板塊的，不單單只是一個(gè)搜索icon而已，而且還有其他細(xì)節(jié)可能沒(méi)梳理到位，不過(guò)也夠日常參考使用了。重要的是做每個(gè)步驟的時(shí)候都要思考，為什么這樣設(shè)計(jì)，所有的設(shè)計(jì)都是有理有據(jù)的，要結(jié)合產(chǎn)品定位，用戶(hù)群體，開(kāi)發(fā)資源，商務(wù)需求等來(lái)分析具體的搜索應(yīng)該怎么做，能解決問(wèn)題的設(shè)計(jì)才是好的設(shè)計(jì)。
藍(lán)藍(lán)設(shè)計(jì)( www.newchinaweekly.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、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án)藍(lán)設(shè)計(jì)的小編 http://www.newchinaweekly.com