旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
全國(guó)統(tǒng)一咨詢熱線:010-5367 2995
首頁(yè) > 熱門文章 > UI設(shè)計(jì) > UI設(shè)計(jì)中搜索設(shè)計(jì)的技巧

UI設(shè)計(jì)中搜索設(shè)計(jì)的技巧

時(shí)間:2020-08-14來(lái)源:www.5wd995.cn點(diǎn)擊量:作者:Gella
時(shí)間:2020-08-14點(diǎn)擊量:作者:Gella

  搜索幾乎是現(xiàn)在所有網(wǎng)站,APP甚至操作系統(tǒng)的標(biāo)配,不論是電商還是論壇等等。它是一個(gè)站內(nèi)給用戶直接到達(dá)目的地的通道,起到了一個(gè)引導(dǎo)用戶走向的重要作用。在不同的系統(tǒng),不同用途的網(wǎng)站上搜索呈現(xiàn)的方式都有所不同。今天AAA教育郭老師就針對(duì)UI設(shè)計(jì)中搜索設(shè)計(jì)的技巧給大家簡(jiǎn)單說(shuō)明一下。
 

  用搜索的原因
 

  使用搜索時(shí),用戶可以自己掌握瀏覽該網(wǎng)站的路徑,從哪一頁(yè)進(jìn)入到哪一頁(yè),自己控制如何使用這個(gè)網(wǎng)站。沒(méi)有必要根據(jù)網(wǎng)站的頁(yè)面設(shè)計(jì)來(lái)決定瀏覽頁(yè)面的先后順序。這也是為什么很多網(wǎng)站用戶一進(jìn)入就直接使用搜索功能的原因。
 

  另一個(gè)原因是,當(dāng)用戶瀏覽網(wǎng)頁(yè)到一半不知道接下去該干什么的時(shí)候,往往會(huì)使用搜索直接去找到自己想找的內(nèi)容。
 

  不使用搜索的原因
 

  相對(duì)于搜索,用戶根據(jù)類目,或者從功能模塊的入口進(jìn)入各個(gè)頁(yè)面其實(shí)是跟著頁(yè)面的導(dǎo)向進(jìn)行的下一步操作。
 

  網(wǎng)頁(yè)的設(shè)計(jì)者會(huì)根據(jù)網(wǎng)站的不同需求從而設(shè)計(jì)不同的頁(yè)面布局。根據(jù)這些頁(yè)面布局進(jìn)而引導(dǎo)用戶一步一步的達(dá)成網(wǎng)站設(shè)計(jì)者的目的。這些目的可能就是買一件商品,參加一個(gè)活動(dòng)等等。用戶可以根據(jù)設(shè)計(jì)者創(chuàng)建的引導(dǎo)流程一步步的查看網(wǎng)站內(nèi)容。
 

  不同用戶群
 

  根據(jù)搜索是否主動(dòng)搜索這點(diǎn)來(lái)分,可以把用戶分成3種類型:任務(wù)型,鏈接型,混合型。
 

  任務(wù)型:
 

  任務(wù)型的用戶就是前面說(shuō)的直接使用搜索功能的用戶。大部分用戶都是任務(wù)型的用戶。這些用戶往往是帶著某種目的來(lái),例如已經(jīng)知道了自己要購(gòu)買的商品,就直接搜索商品名稱進(jìn)入搜索列表頁(yè)。
 

  使用搜索的場(chǎng)景可以再細(xì)化一點(diǎn),通常用戶已經(jīng)想好了具體要搜索的關(guān)鍵詞,同時(shí)他使用的網(wǎng)站可以搜索到非常大量的搜索結(jié)果時(shí),用戶會(huì)使用搜索功能。例如在手機(jī)里找一個(gè)聯(lián)系人的號(hào)碼,如果手機(jī)里只存了10個(gè)號(hào)碼,那很可能就直接打開(kāi)聯(lián)系人的APP,從這10個(gè)人的姓名中找到一個(gè)號(hào)碼;另一種情況,如果手機(jī)里存了500個(gè)號(hào)碼,這時(shí)候要逐個(gè)瀏覽來(lái)找某個(gè)聯(lián)系人效率就會(huì)相對(duì)低,這是大家會(huì)做的是在聯(lián)系人里找到搜索框,輸入要找的人的姓名或者拼音,定位到要找的人,最后找到電話號(hào)碼。
 

  鏈接型:
 

  鏈接型的用戶打開(kāi)一個(gè)頁(yè)面之后會(huì)找各個(gè)功能的鏈接(首頁(yè)廣告,功能入口,鏈接),即使他們已經(jīng)想好了要找某些信息,他們還是會(huì)通過(guò)點(diǎn)擊入口而不是輸入關(guān)鍵字來(lái)找頁(yè)面。通常這類用戶知道自己要買麥片,但是沒(méi)有考慮好什么品牌的麥片,哪個(gè)國(guó)家的麥片,那這個(gè)時(shí)候,他們會(huì)做的是找到網(wǎng)站的類目入口,在類目里找到“麥片”的分類,點(diǎn)擊進(jìn)入,而不是直接搜索關(guān)鍵詞“麥片”。
 

  鏈接型的用戶只有當(dāng)他們?cè)陧?yè)面上找不到自己需要的相關(guān)信息鏈接時(shí),才會(huì)選擇使用搜索框。
 

  混合型:
 

  混合型的用戶行為其實(shí)以上兩種都有,有時(shí)候會(huì)直接搜索關(guān)鍵詞,有時(shí)候會(huì)在頁(yè)面上尋找鏈接,沒(méi)有使用以上哪種偏好的傾向性,只是用當(dāng)下他們覺(jué)得最好的方式。
 

  搜索入口的設(shè)計(jì)
 

  不同功能,不同需求的界面會(huì)影響到搜索框入口的設(shè)計(jì)。
 

  iOS系統(tǒng)的搜索框只有在用戶下拉頁(yè)面時(shí)才會(huì)出現(xiàn)。
 

  對(duì)于一個(gè)系統(tǒng)界面來(lái)說(shuō),給用戶提供各個(gè)APP,功能入口是一個(gè)系統(tǒng)的重要功能,所以對(duì)于搜索,系統(tǒng)做了隱藏處理。

 



 

  YouTube的搜索框點(diǎn)搜索icon出現(xiàn)。
 

  YouTube有針對(duì)用戶的喜好在首頁(yè)提供不同的視頻,是一個(gè)對(duì)每個(gè)用戶個(gè)性化的訂制內(nèi)容, YouTube希望用戶瀏覽查看他們對(duì)于用戶推薦的視頻。所以他們沒(méi)有把搜索框直接展開(kāi)而是只顯示一個(gè)icon,點(diǎn)擊之后出現(xiàn)單獨(dú)的搜索頁(yè)。

 



 

  電商類APP搜索框一般直接露出在首頁(yè)的最頂端。
 

  前面有說(shuō)到在電商網(wǎng)站中,當(dāng)用戶不知道接下去該做什么的時(shí)候,會(huì)使用搜索操作來(lái)直接到達(dá)自己想要到達(dá)的頁(yè)面。所以,通常電商網(wǎng)站中,搜索往往是固定在頂部Global上的,以便用戶無(wú)論在哪一頁(yè)都能找到。

 



 

  搜索引擎像Google的首頁(yè)則只有搜索框。
 

  類似于Google,百度,Bing,搜索是他們的主營(yíng)業(yè)務(wù),自然希望用戶所要查看的大部分頁(yè)面都是通過(guò)搜索來(lái)獲得。所以把搜索框做為用戶的唯一使用路徑放在首頁(yè),不論是APP還是網(wǎng)頁(yè)。

 



 

  這4個(gè)例子里對(duì)用戶對(duì)搜索的需求依次增強(qiáng),所以搜索在頁(yè)面上的表現(xiàn)形式也依次增強(qiáng)。
 

  作為一個(gè)用戶大量使用的工具:搜索,它的位置,呈現(xiàn)形式直接關(guān)系到制作者對(duì)產(chǎn)品的預(yù)期,也直接關(guān)系到用戶會(huì)用什么形式使用當(dāng)前的界面。有的用戶瀏覽界面知道自己要找什么,有的用戶是來(lái)頁(yè)面上逛逛的,針對(duì)不同用戶,不同的搜索設(shè)計(jì)方案可以幫助設(shè)計(jì)者達(dá)到設(shè)計(jì)目的,也能幫助用戶更好的使用體驗(yàn)。因此,您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息,請(qǐng)?jiān)L問(wèn)AAA教育,包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。


 

預(yù)約申請(qǐng)免費(fèi)試聽(tīng)課

填寫下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽(tīng)!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動(dòng)者教育科技有限公司版權(quán)所有
備案號(hào):京ICP備12034770號(hào)

老師想和你聊一聊

?2007-2021/ www.5wd995.cn 北京漫動(dòng)者教育科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號(hào)

網(wǎng)站地圖