<label id="2a06w"><tt id="2a06w"></tt></label><label id="2a06w"><tt id="2a06w"><em id="2a06w"></em></tt></label><menu id="2a06w"></menu>
  • <dfn id="2a06w"><var id="2a06w"><label id="2a06w"></label></var></dfn>
    <sup id="2a06w"><button id="2a06w"><em id="2a06w"></em></button></sup>
    <dfn id="2a06w"><var id="2a06w"></var></dfn>
    <dfn id="2a06w"></dfn>
  • <dfn id="2a06w"><code id="2a06w"><ins id="2a06w"></ins></code></dfn>
  • <small id="2a06w"><samp id="2a06w"></samp></small>
  • <dfn id="2a06w"><table id="2a06w"><center id="2a06w"></center></table></dfn>
    <label id="2a06w"><tt id="2a06w"><em id="2a06w"></em></tt></label>
    <strike id="2a06w"><form id="2a06w"></form></strike>
    <menu id="2a06w"><tt id="2a06w"></tt></menu>

    將想法與焦點(diǎn)和您一起共享

    如何讓你的搜索框“與眾不同”?發(fā)布者:本站     時間:2020-06-02 11:06:49

    搜索框,供用戶輸入檢索的入口。搜索框是網(wǎng)站最基本的也是最不可缺少的。雖然簡單但是其重要性確是不言而喻的。如何在紛雜的網(wǎng)站中,讓用戶盡快的找到自己想要的東西,那么搜索框的設(shè)計便極其重要。
    常規(guī)搜索:
    通過用戶點(diǎn)擊搜索按鈕后才開始執(zhí)行搜索,以達(dá)到一定的目的。
    即時搜索:
    結(jié)果立即顯示在用戶界面上,不需要按鈕,放大鏡僅顯示為一個圖標(biāo),輸入時立即搜索,達(dá)到一定的目的。
    外觀特征
    1、不需要使用標(biāo)簽,使用一個可選的提示;
    2、提示可以是一個指令(如搜索類型),或者一個范圍;
    3、提示語要簡短;
    4、即時搜索時,提示首字母大寫;常規(guī)搜索時,首字母小寫。
    設(shè)計理念
    1、它是界面的一部分,所以要放在一個顯眼的位置,要容易找到;
    2、在同一應(yīng)用中,它們應(yīng)該有統(tǒng)一的外觀;
    3、它的功能應(yīng)該是有效的,它的結(jié)果應(yīng)該是準(zhǔn)確的,它的速度應(yīng)該是盡可能快速的。
    如何改進(jìn)設(shè)計搜索框,以減少用戶所需要花費(fèi)的查詢時間呢?下面就簡單的介紹下。

    搜索框要明顯
    如果搜索是你的應(yīng)用程序/網(wǎng)站的一個重要功能,那么搜索框的顯示務(wù)必要足夠顯著,以保證用戶能夠最快的發(fā)現(xiàn)它。研究發(fā)現(xiàn),搜索框放置的最佳位置是你網(wǎng)站上每個頁面的左上角或右上角,用戶可以使用常見的F形掃描模式輕松找到它。理想情況下,搜索框應(yīng)該完美匹配網(wǎng)站的整體設(shè)計,并在用戶需要時輕松展現(xiàn)。
    使用放大鏡圖標(biāo)       
    一個搜索框應(yīng)該始終與放大鏡圖標(biāo)放在一起。所謂圖標(biāo),其實就是代表著一個對象、動作、想法等多種含義的圖形符號。我們通過圖標(biāo)看到的不僅僅是圖標(biāo)本身,而是它所代表的內(nèi)在含義。然而,對于用戶來講,具有通用性代表含義的圖標(biāo)為數(shù)并不多,幸運(yùn)的是,放大鏡圖標(biāo)正是其中之一。即使沒有文本標(biāo)簽,用戶也能輕易地識別放大鏡圖標(biāo)
    將搜索框放在每一頁上
    用戶在每個頁面上都應(yīng)該能獲取搜索框,因為如果用戶找不到他們要找的內(nèi)容,他們往往會自然而然地想要嘗試使用搜索功能來進(jìn)行查找,他們才不關(guān)心自己當(dāng)前是在你網(wǎng)站的哪個地方。
    提供一個搜索按鈕
    搜索按鈕可以幫助用戶識別出觸發(fā)搜索操作的下一步——即使他們可能往往會通過按Enter鍵來執(zhí)行此操作。
    搜索框要足夠簡單
    如果你設(shè)計了一個搜索框,請確保它看起來確實像是一個搜索框,并且使用起來要足夠簡單??捎眯匝芯勘砻?,默認(rèn)情況下不顯示高級搜索選項對用戶會更加友好。高級搜索選項(例如下面的示例中的布爾搜索查詢)可能會混淆要嘗試使用它的用戶。
    搜索框尺寸大小要合適
    輸入框太短是設(shè)計人員常犯的一個錯誤。當(dāng)然,用戶可以鍵入長查詢,但一次只能看到一部分輸入的文本,這自然也就存在可用性問題,因為用戶無法輕松地回看和編輯其剛剛才輸入的查詢條件。事實上,當(dāng)搜索框具有有限數(shù)量的可見字符時,用戶會被迫使用短的、不精確的查詢條件,因為更長的查詢條件將不易閱讀。 但如果輸入框的長度是根據(jù)用戶的預(yù)期輸入來確定大小的,那對用戶而言就友好多了。
    明確告訴用戶可以搜索哪些內(nèi)容
    在輸入框中顯示一個搜索查詢的示例條件是一個不錯的做法,這樣能夠向用戶表明他們究竟可以應(yīng)用該搜索框搜索哪些/哪類內(nèi)容。 如果用戶可以搜索多個條件,則使用輸入提示模式來向用戶說明(例如,下面示例中的百度。最新消息使得我們可以很輕松地在輸入框中寫明作為占位符的提示文本。
    將搜索框放在用戶預(yù)期找到的位置
    如果因為搜索框不夠突出、不容易察覺,用戶還得花費(fèi)精力去找它,那這個設(shè)計無疑是不夠友好的。
    因此,最好將搜索框放在頁面的右上方或中上方,以確保用戶能在預(yù)期的位置找到它。
    使用自動檢索匹配機(jī)制
    自動檢索匹配機(jī)制可根據(jù)用戶輸入的字符進(jìn)行預(yù)測來幫助用戶找到一個可能匹配的查詢條件。 該機(jī)制并不是為了加快搜索過程,而是為了引導(dǎo)用戶并幫助他們構(gòu)建他們的查詢條件。普通用戶在構(gòu)建查詢方面往往會有困難:如果他們在第一次嘗試查詢后沒有獲得滿意的結(jié)果,后面的查詢也會很難順利,事實上,他們常常就會放棄。而當(dāng)自動檢索匹配機(jī)制運(yùn)作順利時,它們就能幫助用戶將查詢條件表達(dá)的更加清楚。

    網(wǎng)站設(shè)計中,一個好的搜索框,不管是直觀上,還是感觀上,都要給用戶帶來方便快捷的使用功能,提升用戶體驗。




    選擇我們,優(yōu)質(zhì)服務(wù),不容錯過
    1. 優(yōu)秀的網(wǎng)絡(luò)資源,強(qiáng)大的網(wǎng)站優(yōu)化技術(shù),穩(wěn)定的網(wǎng)站和速度保證
    2. 15年上海網(wǎng)站建設(shè)經(jīng)驗,優(yōu)秀的技術(shù)和設(shè)計水平,更放心
    3. 全程省心服務(wù),不必?fù)?dān)心自己不懂網(wǎng)絡(luò),更省心。
    ------------------------------------------------------------
    24小時聯(lián)系電話:021-58370032
    關(guān)鍵詞標(biāo)簽:上海網(wǎng)站建設(shè) 上海網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序開發(fā)
    99人妻中文字幕视频在,亚洲无码视频在线免费看,久久国产乱子伦免费精品,日本中文字幕色视频网站
    <label id="2a06w"><tt id="2a06w"></tt></label><label id="2a06w"><tt id="2a06w"><em id="2a06w"></em></tt></label><menu id="2a06w"></menu>
  • <dfn id="2a06w"><var id="2a06w"><label id="2a06w"></label></var></dfn>
    <sup id="2a06w"><button id="2a06w"><em id="2a06w"></em></button></sup>
    <dfn id="2a06w"><var id="2a06w"></var></dfn>
    <dfn id="2a06w"></dfn>
  • <dfn id="2a06w"><code id="2a06w"><ins id="2a06w"></ins></code></dfn>
  • <small id="2a06w"><samp id="2a06w"></samp></small>
  • <dfn id="2a06w"><table id="2a06w"><center id="2a06w"></center></table></dfn>
    <label id="2a06w"><tt id="2a06w"><em id="2a06w"></em></tt></label>
    <strike id="2a06w"><form id="2a06w"></form></strike>
    <menu id="2a06w"><tt id="2a06w"></tt></menu>