設計網站搜索框的注意事項

讓我們一起來看看設計師們設計了一個搜索框時，可能會面臨一些經常反復出現的困難和問題。

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

什么名字“提交”按鈕，
這是很好的做法，讓一個有意義的名稱，如“搜索”或“查找”搜索“按鈕”，而不是“去”的搜索按鈕，從整體上搜索框的設計，用戶點擊。

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

在哪里放置搜索框的標題，
用戶需要知道，四四方方的前瞻性的事情是一個搜索框。做到這一點最簡單的方法是告訴用戶，這是，例如，給它一個章節標題。根據公布的UXMatters的眼動跟蹤測試，節的標題是搜索框上面的左上角區域的最佳位置。這似乎是一個合理的設計決定。

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

許多網站實現谷歌網站搜索API，它得到了其從谷歌的索引中的搜索結果。如果您使用此功能，請一定要說出盡可能多的搜索框旁邊的。用戶不喜歡意外的結果，谷歌的搜索算法可能比你的網站的不同，從而打破了一致性原則。

搜索框展示

請注意，它不僅是重要的搜索框的設計，但更重要的是，搜索工作正常。作為Jakob Nielsen的國家，第一個結果頁是金：“用戶幾乎從來沒有超越搜索結果的第二頁。因此，這是重要的是，你的搜索優先級以有用的方式，結果出現在第一頁上所有最重要的命中?！?/p>

1。古典文學

當涉及到搜索框，最簡單的設計通常是最好的。傳統的輸入字段和提交按鈕的外觀很容易理解為有經驗和沒有經驗的用戶，因此，設計人員通常使用默認的狀態，不亂來的圣杯。

這里有兩個經典雅各布尼爾森和Fontshop的，設計沒有改變，因為早期的Web。

2。“提交”按鈕脫穎而出

我們發現，很多設計師選擇明確突出提交“按鈕，在搜索框中脫穎而出。很多時候，輸入字段的背景顏色，適合周圍的設計元素。因此，使框更加明顯，需要視覺指針。在這種情況下，“提交”按鈕往往被賦予更加鮮艷的顏色或形狀不規則。

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

3。使用放大鏡

在過去的十年中，放大鏡已經成為傳統搜索圖標，并仍然經常使用，當設計師想要傳達的搜索元素的功能。放大鏡可以發現的左側或右側，在輸入字段中或附近的“提交”按鈕，在搜索框中附近或遠離它。我們無法確定某種特定的趨勢，因此，在大多數情況下，設計師們找到最適合他們的位置。

Decodeunicode.org有一個非常有創意的設計-奇怪- 。點擊放大鏡以字母“A”以上的高級搜索選項，它會打開一個模態的彈出式窗口。不要嘗試在家里還是在工作中。

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

4。使用插圖

5。在搜索框中彎

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

6。使用箭頭

有時提交按鈕被標記的文本，但不與與一個符號或字符，例如，一個箭頭。箭頭指向正確的，在某些情況下，他們指出了（奇怪的是，相當不尋常的）。

箭頭的形式提交按鈕：

向下指的箭頭很少使用：

在Erweiterungen.de，精心整合的放大鏡圖像的輸入字段中。這是一個很好的解決方案，不刺激用戶，因為設計師小心地墊的形象和輸入的文本之間的空間。

tastebook

7。使用手工

手工反擊在這個搜索框的設計：

而在這其中：

此搜索框看起來不錯，但難以辨認。

一個微小的，無害的，謙遜的手寫搜索框。

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

8。Boxy的設計

因為他們是所謂的搜索框，許多設計進行相應的。不幸的是，這樣的設計往往是相當枯燥的，而不是真正好看。

按鈕圖標;一個相當不尋常的設計：

9。實驗解決方案

網頁設計師創作民歌。因此，這也難怪，我們已經發現了幾十真的不尋常的，奇怪的，有創意的，絕對不恰當的設計。它是由你來建立新的想法，在上面介紹的設計師的想法。但是，請記?。嚎捎眯詰哂凶罡叩膬炏燃墶Ｐ问饺缦碌墓δ?，而不是其他方式。

在搜索框中在Uxmag.com上，打開后，點擊“搜索”鏈接。

一個神秘的搜索框，由斯特凡布赫爾設計。

本文作者來自北京傳誠信，轉載請注明出處：北京傳誠信（wtkaisuo.com）

選擇北京網站建設公司-傳誠信，優質服務，絕對不容錯過 ！