一個搜索框多個按鈕_網站搜索欄設計指南:要不要?怎么設計?

ec428aeee05f64aa042e0c6d3f49b78a.gif

在網站的設計過程中,搜索欄是一個很容易被忽略的部分,但用戶卻依賴它來尋找特定的信息。由于搜索欄是網站中最常用的元素之一,所以搜索欄的設計對用戶體驗有著重要的影響。

d9639b43405e84ebde1bad7c48def5f4.png

網站是否需要搜索欄?搜索欄使用背后的思維和心理是幫助用戶快速找到信息。搜索欄對于內容復雜、超過100頁的網站非常有用。在企業對消費者(B2C)領域,搜索欄用于大型電子商務網站、新聞網站、交易網站和預訂網站,幫助用戶輕松找到信息。它們也被用于大型B2B站點,這些站點有許多客戶細分和產品線。如果是一個只有很少頁面的小站點,那么可能不需要一個搜索欄,但是隨著站點的增長,那就將需要它。創建搜索欄時要考慮的因素搜索欄通常由兩個UI元素組成:一個輸入字段和一個按鈕。然而,搜索欄的設計對用戶在你的網站上找到他們想要的信息的速度有很大的影響。我們認為,設計搜索欄的時候需要考慮如下問題:突出顯示你的搜索欄:讓網站搜索欄很容易發現,把它顯示在你的網站顯著位置。避免將搜索框隱藏在下拉菜單中或隱藏在搜索圖標后面(漸進式披露),因為這會讓用戶很難找到它。此外,當你隱藏你的搜索欄時,你添加了一個額外的動作,用戶必須在搜索你的網站之前采取。搜索欄加入放大鏡圖標:圖標作為一個動作或一個物體的心理捷徑和視覺線索。對于搜索操作,放大鏡是普遍接受的符號,使用它將使用戶更容易識別你的搜索欄,即使沒有文本標簽。當選擇一個放大圖標,選擇一個示意圖圖標,不是過度程式化,以增加識別的速度。使用大量的對比度和填充,以確保圖標突出,并使其足夠大。遵循搜索按鈕設計慣例:當為搜索欄創建一個搜索按鈕時,要遵循好的按鈕設計的慣例,確保它是正確的大小和足夠的對比度,以使它突出。確保用戶可以使用鍵盤上的"輸入"功能提交他們的搜索查詢。一些用戶仍然使用enter來提交查詢,而且它對于可訪問性也很好。使用占位符文本引導用戶搜索:使用一個搜索查詢示例作為占位符文本,引導用戶在您的站點上進行搜索查詢。這對網站搜索欄很有用,用戶可以在搜索欄中搜索不同的條目。限制占位符文本的長度,以減少認知負荷,并確保有足夠的對比度,使其易于閱讀。設計一個簡單的搜索框:創建一個搜索框,看起來像一個搜索框,而且很容易使用。從一個簡單的搜索開始,如果需要,給用戶提供使用搜索過濾器或高級搜索機制的選項。搜索欄放在合適的位置:網站用戶使用F模式瀏覽網站,把你的搜索欄放在這個F模式中是很重要的,這樣用戶可以看到它。這是在頂部中心或右上方的網站。此外,用戶實際上希望在頁面頂部找到網站的搜索欄。不要把你的搜索欄埋在頁腳,用戶需要在那里尋找它。使用熱圖來找出你的網站上用戶滾動和點擊最多的區域(熱點),并將你的搜索欄放在那里。搜索欄進行提示:當用戶輸入他們的搜索查詢時,自動提示會引導用戶避免在搜索查詢公式中出現錯誤。確保自動建議是有益的,以避免混淆或分散用戶的注意力。通過加粗顯示用戶輸入的信息和自動提示之間的差異。搜索欄放在每個頁面上:在搜索欄設計中,讓用戶總是能夠訪問搜索框。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/528986.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/528986.shtml
英文地址,請注明出處:http://en.pswp.cn/news/528986.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

mysql的使用優化問題嗎_如何對 mysql 進行優化的問題

3641 天前mingszu-------------------------------------------------------------------------------------------------------------------------------------------------------------------| Table | Non_unique | Key_name | Seq_in_index | Column_name | Collation | Ca…

通過 xlsx 解析上傳excel的數據

一、前言 在前端開發中,特別是在后臺管理系統中,導入數據(上傳excel)到后端是是否常見的功能;而一般的實現方式都是通過接口將excel上傳到后端,再有后端進行數據解析并做后續操作。 今天,來記錄…

狀態機設計的一般步驟_淺談狀態機

來源:公眾號【ZYNQ】ID :FreeZynq整理 :李肖遙本文目錄前言狀態機簡介狀態機分類Mealy 型狀態機Moore 型狀態機狀態機描述一段式狀態機二段式狀態機三段式狀態機狀態機優缺點總結擴展-四段式狀態機01. 前言狀態機是FPGA設計中一種非常重要、…

java中default_Java 中關于default 訪問權限的討論

Java中關于成員變量訪問權限問題一般書中會給出如下表格:簡單地描述一下表中的內容:用private 修飾的成員變量只能在類內部訪問;用default修飾的成員變量可以再內部訪問,也可以被同個包(同一目錄)中的類訪問;default修…

python手機解釋器_python3

Python解釋器Linux/Unix的系統上,Python解釋器通常被安裝在 /usr/local/python3這樣的有效路徑(目錄)里。我們可以將路徑 /usr/local/python3/bin 添加到您的Linux/Unix操作系統的環境變量中(最好參照您python的安裝路徑進行添加),這樣您就可以通過 shel…

increment java_Java中的increment()有什么作用?

publicclassThisTest{privateinti0;//第一個構造器:有一個int型形參ThisTest(inti){this.ii1;//此時this表示引用成員變量i,而非函數參數iSystem.out.println("Intconstructori—...public class ThisTest {private int i0;//第一個構造器&#xff…

python保存模塊_Python使用Pickle模塊進行數據保存和讀取的講解

pickle 是一個 python 中, 壓縮/保存/提取 文件的模塊,字典和列表都是能被保存的.但必須注意的是python2以ASCII形式保存,而在python3中pickle是使用轉換二進制的數據壓縮方法保存數據所以,在保存或者讀取數據的時候,打開文件應該…

java 輸出當月日歷_java 實現打印當前月份的日歷

實現當前日歷的打印,當前日期用*來表示。關鍵得出這個月的第一天是星期幾。基姆拉爾森計算公式W (d2*m3*(m1)/5yy/4-y/100y/400) mod 7在公式中d表示日期中的日數1,m表示月份數。y表示年數。注意1:在公式中有個與其它公式不同的地方&#xff…

pythonmessage用法_請問Mac下如何用python讀取iMessage信息?

很早之前,學習Python web編程的時候,就涉及一個Python的urllib。可以用urllib.urlopen(“url”)。read()可以輕松讀取頁面上面的靜態信息。但是,隨著時代的發展,也來越多的網頁中更多的使用javascript、jQuery、PHP等語言動態生成…

xmlhttprequest 跨域_跨域資源共享(CORS)安全性

跨域資源共享(CORS)安全性背景 提起瀏覽器的同源策略,大家都很熟悉。不同域的客戶端腳本不能讀寫對方的資源。但是實踐中有一些場景需要跨域的讀寫,所以出現了一些hack的方式來跨域。比如在同域內做一個代理,JSON-P等。但這些方式都存在缺陷&…

java 圖片識別 tess4j_圖像文字識別(四):java調用tess4j識別圖像文字

轉自:https://blog.csdn.net/a745233700/article/details/80203340javajava調用tess4j識別圖像文字Tesseract-OCR支持中文識別,而且開源和提供全套的訓練工具,是快速低成本開發的首選。前面記錄過在java中調用tesseract-orc,該方法…

sql in轉換為join_同一個SQL語句,為啥性能差異咋就這么大呢?(1分鐘系列)

《數據庫允許空值,往往是悲劇的開始》一文通過explain來分析SQL的執行計劃,來分析null對索引命中情況的影響,有不少朋友留言,問explain結果中的type字段,ref,ALL等不一樣的值究竟是什么含義。今天花1分鐘簡…

java rmi接口 超時設置_Spring RMI客戶端讀超時設置 | 學步園

標準Java的RMI設置我所知道的有三種方式,其中第1、2種不區分框架均適用,但影響整個JVM級別的RMI服務1. 啟動時設置sun.rmi.transport.tcp.responseTimeout,單位是毫秒java -Dsun.rmi.transport.tcp.responseTimeout502.在應用程序中設置環境變…

python黑客庫長安十二時辰 更新_【Python成長之路】python 從零學爬蟲 -- 沒時間看《長安十二時辰》電視劇怎么辦?直接爬取所有劇情吧!...

【寫在前面】最近大火的《長安十二時辰》真的是好看,算的是良心網劇了。但是由于平時工作時間較長,經常無法準時追劇,并且又因為不想見到元裁那對挨千刀的(作為演員,演技是值得肯定的,角色演繹的讓人看的心煩)。因此就…

java字符串筆試題_五道Java常見筆試題及答案匯總

1、String和StringBuffer的區別?答:Java平臺提供了兩個類:String和StringBuffer,它們可以儲存和操作字符串,即包含多個字符的字符數據。這個String類提供了數值不可改變的字符串。而這個StringBuffer類提供的字符串進行…

遙感原理與應用孫家炳_2.2遙感應用模型

章節概覽遙感應用模型是遙感的一種定量化手段,通常在遙感領域有一個更廣為人知的名詞——定量遙感。但是定量遙感是一種方法模型而非技術手段,隨著科學的發展,熱門越來越體會到定量遙感的必要性。定量遙感的應用是十分廣泛的,也是…

python升級命令debian_debian python 2.7.11 升級

首先下載源tar包可利用linux自帶下載工具wget下載,如下所示:下載完成后到下載目錄下,解壓tar -zxvf Python-2.7.11.tgz進入解壓縮后的文件夾cdPython-2.7.11在編譯前先在/wp-content/local建一個文件夾python27(作為python的安裝路徑&#xf…

mysql必學十大必會_MYSQL 學習(一)--啟蒙篇《MYSQL必知必會》

MYSQL必知必會一. DDL 數據定義語言Data Definition Language 是指CREATE,ALTER和DROP語句。DDL允許添加/修改/刪除包含數據的邏輯結構,或允許用戶訪問/維護數據(數據庫,表,鍵,視圖......)的邏輯結構。DDL是關于“元數…

python連接wifi_python 自動重連wifi windows的方法

如下所示:# codingutf-8import urllib2import urllibfrom cookielib import CookieJarimport osimport reimport timeclass ConnectWeb(object):def __init__(self):self.cookiejarinmemory CookieJar()self.opener urllib2.build_opener(urllib2.HTTPCookieProce…

java for新循環_Java 8 新語法習慣 (for 循環的函數替代方案)

我們看這樣一個示例public class ForDemo {public static void main(String[] args) {// TODO Auto-generated method stubSystem.out.println("Get set...");for (int i 0; i < 4; i) {System.out.println(i"...");}}}測試結果Get set...0...1...2...…