如何設計出正確的搜尋模式？

1.視覺線索

無論建立任何型別的使用者介面，為使用者提供快速掃瞄螢幕所需的工具是你設計的一部分。這樣做可以確保你的使用者知道在什麼地方找到他想要的東西，何時需要使用以及與其互動後會發生什麼。

放大鏡圖示

使用放大鏡圖示，我無法保證這樣會加快了搜尋欄查詢的速度。但是圖示越簡單越好，較少的細節可以讓使用者更快地瀏覽。雖然，乙個圖示本身沒有輸入容器或按鈕，實際上會使搜尋更加困難。

極簡主義搜尋圖示的示例

人們通常認為放大鏡圖示表示搜尋工具，即使它沒有標籤說明。但是，只顯示圖示的搜尋框會使搜尋變得更加困難。(言論來自nng凱蒂謝爾文的「搜尋設計中的放大鏡圖示」)

乙個實際的搜尋按鈕

不是所有使用者都是資深網民，這也就意味著並不是每個使用者都知道，一旦在輸入框裡輸入查詢內容，按下回車鍵就可以得到相關資訊。因此，在搜尋輸入旁邊設計乙個實際的按鈕可以幫程式設計客棧助使用者確認他們的下乙個動作，從而減少使用者所需的認知負荷。

注意：避免將按鈕放在輸入框的左側，上方或下方。

提示：在文字輸入獲得焦點前，你可以隱藏輸入按鈕。

確保按鈕的大小適中，以便點選起來感覺自然。

2.輸入特性

有時候，越是閃亮，強大或面積大的東西也不一定能引起人們的注意，搜尋模式也一樣。不如將它改為你理想的風格！但切記搜尋框的設計必須與你的**或應用程式的主題程式設計客棧相吻合，並同時確保它足夠引人注目。

youtube新的（令人驚嘆的）黑色主題通過保持搜尋模式與其他元素的一致性就完美地闡述了這一點。

「搜尋框也並不是越長越好」

但也要確保輸入長度也不要過短。據nng的研究表明：擁有能夠容納 27 個字元的輸入，可以滿足90％的使用者的需求。

如圖：乙個常見的 5 詞 26 個字元搜尋的例子。

3.透明佔位符

為輸入的佔位符文字使用適當的副本很重要，它們通常是暗示使用者可以搜尋的內容。這確保了他們知道要搜尋什麼，並且不會因編寫錯誤導致查詢失敗而感到沮喪。最近，web工具可以通過在html5 中新增提示作為佔位符來輕程式設計客棧松完成此操作。

新增佔位符可以幫助使用者過濾查詢的內容。

提示：眾所周知，人類的短期記憶容量有限。因此，盡量保持用於佔位符文字的副本簡短而直接。使用較長的提示會增加使用者的認知負荷，從而損害使用者體驗。你可以在這裡了解更多有關有害標籤和佔位符的資訊。

在某些專案中可能需要設計乙個更具體的搜尋功能。在這種情況下，你可以使用懸停的工具提示來確保提示在任何時候都是可見的，這樣使用者就可以將他們的短期記憶體用於其他任務。

在這個例子中，工具提示可以幫助使用者使用正確的查詢格式以及找到他可以搜尋的內容。

4.引導查詢，即自動提示

很多時候，使用者會忙於思考搜尋結果，而沒有專注於構建乙個適當的搜尋查詢。當使用者無法找到他們所期望的結果時，這也是乙個負擔。這個使用者的操作失誤，也正是設計師的錯誤。在這裡，自動提示就可以派上用場了。

採用自動提示的目的不是為了使搜尋速度更快，而是在使用者查詢構建中提供一點幫助。

你可以通過執行**的搜尋模式來實現這一點。例如使用者想問這個可怕的詞是什麼？**的搜尋模式是根據使用者正在編寫的所有字元，猜測輸入的是什麼詞彙，**他們的查詢將會是什麼而彈出自動建議。

正如jakob nielsen領導的團隊所研究的那樣，大多數使用者未能從第一次查詢中收集到他們所預期的搜尋結果。因此，通過設定引導查詢，除了大大減少使用者執行搜尋的工作量，還可以增加他們查詢所需內容的次數。

提示：不要給他們任何錯誤的自動建議。確保你使用的所有機制是合理的，並且符合你的使用者需求。

5.不要忘記定位

使用者對ad shaikh＆k.lenz在 2006 年發現的某些ui元素和模式的位置有一定的要求。搜尋就屬於這種被要求的模式之一，絕大多數使用者希望在介面的頂部中心或右上角找到它，就像上面提到的研究結果和以下圖中所示。

「許多參與者希望在網頁右上角或靠近左上角的位置找到」**搜尋引擎「

試著根據這些知識來定位搜尋模式，它將確保你的使用者很容易找到它。

我認為每天我們都會處理很多所謂的最佳實踐，卻往往很容易忽略一些簡單的話題，比如我在這篇文章中提到的那些。搜尋是乙個不斷發展的模式，我知道這篇文章沒有涵蓋所有現有的指導方針。了解這一點，我希望這篇文章能夠幫助到你們當中的一些初學者，甚至ux和ui設計的老手。

作者：bruno charters

位址：本文標題: 如何設計出正確的搜尋模式？

本文位址: /news/exp/62697.html