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

網(wǎng)頁(yè)設(shè)計(jì)中搜索框設(shè)計(jì)要素

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

搜索框是我們網(wǎng)頁(yè)設(shè)計(jì)中用到的UI控件之一,基本大型一些的網(wǎng)站和app中會(huì)有搜索框。大多數(shù)人認(rèn)為搜索框不需要設(shè)計(jì),因?yàn)樗坪蹙褪怯蓛蓚€(gè)最簡(jiǎn)單的元素構(gòu)成的。在以內(nèi)容為導(dǎo)向的網(wǎng)站中,搜索框的重要性會(huì)相對(duì)更明顯,用戶需要快速又無(wú)痛地找到他們想要的內(nèi)容。而對(duì)于設(shè)計(jì)相對(duì)負(fù)責(zé)的網(wǎng)站而言,這個(gè)需求尤其明顯。搜索框的可用性設(shè)計(jì),是整個(gè)設(shè)計(jì)的關(guān)鍵。

今天的文章與創(chuàng)新互聯(lián)來(lái)聊聊搜索框設(shè)計(jì),如何讓用戶盡量節(jié)省時(shí)間,搜到他們想要的內(nèi)容。

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

時(shí)至今日,搜索的概念和放大鏡圖標(biāo)之間的關(guān)系已經(jīng)深入人心,根深蒂固了。在日常最常用、最易于識(shí)別的幾個(gè)圖標(biāo)當(dāng)中,放大鏡所帶代表的搜索圖標(biāo)就是其中之一。

即使在沒(méi)有文本標(biāo)簽標(biāo)識(shí)的情況下,用戶也能輕松地識(shí)別圖標(biāo)的含義。

小貼士:使用最簡(jiǎn)略直觀的放大鏡圖標(biāo),細(xì)節(jié)越少,越容易識(shí)別。

2、顯眼的搜索輸入框

如果搜索是你的網(wǎng)站或者APP的重要功能的話,你應(yīng)當(dāng)讓搜索框足夠顯眼,這樣的能設(shè)計(jì)讓用戶最快發(fā)現(xiàn)它的存在。

左邊:搜索功能隱藏在圖標(biāo)之后

顯示完整的文本輸入框是很重要的,隱藏在按鈕背后的輸入框會(huì)讓用戶覺(jué)得不是那么明顯,不容易被快速發(fā)現(xiàn)。需要點(diǎn)擊之后用戶才能看到。

3、提供搜索按鈕

按鈕的存在讓用戶能夠明白搜索的觸發(fā)方式——也就是說(shuō)通過(guò)觸發(fā)按鈕來(lái)完成這一操作。

小貼士:

  • 控制搜索按鈕的尺寸大小,讓用戶使用光標(biāo)可以輕松找到并點(diǎn)擊,讓觸發(fā)區(qū)域大小合適。
  • 讓用戶可以通過(guò)回車鍵提交搜索,許多用戶仍然有通過(guò)點(diǎn)擊鍵盤按鍵來(lái)觸發(fā)搜索的習(xí)慣。

4、每頁(yè)都保留搜索輸入框

你應(yīng)該為用戶擁有在每個(gè)頁(yè)面都能立刻進(jìn)行搜索的權(quán)限,如果你的用戶在特定的頁(yè)面找不到他們想要的內(nèi)容,可以立刻通過(guò)搜索獲取內(nèi)容,無(wú)論他在網(wǎng)站的哪個(gè)地方。

5、讓搜索框盡量簡(jiǎn)單

在你設(shè)計(jì)搜索框的時(shí)候,請(qǐng)盡量讓它看起來(lái)就是一個(gè)搜索框,并且簡(jiǎn)單易用??捎眯匝芯勘砻?,默認(rèn)沒(méi)有顯示高級(jí)選項(xiàng)的搜索框看起來(lái)更加友好,所以,通常情況下給用戶提供的搜索框最好不要提供進(jìn)階的搜索選項(xiàng)。


6、讓搜索框處于用戶預(yù)期的位置

當(dāng)用戶想要搜索內(nèi)容的時(shí)候還需要花費(fèi)精力來(lái)尋找搜索框,這就非常尷尬了。這意味著搜索框本身就不容易被察覺(jué)。

下面這個(gè)圖表來(lái)自 A. Dawn Shaikh 和 Keisi Lenz 的一項(xiàng)研究,它展示出了 142 名被調(diào)查者對(duì)于網(wǎng)站的搜索框的預(yù)期的位置。這項(xiàng)研究表明,網(wǎng)站的左上角和右上角是用戶所期待的搜索框的位置,用戶在使用F型掃視法查看內(nèi)容的時(shí)候,可以輕松找到搜索框。



這份研究還表明,右上角的區(qū)域是用戶搜尋輸入框的選區(qū)域。

因此,將輸入框置于頂部靠右或者頂部居中的位置,用戶會(huì)主動(dòng)在這個(gè)地方尋找搜索框。



小貼士:

  • 在理想情況下,搜索框的設(shè)計(jì)應(yīng)當(dāng)和整個(gè)網(wǎng)站的設(shè)計(jì)風(fēng)格保持一致,同時(shí)在視覺(jué)上要略顯突出,便于用戶發(fā)覺(jué)它的存在。
  • 如果網(wǎng)站的內(nèi)容足夠多,搜索框在設(shè)計(jì)上顯著程度應(yīng)該越高,如果搜索功能對(duì)于你的網(wǎng)站至關(guān)重要,那么你應(yīng)該采用較大的對(duì)比度,確保輸入框和按鈕從背景中脫穎而出。

7、合理的輸入框尺寸

輸入框太小是最常見(jiàn)的搜索框設(shè)計(jì)錯(cuò)素,雖然用戶可以輸入比輸入框更長(zhǎng)的內(nèi)容,但是可見(jiàn)的部分往往無(wú)法完全可見(jiàn),這種設(shè)計(jì)的可用性并不強(qiáng)。這樣的輸入框可能因?yàn)榭梢暦秶南拗疲偈褂脩羰褂枚痰?、不精確的查詢方式,因?yàn)楦L(zhǎng)的內(nèi)容并不適合閱讀。如果輸入框能夠符合用戶的常見(jiàn)輸入內(nèi)容的尺寸來(lái)進(jìn)行匹配,那么它的可用性會(huì)更強(qiáng)。

根據(jù)經(jīng)驗(yàn),輸入框能夠承載的好字符數(shù)量為 27 個(gè),百分之 90 的搜索內(nèi)容都在這個(gè)長(zhǎng)度以內(nèi)。



小貼士:建議考慮使用能根據(jù)輸入長(zhǎng)度增長(zhǎng)而能變長(zhǎng)的輸入框,這不僅節(jié)省了屏幕空間,而且能夠給予用戶足夠的視覺(jué)提示,并快速進(jìn)入搜索環(huán)節(jié)。


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

自動(dòng)建議機(jī)制能夠幫助用戶在輸入的過(guò)程中,動(dòng)態(tài)地預(yù)測(cè)正確的查詢方向。自動(dòng)建議并不會(huì)加快搜索的過(guò)程,但是能夠幫助用戶構(gòu)建正確的搜索關(guān)鍵詞/內(nèi)容。普通用戶在第一次搜索結(jié)果不理想的情況下,很少會(huì)繼續(xù)進(jìn)行嘗試,而自動(dòng)建議運(yùn)作順利的情況下,將會(huì)幫助用戶更好的搜索。

谷歌搜索在這方面有著豐富的經(jīng)驗(yàn),自 2008 年開始,谷歌開始記錄用戶的搜索記錄,并且通過(guò)這種方式節(jié)省時(shí)間,優(yōu)化結(jié)果,創(chuàng)造更為優(yōu)秀的體驗(yàn)。

小貼士


  • 確保你的自動(dòng)搜索建議是有用的。不當(dāng)?shù)乃阉鹘ㄗh內(nèi)容可能會(huì)混淆和分散用戶的注意力。盡量幫助用戶更正拼寫,識(shí)別詞根,預(yù)測(cè)文本,并改進(jìn)你的工具。
  • 當(dāng)用戶開始輸入之后,盡快開始給予用戶建議,例如在第三個(gè)字符之后,為用戶開始提供即時(shí)的、有價(jià)值的建議,降低用戶的輸入難度和工作量。
  • 盡量為用戶提供少于 10 個(gè)搜索結(jié)果,避免信息過(guò)載。
  • 允許使用鍵盤進(jìn)行交互,當(dāng)用戶使用方向鍵向下滾動(dòng)到最后的條目之后,繼續(xù)滾動(dòng)會(huì)跳轉(zhuǎn)到頂部的項(xiàng)目。允許用戶使用Esc按鍵推出列表。
  • 突出顯示輸入的信息和建議的信息之間的差異。


9、讓用戶明白哪些可以搜索到

最好是在輸入框中包含示例,這樣可以向用戶給予建議。如果用戶可以輸入多個(gè)關(guān)鍵詞搜索,那么可以像下面的IMDB的網(wǎng)站一樣給予建議。HTML5 可以輕松的實(shí)現(xiàn)在輸入框內(nèi)加入文本占位符。

小貼士:建議的內(nèi)容不宜過(guò)多,這樣對(duì)于用戶會(huì)有認(rèn)知負(fù)荷。

結(jié)語(yǔ)

搜索是UI設(shè)計(jì)中極為常見(jiàn)的一個(gè)組件,看似簡(jiǎn)單的輸入框背后包含了大量的知識(shí)以及設(shè)計(jì)的要素。即使是微小的更改也會(huì)對(duì)整個(gè)用戶體驗(yàn)帶來(lái)巨大的改變,謹(jǐn)慎。

新聞標(biāo)題:網(wǎng)頁(yè)設(shè)計(jì)中搜索框設(shè)計(jì)要素
網(wǎng)站URL:http://m.rwnh.cn/news43/159143.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供Google、網(wǎng)站策劃、定制網(wǎng)站全網(wǎng)營(yíng)銷推廣、靜態(tài)網(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)

成都app開發(fā)公司
微山县| 韩城市| 镇沅| 尚志市| 石嘴山市| 辉县市| 靖西县| 南城县| 拜泉县| 长顺县| 望奎县| 色达县| 贵定县| 抚州市| 甘孜县| 托克逊县| 宽城| 阳东县| 杭锦旗| 保定市| 达日县| 瓦房店市| 新泰市| 淮滨县| 濉溪县| 嵊州市| 兰考县| 平果县| 西林县| 孟州市| 宿州市| 镇安县| 大理市| 鄂托克旗| 剑川县| 南宁市| 东港市| 麻城市| 汕尾市| 江陵县| 瑞丽市|