詳細解析網(wǎng)頁(yè)搜索框的設計細節技巧發(fā)布者：本站     時(shí)間：2021-12-15 11:12:02

搜索幾乎是現在所有網(wǎng)站，APP甚至操作系統的標配，不論是電商還是論壇等等。它是一個(gè)站內給用戶(hù)直接到達目的地的通道，起到了一個(gè)引導用戶(hù)走向的重要作用。在不同的系統，不同用途的網(wǎng)站上搜索呈現的方式都有所不同。

用搜索的原因

使用搜索時(shí)，用戶(hù)可以自己掌握瀏覽該網(wǎng)站的路徑，從哪一頁(yè)進(jìn)入到哪一頁(yè)，自己控制如何使用這個(gè)網(wǎng)站。沒(méi)有必要根據網(wǎng)站的頁(yè)面設計來(lái)決定瀏覽頁(yè)面的先后順序。這也是為什么很多網(wǎng)站用戶(hù)一進(jìn)入就直接使用搜索功能的原因。

另一個(gè)原因是，當用戶(hù)瀏覽網(wǎng)頁(yè)到一半不知道接下去該干什么的時(shí)候，往往會(huì )使用搜索直接去找到自己想找的內容。

不使用搜索的原因

相對于搜索，用戶(hù)根據類(lèi)目，或者從功能模塊的入口進(jìn)入各個(gè)頁(yè)面其實(shí)是跟著(zhù)頁(yè)面的導向進(jìn)行的下一步操作。

網(wǎng)頁(yè)的設計者會(huì )根據網(wǎng)站的不同需求從而設計不同的頁(yè)面布局。根據這些頁(yè)面布局進(jìn)而引導用戶(hù)一步一步的達成網(wǎng)站設計者的目的。這些目的可能就是買(mǎi)一件商品，參加一個(gè)活動(dòng)等等。用戶(hù)可以根據設計者創(chuàng )建的引導流程一步步的查看網(wǎng)站內容。

不同用戶(hù)群

根據搜索是否主動(dòng)搜索這點(diǎn)來(lái)分，可以把用戶(hù)分成3種類(lèi)型：任務(wù)型，鏈接型，混合型。

任務(wù)型：

任務(wù)型的用戶(hù)就是前面說(shuō)的直接使用搜索功能的用戶(hù)。大部分用戶(hù)都是任務(wù)型的用戶(hù)。這些用戶(hù)往往是帶著(zhù)某種目的來(lái)，例如已經(jīng)知道了自己要購買(mǎi)的商品，就直接搜索商品名稱(chēng)進(jìn)入搜索列表頁(yè)。

使用搜索的場(chǎng)景可以再細化一點(diǎn)，通常用戶(hù)已經(jīng)想好了具體要搜索的關(guān)鍵詞，同時(shí)他使用的網(wǎng)站可以搜索到非常大量的搜索結果時(shí)，用戶(hù)會(huì )使用搜索功能。例如在手機里找一個(gè)聯(lián)系人的號碼，如果手機里只存了10個(gè)號碼，那很可能就直接打開(kāi)聯(lián)系人的APP，從這10個(gè)人的姓名中找到一個(gè)號碼;另一種情況，如果手機里存了500個(gè)號碼，這時(shí)候要逐個(gè)瀏覽來(lái)找某個(gè)聯(lián)系人效率就會(huì )相對低，這是大家會(huì )做的是在聯(lián)系人里找到搜索框，輸入要找的人的姓名或者拼音，定位到要找的人，最后找到電話(huà)號碼。

鏈接型：

鏈接型的用戶(hù)打開(kāi)一個(gè)頁(yè)面之后會(huì )找各個(gè)功能的鏈接(首頁(yè)廣告，功能入口，鏈接)，即使他們已經(jīng)想好了要找某些信息，他們還是會(huì )通過(guò)點(diǎn)擊入口而不是輸入關(guān)鍵字來(lái)找頁(yè)面。通常這類(lèi)用戶(hù)知道自己要買(mǎi)麥片，但是沒(méi)有考慮好什么品牌的麥片，哪個(gè)國家的麥片，那這個(gè)時(shí)候，他們會(huì )做的是找到網(wǎng)站的類(lèi)目入口，在類(lèi)目里找到“麥片”的分類(lèi)，點(diǎn)擊進(jìn)入，而不是直接搜索關(guān)鍵詞“麥片”。

鏈接型的用戶(hù)只有當他們在頁(yè)面上找不到自己需要的相關(guān)信息鏈接時(shí)，才會(huì )選擇使用搜索框。

混合型：

混合型的用戶(hù)行為其實(shí)以上兩種都有，有時(shí)候會(huì )直接搜索關(guān)鍵詞，有時(shí)候會(huì )在頁(yè)面上尋找鏈接，沒(méi)有使用以上哪種偏好的傾向性，只是用當下他們覺(jué)得最好的方式。

搜索入口的設計

不同功能，不同需求的界面會(huì )影響到搜索框入口的設計。

詳細解析網(wǎng)頁(yè)搜索框的設計細節技巧,PS教程,

△ iOS系統的搜索框只有在用戶(hù)下拉頁(yè)面時(shí)才會(huì )出現。

對于一個(gè)系統界面來(lái)說(shuō)，給用戶(hù)提供各個(gè)APP，功能入口是一個(gè)系統的重要功能，所以對于搜索，系統做了隱藏處理。

YouTube有針對用戶(hù)的喜好在首頁(yè)提供不同的視頻，是一個(gè)對每個(gè)用戶(hù)個(gè)性化的訂制內容， YouTube希望用戶(hù)瀏覽查看他們對于用戶(hù)推薦的視頻。所以他們沒(méi)有把搜索框直接展開(kāi)而是只顯示一個(gè)icon，點(diǎn)擊之后出現單獨的搜索頁(yè)。

詳細解析網(wǎng)頁(yè)搜索框的設計細節技巧,PS教程,

△ 電商類(lèi)APP搜索框一般直接露出在首頁(yè)的最頂端。

前面有說(shuō)到在電商網(wǎng)站中，當用戶(hù)不知道接下去該做什么的時(shí)候，會(huì )使用搜索操作來(lái)直接到達自己想要到達的頁(yè)面。所以，通常電商網(wǎng)站中，搜索往往是固定在頂部Global上的，以便用戶(hù)無(wú)論在哪一頁(yè)都能找到。

詳細解析網(wǎng)頁(yè)搜索框的設計細節技巧,PS教程,

類(lèi)似于Google，百度，Bing，搜索是他們的主營(yíng)業(yè)務(wù)，自然希望用戶(hù)所要查看的大部分頁(yè)面都是通過(guò)搜索來(lái)獲得。所以把搜索框做為用戶(hù)的唯一使用路徑放在首頁(yè)，不論是APP還是網(wǎng)頁(yè)。

這4個(gè)例子里對用戶(hù)對搜索的需求依次增強，所以搜索在頁(yè)面上的表現形式也依次增強。

作為一個(gè)用戶(hù)大量使用的工具：搜索，它的位置，呈現形式直接關(guān)系到制作者對產(chǎn)品的預期，也直接關(guān)系到用戶(hù)會(huì )用什么形式使用當前的界面。有的用戶(hù)瀏覽界面知道自己要找什么，有的用戶(hù)是來(lái)頁(yè)面上逛逛的，針對不同用戶(hù)，不同的搜索設計方案可以幫助設計者達到設計目的，也能幫助用戶(hù)更好的使用體驗。

以上是對搜索表現形式的一些基本見(jiàn)解。

搜索之時(shí)

搜索之時(shí)指的是點(diǎn)擊搜索框之后到點(diǎn)擊“搜索“按鈕或者按”回車(chē)“之間發(fā)生的事。是不是覺(jué)得間隔時(shí)間很短?短到平時(shí)都忽略了這個(gè)過(guò)程，但是這里面的故事不少，各個(gè)平臺都花了不少心思在這中間過(guò)程的設計上。

點(diǎn)擊搜索框

當用戶(hù)點(diǎn)擊頁(yè)面上的搜索框之后，如果在PC端通常會(huì )給出歷史搜索詞和推薦的關(guān)鍵詞;如果是在手機端除了兩種搜索詞外還會(huì )同時(shí)彈出鍵盤(pán)。歷史搜索針對的是近期多次瀏覽對比同一個(gè)搜索結果的用戶(hù)?？赡苁怯脩?hù)在電商平臺挑選商品，可能是用戶(hù)在視頻類(lèi)網(wǎng)站追電視劇。于是設計者們就把內容前置，可以讓用戶(hù)在不輸入關(guān)鍵詞的情況下直接得到想要的搜索結果。

推薦的關(guān)鍵詞有幾種可能，有其他用戶(hù)近期的熱搜詞(最近流行的電視劇，流行的網(wǎng)絡(luò )詞)，有平臺推薦的搜索結果(給某些類(lèi)目拉流量用的)，有廣告(金主給錢(qián)的)，有針對用戶(hù)的推薦詞(根據用戶(hù)最近的操作習慣精準化推薦的)。這其中近期的網(wǎng)絡(luò )熱搜詞效果最好，針對用戶(hù)的推薦詞次之，之后分別是平臺推薦詞和廣告。另外，也有對用戶(hù)的輸入行為預判并且分類(lèi)的。這時(shí)內容前置給出的就是這些分類(lèi)的名稱(chēng)，而不是某幾個(gè)關(guān)鍵字。

詳細解析網(wǎng)頁(yè)搜索框的設計細節技巧,PS教程,

輸入關(guān)鍵詞

用戶(hù)在輸入搜索關(guān)鍵詞的時(shí)候，不管已完全輸入了要搜索的關(guān)鍵詞還是只輸入了部分，各個(gè)搜索頁(yè)面這時(shí)通常會(huì )給出關(guān)鍵詞的聯(lián)想搜索結果。有些平臺在用戶(hù)輸入了一半的時(shí)候就根據用戶(hù)的歷史搜索記錄和自己的數據庫猜想出了用戶(hù)想要輸入的完整關(guān)鍵詞。