搜索的主要目的是為了幫助用戶快速的找到他們想要的呢日用，在很多的產(chǎn)品中有著舉足輕重的作用，如：用戶通過淘寶搜索篩選想要的商品；通過知乎搜索尋找問題答案；通過app搜索尋找自己想要的內(nèi)容......乍一看，或許很多的人會(huì)覺得搜索很簡(jiǎn)單，然而實(shí)際上，搜索涉及的邏輯很多的，今天，天津網(wǎng)站建設(shè)分享了設(shè)計(jì)一個(gè)好的搜索框需要掌握的要點(diǎn)，相信對(duì)廣大設(shè)計(jì)師而言會(huì)有幫助的。
一、什么是搜索框？
所謂的搜索框，是一張常見的交互控件，主要用于精準(zhǔn)提取海量信息中準(zhǔn)確的內(nèi)容。搜索框幾乎存在的互聯(lián)網(wǎng)中每個(gè)產(chǎn)品中，幾乎所有的網(wǎng)站和APP中都有它的存在，尤其是存在于海量?jī)?nèi)容為導(dǎo)向的產(chǎn)品之中，如：音樂庫(kù)、電商類網(wǎng)站、門戶類網(wǎng)站.....所以做好搜索（框）尤其重要。
二、為什么要做搜索功能
主要的是為了方便用戶，讓用戶更加快捷高效的從大量信息內(nèi)容中通過一些關(guān)鍵的搜索，快速的找到自己的感興趣的內(nèi)容；其實(shí)，可以通過適當(dāng)?shù)囊龑?dǎo)設(shè)計(jì)來完成產(chǎn)品的商業(yè)需求。
三、搜索應(yīng)用于哪些場(chǎng)景？
目前互聯(lián)網(wǎng)中所存在的搜索框設(shè)計(jì)有很多的，不過若細(xì)分的話，一般可以分為如下的幾大應(yīng)用場(chǎng)景：
1）作為搜索引擎入口
提到搜索，人們最先想象到的就是搜索引擎，如:谷歌，360，然而在搜索引擎中，首頁(yè)十年始終如一的搜索框是最深入人心。反過來說，正是因?yàn)樗阉饕婢揞^的成功，搜索才越發(fā)備受重視，搜索框幾乎也成為網(wǎng)站或app的標(biāo)配。
2）用于活動(dòng)推薦
有些電商網(wǎng)站，巧妙地利用搜索框中預(yù)置的詞，能夠達(dá)到活動(dòng)推薦的效果，如：上圖中搜索框內(nèi)置“洗衣機(jī)”一詞，用戶只需通過點(diǎn)擊搜索即可直達(dá)結(jié)果頁(yè)或者活動(dòng)頁(yè)面。
3）用于查找內(nèi)容
典型的應(yīng)用場(chǎng)景，通常是放在網(wǎng)站頂部之類的最顯眼的位置，方便用戶看到，從而查找網(wǎng)站中的內(nèi)容，一觸即達(dá)。
4）用于快速定位
查找內(nèi)容的變種，如：在手機(jī)“設(shè)置”中，當(dāng)設(shè)置的選項(xiàng)較多時(shí)，通過搜索框進(jìn)行搜索，能夠快速定位到想要的設(shè)置項(xiàng)。
四、如何設(shè)計(jì)一個(gè)好用的搜索框？
1、搜索框要足夠簡(jiǎn)單
若你設(shè)計(jì)了一個(gè)搜索框，一定要確保它看起來確實(shí)像一個(gè)搜索框，并且使用起來一定要足夠簡(jiǎn)單。可用性研究表明，默認(rèn)情況下，不顯示高級(jí)搜索選項(xiàng)對(duì)用戶會(huì)更加友好。原因在于，高級(jí)搜索選項(xiàng)很可能會(huì)混淆要嘗試使用它的用戶。
2、尺寸大小要合適
大部分設(shè)計(jì)人員都是會(huì)犯同樣的錯(cuò)誤，那就是輸入框太短，當(dāng)用戶輸入長(zhǎng)內(nèi)容時(shí)，只能看到其中的一部分，嚴(yán)重影響到用戶體驗(yàn)，因?yàn)橛脩魺o法輕松地回看和編輯其剛剛才輸入的查詢條件。但是，若輸入框的長(zhǎng)度是根據(jù)用戶的預(yù)期輸入來確定大小的，這樣的話對(duì)用戶而言就會(huì)友好很多。
3、放在用戶預(yù)期找到的位置
若因?yàn)樗阉骺虿粔蛲怀觯蝗菀妆徊煊X，用戶還得花費(fèi)精力去找它，那這個(gè)設(shè)計(jì)無疑是不夠友好的。下面的圖表來自 A. Dawn Shaikh 和 Keisi Lenz 的一項(xiàng)研究：它顯示了參與調(diào)查的142名參與者針對(duì)網(wǎng)站中的搜索表單的位置的預(yù)期情況。研究發(fā)現(xiàn)，對(duì)于用戶來說，搜索框最佳的位置是網(wǎng)站上每個(gè)頁(yè)面的左上方或右上方——用戶可以使用常見的F形瀏覽模式輕松地找到它。
上圖說明了參與者對(duì)搜索框所處位置的預(yù)期情況，右上方仍然是用戶希望找到搜索的⑴個(gè)地方。因此，較好將搜索框放在頁(yè)面的右上方或中上方，以確保用戶能在預(yù)期的位置找到它。
小提示：
1）理想情況下，雖然搜索框在用戶需要的地方應(yīng)該能輕易出現(xiàn)，但是搜索框的設(shè)計(jì)也應(yīng)該完美地契合網(wǎng)站的整體設(shè)計(jì)效果。
2）內(nèi)容越重的站點(diǎn)，你越希望搜索框顯著。如果搜索對(duì)你的網(wǎng)站至關(guān)重要，請(qǐng)使用大的對(duì)比度，以便搜索框和圖標(biāo)能從頁(yè)面背景和周圍元素中脫穎而出。
總之，搜索框的設(shè)計(jì)涉及到的方面很多的，除了以上的這些還有其他細(xì)節(jié)可能沒梳理到位，若你想要了解，可以參考之前天津網(wǎng)站建設(shè)的文章《搜索框設(shè)計(jì)需要注意哪些事項(xiàng)》。另外，在搜索框的操作中，最重要在做每個(gè)步驟時(shí)都要思考，為什么這樣設(shè)計(jì)，所有的設(shè)計(jì)都是有理有據(jù)的，要結(jié)合產(chǎn)品定位，用戶群體，開發(fā)資源等來分析具體的搜索應(yīng)該怎么做，能解決問題的設(shè)計(jì)才是好設(shè)計(jì)。
