你訪問(wèn)一個(gè)頁(yè)面尋找你需要的內(nèi)容，卻找不到執(zhí)行該操作的搜索框時(shí)，是不是很沮喪？搜索框通常是網(wǎng)站中最常用的設(shè)計(jì)元素，一個(gè)好的搜索框會(huì)讓網(wǎng)站變得人性化，當(dāng)用戶訪問(wèn)一個(gè)相對(duì)復(fù)雜的網(wǎng)站時(shí)，他們會(huì)立即找到搜索框來(lái)幫助他們到達(dá)他/她最終目標(biāo)。這篇文章分享了一些有用的技巧和原則來(lái)設(shè)計(jì)一個(gè)用戶喜歡的搜索框，希望這篇文章對(duì)你有用和有幫助。

什么是搜索框？

搜索框是一種常用的交互組件，尤其是在網(wǎng)站和APP上。搜索框的核心是從海量信息中準(zhǔn)確提取準(zhǔn)確的內(nèi)容，如音樂(lè)庫(kù)、電子商務(wù)網(wǎng)站等。

兩種類型的搜索

1、即時(shí)搜索：

結(jié)果立即顯示在用戶界面上，無(wú)需任何按鈕，放大鏡僅顯示為圖標(biāo)，用戶輸入關(guān)鍵字即可立即搜索。

2、常規(guī)搜索：

用戶需要點(diǎn)擊搜索按鈕進(jìn)行搜索

何時(shí)使用搜索

1、目標(biāo)物難找

A)有很多對(duì)象；就像我們需要從Mockplus圖標(biāo)庫(kù)的3000個(gè)圖標(biāo)中找到一個(gè)特定的圖標(biāo)。

B)目標(biāo)對(duì)象不在同一位置；就像您需要在磁盤上找到一種類型的文件一樣。

C)搜索數(shù)據(jù)難找；就像您想在長(zhǎng)文本中搜索特定字符一樣。

2、具體內(nèi)容需要查到；例如，我們?cè)趤嗰R遜搜索商品的某個(gè)特征

3、5秒內(nèi)找不到需要的結(jié)果

設(shè)計(jì)理念

1、搜索框是界面的一部分，要放在顯眼的位置，方便查找

2、在同一個(gè)應(yīng)用程序或網(wǎng)站中，它們應(yīng)該具有統(tǒng)一的外觀

3、功能要有效，結(jié)果要準(zhǔn)確，搜索速度要盡可能快。

外觀特點(diǎn)

1.標(biāo)簽是不必要的，你可以使用一個(gè)可選的提示

2.提示可以是指令（如搜索類型），也可以是范圍

3.提示語(yǔ)要簡(jiǎn)潔明了

4.即時(shí)搜索時(shí)，首字母大寫；在執(zhí)行常規(guī)搜索時(shí)，將第一個(gè)字母小寫

設(shè)計(jì)搜索框之前的7個(gè)提示

1.使用放大鏡圖標(biāo)

2.將搜索框放在用戶容易找到的地方

3.為搜索框提供搜索按鈕

4.在每一頁(yè)放置搜索框

5.讓搜索框看起來(lái)像一個(gè)搜索框

6.自適應(yīng)字段大小

7.使用自動(dòng)建議機(jī)制

結(jié)論

我們可以發(fā)現(xiàn)，設(shè)計(jì)一個(gè)搜索框需要遵循設(shè)計(jì)規(guī)則和交互原則，每一個(gè)細(xì)節(jié)的改進(jìn)都能讓用戶體驗(yàn)更好。一個(gè)好的用戶體驗(yàn)網(wǎng)站不僅可以取悅用戶，還可以從中受益，設(shè)計(jì)從細(xì)節(jié)中把用戶體驗(yàn)做到最好。