Day1:搜索框的設(shè)計(jì)（2days 4hours）
【學(xué)習(xí)part1—交互】
輸入框和提交按鈕的組合，頻率最高的組件。
設(shè)計(jì)范例：
·使用放大鏡圖標(biāo)（使用大眾理解趨于一致的圖標(biāo)）
·搜索框明顯
·增加搜索按鈕：讓用戶可以同時(shí)通過按回車和點(diǎn)擊按鈕去觸發(fā)搜索。其實(shí)還是有很多用戶習(xí)慣去點(diǎn)擊頁(yè)面上的按鈕。
·為每一個(gè)張頁(yè)面加上搜索框：當(dāng)用戶找不到他們想要的內(nèi)容的時(shí)候，他們會(huì)去找搜索框，不管他們?cè)谀憔W(wǎng)站的哪個(gè)位置。（？？）
·把搜索框放在用戶想出現(xiàn)的位置：，網(wǎng)站的左上角和右上角是用戶所期待的搜索框的位置，用戶在使用F型掃視法查看內(nèi)容的時(shí)候，可以輕松找到搜索框。
·合適的輸入欄尺寸：讓輸入欄長(zhǎng)度大概保持在27個(gè)字左右（英文）就可以滿足90%的情況了。
·請(qǐng)為用戶列出自動(dòng)候選項(xiàng)：歷史記錄、關(guān)聯(lián)詞語(yǔ)、拼音修正
Tips:
確保自動(dòng)候選欄是有用的。不好的候選項(xiàng)反而會(huì)讓用戶困惑。使用拼寫修正，辨別輸入，并且預(yù)測(cè)用戶想要搜索的內(nèi)容以為了提高使用體驗(yàn)。
你應(yīng)該以最快的速度列出建議選項(xiàng)，大概三個(gè)字左右，就要快速列出候選項(xiàng)了，以來(lái)減少用戶后面的輸入。
控制在十個(gè)選項(xiàng)之內(nèi)，不要用滾動(dòng)條，以讓信息不會(huì)過多。
支持鍵盤選擇，當(dāng)用戶選到最后一個(gè)選項(xiàng)時(shí)，下一個(gè)選項(xiàng)應(yīng)該轉(zhuǎn)到第一個(gè)。ESC鍵應(yīng)該可以讓用戶離開候選列表。
標(biāo)出輸入與建議信息的不同處（例如：輸入信息用一般字重，建議信息用加粗字重）。
·請(qǐng)讓用戶更加清楚什么可以搜索
Part2 搜索框的產(chǎn)品設(shè)計(jì)
思路1：基于步驟的搜索設(shè)計(jì)（轉(zhuǎn)自菜花談產(chǎn)品）
第1步：輸入關(guān)鍵詞
信息錄入目前來(lái)說(shuō)最常見的就是文字錄入，不過現(xiàn)在我們也開始看到新興的錄入方式：語(yǔ)音錄入和圖片錄入。
輸入關(guān)鍵詞這步主要考慮的包含2部分：關(guān)鍵詞識(shí)別和關(guān)鍵詞推薦
1、關(guān)鍵詞識(shí)別
對(duì)于輸入關(guān)鍵詞的識(shí)別上，通常要考慮以下幾種情況的搜索需求：
（1）多字符串識(shí)別
假設(shè)用戶提交了不只一個(gè)查詢串，那么搜索引擎需根據(jù)分隔符比如空格,標(biāo)點(diǎn)符號(hào),將查詢串分割成若干子查詢串。例如，用戶輸入“氣墊 粉底 BB” 和“氣墊，粉底，BB” ，會(huì)展示所有包含“氣墊” 或“粉底”或 “BB” 三個(gè)關(guān)鍵詞的商品，而非同時(shí)包含這三個(gè)關(guān)鍵詞的商品。
根據(jù)下圖我們看到，小紅書和網(wǎng)易考拉都做了這種識(shí)別。不論輸入空格還是逗號(hào)，查詢結(jié)果都是一致的。
（2）分詞
除了多查詢串的識(shí)別，對(duì)長(zhǎng)查詢串的分詞識(shí)別也是搜索最基礎(chǔ)的要求之一。分詞就是當(dāng)用戶提交了一個(gè)長(zhǎng)字符串，可根據(jù)詞義分割成若干字符串。例如用戶輸入“遮瑕氣墊粉底bb霜”，能拆分成“遮瑕” “氣墊” “粉底” “bb霜”幾個(gè)詞串進(jìn)行匹配，而不是只匹配與搜索詞串完全相同的結(jié)果。
（3）錯(cuò)別字識(shí)別
用戶在搜索時(shí)輸入錯(cuò)別字也是不可避免的情況。例如，用戶搜索“永衣”，能給用戶按“泳衣”關(guān)鍵詞進(jìn)行推薦。
（4）同義詞近義詞
為了最大可能覆蓋用戶想要的結(jié)果，可建立一個(gè)同義詞近義詞的詞庫(kù)，當(dāng)沒有完全符合搜索詞的結(jié)果時(shí)，可推薦近義詞或同義詞的搜索結(jié)果，例如，在考拉中，用戶搜“花露水”，系統(tǒng)推薦了“驅(qū)蚊”關(guān)鍵詞的結(jié)果，并推薦了另2個(gè)相關(guān)關(guān)鍵詞。
（5）重復(fù)內(nèi)容識(shí)別
假設(shè)用戶提交的查詢有重復(fù)的內(nèi)容，可將重復(fù)查詢歸并成一個(gè)處理。例如“遮瑕氣墊粉底bb粉底”，能去重分詞為：“遮瑕”“氣墊”“粉底”“bb”
6）英文字母數(shù)字識(shí)別
查詢串中包含英文字母或數(shù)字，將英文或數(shù)字作為一個(gè)整體保留，做模糊匹配。例如：“sulwhasoo面膜”被拆分為“sulwhasoo”“面膜”
1）歷史搜索
歷史搜索詞就是推薦用戶自己最近搜索過N個(gè)關(guān)鍵詞，避免用戶重復(fù)輸入，支持用戶手工清空
（2）熱門搜索
熱門搜索一般有兩種做法：
一是根據(jù)用戶搜索的關(guān)鍵詞熱度進(jìn)行排序，獲取真實(shí)的熱門關(guān)鍵詞進(jìn)行推薦
二是受商業(yè)價(jià)值驅(qū)動(dòng)，推薦從商業(yè)角度，最希望用戶搜索查詢的內(nèi)容。這會(huì)有一個(gè)供運(yùn)營(yíng)配置的后臺(tái)，由運(yùn)營(yíng)人工配置。
當(dāng)然也可以綜合以上兩種方式，兼而有之。
第2步：確定關(guān)鍵詞
確定關(guān)鍵詞為了幫助用戶用最小的成本獲取最準(zhǔn)確的關(guān)鍵詞，關(guān)鍵詞聯(lián)想也是搜索的基本功能。聯(lián)想關(guān)鍵詞一般來(lái)自兩個(gè)渠道：
一是所有用戶歷史熱搜的關(guān)鍵詞
二是自建的常用關(guān)鍵詞庫(kù)
當(dāng)用戶輸入的關(guān)鍵詞被包含匹配到以上兩類關(guān)鍵詞時(shí)，則被列入聯(lián)想詞列表。
第3步：搜索結(jié)果
1、檢索范圍
搜索范圍的規(guī)則制定也是搜索設(shè)計(jì)最基礎(chǔ)的環(huán)節(jié)。是決定用戶搜索關(guān)鍵詞跟什么內(nèi)容去做匹配的問題。同時(shí)，影響到搜索權(quán)重。
跟什么內(nèi)容做匹配，也取決于用戶搜索場(chǎng)景的分析。例如用戶想搜索的是商品，則應(yīng)該跟商品屬性做匹配，那具體是哪些屬性，優(yōu)先級(jí)如何，就是需要制定的規(guī)則。
商品而言，可以跟商品名稱、商品關(guān)鍵詞、商品詳情等屬性進(jìn)行匹配，且商品名稱的權(quán)重>商品關(guān)鍵詞>商品詳情。
有的平臺(tái)可能沒有商品關(guān)鍵詞庫(kù)，商品詳情也用純圖片展示，那就只跟商品名稱做匹配。
所以具體匹配的屬性需根據(jù)不同的實(shí)際情況而定。
2、呈現(xiàn)方式
對(duì)搜索結(jié)果的呈現(xiàn)方式也是值得研究的點(diǎn)。同樣需要從用戶發(fā)起搜索的場(chǎng)景思考。
還是以小紅書為例，用戶的搜索需求有三種，搜索內(nèi)容、商品、用戶。
如果用戶從商城搜索，那搜索結(jié)果默認(rèn)定位至商品列表是最符合場(chǎng)景的，同理，如果用戶從社區(qū)進(jìn)入搜索，那默認(rèn)定位至社區(qū)內(nèi)容TAB
但是有的產(chǎn)品首頁(yè)是一個(gè)綜合頁(yè)，包含了所有內(nèi)容模塊，如果用戶是從首頁(yè)搜索，那在不清楚用戶想搜索的到底是哪一部分內(nèi)容的情況下，需定位至綜合結(jié)果頁(yè)。綜合結(jié)果頁(yè)會(huì)羅列出幾部分中相關(guān)性最高的幾個(gè)搜索結(jié)果供用戶選擇。綜合結(jié)果的設(shè)計(jì)可以參考微信搜索結(jié)果頁(yè)。
第4步：細(xì)化篩選
通常在搜索結(jié)果里，都會(huì)默認(rèn)按照相關(guān)度排序。但是也允許用戶按需從其它維度進(jìn)行排序篩選?？珊Y選的條件跟搜索結(jié)果所屬的特性強(qiáng)相關(guān)。例如，如果是商品列表，那可以考慮根據(jù)商品的價(jià)格、分類、銷量、功能等排序。如果是一個(gè)平臺(tái)電商，那還可以根據(jù)品牌等進(jìn)行篩選。
除了考慮商品本身的屬性進(jìn)行篩選外，還要從商業(yè)利益的角度，把最想展示給用戶的商品組合成一個(gè)分類，方便用戶刪選，例如考拉的分類中，加入了“618”活動(dòng)商品、考拉自營(yíng)等分類。
剛才說(shuō)的都是搜索結(jié)果過多的情況下應(yīng)該怎么辦。我們還應(yīng)該考慮的是搜索結(jié)果為零的時(shí)候，我們?nèi)绾谓o用戶設(shè)計(jì)合適的空頁(yè)面。
現(xiàn)在一些搜索結(jié)果是通過加載一個(gè)新的頁(yè)面來(lái)展示的，如果我們不給用戶說(shuō)清楚。用戶會(huì)誤以為是網(wǎng)絡(luò)原因?qū)е马?yè)面加載失敗而不是搜索不到你想要的商品。所以空頁(yè)面設(shè)計(jì)一定要向用戶解釋清楚原因。
二、搜索數(shù)據(jù)的跟蹤
數(shù)據(jù)驅(qū)動(dòng)產(chǎn)品，是做任何產(chǎn)品都需要具備的意識(shí)。搜索也不例外。搜索上線后，我們需要監(jiān)控哪些數(shù)據(jù)來(lái)幫助我們不斷優(yōu)化搜索功能呢？
1、用戶搜索路徑及漏斗轉(zhuǎn)化
主要監(jiān)控用戶是從哪里進(jìn)入搜索的？搜索后有點(diǎn)擊搜索結(jié)果嗎？有完成最終轉(zhuǎn)化嗎？用戶的路徑能幫助我們檢驗(yàn)搜索結(jié)果是不是用戶想要的。此外，如果用戶在某個(gè)搜索入口高頻搜索某個(gè)關(guān)鍵詞，也可以幫我們反思搜索入口所在頁(yè)面餓設(shè)計(jì)是不是沒有滿足用戶某個(gè)痛點(diǎn)。
2、關(guān)鍵詞搜索數(shù)據(jù)監(jiān)控
用戶在產(chǎn)品下留下任何行為數(shù)據(jù)都是有意義的。搜索過的關(guān)鍵詞更是如此。關(guān)鍵詞代表了用戶對(duì)產(chǎn)品最直接的訴求。不論關(guān)鍵詞最終的搜索結(jié)果如何，都值得被記錄。并定期拉出來(lái)，進(jìn)行分析。
分析的結(jié)果不僅能幫助搜索的優(yōu)化，還能反推運(yùn)營(yíng)、業(yè)務(wù)進(jìn)行改進(jìn)。例如，如果一個(gè)電商平臺(tái)，5月份開始用戶搜索“花露水”及類似驅(qū)蚊類商品的搜索增加，而平臺(tái)在驅(qū)蚊產(chǎn)品上沒有充足的備貨，那就可以推動(dòng)對(duì)驅(qū)蚊類商品的采購(gòu)。
3、搜索結(jié)果為空的數(shù)據(jù)監(jiān)控
搜索結(jié)果為空的關(guān)鍵詞，最能反映用戶對(duì)產(chǎn)品的期待，但是卻未達(dá)成所愿的那部分產(chǎn)品缺憾。所以，專項(xiàng)存儲(chǔ)記錄搜索為空的關(guān)鍵詞，及關(guān)鍵詞的搜索熱度也是非常必要的。可以幫助我們不斷彌補(bǔ)產(chǎn)品的不足。
思路2:根據(jù)場(chǎng)景的設(shè)計(jì)
在設(shè)計(jì)搜索之前首先需要思考的問題是：誰(shuí)在什么場(chǎng)景下會(huì)使用搜索功能？他想搜什么？
1、小紅書
小紅書的定位是生活方式分享社區(qū)，旗下設(shè)立了電商平臺(tái)“小紅書商城”作為變現(xiàn)業(yè)務(wù)，所以小紅書的核心布局：社區(qū)＋電商。所以對(duì)小紅書有認(rèn)知的用戶，主要在如下幾種場(chǎng)景下有搜索訴求：
（1）想了解生活達(dá)人們對(duì)某類商品的推薦、評(píng)價(jià)
（2）想在小紅書商城購(gòu)買某類商品
（3）想關(guān)注某位達(dá)人
由此，可以確定，小紅書搜索范圍在社區(qū)內(nèi)容、商品、用戶。從小紅書搜索結(jié)果頁(yè)TAB的分類看，也是按照這3類進(jìn)行的劃分，其中“全部”其實(shí)就是UGC社區(qū)內(nèi)容。
2、網(wǎng)易嚴(yán)選
網(wǎng)易嚴(yán)選的定位是原創(chuàng)生活類自營(yíng)電商，是一個(gè)純電商平臺(tái)，所以用戶搜索訴求很單一：找到想要的商品
所以純電商平臺(tái)的搜索范圍只局限于商品。
3、知乎
知乎的定位是網(wǎng)絡(luò)問答社區(qū)，連接各行各業(yè)的用戶。用戶分享著彼此的知識(shí)、經(jīng)驗(yàn)和見解。所以知乎用戶的主要搜索訴求是：
（1）找到想了解的經(jīng)驗(yàn)、內(nèi)容
（2）找到想關(guān)注的知識(shí)咖
我們看知乎搜索的模塊設(shè)計(jì)，雖然分為用戶、話題、想法、專欄、電子書等分類。但是從本質(zhì)上仍然分為人和內(nèi)容兩部分。話題、想法、專欄、電子書等都屬于內(nèi)容一類，只是不同的內(nèi)容形態(tài)、業(yè)務(wù)形態(tài)而已。
大多數(shù)情況下，會(huì)使用搜索功能的用戶，主要是產(chǎn)品的老用戶，對(duì)產(chǎn)品的基本內(nèi)容和服務(wù)有一定的了解，并且有著非常明確的自身訴求。在這種場(chǎng)景下，如果用戶能檢索到自己想要的內(nèi)容或服務(wù)，必將會(huì)產(chǎn)生很高的轉(zhuǎn)化。所以，搜索功能的重要性，不言而喻。
【個(gè)人總結(jié)】
1.對(duì)搜索框的理解
2.不同搜索框的設(shè)計(jì)
·QQ Mac版
·微信mac版
使用場(chǎng)景更偏向辦公、信息搜索等
3.針對(duì)音樂軟件搜索框設(shè)計(jì)
·網(wǎng)易云音樂mac版本
