營(yíng)銷網(wǎng)站建設(shè)
全網(wǎng)營(yíng)銷網(wǎng)站
高端網(wǎng)站建設(shè)
商城網(wǎng)站建設(shè)
外貿(mào)網(wǎng)站建設(shè)
小程序開(kāi)發(fā)
區(qū)塊鏈開(kāi)發(fā)
物聯(lián)網(wǎng)項(xiàng)目開(kāi)發(fā)
定制app開(kāi)發(fā)
在線教育網(wǎng)站
速成網(wǎng)站建設(shè)
服裝網(wǎng)站建設(shè)
餐飲網(wǎng)站建設(shè)
珠寶首飾網(wǎng)站
機(jī)械制造網(wǎng)站
文化旅游網(wǎng)站
家裝建材網(wǎng)站
美容化妝品網(wǎng)站
數(shù)碼產(chǎn)品網(wǎng)站
模板案例庫(kù)
文章編輯:網(wǎng)站建設(shè) 文章來(lái)源:建站行業(yè)資訊 瀏覽量:次
網(wǎng)站建設(shè)隨著我們產(chǎn)品承載的內(nèi)容越來(lái)越多,網(wǎng)站搜索功能在大多產(chǎn)品中都成了一個(gè)必不可少的功能。最初我們?cè)诳吹骄W(wǎng)站搜索框的時(shí)候,都會(huì)把它當(dāng)作是一個(gè)常規(guī)的UI控件來(lái)對(duì)待,但隨著我們對(duì)產(chǎn)品的用戶體驗(yàn)越來(lái)越重視的情況下,搜索框在設(shè)計(jì)時(shí)還是有許多需要我們注意的地方。
、
不管用戶帶著什么目的去使用搜索功能,其使用行為都是點(diǎn)擊搜索框,彈出搜索中間頁(yè),輸入搜索內(nèi)容,最后查看結(jié)果頁(yè)。因此我們應(yīng)依次對(duì)照這些操作行為進(jìn)行關(guān)鍵點(diǎn)設(shè)計(jì)。這也是今天我要跟大家分享的重點(diǎn)內(nèi)容。

首先給大家看一個(gè)調(diào)查表,這是兩名在谷歌工作的人為因素心理學(xué)博士A.Dawn Shaikh(道恩·沙謝赫)和Keisi Lenz做的一項(xiàng)研究(用戶對(duì)于搜索框在網(wǎng)頁(yè)中預(yù)期出現(xiàn)的位置)。從結(jié)果可以看出左上角和右上角是占比最高的兩個(gè)部分,大部分用戶還是希望搜索功能出現(xiàn)在一個(gè)明顯的位置上。
因此產(chǎn)品中只要有搜索功能,我們通常會(huì)把它放在一個(gè)相對(duì)明顯的位置上,但是搜索入口具體怎么設(shè)計(jì)還是得看搜索功能在這個(gè)產(chǎn)品中的權(quán)重如何。小編在這里不做過(guò)多的分析,簡(jiǎn)單給大家介紹一下現(xiàn)在APP中搜索入口最常見(jiàn)的三種形式。

如上圖中「1」的位置。這種搜索入口,說(shuō)明搜索功能在整個(gè)產(chǎn)品中占據(jù)絕對(duì)的權(quán)重,直接出現(xiàn)在底部或頂部導(dǎo)航欄中,這樣用戶在切換幾個(gè)導(dǎo)航頁(yè)面時(shí),搜索入口是常態(tài)存在的。全局性的設(shè)計(jì)讓用戶可以隨時(shí)點(diǎn)擊進(jìn)入到搜索頁(yè)面。一般而言,此類操作觸發(fā)后對(duì)應(yīng)的搜索頁(yè)面功能和層級(jí)也更加豐富。1.網(wǎng)站制作獨(dú)立導(dǎo)航標(biāo)簽
網(wǎng)站建設(shè)經(jīng)驗(yàn)之: 搜索框式
如上圖中「2」的位置。 任務(wù)型應(yīng)用通常使用搜索框形式,這種設(shè)計(jì)方式占據(jù)了足夠的屏幕寬度,一般放在屏幕的核心位置,通常會(huì)在頁(yè)面頂部位置出現(xiàn),用戶對(duì)此一目了然,可以快速點(diǎn)擊搜索。
網(wǎng)站建設(shè)經(jīng)驗(yàn)之:ICON入口式
如上圖中「3」的位置。 這種入口通常出現(xiàn)在以瀏覽為主、搜索為輔的頁(yè)面。由于占據(jù)空間較小,出現(xiàn)的位置沒(méi)有嚴(yán)格限制,因此放置位置較為靈活,可以出現(xiàn)在頁(yè)面角落或者收起在更多入口當(dāng)中,避免與其它高權(quán)重需求爭(zhēng)權(quán),它更多只是作為一個(gè)輔助功能出現(xiàn)。
這個(gè)頁(yè)面簡(jiǎn)單的來(lái)說(shuō),就是用戶點(diǎn)擊搜索按鈕,頁(yè)面立即彈起的一個(gè)過(guò)渡頁(yè)面。由提示語(yǔ)、返回按鈕、歷史記錄、熱門推薦、清除按鈕這些基本功能組成。但當(dāng)我們滿足這些基本功能點(diǎn)時(shí),如何讓搜索中間頁(yè)的設(shè)計(jì)更加貼心呢?

網(wǎng)站建設(shè)搜索框之:給我一個(gè)精確的提示語(yǔ)
在搜索框中放置提示語(yǔ)或者示范性搜索問(wèn)題來(lái)建議用戶如何使用這個(gè)功能,幫用戶弄清可以搜索些什么。這樣對(duì)用戶也是一種良性的引導(dǎo),給用戶提供了一個(gè)心理預(yù)期,如下圖中(圖一)和(圖二)。

(圖三)在完成基本功能時(shí),它根據(jù)用戶之前的大數(shù)據(jù)搜索情況,量身定制了每個(gè)用戶的專屬提示語(yǔ)。把用戶的習(xí)慣放在第一位,打造一種專屬感,讓用戶覺(jué)得他是被區(qū)別對(duì)待的,從細(xì)節(jié)中去打動(dòng)用戶。
網(wǎng)站制作經(jīng)驗(yàn)關(guān)于搜索框之與歷史記錄靠近一點(diǎn)

在開(kāi)始這個(gè)話題之前先給大家說(shuō)一個(gè)概念,如上圖展示,我們的眼睛會(huì)自動(dòng)把紅色圓形從黑色圓形中找出歸為一類,這就是格式塔-相似律原則。相似律本質(zhì)上是簡(jiǎn)化和整體化認(rèn)知對(duì)象的組織原則,它傾向于將接近、近似的元素組合起來(lái)作為一個(gè)整體。

如圖四、圖五,歷史記錄可以有效的減少用戶對(duì)重復(fù)性內(nèi)容的不必要操作,呈現(xiàn)用戶的搜索歷史。根據(jù)認(rèn)知心理學(xué)中的相似律,搜索框通常位于頁(yè)面頂部,歷史記錄緊貼搜索框展示,此時(shí)用戶的視覺(jué)焦點(diǎn)在這里,更容易注意到,也不會(huì)產(chǎn)生認(rèn)知偏差,因此該位置要避免被其他信息模塊占據(jù)從而割裂二者的聯(lián)系。同時(shí)對(duì)不同模塊在樣式上做點(diǎn)區(qū)別,更好的幫用戶區(qū)分模塊間的區(qū)別。
網(wǎng)站制作經(jīng)驗(yàn)之怎樣做好分類搜索
在搜索功能全局性的情況下,搜索涵蓋的內(nèi)容太多,僅在搜索框中出現(xiàn)提示詞已不足以滿足用戶對(duì)于信息分類搜索的需求??梢郧爸梅诸愃阉髂K,在搜索開(kāi)始前就縮小搜索范圍。

通常當(dāng)我們點(diǎn)擊搜索框之后到進(jìn)入搜索頁(yè),輸入內(nèi)容,點(diǎn)擊「搜索」按鈕到最后完成搜索。通常幾秒就完成了,但就是這幾秒鐘的時(shí)間,是我們產(chǎn)品功能人性化與智能化的體現(xiàn)。那我們應(yīng)該怎么更好的完善這個(gè)過(guò)程呢?
網(wǎng)站制作經(jīng)驗(yàn)之關(guān)于動(dòng)態(tài)實(shí)時(shí)搜索
根據(jù)你輸入的文本,對(duì)應(yīng)的搜索結(jié)果將會(huì)實(shí)時(shí)動(dòng)態(tài)過(guò)濾顯示在屏幕上,幫助用戶更快地找到自己想要的結(jié)果,體現(xiàn)我們產(chǎn)品的智能性。

網(wǎng)站制作關(guān)于搜索框之: 給用戶一點(diǎn)建議
當(dāng)用戶在搜索框輸入內(nèi)容時(shí),搜索框下面出現(xiàn)了關(guān)于這個(gè)關(guān)鍵詞的眾多搜索建議,然后把每條建議進(jìn)行了細(xì)化的拆分,用標(biāo)簽提示。為用戶省去了到結(jié)果頁(yè)進(jìn)行篩選的步驟,可以幫助用戶更快地到達(dá)搜索結(jié)果頁(yè)。

網(wǎng)站制作經(jīng)驗(yàn)之:加點(diǎn)微交互
在輸入關(guān)鍵字時(shí),搜索框下方會(huì)出現(xiàn)一系列的聯(lián)想,而在點(diǎn)擊某條聯(lián)想右邊的箭頭后,我們會(huì)發(fā)現(xiàn)該聯(lián)想進(jìn)入搜索框并引發(fā)了又一系列的聯(lián)想,選擇最終確認(rèn)詞條,點(diǎn)擊搜索按鈕到達(dá)結(jié)果頁(yè)。整個(gè)過(guò)程可以讓用戶快速精準(zhǔn)的到達(dá)搜索結(jié)果頁(yè),避免輸入過(guò)程中出現(xiàn)錯(cuò)誤輸入,最終提升產(chǎn)品轉(zhuǎn)化率。

網(wǎng)站制作經(jīng)驗(yàn)分享之關(guān)于搜索時(shí)間過(guò)長(zhǎng),請(qǐng)考慮動(dòng)畫(huà)
雖然搜索的過(guò)程正常 3 秒內(nèi)可以完成,當(dāng)網(wǎng)絡(luò)不好或者內(nèi)容過(guò)多的時(shí)候,一定要給一個(gè)搜索狀態(tài)展示(或進(jìn)度展示)。告訴用戶我們這個(gè)頁(yè)面正在進(jìn)行中,分散用戶等待過(guò)程中的無(wú)聊感。
搜索結(jié)果頁(yè)是用戶的終極目標(biāo)。怎樣把用戶所需要的信息準(zhǔn)確且重點(diǎn)的展示出來(lái),讓用戶一目了然,是這個(gè)頁(yè)面的主要任務(wù)。
網(wǎng)站制作搜索框怎樣做好多維度展示
當(dāng)展示內(nèi)容過(guò)多時(shí),應(yīng)該對(duì)不同模塊的內(nèi)容進(jìn)行分類整理,把結(jié)果內(nèi)容進(jìn)行模塊展示,提升信息的清晰度和可讀性,幫助用戶快速找到目標(biāo)信息。

網(wǎng)站建設(shè)經(jīng)驗(yàn)關(guān)于怎樣做增加操作功能
在反饋結(jié)果頁(yè)上附加操作功能,讓用戶快速抵達(dá)目的地,縮短操作路徑,更有利于提升用戶操作效率。

網(wǎng)站制作經(jīng)驗(yàn)之搜索框的結(jié)果數(shù)呈現(xiàn)
顯示搜索出來(lái)的結(jié)果的數(shù)量,以便用戶可以決定他們要花費(fèi)多長(zhǎng)時(shí)間瀏覽結(jié)果。
網(wǎng)站制作經(jīng)驗(yàn)分享之搜索框怎樣做好關(guān)鍵字高亮
結(jié)果頁(yè)面中快速查看到關(guān)鍵字并非一件易事,尤其是頁(yè)面文字?jǐn)?shù)量眾多且關(guān)鍵字多次出現(xiàn)時(shí)。對(duì)結(jié)果頁(yè)中關(guān)鍵字高亮顯示,可以讓用戶快速找到自己想要的東西。

網(wǎng)站制作經(jīng)驗(yàn)之關(guān)于搜索框如何進(jìn)行有效的提示和糾錯(cuò)
當(dāng)我們出現(xiàn)輸入錯(cuò)誤的時(shí)候,不要給用戶一個(gè)錯(cuò)誤呈現(xiàn)頁(yè),可以對(duì)用戶進(jìn)行有效的糾錯(cuò)和提示,以便幫助用戶快速且準(zhǔn)確的完成輸入。

以上說(shuō)的這些內(nèi)容都是基于現(xiàn)階段的交互形式,我們?cè)谠O(shè)計(jì)時(shí)應(yīng)該注意的地方。但隨著科技的發(fā)展,搜索的形式也不僅僅只局限在文字搜索,越來(lái)越多的交互媒介出現(xiàn)在我們身邊。這就要求我們,與時(shí)俱進(jìn),更多的了解和探索這些交互媒介,以便更好的提升我們的產(chǎn)品體驗(yàn)。深圳網(wǎng)站建設(shè)博納網(wǎng)絡(luò)編輯整理。
[聲明]本網(wǎng)轉(zhuǎn)載網(wǎng)絡(luò)媒體稿件是為了傳播更多的信息,此類稿件不代表本網(wǎng)觀點(diǎn),本網(wǎng)不承擔(dān)此類稿件侵權(quán)行為的連帶責(zé)任。故此,如果您發(fā)現(xiàn)本網(wǎng)站的內(nèi)容侵犯了您的版權(quán),請(qǐng)您的相關(guān)內(nèi)容發(fā)至此郵箱【qin@198bona.com 】,我們?cè)诖_認(rèn)后,會(huì)立即刪除,保證您的版權(quán)。
技術(shù)咨詢
價(jià)格咨詢
建議投訴
0755-82538016
關(guān)閉窗口