中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

如何設(shè)計(jì)出眾的搜索框

2022-06-27    分類: 網(wǎng)站建設(shè)

許多人可能認(rèn)為搜索框不需要設(shè)計(jì); 畢竟這只是兩個(gè)簡(jiǎn)單的元素。然而,在內(nèi)容繁雜的網(wǎng)站中,搜索框通常是最常用的設(shè)計(jì)元素。當(dāng)用戶遇到相對(duì)復(fù)雜的網(wǎng)站時(shí),他們會(huì)立即尋找搜索框,已到達(dá)到最終目的。搜索框的設(shè)計(jì)及其可用性就顯得尤為重要。


兩種類型

1、即時(shí)搜索:

結(jié)果立即顯示在用戶界面上,不需要按鈕,放大鏡僅顯示為一個(gè)圖標(biāo),輸入時(shí)立即搜索

2、常規(guī)搜索

通過(guò)用戶點(diǎn)擊搜索按鈕后才開(kāi)始執(zhí)行搜索

何時(shí)使用

1、目標(biāo)對(duì)象很難找到時(shí)

a) 對(duì)象很多時(shí);如從Mockplus的圖標(biāo)庫(kù)中需要找到某個(gè)圖標(biāo)時(shí)。

b) 可能的目標(biāo)對(duì)象不在同一個(gè)位置時(shí);如在磁盤(pán)中查找某類型文件時(shí)。

c) 數(shù)據(jù)很難找到時(shí);如在一篇長(zhǎng)文本中搜索某個(gè)字符串時(shí)。

2、需要查找特定的內(nèi)容時(shí);比如我們?cè)谔詫氈兴阉髌ヅ淠撤N特征的商品時(shí)。

3、需要的結(jié)果不能在5秒找到時(shí)。

設(shè)計(jì)理念

1、它是界面的一部分,所以要放在一個(gè)顯眼的位置,要容易找到;

2、在同一應(yīng)用中,它們應(yīng)該有統(tǒng)一的外觀;

3、它的功能應(yīng)該是有效的,它的結(jié)果應(yīng)該是準(zhǔn)確的,它的速度應(yīng)該是盡可能快速的。

外觀特征

1、不需要使用標(biāo)簽,使用一個(gè)可選的提示;

2、提示可以是一個(gè)指令(如搜索類型),或者一個(gè)范圍;

3、提示語(yǔ)要簡(jiǎn)短;

4、即時(shí)搜索時(shí),提示首字母大寫(xiě);常規(guī)搜索時(shí),首字母小寫(xiě)。

搜索框設(shè)計(jì)的8個(gè)技巧

1.使用放大鏡圖標(biāo)

根據(jù)定義,圖標(biāo)是對(duì)象,動(dòng)作或想法的可視化表示,并且有幾個(gè)圖標(biāo)是用戶記憶最深刻的,也是通用的。放大鏡圖標(biāo)就是其中之一。即使沒(méi)有文字標(biāo)簽,用戶也可以識(shí)別放大鏡圖標(biāo)的作用。


2. 將搜索框放在用戶希望找到的地方

如果搜索對(duì)于你的應(yīng)用或網(wǎng)站來(lái)說(shuō)是重要的功能,那么搜索框必須放在顯眼的位置,讓用戶一眼就能找到。

研究發(fā)現(xiàn),搜索框放置的好位置是你網(wǎng)站上每個(gè)頁(yè)面的左上角或右上角,用戶可以使用常見(jiàn)的F形掃描模式輕松找到它。理想情況下,搜索框應(yīng)該好匹配網(wǎng)站的整體設(shè)計(jì),并在用戶需要時(shí)輕松展現(xiàn)。

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

搜索按鈕可以幫助人們了解還有額外的觸發(fā)操作 - 即使他們通常使用Enter鍵。

4.將搜索框放在每一頁(yè)上

始終提供對(duì)每個(gè)頁(yè)面的搜索框的訪問(wèn)權(quán)限,因?yàn)槿绻愕挠脩粽也坏剿麄冋诓檎业膬?nèi)容,他們將會(huì)使用搜索功能,無(wú)論他們處于你網(wǎng)站的哪個(gè)位置。


5.使搜索框簡(jiǎn)單

如果你設(shè)計(jì)一個(gè)搜索框,請(qǐng)確保它看起來(lái)像一個(gè)搜索框,并盡可能簡(jiǎn)單的使用。根據(jù)可用性研究,默認(rèn)情況下沒(méi)有顯示高級(jí)搜索選項(xiàng),這樣更加顯示用戶友好。高級(jí)搜索選項(xiàng)可能會(huì)混淆將嘗試使用它的用戶。

7.自適應(yīng)字段大小

輸入字段太短是設(shè)計(jì)人員常見(jiàn)的錯(cuò)誤。當(dāng)然用戶可以鍵入長(zhǎng)查詢,但只有一部分文本可見(jiàn),部分文字被隱藏,這意味著可用性差。因?yàn)橛脩魺o(wú)法輕松查看和編輯其查詢。實(shí)際上,當(dāng)搜索框能夠輸入的文本有限時(shí),用戶被迫使用短的文本進(jìn)行查詢,這樣就不能精確的查詢。如果輸入字段根據(jù)其預(yù)期輸入進(jìn)行大小調(diào)整,那么它們更容易閱讀并給用戶提供良好的用戶體驗(yàn)。

經(jīng)驗(yàn)法則是具有27個(gè)字符的文本輸入(它可以容納90%的查詢)。


8.使用自動(dòng)建議機(jī)制

自動(dòng)建議機(jī)制可以幫助用戶通過(guò)輸入的字符進(jìn)行預(yù)測(cè)來(lái)找到正確的查詢。自動(dòng)建議機(jī)制不是加快搜索過(guò)程,而是關(guān)于指導(dǎo)用戶并幫助他們構(gòu)建搜索查詢。用戶在查詢配置方面非常差:如果在第一次嘗試時(shí)沒(méi)有獲得良好的結(jié)果,他們可能就放棄了。自動(dòng)建議機(jī)制可以幫助用戶更好地表達(dá)他們需要的搜索查詢。

Google早在2008就掌握此項(xiàng)技術(shù)。由于用戶傾向于多次搜索相同的內(nèi)容,通過(guò)記住搜索記錄,Google可以節(jié)省時(shí)間并創(chuàng)建更加便捷的體驗(yàn)。

有人會(huì)說(shuō),我不想自己去設(shè)計(jì),有現(xiàn)成可以直接用的搜索框嗎?當(dāng)然,Mockplus這款原型軟件封裝了彈出面板、內(nèi)容面板、滾動(dòng)區(qū)、抽屜、輪播等系列常用交互組件以及近200個(gè)組件,提供3000個(gè)以上的圖標(biāo)素材。做圖時(shí),只需要把這些組件放入工作區(qū)進(jìn)行組合,一張?jiān)蛨D就可以迅速呈現(xiàn)。想用什么直接搜索,方便,快捷,讓你在這個(gè)追求效率的時(shí)代省時(shí)更高效。


聽(tīng)說(shuō)Mockplus最近還放出了史無(wú)前例的限時(shí)優(yōu)惠。俗話說(shuō):“過(guò)了這個(gè)村就沒(méi)這個(gè)店”。能否抓住,你決定!

分享文章:如何設(shè)計(jì)出眾的搜索框
文章路徑:http://www.rwnh.cn/news43/172443.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供搜索引擎優(yōu)化網(wǎng)站維護(hù)、網(wǎng)站導(dǎo)航、網(wǎng)站營(yíng)銷、做網(wǎng)站、自適應(yīng)網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)
赣州市| 广宁县| 天镇县| 亚东县| 昌江| 庄浪县| 赣州市| 莒南县| 彭泽县| 松溪县| 宁陵县| 页游| 巴彦县| 稻城县| 上蔡县| 镇安县| 内黄县| 龙口市| 叶城县| 永修县| 双牌县| 房产| 夏邑县| 大宁县| 木里| 河池市| 忻城县| 会宁县| 通州区| 宝山区| 东莞市| 维西| 南通市| 榆林市| 城口县| 吉水县| 田林县| 隆德县| 阿坝县| 浮山县| 无棣县|