激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

搜索體驗設(shè)計指南(一)

發(fā)布時間：2024-04-13 19:03:29 瀏覽量：121次

搜索框是輸入字段和提交按鈕的組合。有人可能會認為搜索框不需要設(shè)計，畢竟這只是兩個簡單的元素。但是在內(nèi)容密集的網(wǎng)站上，搜索框通常是最常用的設(shè)計元素。當用戶遇到相對復(fù)雜的網(wǎng)站時，他們將立即尋找搜索框以快速而輕松地方式到達目的地。搜索框的設(shè)計及其可用性變得很重要。 在本文中，我們將看到如何改進此元素，以節(jié)省用戶前往所需位置的時間。

1.使用放大鏡圖標

搜索框框始終帶有放大鏡圖標。顧名思義，圖標是對象、動作或想法的直觀表示。有一些圖標得到了用戶的普遍認可，放大鏡圖標就是這樣的圖標之一。

2.突出顯示搜索字段

如果搜索對您的應(yīng)用/網(wǎng)站很重要，則應(yīng)突出顯示它，因為它可能是用戶發(fā)現(xiàn)信息的最快途徑。


顯示完整的文本字段很重要，因為隱藏在圖標后面的搜索會使搜索功能不那么引人注目，并增加了交互成本：

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

按鈕可以幫助用戶認識到即使他們決定通過按Enter來執(zhí)行此操作，也需要執(zhí)行其他步驟來觸發(fā)搜索操作。

提示：

適當調(diào)整提交按鈕的大小，以便用戶不必非常精確地指向鼠標。較大的點擊區(qū)域使查找和單擊更加容易。

4.在每個頁面上放置搜索框

應(yīng)該始終提供對每個頁面上搜索框的訪問權(quán)限，因為如果用戶找不到他們要查找的內(nèi)容，無論他們在網(wǎng)站中的位置如何，他們都將嘗試使用搜索功能。

5.使搜索框簡單

如果設(shè)計一個搜索框，請確保它看起來像一個搜索框，并且使用起來盡可能簡單。根據(jù)可用性研究，默認情況下不顯示任何高級搜索選項更加用戶友好。高級搜索選項（例如下面示例中的布爾搜索查詢）可能會使嘗試使用它的用戶感到困惑。

6.將搜索框放在用戶希望找到的位置

當用戶必須使用搜索框時，因為它不突出并且不容易發(fā)現(xiàn)，導(dǎo)致它的效果不佳。 您在下面看到的圖表是由A. Dawn Shaikh和Keisi Lenz進行的一項研究得出的：它顯示了在142位參與者進行的調(diào)查中，站點搜索表單的預(yù)期位置。研究發(fā)現(xiàn)，對用戶來說最方便的位置是站點上每個頁面的左上角或右上角，用戶可以使用常見的F形掃描模式輕松找到它。

因此，將搜索框放置在布局的右上角或中上角區(qū)域，可以確保用戶可以在期望的位置找到它。

提示：

  • 理想情況下，搜索框應(yīng)完全適合網(wǎng)站的整體設(shè)計，但在用戶需要時可以稍微突出一些。
  • 您擁有的內(nèi)容越多，您想要顯示的搜索功能就越突出。如果搜索對于您的站點至關(guān)重要，請使用大量的對比，以便字段和圖標從背景和周圍的元素中脫穎而出。

7.適當?shù)淖侄未笮?/h1>

使輸入字段太短是設(shè)計人員中的常見錯誤。當然，用戶可以輸入長查詢語句，但是一次只能顯示一部分文本，這意味著可用性很差，因為用戶無法輕松查看和編輯其查詢語句。實際上，當搜索框的可見字符數(shù)量有限時，由于較長的查詢語句將很難且不方便閱讀，因此用戶被迫使用簡短且不精確的查詢。如果輸入字段根據(jù)其預(yù)期輸入的大小而定，則它們既易于閱讀，也便于用戶理解。

提示：考慮使用不斷增長的搜索框，該搜索框會在單擊時擴展文本輸入字段。這樣可以節(jié)省屏幕空間，同時仍然為用戶提供足夠的視覺提示，以快速查找并執(zhí)行搜索。

8.使用自動提示機制

自動建議機制可以通過嘗試根據(jù)輸入的字符來預(yù)測查詢來幫助用戶找到合適的查詢。自動建議機制不是要加快搜索過程，而是要指導(dǎo)用戶并幫助他們構(gòu)建搜索查詢。典型的用戶在查詢表述方面非常差勁：如果他們在第一次嘗試中沒有獲得良好的結(jié)果，那么以后的搜索嘗試將很少成功。實際上，他們經(jīng)常放棄。當自動完成建議有效時，它們可以幫助用戶更好地表達搜索查詢。

Google搜索從2008年開始實施，就掌握了這種模式。由于用戶往往會通過記住搜索歷史來多次搜索相同的內(nèi)容，因此節(jié)省了時間，并提供了更為便捷的體驗。

提示：

  • 確保自動建議有用。設(shè)計不當?shù)淖詣咏ㄗh可能會使用戶感到困惑和分心。因此，請使用拼寫自動更正，詞根識別和預(yù)想性文本來改進工具。
  • 您應(yīng)該盡快提供自動建議，例如在輸入第三個字符之后，以提供即時價值并減少用戶數(shù)據(jù)輸入的工作量。
  • 提交的內(nèi)容少于10個（并且沒有滾動條），因此信息不會變得混亂
  • 允許使用鍵盤導(dǎo)航獲取建議列表。用戶向下滾動到最后一項之后，他們應(yīng)該返回列表的頂部。 Esc鍵應(yīng)允許用戶退出列表。
  • 突出顯示輸入信息與建議的信息（例如，輸入文本具有標準的粗細，建議的術(shù)語具有粗體）。

9.明確說明用戶可以搜索的內(nèi)容

最好在輸入字段中包含一個示例搜索查詢，以向用戶建議該功能的用途。如果用戶可以搜索多個條件，請使用輸入提示模式進行解釋（即下面的示例中的IMDb）。 HTML5使得在輸入字段中包含占位符的文本變得容易。

提示：將提示的內(nèi)容限制為幾句話，否則實際上會增加認知負擔。

結(jié)論

搜索是構(gòu)建內(nèi)容繁多的應(yīng)用程序或網(wǎng)站的一項基本活動，也是至關(guān)重要的元素。即使是很小的更改，例如輸入字段的適當大小或指示搜索字段中包含哪些信息，也可以顯著提高搜索的可用性以及整體用戶體驗。

原文鏈接：
https://uxplanet.org/design-a-perfect-search-box-b6baaf9599c

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定