旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實習(xí)/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設(shè)計 > UI設(shè)計中如何設(shè)計出良好的搜索體驗

UI設(shè)計中如何設(shè)計出良好的搜索體驗

時間:2020-11-02來源:m.lb577.com點擊量:作者:Gella
時間:2020-11-02點擊量:作者:Gella

  UI設(shè)計中如何設(shè)計出良好的搜索體驗?良好的搜索體驗可以改變或提升用戶的體驗。這是導(dǎo)航的重要部分,尤其是在內(nèi)容較多的網(wǎng)站和移動應(yīng)用中。但這是很好的設(shè)計如何不可見的一個很好的例子。盡管用戶希望搜索效果理想,但除非失敗,否則通常不會引起注意。下面AAA教育胡老師將會在本文中揭示有助于獲得良好搜索體驗的一些關(guān)鍵設(shè)計決策。
 

  搜索從用戶開始查找項目開始,到找到所需內(nèi)容后結(jié)束。設(shè)計人員需要在考慮到所呈現(xiàn)內(nèi)容的類型以及用戶對此的需求的基礎(chǔ)上,盡可能高效,輕松地引導(dǎo)用戶完成每個步驟。
 

  在本文中,將搜索流程分為以下4個主要步驟,并介紹了每個步驟的一些最佳做法和注意事項。
 

  1. 啟動搜索
 

  2. 輸入搜索輸入(關(guān)鍵字)
 

  3. 查看搜索結(jié)果列表
 

  4. 查看單個項目頁面
 

  1.啟動搜索
 

  作為用戶,可能感覺每個搜索欄都是相同的,但并不是那么簡單。設(shè)計師必須考慮搜索如何適合網(wǎng)站的更大導(dǎo)航體驗。盡管搜索無處不在,但它并不總是用戶瀏覽給定網(wǎng)站或應(yīng)用程序上內(nèi)容的最佳方式。例如,用戶經(jīng)常出現(xiàn)在諸如淘寶之類的電子商務(wù)網(wǎng)站上,以查找特定項目或項目類型。搜索是他們找到所需內(nèi)容的一種非常有效的方法。但是,在新聞?wù)军c上,用戶通常希望更不可預(yù)測地瀏覽內(nèi)容。這些用戶仍然可以使用搜索功能,但是設(shè)計人員可以引導(dǎo)他們采用更加適合網(wǎng)站內(nèi)容的大量瀏覽方法。搜索欄的突出位置應(yīng)引導(dǎo)用戶朝內(nèi)容的適當(dāng)導(dǎo)航風(fēng)格發(fā)展。
 

  如何使搜索欄或多或少突出?研究表明,搜索欄的位置,對比度和大小均有助于頁面上搜索欄的突出。使搜索在整個應(yīng)用中(而不是僅在特定頁面上)可用是提高或降低其配置文件的另一種方法。第三個考慮因素,尤其是在移動設(shè)備上,是要顯示完整的搜索欄,還是僅顯示在點擊時會擴展為搜索欄的搜索圖標。所有這些決定都應(yīng)經(jīng)過精心設(shè)計,以匹配產(chǎn)品的內(nèi)容和用戶對如何導(dǎo)航的期望。
 

UI設(shè)計中如何設(shè)計出良好的搜索體驗
 

  2.輸入搜索輸入
 

  用戶啟動搜索后,設(shè)計人員需要幫助他們充分利用搜索條件。自動完成功能可以成為幫助用戶改善搜索關(guān)鍵字的強大工具。但是就像啟動搜索一樣,自動完成的設(shè)計要比實際需要多得多。自動完成建議通常分為三種類型:普通關(guān)鍵字,來自搜索歷史的關(guān)鍵字和范圍內(nèi)的搜索。范圍搜索是指您在初始搜索中應(yīng)用過濾器(或范圍)以將結(jié)果限制到網(wǎng)站的特定部分時。
 

  研究表明,人們誤解了范圍搜索。他們很少意識到從一開始就將結(jié)果限制在特定類別上,因此,如果他們看不到所要查找的內(nèi)容,他們會認為結(jié)果不在那兒。尼爾森·諾曼小組(Nielsen Norman Group)的研究還表明,“回想起來,與初次嘗試相比,用戶更可能更改搜索范圍”,因此應(yīng)將作用域和篩選推遲到以后。不過,自動完成功能應(yīng)包括建議的關(guān)鍵字和搜索歷史記錄,這些內(nèi)容可以引導(dǎo)用戶選擇更容易找到所需內(nèi)容的更好的搜索字詞。
 

  只要有可能,自動完成建議還應(yīng)使用視覺提示來區(qū)分建議。例如,來自搜索歷史記錄的建議可以使用圖標或文本來顯示,而粗體字體可以吸引人們注意建議的關(guān)鍵字之間的差異。任何包含的范圍或過濾器都應(yīng)通過使用對比的字體顏色,字體樣式或清晰的標簽作為視覺提示來強調(diào)。
 

UI設(shè)計中如何設(shè)計出良好的搜索體驗
 

  3.查看搜索結(jié)果
 

  搜索結(jié)果頁面不僅需要向用戶顯示搜索結(jié)果,而且還允許他們根據(jù)需要輕松優(yōu)化搜索。一種簡便的方法是在結(jié)果頁頂部顯示帶有用戶搜索詞的搜索欄。這不僅使用戶想起了他們當(dāng)前的搜索,而且使輕松地快速運行新搜索變得容易。
 

  現(xiàn)在是時候讓示波器和過濾器大放異彩了。在此階段,過濾器為用戶提供了所需的控件,以準確找到所需的內(nèi)容。搜索過濾器或過濾器圖標應(yīng)突出顯示,并且過濾器應(yīng)與用戶需求相關(guān)。選擇后,應(yīng)用的過濾器應(yīng)始終可見并且易于取消或更改。
 

  在移動搜索中,針對每個搜索過濾器的輸入法尤為重要。與任何時候用戶在移動設(shè)備上輸入數(shù)據(jù)一樣,為每個項目選擇最合適的輸入控件很重要。使用價格范圍的滑塊,切換兩個互斥的選項以及“選擇所有適用項”選項的復(fù)選框?qū)⑹勾诉^程盡可能的順利。預(yù)先填寫您可以使用的任何信息(例如位置信息),也可以節(jié)省用戶的時間和精力。
 

UI設(shè)計中如何設(shè)計出良好的搜索體驗
 

  4.查看項目頁面
 

  用戶獲得一組相關(guān)的搜索結(jié)果后,他們可以深入研究每個結(jié)果以獲取更多信息。在此階段,他們的主要目標是進行比較和評估。
 

  眾所周知,比較蘋果和橙子很困難,因此商品頁面需要具有一致的信息。無論是產(chǎn)品頁面,用戶個人資料,視頻內(nèi)容還是其他內(nèi)容,商品頁面上的信息都必須在所有商品之間保持一致。如果有些頁面沒有顯示成分和價格,而另一些頁面沒有顯示,您如何決定購買哪個呢?然而,Baymard Institute的這項研究表明,超過60%的電子商務(wù)網(wǎng)站并未在所有產(chǎn)品頁面上都列出相同的基本信息,這使用戶很難比較這些產(chǎn)品。
 

  出于相同的原因,項目頁面應(yīng)該顯示相關(guān)信息,而減少關(guān)鍵信息。盡管有些用戶可能希望查看產(chǎn)品的完整規(guī)格表或有關(guān)電影的非常詳細的元數(shù)據(jù),但大多數(shù)用戶都需要一些關(guān)鍵細節(jié)。以易于掃描的格式顯示最常需要的信息,使用戶可以快速評估項目的相關(guān)性,以便他們繼續(xù)前進或繼續(xù)尋找。先進的比較工具可以并排顯示幾個項目的關(guān)鍵信息,使查找合適的項目變得更加容易。

預(yù)約申請免費試聽課

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

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

?2007-2022/ m.lb577.com 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

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

網(wǎng)站地圖