設(shè)計(jì)網(wǎng)站搜索框的注意事項(xiàng)

讓我們一起來(lái)看看設(shè)計(jì)師們?cè)O(shè)計(jì)了一個(gè)搜索框時(shí)，可能會(huì)面臨一些經(jīng)常反復(fù)出現(xiàn)的困難和問(wèn)題。

在哪里放置搜索框？
有很多可能性，但只有一對(duì)夫婦的權(quán)利的。最方便的地方，用戶的每一頁(yè)頂部的左側(cè)或頂部的權(quán)利，在您的網(wǎng)站上，用戶可以在這里輕松地找到它使用通用的F-形掃描模式。然而，傾向于把一些博客的搜索框（左或右）邊欄的底部。這可能不是一個(gè)好主意，但可能是因?yàn)閺V告的考慮。

什么名字“提交”按鈕，
這是很好的做法，讓一個(gè)有意義的名稱(chēng)，如“搜索”或“查找”搜索“按鈕”，而不是“去”的搜索按鈕，從整體上搜索框的設(shè)計(jì)，用戶點(diǎn)擊。

為用戶的搜索按鈕，在下面的圖片是非?；靵y。他們將無(wú)法計(jì)算出，如果它是一個(gè)搜索框，還是其他什么東西，雖然它是在文本字段中顯示的描述。

在哪里放置搜索框的標(biāo)題，
用戶需要知道，四四方方的前瞻性的事情是一個(gè)搜索框。做到這一點(diǎn)最簡(jiǎn)單的方法是告訴用戶，這是，例如，給它一個(gè)章節(jié)標(biāo)題。根據(jù)公布的UXMatters的眼動(dòng)跟蹤測(cè)試，節(jié)的標(biāo)題是搜索框上面的左上角區(qū)域的最佳位置。這似乎是一個(gè)合理的設(shè)計(jì)決定。

要分清楚哪些用戶可以搜索，
這是一個(gè)好主意，在輸入字段中包括一個(gè)示例搜索查詢，建議給用戶的功能，可用于。但要確保這段文字被刪除時(shí)，用戶關(guān)注的鼠標(biāo)的輸入字段的幫助下，一點(diǎn)點(diǎn)的JavaScript代碼可以做到這一點(diǎn)。

許多網(wǎng)站實(shí)現(xiàn)谷歌網(wǎng)站搜索API，它得到了其從谷歌的索引中的搜索結(jié)果。如果您使用此功能，請(qǐng)一定要說(shuō)出盡可能多的搜索框旁邊的。用戶不喜歡意外的結(jié)果，谷歌的搜索算法可能比你的網(wǎng)站的不同，從而打破了一致性原則。

搜索框展示

請(qǐng)注意，它不僅是重要的搜索框的設(shè)計(jì)，但更重要的是，搜索工作正常。作為Jakob Nielsen的國(guó)家，第一個(gè)結(jié)果頁(yè)是金：“用戶幾乎從來(lái)沒(méi)有超越搜索結(jié)果的第二頁(yè)。因此，這是重要的是，你的搜索優(yōu)先級(jí)以有用的方式，結(jié)果出現(xiàn)在第一頁(yè)上所有最重要的命中?！?/p>

1。古典文學(xué)

當(dāng)涉及到搜索框，最簡(jiǎn)單的設(shè)計(jì)通常是最好的。傳統(tǒng)的輸入字段和提交按鈕的外觀很容易理解為有經(jīng)驗(yàn)和沒(méi)有經(jīng)驗(yàn)的用戶，因此，設(shè)計(jì)人員通常使用默認(rèn)的狀態(tài)，不亂來(lái)的圣杯。

這里有兩個(gè)經(jīng)典雅各布尼爾森和Fontshop的，設(shè)計(jì)沒(méi)有改變，因?yàn)樵缙诘腤eb。

2?！疤峤弧卑粹o脫穎而出

我們發(fā)現(xiàn)，很多設(shè)計(jì)師選擇明確突出提交“按鈕，在搜索框中脫穎而出。很多時(shí)候，輸入字段的背景顏色，適合周?chē)脑O(shè)計(jì)元素。因此，使框更加明顯，需要視覺(jué)指針。在這種情況下，“提交”按鈕往往被賦予更加鮮艷的顏色或形狀不規(guī)則。

除了 當(dāng)前半島使用一個(gè)聰明的想法，在搜索框中脫穎而出。該網(wǎng)站的整體布局大多是白色的，只有右上部是相當(dāng)豐富多彩的。搜索框被放置在這個(gè)區(qū)域的底部。

3。使用放大鏡

在過(guò)去的十年中，放大鏡已經(jīng)成為傳統(tǒng)搜索圖標(biāo)，并仍然經(jīng)常使用，當(dāng)設(shè)計(jì)師想要傳達(dá)的搜索元素的功能。放大鏡可以發(fā)現(xiàn)的左側(cè)或右側(cè)，在輸入字段中或附近的“提交”按鈕，在搜索框中附近或遠(yuǎn)離它。我們無(wú)法確定某種特定的趨勢(shì)，因此，在大多數(shù)情況下，設(shè)計(jì)師們找到最適合他們的位置。

Decodeunicode.org有一個(gè)非常有創(chuàng)意的設(shè)計(jì)-奇怪- 。點(diǎn)擊放大鏡以字母“A”以上的高級(jí)搜索選項(xiàng)，它會(huì)打開(kāi)一個(gè)模態(tài)的彈出式窗口。不要嘗試在家里還是在工作中。

很好地集成提交放大鏡按鈕：

4。使用插圖

5。在搜索框中彎

出于某種原因，設(shè)計(jì)者仍然使用圓角輸入字段和提交按鈕。這兩個(gè)因素通常設(shè)計(jì)得非常仔細(xì)，注意小細(xì)節(jié)，吸引力和感染力的搜索框。我們不知道，如果這種做法是有效的，但它肯定看起來(lái)更加人性化（搜索框的默認(rèn)設(shè)計(jì)）。

6。使用箭頭

有時(shí)提交按鈕被標(biāo)記的文本，但不與與一個(gè)符號(hào)或字符，例如，一個(gè)箭頭。箭頭指向正確的，在某些情況下，他們指出了（奇怪的是，相當(dāng)不尋常的）。

箭頭的形式提交按鈕：

向下指的箭頭很少使用：

在Erweiterungen.de，精心整合的放大鏡圖像的輸入字段中。這是一個(gè)很好的解決方案，不刺激用戶，因?yàn)樵O(shè)計(jì)師小心地墊的形象和輸入的文本之間的空間。

tastebook

7。使用手工

手工反擊在這個(gè)搜索框的設(shè)計(jì)：

而在這其中：

此搜索框看起來(lái)不錯(cuò)，但難以辨認(rèn)。

一個(gè)微小的，無(wú)害的，謙遜的手寫(xiě)搜索框。

這里使用的是一個(gè)提交按鈕“返回”鍵：

8。Boxy的設(shè)計(jì)

因?yàn)樗麄兪撬^的搜索框，許多設(shè)計(jì)進(jìn)行相應(yīng)的。不幸的是，這樣的設(shè)計(jì)往往是相當(dāng)枯燥的，而不是真正好看。

按鈕圖標(biāo);一個(gè)相當(dāng)不尋常的設(shè)計(jì)：

9。實(shí)驗(yàn)解決方案

網(wǎng)頁(yè)設(shè)計(jì)師創(chuàng)作民歌。因此，這也難怪，我們已經(jīng)發(fā)現(xiàn)了幾十真的不尋常的，奇怪的，有創(chuàng)意的，絕對(duì)不恰當(dāng)?shù)脑O(shè)計(jì)。它是由你來(lái)建立新的想法，在上面介紹的設(shè)計(jì)師的想法。但是，請(qǐng)記?。嚎捎眯詰?yīng)具有最高的優(yōu)先級(jí)。形式如下的功能，而不是其他方式。

在搜索框中在Uxmag.com上，打開(kāi)后，點(diǎn)擊“搜索”鏈接。

一個(gè)神秘的搜索框，由斯特凡布赫爾設(shè)計(jì)。

本文作者來(lái)自北京傳誠(chéng)信，轉(zhuǎn)載請(qǐng)注明出處：北京傳誠(chéng)信（nainiuapp.com）

選擇北京網(wǎng)站建設(shè)公司-傳誠(chéng)信，優(yōu)質(zhì)服務(wù)，絕對(duì)不容錯(cuò)過(guò) ！