網(wǎng)頁搜索控件的設(shè)計(jì)思考

一、什么是搜索？
百度百科里說，搜索就是將APP里的內(nèi)容存在數(shù)據(jù)庫里，然后索引器打上關(guān)鍵詞標(biāo)簽，存在索引數(shù)據(jù)庫，當(dāng)用戶搜索時(shí)，檢索器去索引數(shù)據(jù)庫提取，將提取的內(nèi)容呈現(xiàn)給用戶。
二、搜索的樣式
不同的功能需求會(huì)影響搜索功能入口的樣式，根據(jù)目前市面上大部分產(chǎn)品的搜索樣式，我們將搜索功能的樣式分為了5種。
1、頁面只有搜索框
類似于像夸克，百度等以搜索為他們的主營業(yè)務(wù)，因此他們的產(chǎn)品首頁就將搜索功能放在了頁面的中心位置，極大的滿足了用戶的核心需求。如下圖所示：

夸克的頁面保持了一貫的極簡(jiǎn)風(fēng)格，在搜索框的下面放了其他社交網(wǎng)站的鏈接，即保持了界面的視覺，也提高了用戶的搜索體驗(yàn)。
百度的搜索框下面是用算法推出的關(guān)于新聞個(gè)人推薦，首頁內(nèi)容相對(duì)夸克來說會(huì)多一點(diǎn)，因此視覺上夸克會(huì)顯得簡(jiǎn)潔一點(diǎn)。
設(shè)計(jì)注意要點(diǎn)：
1、越簡(jiǎn)單的事情越復(fù)雜，在一整塊空白的界面上僅僅放搜索功能，要做到好用和好看都很難，因此加入產(chǎn)品元素或者產(chǎn)品Logo是最實(shí)用的方案。
2、在產(chǎn)品功能范圍內(nèi)可加入其他不同的搜索方式，例如相機(jī)、語音、圖片等，使用icon的展現(xiàn)形式，不會(huì)讓界面看起來因?yàn)榱舭走^多，造成視覺落差。
2、icon形式
這種形式一般出現(xiàn)以內(nèi)容為主的APP上，位置大多在首頁的左上角或者右上角，作為單獨(dú)或者跟別的圖標(biāo)一起出現(xiàn)，如下圖所示：

貓耳FM和最右的搜索入口就在首頁作為一個(gè)單獨(dú)的放大鏡icon，除了能夠更好的節(jié)約空間展示更多重要的信息以外，也能夠使界面更有設(shè)計(jì)感，讓界面更加簡(jiǎn)潔。
設(shè)計(jì)注意要點(diǎn)：
1、由于頂部的icon不會(huì)只出現(xiàn)一個(gè)，因此要注意設(shè)計(jì)時(shí)icon的視覺統(tǒng)一性；
2、當(dāng)有兩個(gè)圖標(biāo)放在一起的時(shí)候，需要注意點(diǎn)擊尺寸。
3、頂端搜索框
搜索框往往都是固定在界面頂部，以便讓用戶快速使用搜索操作，來直接達(dá)到自己想要的頁面。如下圖所示：

飛豬和馬蜂窩都是使用的頂部搜索框，因?yàn)檫@兩款產(chǎn)品的首頁內(nèi)容相對(duì)來說都比較復(fù)雜，因此使用占用空間比較大，但相對(duì)來說最直觀的一種搜索展現(xiàn)形式，能夠最快的讓用戶找到。
設(shè)計(jì)注意要點(diǎn)：
1、如果搜索在產(chǎn)品架構(gòu)中的重要程度不是很高，可以通過減少透明度來降低搜索框的視覺層級(jí)；
2、可以加入一些品牌基因在外框設(shè)計(jì)上。
4、底部標(biāo)簽icon
當(dāng)產(chǎn)品中搜索功能的層級(jí)更高，并且用戶使用的頻次也比較頻繁的時(shí)候，就將它放在底部標(biāo)簽欄上。如下圖所示：

APP store和微博的底部icon都有搜索的功能，因?yàn)樗阉髟赼pp store這樣一個(gè)應(yīng)用商場(chǎng)的產(chǎn)品里，是用戶使用最多的一個(gè)功能，放在底部能夠更快的提高用戶找到自己想要的應(yīng)用軟件；
微博作為一款社交內(nèi)容型軟件，熱搜這個(gè)名詞也是微博特別擁有的詞匯，這也側(cè)面說明了搜索在這個(gè)產(chǎn)品中的重要性，能夠全方位的給微博用戶推薦信息。
底部的icon設(shè)計(jì)如果要說的話，下次單獨(dú)出一篇文章寫，這里簡(jiǎn)單的說明一下。
設(shè)計(jì)注意要點(diǎn)：
1、底部icon設(shè)計(jì)要保持視覺的統(tǒng)一性，最好加入一些趣味性和品牌特征，能夠更具有識(shí)別度；
2、如果有產(chǎn)品需求，可增加小紅點(diǎn)或者角標(biāo)來提高搜索的點(diǎn)擊率。
5、下拉頁面出現(xiàn)
下面頁面出現(xiàn)搜索的情況在系統(tǒng)界面比較容易看到，給用戶提供搜索各個(gè)APP功能入口，但使用頻率不是很高，因此做了隱藏處理。如下圖所示：

在生活中，用戶對(duì)會(huì)對(duì)手機(jī)的信息做一些管理較為注重，并且大多都是按最新的信息排列，沒有顯示搜索功能。但針對(duì)手機(jī)APP太多不好找的情況，則可以讓采用下拉出搜索框的方式，下拉是用戶在使用手機(jī)中較自然的一個(gè)交互動(dòng)作，能夠極大的提高用戶查找信息的速度和體驗(yàn)。
（鄭重聲明：本文版權(quán)歸海鹽社潘團(tuán)子所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如有侵權(quán)，請(qǐng)聯(lián)系我們刪除；如作者信息標(biāo)記有誤，請(qǐng)聯(lián)系我們修改。）

網(wǎng)頁標(biāo)題：網(wǎng)頁搜索控件的設(shè)計(jì)思考
文章源于：http://www.bm7419.com/news42/112992.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、域名注冊(cè)、標(biāo)簽優(yōu)化、響應(yīng)式網(wǎng)站、商城網(wǎ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í)需注明來源： 創(chuàng)新互聯(lián)