網(wǎng)站建設(shè)中搜索功能的一些細(xì)節(jié)

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


“這有個搜索功能要加一下,樣式我給你?!?/p>

“好?!?/p>

“這搜索框連個提示也沒有怎么搜?歷史記錄呢?模糊匹配呢?還有…..balabala”


“你也沒說?。 ?/p>

——來自設(shè)計獅與程序猿的日常


搜索作為大部分互聯(lián)網(wǎng)產(chǎn)品都具備的功能,直接影響著產(chǎn)品的用戶體驗。在進(jìn)行搜索功能的設(shè)計時要以簡單、高效為核心目標(biāo),每一步的細(xì)節(jié)設(shè)計都要反復(fù)驗證是否脫離了需求和核心目標(biāo)。


根據(jù)搜索的行為,可將其拆分為五步:搜索入口-搜索觸發(fā)-內(nèi)容輸入-點(diǎn)擊搜索-反饋結(jié)果。


一、搜索入口


搜索入口具有提示和引導(dǎo)操作的作用,主要類型有四種:主頁搜索、搜索框、多條件搜索、搜索icon。


1. 主頁搜索


將搜索作為獨(dú)立的頁面,以搜索為導(dǎo)向,整個產(chǎn)品的使用圍繞搜索這一核心功能功能展開。比較典型的如百度、谷歌等,搜索框功能強(qiáng)大,用戶可以進(jìn)行各種嘗試。谷歌主頁中的手氣不錯以及百度搜索的個性化推薦和新聞,為產(chǎn)品引進(jìn)更多的流量,增加了用戶黏性。


2. 搜索框


這種是在網(wǎng)頁中最為常見的,應(yīng)用也最廣泛,大多居于頁面內(nèi)容區(qū)域的上方,有的出于節(jié)省空間和搜索需求的考量,也內(nèi)嵌在導(dǎo)航欄中。搜索框內(nèi)會有文字的提示,提示用戶搜索的方式,還有一些產(chǎn)品在搜索框內(nèi)放置當(dāng)前的熱詞、活動、新功能等,將搜索框做成了運(yùn)營的入口。


搜索框的后面一般會伴有搜索按鈕或放大鏡的icon,可點(diǎn)擊按鈕和鍵盤回車進(jìn)行搜索。在頁面滑動時,搜索框一般會固定在頁面的頂端,用以提示用戶目前搜索內(nèi)容,同時也方便重新搜索。


3. 多條件搜索


多條件搜索的方式常見于旅游、出行類的網(wǎng)站,如貓途鷹、攜程、東方航空等,需要輸入時間、地點(diǎn)、人員等信息,單一的搜索框不能滿足用戶的需求,多條件的搜索框一般置于頁面中較醒目的位置,引導(dǎo)用戶操作。


4. 搜索icon


頁面中僅僅展示搜索的icon,一般放在頁面的導(dǎo)航欄中偏右側(cè)的位置,點(diǎn)擊icon會拉出搜索框,典型的如站酷、ui中國等,還有的點(diǎn)擊icon會在頁面中喚醒搜索功能,如behance。


搜索icon的形式雖然可以節(jié)約導(dǎo)航欄的空間,但相對搜索框來說對用戶的引導(dǎo)性較差,因此比較適合以搜索為輔助功能的產(chǎn)品。


二、搜索觸發(fā)

1. 搜索框觸


點(diǎn)擊搜索框或搜索icon,呈激活狀態(tài),光標(biāo)在框內(nèi)閃動,引導(dǎo)信息淡化或消失;有的搜索框還會伴隨彈出輔助區(qū)域,區(qū)域內(nèi)包含熱詞、搜索歷史等信息,典型如騰訊視頻、淘寶等。


2. 搜索形式


第一種是有搜索/確定按鈕或icon的搜索框,用戶輸入完成后可點(diǎn)擊按鈕進(jìn)行搜索,也可點(diǎn)擊鍵盤回車搜索;另一種是無搜索按鈕的搜索框,用戶需鍵盤回車搜索。


在網(wǎng)頁設(shè)計中,第一種應(yīng)用比較廣泛,第二種國外網(wǎng)站應(yīng)用較多,如dribbble等。還有一些搜索框內(nèi)添加了拍照、上傳圖片、語音輸入等功能,使得搜索方式更加多元化。

文章題目:網(wǎng)站建設(shè)中搜索功能的一些細(xì)節(jié)
文章鏈接:http://www.muchs.cn/news28/106578.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項目有網(wǎng)站建設(shè)

廣告

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

成都定制網(wǎng)站網(wǎng)頁設(shè)計